Update templates/doctor_dashboard.html

templates/doctor_dashboard.html

@@ -18,23 +18,19 @@
             --light-bg: #f8f9fc; /* Light Grey Background */
             --border-color: #e3e6f0; /* Light Border */
         }
-
         body {
             font-family: 'Nunito', sans-serif;
             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) !important; /* Override default link color */
         }
-
         .card {
             border: none;
             box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
@@ -42,7 +38,6 @@
             margin-bottom: 1.5rem;
             background-color: white;
         }
-
         .card-header {
             background-color: var(--light-bg);
             border-bottom: 1px solid var(--border-color);
@@ -50,7 +45,6 @@
             color: var(--dark-color);
             padding: 1rem 1.25rem;
         }
-
         .btn-primary {
             background-color: var(--primary-color);
             border-color: var(--primary-color);
@@ -60,22 +54,18 @@
              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;
@@ -89,28 +79,23 @@
             transition: all 0.3s ease;
             text-decoration: none; /* Remove underline */
         }
-
         .role-toggle-btn:hover {
             background-color: #edf2ff; /* Lighter blue */
         }
-
         .role-toggle-btn.active {
             background-color: var(--primary-color);
             color: white;
             border-color: var(--primary-color);
         }
-
         .main-content {
             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;
@@ -121,35 +106,32 @@
             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-item.unknown { /* Style for unknown status in list */
+            border-left-color: var(--dark-color);
+        }
 
         .patient-status {
             padding: 0.3rem 0.8rem; /* Slightly larger padding */
@@ -160,20 +142,16 @@
             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; /* Dark text for yellow background */
         }
-
         .status-improving {
             background-color: var(--secondary-color);
         }
-
         .status-stable {
             background-color: var(--info-color);
         }
@@ -181,12 +159,9 @@
             background-color: var(--dark-color);
             color: white;
         }
-
-
         .care-plan-tabs {
             margin-top: 1.5rem;
         }
-
         .care-plan-content {
             background-color: var(--light-bg);
             border-radius: 0 0 0.35rem 0.35rem; /* Rounded corners at bottom */
@@ -196,14 +171,14 @@
             height: 400px; /* Fixed height */
             overflow-y: auto; /* Scroll */
             white-space: pre-line; /* Preserve line breaks */
+            word-wrap: break-word; /* Prevent overflow */
+            overflow-x: auto; /* Add horizontal scroll if needed */
             font-size: 1rem;
             color: #333;
         }
-
         .patient-details-section {
             display: none; /* Hidden by default */
         }
-
         .loader {
             border: 5px solid #f3f3f3;
             border-top: 5px solid var(--primary-color);
@@ -214,12 +189,10 @@
             margin: 2rem auto;
             display: none;
         }
-
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-
         #no-patient-selected {
              min-height: 300px;
              display: flex;
@@ -227,7 +200,6 @@
              justify-content: center;
              align-items: center;
         }
-
         .alert-danger {
              color: #721c24;
              background-color: #f8d7da;
@@ -236,6 +208,11 @@
          .alert-danger strong {
               color: var(--danger-color);
          }
+         /* Style for feedback block */
+         #patient-feedback {
+            background-color: #e9ecef; /* Light grey */
+            border-color: #dee2e6; /* Light grey border */
+         }
     </style>
 </head>
 <body>
@@ -293,6 +270,7 @@
                                 <!-- 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 id="patient-list-error" class="text-center p-3 text-danger" style="display: none;">Error loading patients.</div>
                         </div>
                     </div>
                 </div>
@@ -327,6 +305,7 @@
                                 <strong>Last Updated:</strong> <span id="patient-timestamp"></span>
                             </div>
 
+                            <!-- Download button now relies on patient ID -->
                             <button class="btn btn-primary" id="download-pdf">
                                 <i class="fas fa-file-download me-2"></i>Download Care Plan PDF
                             </button>
