aadded simulation bands config with real bands for easy addition + inventory management

vitallink/frontend/dashboard/src/App.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { Activity, AlertCircle, Clock, Users, Bell, Heart, Thermometer, Wind, CheckCircle, UserX } from 'lucide-react';
 
+const API_BASE = 'http://localhost:8000';
+
 function App() {
   const [patients, setPatients] = useState([]);
   const [stats, setStats] = useState({
@@ -12,6 +14,40 @@ function App() {
   const [filter, setFilter] = useState('all');
 
   useEffect(() => {
+    // Fetch data from backend
+    const fetchData = async () => {
+      try {
+        const queueResponse = await fetch(`${API_BASE}/api/queue`);
+        const queueData = await queueResponse.json();
+        
+        const statsResponse = await fetch(`${API_BASE}/api/stats`);
+        const statsData = await statsResponse.json();
+        
+        // Set patients from backend
+        setPatients(queueData.map(p => ({
+          patient_id: p.patient_id,
+          band_id: p.band_id,
+          name: p.name,
+          tier: p.tier,
+          priority_score: p.priority_score,
+          wait_time_minutes: p.wait_time_minutes,
+          last_hr: p.last_hr,
+          last_spo2: p.last_spo2,
+          last_temp: p.last_temp,
+          symptoms: [] // Backend doesn't send symptoms in queue endpoint
+        })));
+        
+        setStats(statsData);
+        
+        console.log(`✓ Fetched ${queueData.length} patients from backend`);
+      } catch (error) {
+        console.error('Failed to fetch from backend:', error);
+        console.log('⚠️ Using mock data as fallback');
+        generateMockPatients();
+      }
+    };
+
+    // Mock data fallback function
     const generateMockPatients = () => {
       const mockPatients = [
         {
@@ -85,18 +121,12 @@ function App() {
       });
     };
 
-    generateMockPatients();
+    // Initial fetch
+    fetchData();
+    
+    // Poll every 3 seconds for updates
+    const interval = setInterval(fetchData, 3000);
     
-    const interval = setInterval(() => {
-      setPatients(prev => prev.map(p => ({
-        ...p,
-        wait_time_minutes: p.wait_time_minutes + 1,
-        last_hr: Math.max(40, Math.min(180, p.last_hr + Math.floor(Math.random() * 5) - 2)),
-        last_spo2: Math.max(70, Math.min(100, p.last_spo2 + Math.floor(Math.random() * 3) - 1)),
-        last_temp: Math.max(35, Math.min(41, p.last_temp + (Math.random() * 0.2 - 0.1)))
-      })));
-    }, 3000);
-
     return () => clearInterval(interval);
   }, []);
 
@@ -137,8 +167,19 @@ function App() {
     return 'text-gray-700';
   };
 
-  const handleDischarge = (patientId) => {
-    setPatients(prev => prev.filter(p => p.patient_id !== patientId));
+  const handleDischarge = async (patientId) => {
+    try {
+      await fetch(`${API_BASE}/api/patients/${patientId}/discharge`, {
+        method: 'POST',
+      });
+      console.log(`✓ Discharged patient ${patientId}`);
+      // Remove from local state
+      setPatients(prev => prev.filter(p => p.patient_id !== patientId));
+    } catch (error) {
+      console.error('Failed to discharge patient:', error);
+      // Still remove from UI even if backend fails
+      setPatients(prev => prev.filter(p => p.patient_id !== patientId));
+    }
   };
 
   const filteredPatients = patients
@@ -275,13 +316,15 @@ function App() {
                         <span>•</span>
                         <span className="font-mono">{patient.band_id}</span>
                       </div>
-                      <div className="flex flex-wrap gap-2 mt-2">
-                        {patient.symptoms.map(symptom => (
-                          <span key={symptom} className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
-                            {symptom}
-                          </span>
-                        ))}
-                      </div>
+                      {patient.symptoms && patient.symptoms.length > 0 && (
+                        <div className="flex flex-wrap gap-2 mt-2">
+                          {patient.symptoms.map(symptom => (
+                            <span key={symptom} className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
+                              {symptom}
+                            </span>
+                          ))}
+                        </div>
+                      )}
                     </div>
                   </div>