@digihmis/esm-triage-app 1.0.0

package/src/past-vitals/utils/index.ts

@@ -0,0 +1,5 @@
+export function getPatientUuidFromUrl(): string {
+  const match = /\/patient\/([a-zA-Z0-9\-]+)\/?/.exec(location.pathname);
+  const patientUuidFromUrl = match && match[1];
+  return patientUuidFromUrl || '';
+}

package/src/past-vitals/vitals-and-biometrics-header/vitals-header-item.component.tsx

@@ -0,0 +1,61 @@
+import React, { useId } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+
+import styles from './vitals-header-item.scss';
+import { ObservationInterpretation } from '../../record-vitals-workspace/type';
+
+interface VitalsHeaderItemProps {
+  interpretation?: ObservationInterpretation;
+  unitName: string;
+  unitSymbol: React.ReactNode;
+  value: string | number;
+}
+
+const VitalsHeaderItem: React.FC<VitalsHeaderItemProps> = ({ interpretation, value, unitName, unitSymbol }) => {
+  const { t } = useTranslation();
+  const flaggedCritical = interpretation && interpretation.includes('critically');
+  const flaggedAbnormal = interpretation && interpretation !== 'normal';
+
+  const generatedId = useId();
+
+  const trimmedUnitName = unitName.trim().toLowerCase();
+  const unitNameWithoutSpaces = trimmedUnitName.replace(/\s+/g, '-');
+
+  const labelId = `omrs-patient-chart-label-${unitNameWithoutSpaces}-${generatedId}`;
+  const valueId = `omrs-patient-chart-value-${unitNameWithoutSpaces}-${generatedId}`;
+  const unitId = `omrs-patient-chart-unit-${unitNameWithoutSpaces}-${generatedId}`;
+
+  const displayValue = Boolean(value) ? value : t('notAvailable', 'Not available');
+
+  return (
+    <section className={styles.container}>
+      <div
+        className={classNames({
+          [styles['critical-value']]: flaggedCritical,
+          [styles['abnormal-value']]: flaggedAbnormal,
+        })}>
+        <div className={styles['label-container']}>
+          <span id={labelId} className={styles.label}>
+            {unitName}
+          </span>
+          {flaggedAbnormal ? (
+            <span className={styles[interpretation.replace('_', '-')]} title={t('abnormalValue', 'Abnormal value')} />
+          ) : null}
+        </div>
+        <div className={styles['value-container']}>
+          <div className={styles['pad-right']}>
+            <span id={valueId} aria-labelledby={`${labelId} ${unitId}`} className={styles.value}>
+              {displayValue}
+            </span>{' '}
+            <span id={unitId} className={styles.units}>
+              {value ? ` ${''} ${unitSymbol}` : ''}
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default VitalsHeaderItem;

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

@@ -0,0 +1,171 @@
+// vitals-header-item.scss
+@use '@carbon/colors';
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+}
+
+.abnormal-value {
+  border: solid 1px colors.$orange-20-hover;
+  background-color: colors.$orange-10;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: layout.$spacing-01;
+  padding: layout.$spacing-02 layout.$spacing-03;
+  border-radius: 2px;
+  min-width: 0;
+  height: 100%;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-02;
+  }
+}
+
+.critical-value {
+  @extend .abnormal-value;
+  border: 1px solid colors.$red-60;
+  background-color: colors.$red-20;
+}
+
+.label-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: layout.$spacing-02;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.value-container {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: layout.$spacing-02; // Add gap between value and units
+  min-width: 0;
+  margin-top: layout.$spacing-01;
+}
+
+.label {
+  @include type.type-style('label-01');
+  color: $text-02;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.2;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    font-size: 0.75rem;
+  }
+}
+
+.danger-icon {
+  color: $danger;
+  height: layout.$spacing-05;
+  width: layout.$spacing-05;
+  flex-shrink: 0;
+}
+
+.value {
+  @include type.type-style('body-compact-02');
+  font-weight: 600;
+  word-break: break-word;
+  line-height: 1.3;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    font-size: 0.875rem;
+  }
+}
+
+.units {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-left: layout.$spacing-01;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    font-size: 0.75rem;
+  }
+}
+
+.pad-right {
+  display: flex;
+  align-items: baseline;
+  min-width: 0;
+  flex-wrap: nowrap;
+}
+
+.critically-low,
+.critically-high,
+.low,
+.high {
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+  flex-shrink: 0;
+
+  &::after {
+    @include type.type-style('heading-compact-01');
+    color: $text-02;
+    margin-left: 2px;
+  }
+}
+
+.arrow {
+  color: colors.$gray-100;
+  font-weight: 500;
+}
+
+.low::after {
+  @extend .arrow;
+  content: '↓';
+}
+
+.critically-low::after {
+  @extend .arrow;
+  content: '↓↓';
+}
+
+.high::after {
+  @extend .arrow;
+  content: '↑';
+}
+
+.critically-high::after {
+  @extend .arrow;
+  content: '↑↑';
+}
+
+// Ensure arrows are visible on all screen sizes
+:global(.omrs-breakpoint-lt-tablet) {
+  .critically-low::after,
+  .critically-high::after,
+  .low::after,
+  .high::after {
+    font-size: 0.875rem;
+  }
+}
+
+// RTL support
+html[dir='rtl'] {
+  .units {
+    margin-left: 0;
+    margin-right: layout.$spacing-01;
+  }
+
+  .critically-low::after,
+  .critically-high::after,
+  .low::after,
+  .high::after {
+    margin-left: 0;
+    margin-right: 2px;
+  }
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import VitalsHeaderItem from './vitals-header-item.component';
+
+const testProps = { unitName: 'Temp', value: '36.5', unitSymbol: '°C' };
+
+describe('VitalsHeaderItem', () => {
+  it('renders a vital sign in the vitals header', () => {
+    render(<VitalsHeaderItem {...testProps} />);
+
+    expect(screen.getByText('Temp')).toBeInTheDocument();
+    expect(screen.getByText('°C')).toBeInTheDocument();
+    expect(screen.getByText('36.5')).toBeInTheDocument();
+  });
+
+  it('handles empty unit symbol gracefully', () => {
+    const propsWithEmptyUnit = { ...testProps, unitSymbol: '' };
+    render(<VitalsHeaderItem {...propsWithEmptyUnit} />);
+
+    expect(screen.getByText('Temp')).toBeInTheDocument();
+    expect(screen.getByText('36.5')).toBeInTheDocument();
+  });
+
+  it('handles undefined unit symbol gracefully', () => {
+    const propsWithUndefinedUnit = { ...testProps, unitSymbol: undefined };
+    render(<VitalsHeaderItem {...propsWithUndefinedUnit} />);
+
+    expect(screen.getByText('Temp')).toBeInTheDocument();
+    expect(screen.getByText('36.5')).toBeInTheDocument();
+  });
+});

package/src/past-vitals/vitals-and-biometrics-header/vitals-header.extension.tsx

@@ -0,0 +1,225 @@
+import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import isToday from 'dayjs/plugin/isToday';
+dayjs.extend(isToday);
+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, useVisit, useWorkspaces } from '@openmrs/esm-framework';
+
+import VitalsHeaderItem from './vitals-header-item.component';
+import styles from './vitals-header.scss';
+import { ConfigObject } from '../../config-schema';
+import {
+  assessValue,
+  getReferenceRangesForConcept,
+  interpretBloodPressure,
+  useConceptUnits,
+  useVitalsAndBiometrics,
+  useVitalsConceptMetadata,
+} from '../../record-vitals-workspace/common';
+
+interface VitalsHeaderProps {
+  patientUuid: string;
+
+  /**
+   * This is useful for extensions slots using the Vitals Header
+   */
+  hideLinks?: boolean;
+}
+
+const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = false }) => {
+  const { t } = useTranslation();
+  const config = useConfig<ConfigObject>();
+  const { conceptUnits } = useConceptUnits();
+  const { data: vitals, isLoading, isValidating } = useVitalsAndBiometrics(patientUuid, 'both');
+  const { conceptRanges } = useVitalsConceptMetadata(patientUuid);
+  const latestVitals = vitals?.[0];
+  const [showDetailsPanel, setShowDetailsPanel] = useState(false);
+  const toggleDetailsPanel = () => setShowDetailsPanel(!showDetailsPanel);
+  const { activeVisit } = useVisit(patientUuid);
+  const { workspaces } = useWorkspaces();
+
+  const isWorkspaceOpen = useCallback(() => Boolean(workspaces?.length), [workspaces]);
+
+  if (isLoading) {
+    return (
+      <InlineLoading role="progressbar" className={styles.loading} description={`${t('loading', 'Loading')} ...`} />
+    );
+  }
+
+  if (latestVitals && Object.keys(latestVitals)?.length && conceptRanges?.length) {
+    const hasActiveVisit = Boolean(activeVisit?.uuid);
+    const now = dayjs();
+    const vitalsTakenTimeAgo = dayjs.duration(now.diff(latestVitals?.date));
+    const vitalsOverdueThresholdHours = config.vitals.vitalsOverdueThresholdHours;
+    const areVitalsOverdue = hasActiveVisit && vitalsTakenTimeAgo.asHours() >= vitalsOverdueThresholdHours;
+    const vitalsOverdueDayCount = Math.round(vitalsTakenTimeAgo.asDays());
+    const hoursSinceVitalsTaken = Math.round(vitalsTakenTimeAgo.asHours());
+    let overdueVitalsTagContent: React.ReactNode = null;
+
+    if (vitalsOverdueDayCount < 1) {
+      overdueVitalsTagContent = (
+        <Trans i18nKey="hoursOldVitals" count={hoursSinceVitalsTaken}>
+          <span>
+            {/* @ts-ignore: See comment below */}
+            These vitals are <strong>{{ count: hoursSinceVitalsTaken }} hour old</strong>
+          </span>
+        </Trans>
+      );
+    } else if (vitalsOverdueDayCount >= 1 && vitalsOverdueDayCount < 7) {
+      overdueVitalsTagContent = (
+        <Trans i18nKey="daysOldVitals" count={vitalsOverdueDayCount}>
+          <span>
+            {/* @ts-ignore Workaround for i18next types issue (see https://github.com/i18next/react-i18next/issues/1543 and https://github.com/i18next/react-i18next/issues/465). Additionally, I can't find a way to get the proper plural suffix to be used in the translation file without amending the translation file by hand. */}
+            These vitals are <strong>{{ count: vitalsOverdueDayCount }} day old</strong>
+          </span>
+        </Trans>
+      );
+    } else if (vitalsOverdueDayCount >= 8 && vitalsOverdueDayCount <= 14) {
+      overdueVitalsTagContent = (
+        <Trans i18nKey="overOneWeekOldVitals">
+          <span>
+            These vitals are <strong>over one week old</strong>
+          </span>
+        </Trans>
+      );
+    } else {
+      overdueVitalsTagContent = (
+        <Trans i18nKey="outOfDateVitals">
+          <span>
+            These vitals are <strong>out of date</strong>
+          </span>
+        </Trans>
+      );
+    }
+
+    return (
+      <div className={styles.container}>
+        <div className={styles.vitalsHeader} role="button" tabIndex={0} onClick={toggleDetailsPanel}>
+          <div className={styles.headerItems}>
+            <span className={styles.heading}>{t('vitalsAndAnthropometrics', 'Vitals and anthropometrics')}</span>
+            <span className={styles.bodyText}>
+              {formatDate(parseDate(latestVitals?.date), { day: true, time: true })}
+            </span>
+            {areVitalsOverdue ? (
+              <Tag className={styles.tag} type="red">
+                <span className={styles.overdueIndicator}>{overdueVitalsTagContent}</span>
+              </Tag>
+            ) : null}
+          </div>
+          {isValidating ? (
+            <div className={styles.backgroundDataFetchingIndicator}>
+              <span>{isValidating ? <InlineLoading /> : null}</span>
+            </div>
+          ) : null}
+        </div>
+        <div
+          className={classNames(styles.rowContainer, {
+            [styles.workspaceOpen]: isWorkspaceOpen(),
+          })}>
+          <div className={styles.row}>
+            <VitalsHeaderItem
+              interpretation={interpretBloodPressure(
+                latestVitals?.systolic,
+                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={
+                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={
+                latestVitals?.respiratoryRateRenderInterpretation ??
+                assessValue(
+                  latestVitals?.respiratoryRate,
+                  getReferenceRangesForConcept(config.concepts.respiratoryRateUuid, conceptRanges),
+                )
+              }
+              unitName={t('respiratoryRate', 'R. rate')}
+              unitSymbol={
+                (latestVitals?.respiratoryRate && conceptUnits.get(config.concepts.respiratoryRateUuid)) ?? ''
+              }
+              value={latestVitals?.respiratoryRate ?? '--'}
+            />
+            <VitalsHeaderItem
+              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={
+                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 ?? '--'}
+            />
+            <VitalsHeaderItem
+              unitName={t('weight', 'Weight')}
+              unitSymbol={(latestVitals?.weight && conceptUnits.get(config.concepts.weightUuid)) ?? ''}
+              value={latestVitals?.weight ?? '--'}
+            />
+            <VitalsHeaderItem
+              unitName={t('height', 'Height')}
+              unitSymbol={(latestVitals?.height && conceptUnits.get(config.concepts.heightUuid)) ?? ''}
+              value={latestVitals?.height ?? '--'}
+            />
+            <VitalsHeaderItem
+              unitName={t('bmi', 'BMI')}
+              unitSymbol={(latestVitals?.bmi && config.biometrics['bmiUnit']) ?? ''}
+              value={latestVitals?.bmi ?? '--'}
+            />
+            {latestVitals?.muac && (
+              <VitalsHeaderItem
+                unitName={t('muac', 'MUAC')}
+                unitSymbol={
+                  (latestVitals?.muac && conceptUnits.get(config.concepts.midUpperArmCircumferenceUuid)) ?? ''
+                }
+                value={latestVitals?.muac ?? '--'}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.emptyStateVitalsHeader}>
+      <div className={styles.container}>
+        <span className={styles.heading}>{t('vitalsAndAnthropometrics', 'Vitals and anthropometrics')}</span>
+        <span className={styles.bodyText}>{t('noDataRecorded', 'No data has been recorded for this patient')}</span>
+      </div>
+    </div>
+  );
+};
+
+export default VitalsHeader;