Patient Banner & Tags UI

Relevant source files

The following files were used as context for generating this wiki page:

• openmrs-esm-patient-chart-main/packages/esm-patient-banner-app/src/banner/patient-banner.component.tsx
• openmrs-esm-patient-chart-main/packages/esm-patient-chart-app/src/patient-summary/patient-summary.component.tsx
• readmes/ARCHITECTURE_OVERVIEW.md
• ehr-dashboard-app/design/2.html
• ehr-dashboard-app/design/6.html
• openmrs-esm-patient-chart-main/README.md

Introduction

The Patient Banner & Tags UI serves as the primary information display at the top of the patient chart in OpenMRS 3. It provides immediate access to critical patient identity data, clinical status tags, and summarized medical information. The system is designed for high-volume environments where healthcare workers need to verify patient identity and status quickly.

The banner integrates with various microfrontends, such as Voice Vitals and Patient Summaries, acting as an anchor for the Patient Chart review area. It ensures a consistent visual vocabulary through specific design principles like "Speed First" and "Clarity Over Style."

Sources: openmrs-esm-patient-chart-main/README.md, readmes/ARCHITECTURE_OVERVIEW.md, CLAUDE.md

UI Architecture & Layout

The Patient Banner is a structural component within the openmrs-esm-patient-chart module. It is positioned above the "Chart Review / Dashboards" area and remains visible while the user navigates different clinical tabs.

Visual Hierarchy

The banner utilizes a specific hierarchy to minimize cognitive load:

• Primary Identity: Large display of the patient's name, often using professional typography like Instrument Serif.
• Secondary Identifiers: Patient ID (MRN), age, and gender.
• Visit Status Tags: Visual indicators showing if a visit is "Active," "Planned," or "Completed."
• Clinical Attribution: Information about the attending physician or provider currently managing the patient.

Sources: ehr-dashboard-app/design/2.html:20-25, ehr-dashboard-app/design/6.html:36-40, openmrs-esm-patient-chart-main/README.md

Information Flow Diagram

The following diagram illustrates how the Patient Banner retrieves and displays data from OpenMRS backend services.

Components and Features

Identity and Meta Information

The banner extracts core demographics using OpenMRS REST and FHIR APIs. Key fields include the preferred name, gender, and birthdate retrieved from the patientData.person object.

Feature	Description	Source
Patient Name	Preferred name (given + family) formatted for display.	patient-summary.component.tsx:47-50
ID / MRN	Primary patient identifier (e.g., CR Number).	ehr-dashboard-app/design/1.html:43
Demographics	Combined string of Age and Gender (e.g., "54 / Male").	patient-summary.component.tsx:82-84
Visit Indicator	A high-contrast tag indicating the current visit status.	ehr-dashboard-app/design/1.html:46

Integrated Patient Summary

The banner provides an entry point for AI-generated summaries. This component fetches comprehensive data—including encounters, conditions, and allergies—to generate a structured clinical assessment.

Status and Clinical Tags

The UI uses conditional styling for tags to indicate patient severity or visit status.

• Active Visit: Often highlighted with earthy greens (#7aa592) or terracotta accents to signify current engagement.
• Alert Vitals: Vitals that fall outside normal ranges (e.g., Heart Rate > 100) are flagged within the vitals ribbon integrated below the main banner.

Sources: CLAUDE.md, ehr-dashboard-app/design/1.html:50-53, ehr-dashboard-app/design/2.html:31-48

Implementation Details

Data Fetching Logic

The banner logic utilizes the usePatient hook from the @openmrs/esm-framework to access the current context. For detailed summaries, it performs parallel fetches to both REST and FHIR endpoints.

// Example data fetching for banner context
const patientResponse = await fetch(`${baseUrl}/openmrs/ws/rest/v1/patient/${patientId}?v=full`);
const conditionsResponse = await fetch(`${baseUrl}/openmrs/ws/fhir2/R4/Condition?patient=${patientId}`);
// Sources: patient-summary.component.tsx:18-28

Formatting and Styles

The banner components use CSS modules (.scss) and utility-first frameworks (Tailwind) to maintain responsiveness across desktop and mobile devices.

• Responsive Scaling: The layout shifts from a horizontal ribbon on desktops to stacked cards on tablets/mobile.
• Typography: Uses Manrope for body metadata and Instrument Serif for prominent patient names to improve scannability.

Sources: CLAUDE.md, ehr-dashboard-app/design/2.html:8-25, readmes/ARCHITECTURE_OVERVIEW.md

Summary

The Patient Banner & Tags UI is a critical navigation and safety feature within the OpenMRS ESM Patient Chart. By consolidating identity, status tags, and clinical summaries into a single, high-visibility area, it supports the "Speed First" design principle required for high-volume hospital environments. The banner acts as a data-driven hub, leveraging FHIR and REST APIs to provide a real-time snapshot of the patient's medical status.

Sources: CLAUDE.md, readmes/ARCHITECTURE_OVERVIEW.md, openmrs-esm-patient-chart-main/README.md