Spaces:
Sleeping
Sleeping
Hackathon Builder
Emergency Intelligence Upgrade: Multi-file synthesis, demographic preservation, and senior physician-grade reasoning
3024450 | // 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> | |
| ); | |
| } | |