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

2025-10-18 17:21:13 -04:00
parent aa789b3431
commit 99a275f443
7 changed files with 1647 additions and 33 deletions
@@ -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>
                  
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { AlertCircle, CheckCircle, Clock, User } from 'lucide-react';

+const API_BASE = 'http://localhost:8000';
+
 function App() {
  const [step, setStep] = useState('welcome');
  const [formData, setFormData] = useState({
@@ -11,6 +13,8 @@ function App() {
    severity: 'moderate'
  });
  const [assignedBand, setAssignedBand] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState(null);

  const symptoms = [
    'Chest Pain', 'Difficulty Breathing', 'Severe Headache',
@@ -28,17 +32,41 @@ function App() {
  };

  const handleSubmit = async () => {
-    // Simulate API call to backend
-    const patientId = `P${Date.now().toString().slice(-6)}`;
-    const bandId = `VitalLink-${Math.floor(Math.random() * 65536).toString(16).toUpperCase().padStart(4, '0')}`;
-    
-    setAssignedBand({
-      patientId,
-      bandId,
-      station: Math.floor(Math.random() * 8) + 1
-    });
-    
-    setStep('complete');
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      console.log('Submitting check-in data:', formData);
+      
+      const response = await fetch(`${API_BASE}/api/checkin`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+      }
+      
+      const data = await response.json();
+      console.log('Check-in successful:', data);
+      
+      setAssignedBand({
+        patientId: data.patient_id,
+        bandId: data.band_id,
+        station: Math.floor(Math.random() * 8) + 1
+      });
+      
+      setStep('complete');
+    } catch (error) {
+      console.error('Check-in failed:', error);
+      setError(error.message);
+      alert(`Failed to check in: ${error.message}\n\nMake sure the backend is running at ${API_BASE}`);
+    } finally {
+      setIsSubmitting(false);
+    }
  };

  if (step === 'welcome') {
@@ -87,6 +115,15 @@ function App() {
          <div className="bg-white rounded-2xl shadow-2xl p-8">
            <h2 className="text-3xl font-bold text-gray-800 mb-6">Patient Information</h2>
            
+            {error && (
+              <div className="bg-red-50 border-2 border-red-300 text-red-800 p-4 rounded-lg mb-6">
+                <div className="flex items-center gap-2">
+                  <AlertCircle className="w-5 h-5" />
+                  <p className="font-semibold">Error: {error}</p>
+                </div>
+              </div>
+            )}
+            
            <div className="space-y-6">
              <div className="grid grid-cols-2 gap-4">
                <div>
@@ -136,6 +173,7 @@ function App() {
                    <button
                      key={symptom}
                      onClick={() => handleSymptomToggle(symptom)}
+                      type="button"
                      className={`px-4 py-3 rounded-lg border-2 transition-all text-left font-medium ${
                        formData.symptoms.includes(symptom)
                          ? 'bg-blue-100 border-blue-500 text-blue-700'
@@ -157,6 +195,7 @@ function App() {
                    <button
                      key={level}
                      onClick={() => setFormData({...formData, severity: level})}
+                      type="button"
                      className={`px-6 py-4 rounded-lg border-2 transition-all font-semibold capitalize ${
                        formData.severity === level
                          ? level === 'severe' 
@@ -177,16 +216,18 @@ function App() {
            <div className="flex gap-4 mt-8">
              <button
                onClick={() => setStep('welcome')}
+                type="button"
                className="flex-1 px-6 py-4 border-2 border-gray-300 text-gray-700 rounded-xl font-semibold hover:bg-gray-50 transition-colors"
              >
                Back
              </button>
              <button
                onClick={handleSubmit}
-                disabled={!formData.firstName || !formData.lastName || !formData.dob || formData.symptoms.length === 0}
+                disabled={!formData.firstName || !formData.lastName || !formData.dob || formData.symptoms.length === 0 || isSubmitting}
+                type="button"
                className="flex-1 px-6 py-4 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed"
              >
-                Complete Check-In
+                {isSubmitting ? 'Checking In...' : 'Complete Check-In'}
              </button>
            </div>
          </div>
@@ -248,6 +289,7 @@ function App() {
              setStep('welcome');
              setFormData({ firstName: '', lastName: '', dob: '', symptoms: [], severity: 'moderate' });
              setAssignedBand(null);
+              setError(null);
            }}
            className="text-blue-600 font-semibold hover:underline"
          >