Spaces:
Sleeping
Sleeping
File size: 4,322 Bytes
53ba2ed d23fef9 3024450 d23fef9 53ba2ed | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | // PatientPanel.jsx — Left sidebar
import { Upload, User, AlertCircle } from 'lucide-react';
const RISK_COLOR = { critical: 'var(--red-critical)', moderate: 'var(--amber-warning)', stable: 'var(--green-safe)' };
const RISK_DOT = { critical: 'badge-critical', moderate: 'badge-moderate', stable: 'badge-stable' };
export function PatientCard({ patient, selected, onClick }) {
const risk = patient.risk_level || 'stable';
return (
<div
onClick={() => onClick(patient)}
style={{
padding: '12px 14px', borderRadius: 10, cursor: 'pointer', marginBottom: 6,
background: selected ? 'rgba(10,132,255,0.12)' : 'var(--bg-surface)',
border: `1px solid ${selected ? 'rgba(10,132,255,0.4)' : 'var(--border-subtle)'}`,
transition: 'all 0.15s',
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
<span style={{ fontWeight: 700, fontSize: 13, color: 'var(--text-primary)' }}>
{patient.display_name}
</span>
<span className={`badge ${RISK_DOT[risk] || 'badge-unknown'}`} style={{ fontSize: 10 }}>
{risk}
</span>
</div>
<div style={{ fontSize: 11, color: 'var(--text-secondary)', display: 'flex', gap: 10 }}>
<span>{patient.age}y {patient.gender}</span>
<span>·</span>
<span style={{ color: RISK_COLOR[risk] }}>{(patient.conditions || []).join(', ') || 'No conditions'}</span>
</div>
<div style={{ fontSize: 10, color: 'var(--text-tertiary)', marginTop: 3 }}>
{patient.allergy_count} allergies · {patient.med_count} meds
</div>
</div>
);
}
export function PatientPanel({ patients, selected, onSelect, onUpload, loading }) {
return (
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
<div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border-subtle)' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
<span style={{ fontWeight: 700, fontSize: 13, letterSpacing: '0.05em', color: 'var(--text-secondary)', textTransform: 'uppercase' }}>
Patients
</span>
<span style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{patients.length} loaded</span>
</div>
<label style={{ cursor: 'pointer', display: 'block', margin: '10px 0 4px 0' }}>
<input type="file" multiple accept=".json,.pdf,.txt,.png,.jpg" style={{ display: 'none' }} onChange={onUpload} />
<div style={{
width: '100%', padding: '16px', display: 'flex', flexDirection: 'column', alignItems: 'center',
justifyContent: 'center', border: '1px dashed var(--border-subtle)', borderRadius: '12px',
background: 'var(--bg-surface)', transition: 'all 0.2s', color: 'var(--text-secondary)'
}}
onMouseOver={(e) => { e.currentTarget.style.borderColor = 'rgba(10,132,255,0.6)'; e.currentTarget.style.background = 'rgba(10,132,255,0.05)'; e.currentTarget.style.color = 'var(--text-primary)'; }}
onMouseOut={(e) => { e.currentTarget.style.borderColor = 'var(--border-subtle)'; e.currentTarget.style.background = 'var(--bg-surface)'; e.currentTarget.style.color = 'var(--text-secondary)'; }}>
<Upload size={20} style={{ marginBottom: '6px' }} />
<span style={{ fontSize: 12, fontWeight: 600 }}>Upload Patient Record</span>
<span style={{ fontSize: 10, opacity: 0.6, marginTop: '2px' }}>PDF, Doc, Image, JSON</span>
</div>
</label>
</div>
<div style={{ flex: 1, overflowY: 'auto', padding: '10px 12px' }}>
{loading && <div style={{ textAlign: 'center', padding: 20, color: 'var(--text-tertiary)', fontSize: 12 }}>Loading...</div>}
{!loading && patients.length === 0 && (
<div style={{ textAlign: 'center', padding: 20, color: 'var(--text-tertiary)', fontSize: 12 }}>
<AlertCircle size={24} style={{ margin: '0 auto 8px', display: 'block' }} />
No patients loaded
</div>
)}
{patients.map(p => (
<PatientCard key={p.id} patient={p} selected={selected?.id === p.id} onClick={onSelect} />
))}
</div>
</div>
);
}
|