@openmrs/esm-patient-vitals-app 11.3.1-patch.9064 → 11.3.1-patch.9508

package/src/biometrics/biometrics-overview.component.tsx

@@ -5,15 +5,24 @@ import BiometricsBase from './biometrics-base.component';
 interface BiometricsProps {
   patientUuid: string;
   basePath: string;
+  patient: fhir.Patient;
 }
 
-const BiometricsOverview: React.FC<BiometricsProps> = ({ patientUuid, basePath }) => {
+const BiometricsOverview: React.FC<BiometricsProps> = ({ patientUuid, patient, basePath }) => {
   const { t } = useTranslation();
   const pageSize = 5;
   const pageUrl = `\${openmrsSpaBase}/patient/${patientUuid}/chart/Vitals & Biometrics`;
   const urlLabel = t('seeAll', 'See all');
 
-  return <BiometricsBase patientUuid={patientUuid} pageSize={pageSize} urlLabel={urlLabel} pageUrl={pageUrl} />;
+  return (
+    <BiometricsBase
+      patientUuid={patientUuid}
+      patient={patient}
+      pageSize={pageSize}
+      urlLabel={urlLabel}
+      pageUrl={pageUrl}
+    />
+  );
 };
 
 export default BiometricsOverview;

package/src/biometrics/biometrics-overview.test.tsx

@@ -12,6 +12,9 @@ import BiometricsOverview from './biometrics-overview.component';
 const testProps = {
   basePath: patientChartBasePath,
   patientUuid: mockPatient.id,
+  patient: mockPatient,
+  visitContext: null,
+  mutateVisitContext: null,
 };
 
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);

package/src/biometrics/paginated-biometrics.component.tsx

@@ -23,6 +23,7 @@ interface PaginatedBiometricsProps {
   pageUrl: string;
   urlLabel: string;
   tableHeaders: Array<BiometricsTableHeader>;
+  patient: fhir.Patient;
 }
 
 const PaginatedBiometrics: React.FC<PaginatedBiometricsProps> = ({
@@ -31,6 +32,7 @@ const PaginatedBiometrics: React.FC<PaginatedBiometricsProps> = ({
   pageUrl,
   urlLabel,
   tableHeaders,
+  patient,
 }) => {
   const isTablet = useLayoutType() === 'tablet';
 
@@ -110,7 +112,7 @@ const PaginatedBiometrics: React.FC<PaginatedBiometricsProps> = ({
                       <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                     ))}
                     <TableCell className="cds--table-column-menu" id="actions">
-                      <VitalsAndBiometricsActionMenu encounterUuid={row.id} />
+                      <VitalsAndBiometricsActionMenu patient={patient} encounterUuid={row.id} />
                     </TableCell>
                   </TableRow>
                 ))}

package/src/common/data.resource.ts

