in the hospital dashboard can the chart does not show any value , can you do it some default values - Follow Up Deployment

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MedFlow AI - Healthcare Portal</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .gradient-bg {
@@ -332,16 +333,16 @@
                 <div class="bg-white rounded-xl shadow p-6">
                     <h3 class="font-bold text-gray-800 mb-4">Patient Flow Today</h3>
                     <p class="text-sm text-gray-500 mb-4">Real-time admissions and discharges</p>
-                    <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
-                        <p class="text-gray-500">[Chart: Patient Flow]</p>
+                    <div class="h-64">
+                        <canvas id="patientFlowChart"></canvas>
                     </div>
                 </div>
                 
                 <div class="bg-white rounded-xl shadow p-6">
                     <h3 class="font-bold text-gray-800 mb-4">Capacity Utilization</h3>
                     <p class="text-sm text-gray-500 mb-4">Hospital capacity throughout the day</p>
-                    <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
-                        <p class="text-gray-500">[Chart: Capacity Utilization]</p>
+                    <div class="h-64">
+                        <canvas id="capacityChart"></canvas>
                     </div>
                 </div>
             </div>
@@ -563,6 +564,93 @@
                 alert('Invalid credentials. For this demo, use username: doctor, password: timotee');
             }
         }
+
+        // Initialize charts when hospital dashboard is shown
+        function loginAsDoctor() {
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            
+            // Hardcoded credentials for demo
+            if (username === 'doctor' && password === 'timotee') {
+                document.getElementById('hospitalLogin').classList.add('hidden');
+                document.getElementById('hospitalDashboard').classList.remove('hidden');
+                
+                // Patient Flow Chart
+                const patientFlowCtx = document.getElementById('patientFlowChart').getContext('2d');
+                new Chart(patientFlowCtx, {
+                    type: 'line',
+                    data: {
+                        labels: ['6 AM', '8 AM', '10 AM', '12 PM', '2 PM', '4 PM', '6 PM', '8 PM'],
+                        datasets: [{
+                            label: 'Admissions',
+                            data: [12, 19, 28, 42, 36, 29, 18, 8],
+                            borderColor: '#3B82F6',
+                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                            tension: 0.3,
+                            fill: true
+                        }, {
+                            label: 'Discharges',
+                            data: [5, 12, 18, 24, 32, 28, 22, 15],
+                            borderColor: '#10B981',
+                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                            tension: 0.3,
+                            fill: true
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        scales: {
+                            y: {
+                                beginAtZero: true
+                            }
+                        }
+                    }
+                });
+
+                // Capacity Utilization Chart
+                const capacityCtx = document.getElementById('capacityChart').getContext('2d');
+                new Chart(capacityCtx, {
+                    type: 'bar',
+                    data: {
+                        labels: ['ER', 'ICU', 'Ward A', 'Ward B', 'OR', 'Clinic'],
+                        datasets: [{
+                            label: 'Capacity Utilization (%)',
+                            data: [92, 85, 78, 65, 88, 72],
+                            backgroundColor: [
+                                'rgba(239, 68, 68, 0.7)',
+                                'rgba(249, 115, 22, 0.7)',
+                                'rgba(234, 179, 8, 0.7)',
+                                'rgba(16, 185, 129, 0.7)',
+                                'rgba(59, 130, 246, 0.7)',
+                                'rgba(139, 92, 246, 0.7)'
+                            ],
+                            borderColor: [
+                                'rgba(239, 68, 68, 1)',
+                                'rgba(249, 115, 22, 1)',
+                                'rgba(234, 179, 8, 1)',
+                                'rgba(16, 185, 129, 1)',
+                                'rgba(59, 130, 246, 1)',
+                                'rgba(139, 92, 246, 1)'
+                            ],
+                            borderWidth: 1
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                max: 100
+                            }
+                        }
+                    }
+                });
+            } else {
+                alert('Invalid credentials. For this demo, use username: doctor, password: timotee');
+            }
+        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dcrey7/medflowai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>