Frontend Implementation¶

React-based frontend for the Entheory.AI clinical platform.

Tech Stack¶

Technology	Purpose
Next.js 14	React framework (App Router, SSR, API routes)
React 18	Component framework
TypeScript	Type safety
shadcn/ui	Component library (built on Radix UI)
Framer Motion	Animation and transitions
React Query	Server state management
Zustand	Client state management
Recharts	Data visualization
Tailwind CSS	Styling

Component Architecture¶

src/
├── components/
│   ├── patient/        # Patient-related components
│   ├── labs/           # Lab trends, charts
│   ├── timeline/       # Clinical timeline
│   ├── oncology/       # Oncology-specific views
│   ├── ai/             # AI/NLP result displays
│   └── common/         # Shared UI components
├── pages/              # Route-level components
├── hooks/              # Custom React hooks
├── services/           # API client layer
└── utils/              # Helper functions

Key Screens (Live)¶

Screen	Use Case ID	Description
Patient List Dashboard	UI-001	Search and filter patients
Patient Overview	UI-002	High-level summary (diagnosis, stage, vitals)
Patient Timeline	UI-003	Chronological cancer journey
Lab Trend Chart	UI-004	Blood count monitoring
Alert Acknowledgment	UI-005	Critical alert handling
Document Annotation	UI-006	OCR document markup
Lab Panel Comparison	UI-007	Side-by-side lab analysis
Worklist Queue	UI-008	Triage board for pending reviews

UI Implementation Tracking¶

For complete status of all 277 use cases, see:

👉 UI Implementation Status

Platform Coverage¶

Platform	Technology	Status
Web (Doctor)	React + TypeScript	✅ Active
Web (Admin)	React + TypeScript	✅ Active
Mobile (Patient)	React Native	🔄 Planned Q2 2025
Kiosk (Check-in)	React + Electron	🔄 Planned Q1 2025
Tablet (OT/Nursing)	React + PWA	🔄 Planned Q2 2025

Design System¶

Typography: Inter (text), JetBrains Mono (code)
Colors: Clinical-safe palette with high contrast
Accessibility: WCAG 2.1 AA compliance target
Responsive: Mobile-first, supports 320px to 4K