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

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

@@ -16,10 +16,11 @@ interface BiometricsBaseProps {
   pageSize: number;
   pageUrl: string;
   patientUuid: string;
+  patient: fhir.Patient;
   urlLabel: string;
 }
 
-const BiometricsBase: React.FC<BiometricsBaseProps> = ({ patientUuid, pageSize, urlLabel, pageUrl }) => {
+const BiometricsBase: React.FC<BiometricsBaseProps> = ({ patientUuid, patient, pageSize, urlLabel, pageUrl }) => {
   const { t } = useTranslation();
   const displayText = t('biometrics_lower', 'biometrics');
   const headerTitle = t('biometrics', 'Biometrics');
@@ -30,7 +31,7 @@ const BiometricsBase: React.FC<BiometricsBaseProps> = ({ patientUuid, pageSize,
   const { bmiUnit } = config.biometrics;
   const { data: biometrics, isLoading, error, isValidating } = useVitalsAndBiometrics(patientUuid, 'biometrics');
   const { conceptUnits } = useConceptUnits();
-  const launchBiometricsForm = useLaunchVitalsAndBiometricsForm();
+  const launchBiometricsForm = useLaunchVitalsAndBiometricsForm(patientUuid);
 
   const tableHeaders: Array<BiometricsTableHeader> = [
     {
@@ -130,6 +131,7 @@ const BiometricsBase: React.FC<BiometricsBaseProps> = ({ patientUuid, pageSize,
             urlLabel={urlLabel}
             pageUrl={pageUrl}
             tableHeaders={tableHeaders}
+            patient={patient}
           />
         )}
       </div>

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

@@ -4,15 +4,24 @@ import BiometricsBase from './biometrics-base.component';
 
 interface BiometricsProps {
   patientUuid: string;
+  patient: fhir.Patient;
 }
 
-const BiometricsMain: React.FC<BiometricsProps> = ({ patientUuid }) => {
+const BiometricsMain: React.FC<BiometricsProps> = ({ patientUuid, patient }) => {
   const pageSize = 10;
   const { t } = useTranslation();
   const pageUrl: string = `$\{openmrsSpaBase}/patient/${patientUuid}/chart`;
   const urlLabel = t('goToSummary', 'Go to Summary');
 
-  return <BiometricsBase patientUuid={patientUuid} pageSize={pageSize} urlLabel={urlLabel} pageUrl={pageUrl} />;
+  return (
+    <BiometricsBase
+      patientUuid={patientUuid}
+      patient={patient}
+      pageSize={pageSize}
+      urlLabel={urlLabel}
+      pageUrl={pageUrl}
+    />
+  );
 };
 
 export default BiometricsMain;

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,22 +1,22 @@
 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 { launchWorkspace2, 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(() => {
-    launchWorkspace(patientVitalsBiometricsFormWorkspace, {
+    launchWorkspace2(patientVitalsBiometricsFormWorkspace, {
       workspaceTitle: t('editVitalsAndBiometrics', 'Edit Vitals and Biometrics'),
       editEncounterUuid: encounterUuid,
       formContext: 'editing',

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';
 
@@ -59,12 +59,16 @@ export const vitalsAndBiometricsDashboardLink =
 
 export const weightTile = getAsyncLifecycle(() => import('./components/weight-tile/weight-tile.component'), options);
 
-// t('recordVitalsAndBiometrics', 'Record Vitals and Biometrics')
 export const vitalsBiometricsFormWorkspace = getAsyncLifecycle(
   () => import('./vitals-biometrics-form/vitals-biometrics-form.workspace'),
   options,
 );
 
+export const exportedVitalsBiometricsFormWorkspace = getAsyncLifecycle(
+  () => import('./vitals-biometrics-form/exported-vitals-biometrics-form.workspace'),
+  options,
+);
+
 export const vitalsAndBiometricsDeleteConfirmationModal = getAsyncLifecycle(
   () => import('./components/delete-vitals-biometrics-modal/delete-vitals-biometrics.modal'),
   options,

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": [
     {
@@ -67,11 +67,17 @@
     }
   ],
   "pages": [],
-  "workspaces": [
+  "workspaces2": [
     {
       "name": "patient-vitals-biometrics-form-workspace",
-      "title": "recordVitalsAndBiometrics",
-      "component": "vitalsBiometricsFormWorkspace"
+      "component": "vitalsBiometricsFormWorkspace",
+      "window": "patient-vitals-biometrics-form-workspace"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "patient-vitals-biometrics-form-workspace",
+      "group": "patient-chart"
     }
   ],
   "modals": [

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 ?? '--'}