@@ -11,7 +11,12 @@ import {
 import useSWRImmutable from 'swr/immutable';
 import useSWRInfinite from 'swr/infinite';
 import { type ConfigObject } from '../config-schema';
-import { assessValue, calculateBodyMassIndex, getReferenceRangesForConcept, interpretBloodPressure } from './helpers';
+import {
+  assessValue,
+  calculateBodyMassIndex,
+  interpretBloodPressure,
+  mapFhirInterpretationToObservationInterpretation,
+} from './helpers';
 import type {
   FHIRObservationResource,
   FHIRSearchBundleResponse,
@@ -323,23 +328,13 @@ export function useVitalsAndBiometrics(patientUuid: string, mode: VitalsAndBiome
           vitalSigns.diastolic,
           concepts,
           conceptRanges,
+          vitalSigns.systolicRenderInterpretation,
+          vitalSigns.diastolicRenderInterpretation,
         );
-        result.pulseRenderInterpretation = assessValue(
-          vitalSigns.pulse,
-          getReferenceRangesForConcept(concepts.pulseUuid, conceptRanges),
-        );
-        result.temperatureRenderInterpretation = assessValue(
-          vitalSigns.temperature,
-          getReferenceRangesForConcept(concepts.temperatureUuid, conceptRanges),
-        );
-        result.spo2RenderInterpretation = assessValue(
-          vitalSigns.spo2,
-          getReferenceRangesForConcept(concepts.oxygenSaturationUuid, conceptRanges),
-        );
-        result.respiratoryRateRenderInterpretation = assessValue(
-          vitalSigns.respiratoryRate,
-          getReferenceRangesForConcept(concepts.respiratoryRateUuid, conceptRanges),
-        );
+        result.pulseRenderInterpretation = vitalSigns.pulseRenderInterpretation;
+        result.temperatureRenderInterpretation = vitalSigns.temperatureRenderInterpretation;
+        result.spo2RenderInterpretation = vitalSigns.spo2RenderInterpretation;
+        result.respiratoryRateRenderInterpretation = vitalSigns.respiratoryRateRenderInterpretation;
       }
 
       return result;
@@ -472,7 +467,14 @@ function mapVitalsAndBiometrics(resource: FHIRObservationResource): MappedVitals
   return {
     code: resource?.code?.coding?.[0]?.code,
     encounterId: extractEncounterUuid(resource.encounter),
-    interpretation: assessValue(resource?.valueQuantity?.value, referenceRanges),
+    // Use Observation.interpretation from FHIR when available (preferred).
+    // Fallback to calculation for backward compatibility: existing observations may not have
+    // interpretation set if they were created before interpretation was added, or if reference
+    // ranges weren't available at creation time (OpenMRS core only sets interpretation when
+    // ObsReferenceRange is present).
+    interpretation: resource.interpretation?.[0]?.coding?.[0]?.display
+      ? mapFhirInterpretationToObservationInterpretation(resource.interpretation?.[0]?.coding?.[0]?.display)
+      : assessValue(resource?.valueQuantity?.value, referenceRanges),
     recordedDate: resource?.effectiveDateTime,
     value: resource?.valueQuantity?.value,
   };

package/src/common/helpers.ts

@@ -1,6 +1,6 @@
 import { type OpenmrsResource } from '@openmrs/esm-framework';
 import { type ConceptMetadata } from '../common';
-import type { ObsReferenceRanges, ObservationInterpretation } from './types';
+import type { FHIRInterpretation, ObsReferenceRanges, ObservationInterpretation } from './types';
 import { type VitalsBiometricsFormData } from '../vitals-biometrics-form/schema';
 import { type VitalsAndBiometricsFieldValuesMap } from './data.resource';
 
@@ -33,24 +33,53 @@ export function assessValue(value: number | undefined, range?: ObsReferenceRange
   return 'normal';
 }
 
+export function mapFhirInterpretationToObservationInterpretation(
+  interpretation: FHIRInterpretation,
+): ObservationInterpretation {
+  const normalized = interpretation?.trim();
+  switch (normalized) {
+    case 'Critically Low':
+      return 'critically_low';
+    case 'Critically High':
+      return 'critically_high';
+    case 'High':
+      return 'high';
+    case 'Low':
+      return 'low';
+    case 'Normal':
+      return 'normal';
+    default:
+      return 'normal';
+  }
+}
+
 export function interpretBloodPressure(
   systolic: number | undefined,
   diastolic: number | undefined,
   concepts: { systolicBloodPressureUuid?: string; diastolicBloodPressureUuid?: string } | undefined,
   conceptMetadata: Array<ConceptMetadata> | undefined,
+  systolicInterpretation?: ObservationInterpretation,
+  diastolicInterpretation?: ObservationInterpretation,
 ): ObservationInterpretation {
   if (!conceptMetadata) {
     return 'normal';
   }
 
-  const systolicAssessment = assessValue(
-    systolic,
-    getReferenceRangesForConcept(concepts?.systolicBloodPressureUuid, conceptMetadata),
-  );
-
-  const diastolicAssessment = concepts?.diastolicBloodPressureUuid
-    ? assessValue(diastolic, getReferenceRangesForConcept(concepts.diastolicBloodPressureUuid, conceptMetadata))
-    : 'normal';
+  // Use interpretation from FHIR Observation when available (preferred).
+  // Fallback to calculation for backward compatibility: existing observations may not have
+  // interpretation set if they were created before interpretation was added, or if reference
+  // ranges weren't available at creation time.
+  const systolicAssessment =
+    systolicInterpretation ??
+    (concepts?.systolicBloodPressureUuid
+      ? assessValue(systolic, getReferenceRangesForConcept(concepts.systolicBloodPressureUuid, conceptMetadata))
+      : 'normal');
+
+  const diastolicAssessment =
+    diastolicInterpretation ??
+    (concepts?.diastolicBloodPressureUuid
+      ? assessValue(diastolic, getReferenceRangesForConcept(concepts.diastolicBloodPressureUuid, conceptMetadata))
+      : 'normal');
 
   if (systolicAssessment === 'critically_high' || diastolicAssessment === 'critically_high') {
     return 'critically_high';

package/src/common/types.ts

@@ -20,12 +20,14 @@ export type ObservationInterpretation = 'critically_low' | 'critically_high' | '
 
 export type MappedVitals = {
   code: string;
-  interpretation: string;
+  interpretation: ObservationInterpretation;
   recordedDate: string | Date;
   value: number;
   encounterId: string;
 };
 
+export type FHIRInterpretation = 'Critically Low' | 'Critically High' | 'High' | 'Low' | 'Normal';
+
 export interface FHIRObservationResource {
   resourceType: string;
   id: string;
@@ -82,13 +84,23 @@ export interface FHIRObservationResource {
   hasMember?: Array<{
     reference: string;
   }>;
+  interpretation?: Array<{
+    coding: Array<{
+      code: string;
+      display: FHIRInterpretation;
+      system: string;
+    }>;
+    text: string;
+  }>;
 }
 
 export interface PatientVitalsAndBiometrics {
   id: string;
   date: string;
   systolic?: number;
+  systolicRenderInterpretation?: ObservationInterpretation;
   diastolic?: number;
+  diastolicRenderInterpretation?: ObservationInterpretation;
   bloodPressureRenderInterpretation?: ObservationInterpretation;
   pulse?: number;
   pulseRenderInterpretation?: ObservationInterpretation;

package/src/components/action-menu/vitals-biometrics-action-menu.component.tsx

@@ -1,18 +1,18 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import { getPatientUuidFromStore } from '@openmrs/esm-patient-common-lib';
 import { launchWorkspace, showModal, useLayoutType } from '@openmrs/esm-framework';
 import { patientVitalsBiometricsFormWorkspace } from '../../constants';
 import styles from './vitals-biometrics-action-menu.scss';
 
 interface VitalsAndBiometricsActionMenuProps {
+  patient: fhir.Patient;
   encounterUuid: string;
 }
 
-export const VitalsAndBiometricsActionMenu = ({ encounterUuid }: VitalsAndBiometricsActionMenuProps) => {
+export const VitalsAndBiometricsActionMenu = ({ encounterUuid, patient }: VitalsAndBiometricsActionMenuProps) => {
   const { t } = useTranslation();
-  const patientUuid = getPatientUuidFromStore();
+  const patientUuid = patient.id;
   const isTablet = useLayoutType() === 'tablet';
 
   const handleLaunchVitalsAndBiometricsForm = useCallback(() => {

package/src/index.ts

@@ -11,7 +11,7 @@ import { configSchema } from './config-schema';
 import biometricsDetailedSummaryComponent from './biometrics/biometrics-main.component';
 import biometricsOverviewComponent from './biometrics/biometrics-overview.component';
 import { dashboardMeta } from './dashboard.meta';
-import vitalsHeaderComponent from './vitals-and-biometrics-header/vitals-header.component';
+import vitalsHeaderComponent from './vitals-and-biometrics-header/vitals-header.extension';
 import vitalsMainComponent from './vitals/vitals-main.component';
 import vitalsSummaryComponent from './vitals/vitals-summary.component';
 

package/src/routes.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
     "fhir2": ">=1.2",
-    "webservices.rest": "^2.2.0"
+    "webservices.rest": ">=2.2.0"
   },
   "extensions": [
     {

package/src/utils.ts

@@ -10,10 +10,11 @@ import { invalidateCachedVitalsAndBiometrics } from './common';
  * @param currentVisit - The current visit.
  * @param config - The configuration object.
  */
-export function useLaunchVitalsAndBiometricsForm() {
+export function useLaunchVitalsAndBiometricsForm(patientUuid: string) {
   const config = useConfig<ConfigObject>();
   const { useFormEngine, formName, formUuid } = config.vitals;
   const launchVitalsAndBiometricsForm = useLaunchWorkspaceRequiringVisit(
+    patientUuid,
     useFormEngine ? 'patient-form-entry-workspace' : patientVitalsBiometricsFormWorkspace,
   );
 

package/src/vitals/paginated-vitals.component.tsx

@@ -24,6 +24,7 @@ interface PaginatedVitalsProps {
   tableHeaders: Array<VitalsTableHeader>;
   tableRows: Array<VitalsTableRow>;
   urlLabel: string;
+  patient: fhir.Patient;
 }
 
 const PaginatedVitals: React.FC<PaginatedVitalsProps> = ({
@@ -33,6 +34,7 @@ const PaginatedVitals: React.FC<PaginatedVitalsProps> = ({
   tableHeaders,
   tableRows,
   urlLabel,
+  patient,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -132,7 +134,7 @@ const PaginatedVitals: React.FC<PaginatedVitalsProps> = ({
                       );
                     })}
                     <TableCell className="cds--table-column-menu" id="actions">
-                      <VitalsAndBiometricsActionMenu encounterUuid={row.id} />
+                      <VitalsAndBiometricsActionMenu patient={patient} encounterUuid={row.id} />
                     </TableCell>
                   </TableRow>
                 ))}

package/src/vitals/vitals-overview.component.tsx

@@ -40,7 +40,7 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
   const isTablet = useLayoutType() === 'tablet';
   const [isPrinting, setIsPrinting] = useState(false);
   const contentToPrintRef = useRef(null);
-  const launchVitalsBiometricsForm = useLaunchVitalsAndBiometricsForm();
+  const launchVitalsBiometricsForm = useLaunchVitalsAndBiometricsForm(patientUuid);
 
   const { excludePatientIdentifierCodeTypes } = useConfig();
   const { data: vitals, error, isLoading, isValidating } = useVitalsAndBiometrics(patientUuid);
@@ -243,6 +243,7 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
                     tableHeaders={tableHeaders}
                     tableRows={tableRows}
                     urlLabel={urlLabel}
+                    patient={patient}
                   />
                 </div>
               )}

package/src/vitals-and-biometrics-header/{vitals-header.component.tsx → vitals-header.extension.tsx}

@@ -8,8 +8,7 @@ dayjs.extend(duration);
 import { Trans, useTranslation } from 'react-i18next';
 import { Button, InlineLoading, Tag } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import { ConfigurableLink, formatDate, parseDate, useConfig, useWorkspaces } from '@openmrs/esm-framework';
-import { useVisitOrOfflineVisit } from '@openmrs/esm-patient-common-lib';
+import { ConfigurableLink, formatDate, parseDate, useConfig, useVisit, useWorkspaces } from '@openmrs/esm-framework';
 import {
   assessValue,
   getReferenceRangesForConcept,
@@ -41,11 +40,11 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = fa
   const latestVitals = vitals?.[0];
   const [showDetailsPanel, setShowDetailsPanel] = useState(false);
   const toggleDetailsPanel = () => setShowDetailsPanel(!showDetailsPanel);
-  const { currentVisit } = useVisitOrOfflineVisit(patientUuid);
+  const { activeVisit } = useVisit(patientUuid);
   const { workspaces } = useWorkspaces();
 
   const isWorkspaceOpen = useCallback(() => Boolean(workspaces?.length), [workspaces]);
-  const launchForm = useLaunchVitalsAndBiometricsForm();
+  const launchForm = useLaunchVitalsAndBiometricsForm(patientUuid);
 
   const launchVitalsAndBiometricsForm = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -62,7 +61,7 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = fa
   }
 
   if (latestVitals && Object.keys(latestVitals)?.length && conceptRanges?.length) {
-    const hasActiveVisit = Boolean(currentVisit?.uuid);
+    const hasActiveVisit = Boolean(activeVisit?.uuid);
     const now = dayjs();
     const vitalsTakenTimeAgo = dayjs.duration(now.diff(latestVitals?.date));
     const vitalsOverdueThresholdHours = config.vitals.vitalsOverdueThresholdHours;
@@ -161,25 +160,30 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = fa
                 latestVitals?.diastolic,
                 config?.concepts,
                 conceptRanges,
+                latestVitals?.systolicRenderInterpretation,
+                latestVitals?.diastolicRenderInterpretation,
               )}
               unitName={t('bp', 'BP')}
               unitSymbol={(latestVitals?.systolic && conceptUnits.get(config.concepts.systolicBloodPressureUuid)) ?? ''}
               value={`${latestVitals?.systolic ?? '--'} / ${latestVitals?.diastolic ?? '--'}`}
             />
             <VitalsHeaderItem
-              interpretation={assessValue(
-                latestVitals?.pulse,
-                getReferenceRangesForConcept(config.concepts.pulseUuid, conceptRanges),
-              )}
+              interpretation={
+                latestVitals?.pulseRenderInterpretation ??
+                assessValue(latestVitals?.pulse, getReferenceRangesForConcept(config.concepts.pulseUuid, conceptRanges))
+              }
               unitName={t('heartRate', 'Heart rate')}
               unitSymbol={(latestVitals?.pulse && conceptUnits.get(config.concepts.pulseUuid)) ?? ''}
               value={latestVitals?.pulse ?? '--'}
             />
             <VitalsHeaderItem
-              interpretation={assessValue(
-                latestVitals?.respiratoryRate,
-                getReferenceRangesForConcept(config.concepts.respiratoryRateUuid, conceptRanges),
-              )}
+              interpretation={
+                latestVitals?.respiratoryRateRenderInterpretation ??
+                assessValue(
+                  latestVitals?.respiratoryRate,
+                  getReferenceRangesForConcept(config.concepts.respiratoryRateUuid, conceptRanges),
+                )
+              }
               unitName={t('respiratoryRate', 'R. rate')}
               unitSymbol={
                 (latestVitals?.respiratoryRate && conceptUnits.get(config.concepts.respiratoryRateUuid)) ?? ''
@@ -187,19 +191,25 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = fa
               value={latestVitals?.respiratoryRate ?? '--'}
             />
             <VitalsHeaderItem
-              interpretation={assessValue(
-                latestVitals?.spo2,
-                getReferenceRangesForConcept(config.concepts.oxygenSaturationUuid, conceptRanges),
-              )}
+              interpretation={
+                latestVitals?.spo2RenderInterpretation ??
+                assessValue(
+                  latestVitals?.spo2,
+                  getReferenceRangesForConcept(config.concepts.oxygenSaturationUuid, conceptRanges),
+                )
+              }
               unitName={t('spo2', 'SpO2')}
               unitSymbol={(latestVitals?.spo2 && conceptUnits.get(config.concepts.oxygenSaturationUuid)) ?? ''}
               value={latestVitals?.spo2 ?? '--'}
             />
             <VitalsHeaderItem
-              interpretation={assessValue(
-                latestVitals?.temperature,
-                getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptRanges),
-              )}
+              interpretation={
+                latestVitals?.temperatureRenderInterpretation ??
+                assessValue(
+                  latestVitals?.temperature,
+                  getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptRanges),
+                )
+              }
               unitName={t('temperatureAbbreviated', 'Temp')}
               unitSymbol={(latestVitals?.temperature && conceptUnits.get(config.concepts.temperatureUuid)) ?? ''}
               value={latestVitals?.temperature ?? '--'}

package/src/vitals-and-biometrics-header/vitals-header.scss

@@ -3,6 +3,8 @@
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
+// Designs: https://app.zeplin.io/project/60d59321e8100b0324762e05/screen/648c44d9d4052c613e7f23da
+
 .container {
   background-color: $openmrs-background-grey;
   padding: layout.$spacing-03 layout.$spacing-05 layout.$spacing-05;
@@ -52,21 +54,23 @@
 
 .rowContainer {
   width: 100%;
+  container-type: inline-size;
+  container-name: vitals-header-row-container;
 }
 
 .row {
-  display: flex;
-  justify-content: space-between;
   align-items: center;
-  max-width: 100vw;
+  width: 100%;
+  // Wide viewport: 8 columns (default)
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  column-gap: layout.$spacing-05;
 }
 
-:global(.omrs-breakpoint-lt-desktop),
-.workspaceOpen {
+// Narrow viewport: 4 columns (when workspace is opened or container is reduced)
+@container vitals-header-row-container (max-width: 80rem) {
   .row {
-    display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
-    column-gap: layout.$spacing-11;
   }
 }
 

package/src/vitals-and-biometrics-header/vitals-header.test.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 import dayjs from 'dayjs';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { type WorkspacesInfo, getDefaultsFromConfigSchema, useConfig, useWorkspaces } from '@openmrs/esm-framework';
-import { mockPatient, getByTextWithMarkup, renderWithSwr, waitForLoadingToFinish } from 'tools';
 import {
-  formattedVitals,
-  mockConceptUnits,
-  mockCurrentVisit,
-  mockVitalsConceptMetadata,
-  mockVitalsConfig,
-} from '__mocks__';
+  type WorkspacesInfo,
+  getDefaultsFromConfigSchema,
+  useConfig,
+  useVisit,
+  useWorkspaces,
+} from '@openmrs/esm-framework';
+import { mockPatient, getByTextWithMarkup, renderWithSwr, waitForLoadingToFinish } from 'tools';
+import { formattedVitals, mockConceptUnits, mockVisit, mockVitalsConceptMetadata, mockVitalsConfig } from '__mocks__';
 import { configSchema, type ConfigObject } from '../config-schema';
-import { useVitalsAndBiometrics } from '../common';
-import VitalsHeader from './vitals-header.component';
+import { type PatientVitalsAndBiometrics, useVitalsAndBiometrics } from '../common';
+import VitalsHeader from './vitals-header.extension';
 
 const testProps = {
   patientUuid: mockPatient.id,
@@ -23,6 +23,7 @@ const testProps = {
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockUseVitalsAndBiometrics = jest.mocked(useVitalsAndBiometrics);
 const mockUseWorkspaces = jest.mocked(useWorkspaces);
+const mockUseVisit = jest.mocked(useVisit);
 
 mockUseWorkspaces.mockReturnValue({ workspaces: [] } as WorkspacesInfo);
 const mockLaunchWorkspaceRequiringVisit = jest.fn();
@@ -35,7 +36,6 @@ jest.mock('@openmrs/esm-patient-common-lib', () => {
 
   return {
     ...originalModule,
-    useVisitOrOfflineVisit: jest.fn().mockImplementation(() => ({ currentVisit: mockCurrentVisit })),
     useLaunchWorkspaceRequiringVisit: jest.fn().mockImplementation(() => mockUseLaunchWorkspaceRequiringVisit),
   };
 });
@@ -76,6 +76,7 @@ describe('VitalsHeader', () => {
   });
 
   it('renders the most recently recorded values in the vitals header', async () => {
+    mockUseVisit.mockReturnValueOnce({ activeVisit: mockVisit } as ReturnType<typeof useVisit>);
     mockUseVitalsAndBiometrics.mockReturnValue({
       data: [
         {
@@ -129,6 +130,7 @@ describe('VitalsHeader', () => {
   });
 
   it('displays correct overdue tag for vitals 5 days old', async () => {
+    mockUseVisit.mockReturnValueOnce({ activeVisit: mockVisit } as ReturnType<typeof useVisit>);
     const fiveDaysAgo = dayjs().subtract(5, 'days').toISOString();
     const vitalsData = [
       {
@@ -260,4 +262,98 @@ describe('VitalsHeader', () => {
     expect(screen.queryByRole('link', { name: /vitals history/i })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /record vitals/i })).not.toBeInTheDocument();
   });
+
+  it('uses backend interpretation without recalculating', async () => {
+    // Pulse 240 would normally be calculated as "critically_high" (>= 230)
+    // Temperature 41 would normally be calculated as "high" (> 37.5 but < 43)
+    // SpO2 70 would normally be calculated as "critically_low" (< 95)
+    // Respiratory Rate 5 would normally be calculated as "critically_low" (< 12)
+    // Backend sends the interpretation for all vitals as "normal", except for Respiratory Rate which is "critically_low" (< 12)
+    // It should use backend's interpretation and NOT recalculate
+    const vitalsWithConflictingInterpretation: PatientVitalsAndBiometrics[] = [
+      {
+        id: '0',
+        date: '2021-05-19T04:26:51.000Z',
+        pulse: 240,
+        temperature: 41,
+        respiratoryRate: 5,
+        diastolic: 145,
+        systolic: 240,
+        spo2: 70,
+        diastolicRenderInterpretation: 'normal',
+        systolicRenderInterpretation: 'normal',
+        bloodPressureRenderInterpretation: 'normal',
+        pulseRenderInterpretation: 'normal',
+        temperatureRenderInterpretation: 'normal',
+        respiratoryRateRenderInterpretation: 'critically_low',
+        spo2RenderInterpretation: 'normal',
+      },
+    ];
+
+    mockUseVitalsAndBiometrics.mockReturnValue({
+      data: vitalsWithConflictingInterpretation,
+    } as ReturnType<typeof useVitalsAndBiometrics>);
+
+    renderWithSwr(<VitalsHeader {...testProps} />);
+
+    await waitForLoadingToFinish();
+
+    expect(getByTextWithMarkup(/BP\s*240 \/ 145\s*mmHg/i)).toBeInTheDocument();
+    expect(getByTextWithMarkup(/Heart rate\s*240\s*beats\/min/i)).toBeInTheDocument();
+    expect(getByTextWithMarkup(/Temp\s*41\s*DEG C/i)).toBeInTheDocument();
+    expect(getByTextWithMarkup(/R\. Rate\s*5\s*breaths\/min/i)).toBeInTheDocument();
+    expect(getByTextWithMarkup(/SpO2\s*70\s*/i)).toBeInTheDocument();
+
+    expect(screen.getAllByTitle(/abnormal value/i)).toHaveLength(1);
+    expect(screen.getByTitle(/abnormal value/i)).toHaveClass('critically-low');
+  });
+
+  it('recalculates interpretation when backend does not provide interpretation', async () => {
+    // All vitals are abnormal, and backend does not provide interpretation for any of them.
+    // It should fallback to recalculating and mark them as abnormal.
+    const vitalsWithoutInterpretation: PatientVitalsAndBiometrics[] = [
+      {
+        id: '0',
+        date: '2021-05-19T04:26:51.000Z',
+        pulse: 240, // should be marked as "critically_high"
+        temperature: 41, // should be marked as "high"
+        respiratoryRate: 5, // should be marked as "low"
+        diastolic: 145,
+        systolic: 240, // blood pressure should be marked as "high"
+        spo2: 70, // should be marked as "low"
+      },
+    ];
+
+    mockUseVitalsAndBiometrics.mockReturnValue({
+      data: vitalsWithoutInterpretation,
+    } as ReturnType<typeof useVitalsAndBiometrics>);
+
+    renderWithSwr(<VitalsHeader {...testProps} />);
+
+    await waitForLoadingToFinish();
+
+    expect(getByTextWithMarkup(/BP\s*240 \/ 145\s*mmHg/i)).toBeInTheDocument();
+    expect(getByTextWithMarkup(/Heart rate\s*240\s*beats\/min/i)).toBeInTheDocument();
+    expect(getByTextWithMarkup(/Temp\s*41\s*DEG C/i)).toBeInTheDocument();
+    expect(getByTextWithMarkup(/R\. Rate\s*5\s*breaths\/min/i)).toBeInTheDocument();
+    expect(getByTextWithMarkup(/SpO2\s*70\s*/i)).toBeInTheDocument();
+
+    const abnormalValueElements = screen.getAllByTitle(/abnormal value/i);
+    expect(abnormalValueElements).toHaveLength(5);
+
+    const lowElements = abnormalValueElements.filter((element) => {
+      return element.className === 'low';
+    });
+    expect(lowElements).toHaveLength(2);
+
+    const highElements = abnormalValueElements.filter((element) => {
+      return element.className === 'high';
+    });
+    expect(highElements).toHaveLength(2);
+
+    const criticallyHighElements = abnormalValueElements.filter((element) => {
+      return element.className === 'critically-high';
+    });
+    expect(criticallyHighElements).toHaveLength(1);
+  });
 });