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

vitallink/frontend/kiosk/src/App.jsx

@@ -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"
           >