@@ -369,36 +348,28 @@
             $('.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...");
+                $('#patient-list-loader').show();
+                $('#no-patients-found').hide();
+                $('#patient-list-error').hide(); // Hide previous error
+                $('#patient-list').empty(); // Clear current list
+
                 $.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 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) => {
-                                const priorityDiff = statusPriority[a.status] - statusPriority[b.status];
+                                const priorityDiff = (statusPriority[a.status] || 4) - (statusPriority[b.status] || 4); // Handle 'unknown' status
                                 if (priorityDiff !== 0) {
                                     return priorityDiff;
                                 }
@@ -408,7 +379,6 @@
                                 return dateB - dateA; // Newest first
                             });
 
-
                             // Populate emergency alerts
                             const emergencyPatients = sortedPatients.filter(p => p.status === 'emergency');
                             if (emergencyPatients.length > 0) {
@@ -432,15 +402,13 @@
                                     'stable': 'STABLE',
                                     'unknown': 'UNKNOWN'
                                 };
-
-                                const statusClass = {
-                                    'emergency': 'emergency', // Use for border-left-color
+                                const statusClass = { // Used for border-left-color
+                                    'emergency': 'emergency',
                                     'deteriorating': 'deteriorating',
                                     'improving': 'improving',
                                     'stable': 'stable',
-                                    'unknown': 'stable' // Default to stable color if unknown
+                                    'unknown': 'unknown' // Use 'unknown' class for border
                                 };
-
                                 const statusBadgeClass = {
                                     'emergency': 'status-emergency',
                                     'deteriorating': 'status-deteriorating',
@@ -448,15 +416,15 @@
                                     'stable': 'status-stable',
                                      'unknown': 'status-unknown'
                                 };
-
                                 const patientHtml = `
-                                    <li class="patient-item ${statusClass[patient.status]}" data-id="${patient.id}">
+                                    <li class="patient-item ${statusClass[patient.status] || 'unknown'}" data-id="${patient.id}">
                                         <div class="d-flex justify-content-between align-items-center">
                                             <div>
                                                 <h6 class="mb-1">${patient.name || 'Unnamed'}</h6>
-                                                <small class="text-muted">Age: ${patient.age || 'N/A'} | Gender: ${patient.gender || 'N/A'}</small>
+                                                <small class="text-muted">Age: ${patient.age || 'N/A'} | Gender: ${patient.gender || 'N/A'}</small><br>
+                                                 <small class="text-muted">Last Updated: ${patient.timestamp ? new Date(patient.timestamp).toLocaleString() : 'N/A'}</small>
                                             </div>
-                                            <span class="patient-status ${statusBadgeClass[patient.status]}">${statusText[patient.status]}</span>
+                                            <span class="patient-status ${statusBadgeClass[patient.status] || 'status-unknown'}">${statusText[patient.status] || 'UNKNOWN'}</span>
                                         </div>
                                     </li>
                                 `;
@@ -467,16 +435,23 @@
                             $('.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}`);
+                                history.pushState({ patient_id: patientId }, '', `/doctor_dashboard?patient_id=${patientId}`);
                                 loadPatientDetails(patientId);
                             });
 
-                            // Check if a patient ID is in the URL on page load
+                            // After loading the list, check if a patient ID is in the URL
                             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);
+                                // Check if this ID exists in the loaded list before trying to load details
+                                if ($(`.patient-item[data-id="${selectedPatientId}"]`).length > 0) {
+                                    loadPatientDetails(selectedPatientId);
+                                } else {
+                                     console.warn(`Patient ID "${selectedPatientId}" from URL not found in loaded list.`);
+                                     $('#no-patient-selected').show();
+                                     $('#patient-details-section').hide();
+                                }
                             } else {
                                 $('#no-patient-selected').show();
                                 $('#patient-details-section').hide();
@@ -488,17 +463,19 @@
                             $('#patient-count').text('0');
                             $('#patient-list').empty();
                             $('#emergency-alerts').empty();
-                            $('#no-patients-found').show();
-                             $('#no-patient-selected').show();
-                             $('#patient-details-section').hide();
+                            $('#no-patients-found').show(); // Show no patients message
+                            $('#no-patient-selected').show(); // Show placeholder in details area
+                            $('#patient-details-section').hide();
                         }
                     },
                     error: function(xhr, status, error) {
-                        console.error("Error loading patients:", 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>');
-                        $('#no-patients-found').hide(); // Hide no patients message if there was an error
-                         $('#no-patient-selected').show();
+                        $('#patient-list').empty();
+                        $('#patient-list-error').show().text('Error loading patients. Please try refreshing.');
+                        $('#patient-count').text('0');
+                        $('#emergency-alerts').empty();
+                         $('#no-patient-selected').show(); // Show placeholder on API error
                          $('#patient-details-section').hide();
                     }
                 });
