296 lines
13 KiB
JavaScript
296 lines
13 KiB
JavaScript
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://${window.location.hostname}: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;
|