Emergency Medical Treatment System - Frontend

A React-based frontend application for emergency medical staff to monitor critical patient information, perform triage, and make rapid treatment decisions.

Overview

This application provides real-time visualization of patient data from the emergency-ingress-gateway REST API, emergency-lov-service GraphQL API, and live events from the emergency-simulator. It's designed specifically for emergency room medics who need immediate access to critical patient information for triage and treatment decisions.

Features

🚨 Triage Dashboard

• Real-time patient monitoring with automatic priority calculation
• Color-coded severity levels (Critical, Urgent, Important, Stable)
• Critical alerts panel highlighting patients needing immediate attention
• Priority queue with intelligent sorting by medical urgency
• Vital signs overview with abnormal value detection

📊 Patient Management

• Comprehensive patient profiles with demographics, medical history, and current status
• Live vital signs monitoring with normal/abnormal indicators
• Medication tracking with dosage and administration details
• Allergy management with severity indicators
• Emergency contact information readily accessible

⚡ Real-time Features

• Auto-refreshing data from multiple API sources
• Live event streaming from medical devices (simulated)
• Critical alert notifications with audio/visual indicators
• Connection status monitoring with offline capability

🎯 Emergency-Focused UI

• High contrast design for emergency lighting conditions
• Large, readable text for quick scanning under stress
• Touch-friendly interface for tablet use in emergency settings
• Keyboard shortcuts for rapid navigation

Technology Stack

• React 18 - Modern React with hooks and functional components
• Redux Toolkit - State management with RTK Query for API calls
• TailwindCSS - Emergency-optimized styling with custom medical color palette
• React Router - Client-side routing for patient detail views
• React Icons - Consistent iconography throughout the interface

Project Structure

src/
├── components/
│   ├── common/           # Reusable UI components
│   │   ├── Button.js
│   │   ├── Skeleton.js
│   │   ├── Panel.js
│   │   ├── StatusIndicator.js
│   │   └── AlertBadge.js
│   ├── dashboard/        # Main triage dashboard
│   │   ├── TriageDashboard.js
│   │   ├── CriticalAlertsPanel.js
│   │   ├── PatientPriorityQueue.js
│   │   ├── VitalSignsOverview.js
│   │   ├── TriageStats.js
│   │   └── DashboardFilters.js
│   ├── patient/          # Patient detail views
│   └── events/           # Real-time event components
├── store/
│   ├── apis/             # RTK Query API definitions
│   │   ├── emergencyApi.js   # REST API integration
│   │   ├── graphqlApi.js     # GraphQL API integration
│   │   └── eventsApi.js      # Real-time events
│   └── slices/           # Redux state slices
│       ├── patientsSlice.js
│       ├── alertsSlice.js
│       └── eventsSlice.js
├── utils/
│   ├── triage.js         # Priority calculation algorithms
│   ├── medical.js        # Medical data formatting
│   └── colors.js         # Emergency color schemes
└── hooks/                # Custom React hooks

API Integration

Emergency Ingress Gateway (REST API)

• /emergency/critical-patients - Patients requiring immediate attention
• /emergency/all-patients - Complete patient list with pagination
• /emergency/patient/:id - Individual patient details
• /emergency/patient/:id/alerts - Patient-specific alerts

Emergency LOV Service (GraphQL API)

• Comprehensive patient data queries
• Treatment elements and medical history
• Patient demographics and file numbers

Emergency Simulator (Events)

• Real-time vital signs updates
• Medical device events
• Critical alert generation

Key Algorithms

Triage Priority Calculation

The application uses a sophisticated scoring algorithm to determine patient priority:

Priority Score = 
  (Critical Alerts × 100) + 
  (Abnormal Vitals × 25) + 
  (Consciousness Level Factor) + 
  (Age Factor) + 
  (Medication Complexity × 5) + 
  (Allergy Risk × 10)

Priority levels:

• Critical (100+): Immediate life-threatening conditions
• Urgent (50-99): Requires prompt medical attention
• Important (25-49): Needs medical care but stable
• Stable (0-24): Routine monitoring sufficient

Real-time Data Processing

• 30-second polling for critical patient updates
• 15-second polling for patient-specific alerts
• 10-second polling for real-time events
• Automatic alert generation for critical events

Installation & Development

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

# Run tests
npm test

Environment Variables

Create a .env file in the root directory:

REACT_APP_EMERGENCY_API_URL=https://your-emergency-api.com/dev
REACT_APP_GRAPHQL_API_URL=https://your-graphql-api.com/dev/graphql
REACT_APP_EVENTS_API_URL=https://your-events-api.com/dev

Medical Data Security

• No sensitive data persistence - All data remains in memory
• Audit logging integration with backend services
• Role-based access through API authentication
• HIPAA-compliant data handling practices

Browser Compatibility

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Optimized for tablet devices used in emergency settings.

Contributing

This application is designed for emergency medical use. All contributions should:

1. Follow medical UX best practices for emergency environments
2. Maintain HIPAA compliance for patient data
3. Ensure accessibility for emergency lighting conditions
4. Test under stress conditions with realistic emergency scenarios

License

Proprietary - Emergency Medical Services Use Only

Support

For technical support or medical workflow questions, please contact the development team.