finished both frontend stuff
This commit is contained in:
@@ -1,265 +1,13 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AlertCircle, CheckCircle, Clock, User } from 'lucide-react';
|
||||
|
||||
const CheckInKiosk = () => {
|
||||
const [step, setStep] = useState('welcome');
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
dob: '',
|
||||
symptoms: [],
|
||||
severity: 'moderate'
|
||||
});
|
||||
const [assignedBand, setAssignedBand] = useState(null);
|
||||
|
||||
const symptoms = [
|
||||
'Chest Pain', 'Difficulty Breathing', 'Severe Headache',
|
||||
'Abdominal Pain', 'Fever', 'Nausea/Vomiting',
|
||||
'Dizziness', 'Injury/Trauma', 'Other'
|
||||
];
|
||||
|
||||
const handleSymptomToggle = (symptom) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
symptoms: prev.symptoms.includes(symptom)
|
||||
? prev.symptoms.filter(s => s !== symptom)
|
||||
: [...prev.symptoms, symptom]
|
||||
}));
|
||||
};
|
||||
|
||||
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
|
||||
});
|
||||
|
||||
// In production, send to backend:
|
||||
// await fetch('/api/checkin', { method: 'POST', body: JSON.stringify({...formData, patientId, bandId}) });
|
||||
|
||||
setStep('complete');
|
||||
};
|
||||
|
||||
if (step === 'welcome') {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-2xl shadow-2xl p-12 max-w-2xl w-full text-center">
|
||||
<div className="mb-8">
|
||||
<div className="bg-blue-600 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6">
|
||||
<User className="w-12 h-12 text-white" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold text-gray-800 mb-3">Welcome to VitalLink</h1>
|
||||
<p className="text-xl text-gray-600">Emergency Room Check-In</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-8 text-left bg-blue-50 p-6 rounded-xl">
|
||||
<h2 className="font-semibold text-lg text-gray-800 mb-3">What to expect:</h2>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-1 flex-shrink-0" />
|
||||
<p className="text-gray-700">Answer a few questions about your condition</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-1 flex-shrink-0" />
|
||||
<p className="text-gray-700">Receive a smart wristband to monitor your vitals</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-1 flex-shrink-0" />
|
||||
<p className="text-gray-700">Wait comfortably while we track your condition</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setStep('form')}
|
||||
className="bg-blue-600 text-white px-12 py-4 rounded-xl text-xl font-semibold hover:bg-blue-700 transition-colors shadow-lg"
|
||||
>
|
||||
Start Check-In
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (step === 'form') {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 p-4">
|
||||
<div className="max-w-3xl mx-auto pt-8">
|
||||
<div className="bg-white rounded-2xl shadow-2xl p-8">
|
||||
<h2 className="text-3xl font-bold text-gray-800 mb-6">Patient Information</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
First Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => setFormData({...formData, firstName: e.target.value})}
|
||||
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-lg"
|
||||
placeholder="John"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Last Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => setFormData({...formData, lastName: e.target.value})}
|
||||
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-lg"
|
||||
placeholder="Doe"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Date of Birth *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={formData.dob}
|
||||
onChange={(e) => setFormData({...formData, dob: e.target.value})}
|
||||
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-3">
|
||||
Select Your Symptoms *
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{symptoms.map((symptom) => (
|
||||
<button
|
||||
key={symptom}
|
||||
onClick={() => handleSymptomToggle(symptom)}
|
||||
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'
|
||||
: 'bg-white border-gray-300 text-gray-700 hover:border-blue-300'
|
||||
}`}
|
||||
>
|
||||
{symptom}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-3">
|
||||
How severe are your symptoms? *
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{['mild', 'moderate', 'severe'].map((level) => (
|
||||
<button
|
||||
key={level}
|
||||
onClick={() => setFormData({...formData, severity: level})}
|
||||
className={`px-6 py-4 rounded-lg border-2 transition-all font-semibold capitalize ${
|
||||
formData.severity === level
|
||||
? level === 'severe'
|
||||
? 'bg-red-100 border-red-500 text-red-700'
|
||||
: level === 'moderate'
|
||||
? 'bg-yellow-100 border-yellow-500 text-yellow-700'
|
||||
: 'bg-green-100 border-green-500 text-green-700'
|
||||
: 'bg-white border-gray-300 text-gray-700 hover:border-gray-400'
|
||||
}`}
|
||||
>
|
||||
{level}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 mt-8">
|
||||
<button
|
||||
onClick={() => setStep('welcome')}
|
||||
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}
|
||||
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
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (step === 'complete') {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-2xl shadow-2xl p-12 max-w-2xl w-full text-center">
|
||||
<div className="mb-6">
|
||||
<div className="bg-green-600 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6">
|
||||
<CheckCircle className="w-12 h-12 text-white" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold text-gray-800 mb-3">Check-In Complete!</h1>
|
||||
<p className="text-xl text-gray-600">Your wristband has been assigned</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl p-8 mb-8 text-white">
|
||||
<p className="text-sm uppercase tracking-wide mb-2 opacity-90">Your Patient ID</p>
|
||||
<p className="text-3xl font-bold mb-4">{assignedBand?.patientId}</p>
|
||||
<div className="border-t border-white/30 pt-4">
|
||||
<p className="text-sm uppercase tracking-wide mb-2 opacity-90">Wristband ID</p>
|
||||
<p className="text-2xl font-semibold">{assignedBand?.bandId}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 text-left bg-blue-50 p-6 rounded-xl mb-8">
|
||||
<h2 className="font-bold text-lg text-gray-800 mb-3">Next Steps:</h2>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">1</div>
|
||||
<p className="text-gray-700 pt-1">
|
||||
<strong>Pick up your wristband</strong> from Station {assignedBand?.station}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">2</div>
|
||||
<p className="text-gray-700 pt-1">
|
||||
<strong>Wear it on your wrist</strong> - make sure it's snug but comfortable
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">3</div>
|
||||
<p className="text-gray-700 pt-1">
|
||||
<strong>Take a seat in the waiting area</strong> - your vitals are being monitored
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-2 text-gray-600 mb-6">
|
||||
<Clock className="w-5 h-5" />
|
||||
<p>A nurse will call you when it's your turn</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setStep('welcome');
|
||||
setFormData({ firstName: '', lastName: '', dob: '', symptoms: [], severity: 'moderate' });
|
||||
setAssignedBand(null);
|
||||
}}
|
||||
className="text-blue-600 font-semibold hover:underline"
|
||||
>
|
||||
Return to Start
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default CheckInKiosk;
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>kiosk</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user