@@ -515,15 +492,17 @@
                 $('#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');
+                // Optional: Show a loader in the details pane
+                 // $('#patient-details-section .card-body').html('<div class="loader"></div>'); // Replace content with loader
 
                 $.ajax({
                     url: `/get_patient/${patientId}`,
                     type: 'GET',
                     success: function(response) {
-                        // $('#patient-details-section').removeClass('loading');
+                        // Hide loader if shown
+                         // $('#patient-details-section .card-body .loader').remove();
+                         // You would ideally restore the body content here
+
                         if (response.success) {
                             const patient = response.patient;
                             console.log("Successfully loaded patient details:", patient.name);
@@ -533,7 +512,7 @@
                             $('#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');
+                            $('#patient-timestamp').text(patient.timestamp ? new Date(patient.timestamp).toLocaleString() : 'N/A');
 
                             // Set status badge
                             const statusText = {
@@ -543,7 +522,6 @@
                                 'stable': 'STABLE',
                                 'unknown': 'UNKNOWN'
                             };
-
                             const statusBadgeClass = {
                                 'emergency': 'status-emergency',
                                 'deteriorating': 'status-deteriorating',
@@ -551,22 +529,22 @@
                                 'stable': 'status-stable',
                                 'unknown': 'status-unknown'
                             };
-
                             $('#patient-status')
                                 .text(statusText[patient.status] || 'UNKNOWN')
                                 .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.');
+                             $('#original-plan-content').text(patient.original_plan || 'No original care plan available (or could not be extracted from PDF).');
 
                             // Reset tab to updated plan and show content
-                            $('#carePlanTabs button').removeClass('active');
-                            $('#updated-plan-tab').addClass('active').tab('show');
+                            $('#carePlanTabs button').removeClass('active').attr('aria-selected', 'false');
+                            $('#updated-plan-tab').addClass('active').attr('aria-selected', 'true');
+                             $('#carePlanTabsContent .tab-pane').removeClass('show active');
+                             $('#updated-plan').addClass('show active');
 
 
-                            // Set up PDF download button
+                            // Set up PDF download button with patient ID
                             $('#download-pdf').off('click').on('click', function() {
                                 console.log("Download button clicked for patient ID:", patient.id);
                                 window.location.href = `/download_pdf/${patient.id}`;
@@ -575,15 +553,22 @@
                         } else {
                             console.error('Error loading patient details:', response.error);
                             alert('Error: ' + response.error);
-                            $('#no-patient-selected').show(); // Show placeholder if patient not found
+                            $('#no-patient-selected').show(); // Show placeholder if patient not found or error
                             $('#patient-details-section').hide();
+                            // Remove highlight from list item if details couldn't load
+                             $(`.patient-item[data-id="${patientId}"]`).removeClass('active');
                         }
                     },
                     error: function(xhr, status, error) {
-                         console.error("API Error loading patient details:", error);
-                        alert('Error loading patient details');
+                         // Hide loader if shown
+                         // $('#patient-details-section .card-body .loader').remove();
+
+                         console.error("API Error loading patient details:", error, xhr.responseText);
+                        alert('Error loading patient details. Patient may no longer exist.'); // More user-friendly error
                         $('#no-patient-selected').show(); // Show placeholder on API error
                         $('#patient-details-section').hide();
+                        // Remove highlight from list item on error
+                         $(`.patient-item[data-id="${patientId}"]`).removeClass('active');
                     }
                 });
             }
@@ -592,11 +577,9 @@
             $('#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(); // Includes age/gender
-
+                    const patientDetails = $(this).find('small').text().toLowerCase(); // Includes age/gender/timestamp
                     if (patientName.includes(searchTerm) || patientDetails.includes(searchTerm)) {
                         $(this).show();
                         foundPatients = true;
@@ -604,7 +587,6 @@
                         $(this).hide();
                     }
                 });
