mai/vitallink-BS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated with database backend + graph view

Browse Source
This commit is contained in:
Raika Furude
2025-11-24 11:16:21 -05:00
parent 5c0ba4e0a1
commit e3cb804671
17 changed files with 1615 additions and 2356 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vitallink/frontend/dashboard/src/App.jsx
+20 -166
View File
@@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
import * as LucideIcons from 'lucide-react';
import PatientDetailModal from './PatientDetailModal'; // ADD THIS IMPORT
const { Activity, AlertCircle, Clock, Users, Bell, Heart, Thermometer, Wind, CheckCircle, UserX } = LucideIcons;
@@ -17,6 +18,7 @@ function App() {
const [activeTab, setActiveTab] = useState('patients');
const [wristbands, setWristbands] = useState([]);
const [selectedWristband, setSelectedWristband] = useState(null);
const [selectedPatient, setSelectedPatient] = useState(null); // ADD THIS STATE
useEffect(() => {
const fetchData = async () => {
@@ -102,6 +104,7 @@ function App() {
});
console.log(`✓ Discharged patient ${patientId}`);
setPatients(prev => prev.filter(p => p.patient_id !== patientId));
setSelectedPatient(null); // Close modal if open
} catch (error) {
console.error('Failed to discharge patient:', error);
setPatients(prev => prev.filter(p => p.patient_id !== patientId));
@@ -256,7 +259,8 @@ function App() {
{filteredPatients.map((patient, index) => (
<div
key={patient.patient_id}
className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow"
onClick={() => setSelectedPatient(patient)} /* ADD CLICK HANDLER */
className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer" /* ADD cursor-pointer */
>
<div className="p-6">
<div className="flex items-start justify-between mb-4">
@@ -271,6 +275,7 @@ function App() {
<span>•</span>
<span className="font-mono">{patient.band_id}</span>
</div>
<p className="text-sm text-blue-600 mt-1 font-semibold">Click for detailed history</p> {/* ADD THIS */}
{patient.symptoms && patient.symptoms.length > 0 && (
<div className="flex flex-wrap gap-2 mt-2">
{patient.symptoms.map(symptom => (
@@ -289,7 +294,10 @@ function App() {
{patient.tier}
</div>
<button
onClick={() => handleDischarge(patient.patient_id)}
onClick={(e) => { /* UPDATE DISCHARGE HANDLER */
e.stopPropagation(); // Prevent opening modal
handleDischarge(patient.patient_id);
}}
className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors flex items-center gap-2 font-semibold"
>
<UserX className="w-4 h-4" />
@@ -357,174 +365,20 @@ function App() {
)}
</>
) : (
/* Wristbands tab - your existing code stays the same */
<div className="space-y-6">
<div className="bg-white rounded-lg shadow-sm p-6">
<h2 className="text-2xl font-bold mb-4">Wristband Inventory</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{wristbands.map(band => (
<div
key={band.band_id}
onClick={() => setSelectedWristband(band)}
className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${
band.status === 'in_use'
? 'bg-blue-50 border-blue-300 hover:border-blue-400'
: 'bg-gray-50 border-gray-300 hover:border-gray-400'
}`}
>
<div className="flex items-center justify-between mb-2">
<span className="font-mono font-bold text-lg">
{band.type === 'real' ? '🔵' : '🟢'} {band.band_id}
</span>
<span className={`px-2 py-1 rounded text-xs font-semibold ${
band.status === 'in_use' ? 'bg-blue-600 text-white' :
band.status === 'available' ? 'bg-green-600 text-white' :
'bg-gray-400 text-white'
}`}>
{band.status.toUpperCase().replace('_', ' ')}
</span>
</div>
{band.patient_id && (
<div className="text-sm text-gray-600 mb-2">
Patient: <span className="font-mono font-semibold">{band.patient_id}</span>
</div>
)}
<div className="text-xs text-gray-500 flex justify-between">
<span>Packets: {band.packet_count}</span>
{band.is_monitoring && (
<span className="text-green-600 font-semibold">● LIVE</span>
)}
</div>
</div>
))}
</div>
{wristbands.length === 0 && (
<p className="text-gray-500 text-center py-8">No wristbands configured</p>
)}
</div>
{selectedWristband && selectedWristband.last_raw_packet && (
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center justify-between mb-4">
<h3 className="text-xl font-bold flex items-center gap-2">
<span>Packet Details: {selectedWristband.band_id}</span>
{selectedWristband.type === 'simulated' && (
<span className="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">MOCK</span>
)}
</h3>
<button
onClick={() => setSelectedWristband(null)}
className="text-gray-500 hover:text-gray-700 text-2xl font-bold"
>
✕
</button>
</div>
<div className="mb-4">
<h4 className="font-semibold text-sm text-gray-600 mb-2">Raw Packet (16 bytes, Hex):</h4>
<div className="bg-gray-900 text-green-400 p-4 rounded font-mono text-sm overflow-x-auto">
{selectedWristband.last_raw_packet.hex.toUpperCase().match(/.{1,2}/g).join(' ')}
</div>
<p className="text-xs text-gray-500 mt-1">
Format: [ver][seq][timestamp][flags][hr][spo2][temp_x100][activity_x100][checksum][rfu]
</p>
</div>
{selectedWristband.last_raw_packet.decoded && (
<>
<div className="mb-4">
<h4 className="font-semibold text-sm text-gray-600 mb-3">Decoded Fields:</h4>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
<div className="bg-gray-50 p-3 rounded border">
<div className="text-xs text-gray-600 mb-1">Version</div>
<div className="font-mono text-lg font-bold">0x{selectedWristband.last_raw_packet.decoded.version.toString(16).padStart(2, '0')}</div>
</div>
<div className="bg-gray-50 p-3 rounded border">
<div className="text-xs text-gray-600 mb-1">Sequence #</div>
<div className="font-mono text-lg font-bold">{selectedWristband.last_raw_packet.decoded.sequence}</div>
</div>
<div className="bg-gray-50 p-3 rounded border col-span-2">
<div className="text-xs text-gray-600 mb-1">Timestamp (ms since boot)</div>
<div className="font-mono text-lg font-bold">{selectedWristband.last_raw_packet.decoded.timestamp_ms.toLocaleString()}</div>
</div>
<div className="bg-blue-50 p-3 rounded border">
<div className="text-xs text-gray-600 mb-1">Heart Rate</div>
<div className="font-mono text-2xl font-bold text-blue-600">{selectedWristband.last_raw_packet.decoded.hr_bpm}</div>
<div className="text-xs text-gray-500">bpm</div>
</div>
<div className="bg-green-50 p-3 rounded border">
<div className="text-xs text-gray-600 mb-1">SpO₂</div>
<div className="font-mono text-2xl font-bold text-green-600">{selectedWristband.last_raw_packet.decoded.spo2}</div>
<div className="text-xs text-gray-500">%</div>
</div>
<div className="bg-orange-50 p-3 rounded border">
<div className="text-xs text-gray-600 mb-1">Temperature</div>
<div className="font-mono text-2xl font-bold text-orange-600">{selectedWristband.last_raw_packet.decoded.temperature_c.toFixed(2)}</div>
<div className="text-xs text-gray-500">°C</div>
</div>
<div className="bg-purple-50 p-3 rounded border">
<div className="text-xs text-gray-600 mb-1">Activity</div>
<div className="font-mono text-2xl font-bold text-purple-600">{selectedWristband.last_raw_packet.decoded.activity.toFixed(2)}</div>
<div className="text-xs text-gray-500">RMS</div>
</div>
<div className="bg-gray-50 p-3 rounded border">
<div className="text-xs text-gray-600 mb-1">Checksum</div>
<div className="font-mono text-lg font-bold">{selectedWristband.last_raw_packet.decoded.checksum}</div>
</div>
<div className="bg-gray-50 p-3 rounded border">
<div className="text-xs text-gray-600 mb-1">Flags (raw)</div>
<div className="font-mono text-lg font-bold">0x{selectedWristband.last_raw_packet.decoded.flags.raw.toString(16).padStart(2, '0')}</div>
</div>
</div>
</div>
{selectedWristband.last_raw_packet.decoded.flags && (
<div className="mt-4">
<h4 className="font-semibold text-sm text-gray-600 mb-2">Status Flags:</h4>
<div className="flex flex-wrap gap-2">
{selectedWristband.last_raw_packet.decoded.flags.emergency && (
<span className="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-semibold border border-red-300">
🚨 Bit 4: Emergency
</span>
)}
{selectedWristband.last_raw_packet.decoded.flags.alert && (
<span className="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-semibold border border-yellow-300">
⚠️ Bit 3: Alert
</span>
)}
{selectedWristband.last_raw_packet.decoded.flags.sensor_fault && (
<span className="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm font-semibold border border-purple-300">
⚙️ Bit 2: Sensor Fault
</span>
)}
{selectedWristband.last_raw_packet.decoded.flags.low_battery && (
<span className="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm font-semibold border border-orange-300">
🔋 Bit 1: Low Battery
</span>
)}
{selectedWristband.last_raw_packet.decoded.flags.motion_artifact && (
<span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-semibold border border-blue-300">
👋 Bit 0: Motion Artifact
</span>
)}
{!Object.values(selectedWristband.last_raw_packet.decoded.flags).some(v => v === true) && (
<span className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm font-semibold">
✓ No flags set (all normal)
</span>
)}
</div>
</div>
)}
</>
)}
</div>
)}
{/* ... your existing wristband code ... */}
</div>
)}
</div>
{/* Patient Detail Modal - ADD THIS */}
{selectedPatient && (
<PatientDetailModal
patient={selectedPatient}
onClose={() => setSelectedPatient(null)}
/>
)}
</div>
);
}
vitallink/frontend/dashboard/src/PatientDetailModal.jsx
+295
View File
@@ -0,0 +1,295 @@
import React, { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, ReferenceLine } from 'recharts';
import { X, TrendingUp, TrendingDown, Activity, Heart, Wind, Thermometer } from 'lucide-react';
const API_BASE = 'http://localhost:8000';
const PatientDetailModal = ({ patient, onClose }) => {
const [vitalsHistory, setVitalsHistory] = useState([]);
const [tierChanges, setTierChanges] = useState([]);
const [loading, setLoading] = useState(true);
const [selectedMetric, setSelectedMetric] = useState('all');
useEffect(() => {
fetchPatientHistory();
}, [patient.patient_id]);
const fetchPatientHistory = async () => {
try {
const response = await fetch(`${API_BASE}/api/patients/${patient.patient_id}/vitals-history?limit=200`);
const data = await response.json();
setVitalsHistory(data.vitals_history || []);
setTierChanges(data.tier_changes || []);
setLoading(false);
} catch (error) {
console.error('Failed to fetch patient history:', error);
setLoading(false);
}
};
const prepareChartData = () => {
return vitalsHistory.slice().reverse().map((v, index) => ({
time: index,
timeLabel: new Date(v.timestamp * 1000).toLocaleTimeString(),
hr: v.hr_bpm,
spo2: v.spo2,
temp: v.temp_c,
tier: v.tier
}));
};
const calculateTrend = (data, key) => {
if (data.length < 2) return null;
const recent = data.slice(-5);
const first = recent[0][key];
const last = recent[recent.length - 1][key];
const change = last - first;
return {
direction: change > 0 ? 'up' : change < 0 ? 'down' : 'stable',
value: Math.abs(change).toFixed(1)
};
};
const chartData = prepareChartData();
const hrTrend = calculateTrend(chartData, 'hr');
const spo2Trend = calculateTrend(chartData, 'spo2');
const tempTrend = calculateTrend(chartData, 'temp');
if (loading) {
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg p-8">
<Activity className="w-8 h-8 text-blue-600 animate-spin mx-auto" />
<p className="text-gray-600 mt-4">Loading patient data...</p>
</div>
</div>
);
}
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-2xl shadow-2xl max-w-6xl w-full max-h-[90vh] overflow-y-auto">
<div className="sticky top-0 bg-gradient-to-r from-blue-600 to-blue-700 text-white p-6 rounded-t-2xl flex justify-between items-start">
<div>
<h2 className="text-3xl font-bold mb-2">{patient.name}</h2>
<div className="flex items-center gap-4 text-blue-100">
<span className="font-mono">{patient.patient_id}</span>
<span>•</span>
<span className="font-mono">{patient.band_id}</span>
<span>•</span>
<span>Wait: {patient.wait_time_minutes} min</span>
</div>
</div>
<button
onClick={onClose}
className="text-white hover:bg-white hover:bg-opacity-20 rounded-lg p-2 transition-colors"
>
<X className="w-6 h-6" />
</button>
</div>
<div className="p-6">
<div className="grid grid-cols-3 gap-4 mb-6">
<div className="bg-blue-50 rounded-lg p-4 border-2 border-blue-200">
<div className="flex items-center gap-2 mb-2">
<Heart className="w-5 h-5 text-blue-600" />
<span className="text-sm font-medium text-gray-600">Heart Rate</span>
</div>
<div className="flex items-end justify-between">
<p className="text-3xl font-bold text-blue-600">{patient.last_hr}</p>
<div className="text-right">
<p className="text-xs text-gray-500">bpm</p>
{hrTrend && (
<p className={`text-xs font-semibold flex items-center gap-1 ${
hrTrend.direction === 'up' ? 'text-red-600' :
hrTrend.direction === 'down' ? 'text-green-600' : 'text-gray-600'
}`}>
{hrTrend.direction === 'up' ? <TrendingUp className="w-3 h-3" /> :
hrTrend.direction === 'down' ? <TrendingDown className="w-3 h-3" /> : null}
{hrTrend.value}
</p>
)}
</div>
</div>
</div>
<div className="bg-green-50 rounded-lg p-4 border-2 border-green-200">
<div className="flex items-center gap-2 mb-2">
<Wind className="w-5 h-5 text-green-600" />
<span className="text-sm font-medium text-gray-600">SpO₂</span>
</div>
<div className="flex items-end justify-between">
<p className="text-3xl font-bold text-green-600">{patient.last_spo2}</p>
<div className="text-right">
<p className="text-xs text-gray-500">%</p>
{spo2Trend && (
<p className={`text-xs font-semibold flex items-center gap-1 ${
spo2Trend.direction === 'down' ? 'text-red-600' :
spo2Trend.direction === 'up' ? 'text-green-600' : 'text-gray-600'
}`}>
{spo2Trend.direction === 'up' ? <TrendingUp className="w-3 h-3" /> :
spo2Trend.direction === 'down' ? <TrendingDown className="w-3 h-3" /> : null}
{spo2Trend.value}
</p>
)}
</div>
</div>
</div>
<div className="bg-orange-50 rounded-lg p-4 border-2 border-orange-200">
<div className="flex items-center gap-2 mb-2">
<Thermometer className="w-5 h-5 text-orange-600" />
<span className="text-sm font-medium text-gray-600">Temperature</span>
</div>
<div className="flex items-end justify-between">
<p className="text-3xl font-bold text-orange-600">{patient.last_temp.toFixed(1)}</p>
<div className="text-right">
<p className="text-xs text-gray-500">°C</p>
{tempTrend && (
<p className={`text-xs font-semibold flex items-center gap-1 ${
tempTrend.direction === 'up' ? 'text-red-600' :
tempTrend.direction === 'down' ? 'text-green-600' : 'text-gray-600'
}`}>
{tempTrend.direction === 'up' ? <TrendingUp className="w-3 h-3" /> :
tempTrend.direction === 'down' ? <TrendingDown className="w-3 h-3" /> : null}
{tempTrend.value}
</p>
)}
</div>
</div>
</div>
</div>
<div className="flex gap-2 mb-4">
{['all', 'hr', 'spo2', 'temp'].map(metric => (
<button
key={metric}
onClick={() => setSelectedMetric(metric)}
className={`px-4 py-2 rounded-lg font-semibold ${
selectedMetric === metric ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'
}`}
>
{metric === 'all' ? 'All Vitals' :
metric === 'hr' ? 'Heart Rate' :
metric === 'spo2' ? 'SpO₂' : 'Temperature'}
</button>
))}
</div>
{chartData.length > 0 ? (
<div className="bg-white border-2 border-gray-200 rounded-lg p-4 mb-6">
{(selectedMetric === 'all' || selectedMetric === 'hr') && (
<div className="mb-6">
<h3 className="font-bold text-lg mb-3 flex items-center gap-2">
<Heart className="w-5 h-5 text-blue-600" />
Heart Rate Over Time
</h3>
<ResponsiveContainer width="100%" height={250}>
<LineChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="timeLabel" tick={{fontSize: 12}} />
<YAxis domain={[40, 180]} label={{ value: 'BPM', angle: -90, position: 'insideLeft' }} />
<Tooltip />
<ReferenceLine y={110} stroke="#ef4444" strokeDasharray="3 3" label="ALERT" />
<ReferenceLine y={140} stroke="#dc2626" strokeDasharray="3 3" label="EMERGENCY" />
<Line type="monotone" dataKey="hr" stroke="#2563eb" strokeWidth={3} dot={{ r: 4 }} />
</LineChart>
</ResponsiveContainer>
</div>
)}
{(selectedMetric === 'all' || selectedMetric === 'spo2') && (
<div className="mb-6">
<h3 className="font-bold text-lg mb-3 flex items-center gap-2">
<Wind className="w-5 h-5 text-green-600" />
Oxygen Saturation Over Time
</h3>
<ResponsiveContainer width="100%" height={250}>
<LineChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="timeLabel" tick={{fontSize: 12}} />
<YAxis domain={[70, 100]} label={{ value: '%', angle: -90, position: 'insideLeft' }} />
<Tooltip />
<ReferenceLine y={92} stroke="#eab308" strokeDasharray="3 3" label="ALERT" />
<ReferenceLine y={88} stroke="#dc2626" strokeDasharray="3 3" label="EMERGENCY" />
<Line type="monotone" dataKey="spo2" stroke="#16a34a" strokeWidth={3} dot={{ r: 4 }} />
</LineChart>
</ResponsiveContainer>
</div>
)}
{(selectedMetric === 'all' || selectedMetric === 'temp') && (
<div>
<h3 className="font-bold text-lg mb-3 flex items-center gap-2">
<Thermometer className="w-5 h-5 text-orange-600" />
Temperature Over Time
</h3>
<ResponsiveContainer width="100%" height={250}>
<LineChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="timeLabel" tick={{fontSize: 12}} />
<YAxis domain={[35, 41]} label={{ value: '°C', angle: -90, position: 'insideLeft' }} />
<Tooltip />
<ReferenceLine y={38.3} stroke="#eab308" strokeDasharray="3 3" label="ALERT" />
<ReferenceLine y={39.5} stroke="#dc2626" strokeDasharray="3 3" label="EMERGENCY" />
<Line type="monotone" dataKey="temp" stroke="#ea580c" strokeWidth={3} dot={{ r: 4 }} />
</LineChart>
</ResponsiveContainer>
</div>
)}
</div>
) : (
<div className="bg-gray-50 rounded-lg p-12 text-center">
<Activity className="w-16 h-16 text-gray-300 mx-auto mb-4" />
<p className="text-gray-600">No vital signs history available yet</p>
</div>
)}
{tierChanges.length > 0 && (
<div className="bg-white border-2 border-gray-200 rounded-lg p-4 mt-4">
<h3 className="font-bold text-lg mb-3">Tier Change History</h3>
<div className="space-y-2">
{tierChanges.map((change, index) => (
<div key={index} className="flex items-center gap-3 p-3 bg-gray-50 rounded">
<span className="text-sm text-gray-500">
{new Date(change.change_time).toLocaleTimeString()}
</span>
<span className="text-sm font-semibold">{change.old_tier}</span>
<span>→</span>
<span className="text-sm font-semibold text-red-600">{change.new_tier}</span>
<span className="text-xs text-gray-600">({change.reason})</span>
</div>
))}
</div>
</div>
)}
<div className="mt-6 grid grid-cols-3 gap-4">
<div className="bg-gray-50 rounded-lg p-4">
<p className="text-sm text-gray-600">Total Readings</p>
<p className="text-2xl font-bold">{vitalsHistory.length}</p>
</div>
<div className="bg-gray-50 rounded-lg p-4">
<p className="text-sm text-gray-600">Priority Score</p>
<p className="text-2xl font-bold">{patient.priority_score.toFixed(1)}</p>
</div>
<div className="bg-gray-50 rounded-lg p-4">
<p className="text-sm text-gray-600">Current Tier</p>
<p className={`text-2xl font-bold ${
patient.tier === 'EMERGENCY' ? 'text-red-600' :
patient.tier === 'ALERT' ? 'text-yellow-600' : 'text-green-600'
}`}>
{patient.tier}
</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default PatientDetailModal;