-
                 if (foundPatients) {
                     $('#no-patients-found').hide();
                 } else {
@@ -625,59 +607,85 @@
                     success: function(response) {
                         if (response.success && response.notifications.length > 0) {
                              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">
-                                    <i class="fas fa-exclamation-triangle me-2"></i>
-                                    <strong>${alertCount} Emergency patient${alertCount > 1 ? 's' : ''} requiring immediate attention!</strong>
-                                </div>
-                            `;
-                            $('#emergency-alerts').html(alertHtml);
-
-                            // 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.
+                            // Check if the current emergency alert count is different
+                            const currentAlerts = $('#emergency-alerts .alert').length;
+                            if (response.notifications.length !== currentAlerts) {
+                                 // Update emergency alerts section
+                                const alertCount = response.notifications.length;
+                                let alertHtml = `
+                                    <div class="alert alert-danger mb-3">
+                                        <i class="fas fa-exclamation-triangle me-2"></i>
+                                        <strong>${alertCount} Emergency patient${alertCount > 1 ? 's' : ''} requiring immediate attention!</strong>
+                                    </div>
+                                `;
+                                $('#emergency-alerts').html(alertHtml);
+                                // Reload the patient list to update sorting and potentially highlight new emergencies
+                                const currentSelectedId = $('#patient-details-section').is(':visible') ? $('.patient-item.active').data('id') : null;
+                                console.log("Reloading patient list due to new emergency alerts...");
+                                loadPatients(); // This will re-render the list and handle selection from URL/previously selected ID
+                            } else {
+                                // If the count is the same, just ensure the alert is visible if needed
+                                if (currentAlerts > 0) {
+                                     $('#emergency-alerts').show();
+                                }
+                            }
 
                         } 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);
+                         // Optionally display a small error message in the alert area
+                         // $('#emergency-alerts').html('<div class="text-danger small">Error checking alerts.</div>');
                     }
                 });
             }
 
-            // Check for emergency notifications every 30 seconds
+            // Check for emergency notifications periodically (e.g., every 30 seconds)
+            // Note: For a production system with many users, websockets would be more efficient.
             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);
+
+                 // Get the ID of the currently displayed patient (if any)
+                 const currentDisplayedId = $('#patient-details-section').is(':visible') ? $('.patient-item.active').data('id') : null;
+
+                 if (patientIdFromUrl && patientIdFromUrl !== currentDisplayedId) {
+                     // If URL has an ID and it's different from the current one, load it
+                     console.log(`URL changed to patient ID: ${patientIdFromUrl}. Loading details.`);
+                      // Check if this ID exists in the currently rendered list before calling API
+                      if ($(`.patient-item[data-id="${patientIdFromUrl}"]`).length > 0) {
+                          loadPatientDetails(patientIdFromUrl);
+                      } else {
+                           console.warn(`Patient ID "${patientIdFromUrl}" from URL not found in current list.`);
+                           $('.patient-item').removeClass('active'); // Remove highlight
+                           $('#patient-details-section').hide();
+                           $('#no-patient-selected').show();
+                      }
+                 } else if (!patientIdFromUrl && currentDisplayedId) {
+                      // If URL has no ID but a patient is currently displayed, hide details
+                      console.log("URL changed, no patient ID. Hiding details.");
+                      $('.patient-item').removeClass('active'); // Remove highlight
+                      $('#patient-details-section').hide();
+                      $('#no-patient-selected').show();
+                 } else if (patientIdFromUrl && patientIdFromUrl === currentDisplayedId) {
+                     // If URL has the same ID as currently displayed, do nothing (user navigated back to the same state)
+                      console.log("URL changed but same patient ID. No action needed.");
                  } 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
+                    // If neither URL nor displayed patient has an ID (e.g., went back to dashboard root)
+                    console.log("URL changed, no patient selected.");
+                    $('.patient-item').removeClass('active');
+                    $('#patient-details-section').hide();
+                    $('#no-patient-selected').show();
+                    // Optionally refresh list if needed, but not strictly necessary here
                  }
              };
-
-
         });
     </script>
 </body>