@digihmis/esm-triage-app 1.0.0

package/src/past-vitals/triage-notes/triage-notes.resource.ts

@@ -0,0 +1,72 @@
+import { useMemo } from 'react';
+import { openmrsFetch, restBaseUrl, type FetchResponse } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import type { Note, EncounterResponse } from './type';
+
+export function useTriageNotes(patientUuid: string, conceptUuid: string, encounterTypeUuid?: string) {
+  const customRepresentation =
+    'custom:(uuid,encounterDatetime,encounterType:(uuid,display),location:(uuid,display),' +
+    'encounterProviders:(uuid,provider:(uuid,person:(display)),encounterRole:(uuid,display)),' +
+    'obs:(uuid,concept:(uuid,display),value,obsDatetime))';
+
+  let url = patientUuid ? `${restBaseUrl}/encounter?patient=${patientUuid}&v=${customRepresentation}&limit=100` : null;
+
+  // Optionally filter by encounter type if provided
+  if (url && encounterTypeUuid) {
+    url += `&encounterType=${encounterTypeUuid}`;
+  }
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<FetchResponse<EncounterResponse>, Error>(
+    url,
+    openmrsFetch,
+  );
+
+  const notes: Array<Note> = useMemo(() => {
+    if (!data?.data?.results) {
+      return [];
+    }
+
+    // Extract notes from encounters that have the general patient note observation
+    const extractedNotes: Array<Note> = [];
+
+    data.data.results.forEach((encounter) => {
+      // Find the note observation in this encounter
+      const noteObs = encounter.obs.find((obs) => obs.concept.uuid === conceptUuid);
+
+      if (noteObs && noteObs.value && noteObs.value.trim() !== '') {
+        const provider = encounter.encounterProviders?.[0];
+
+        extractedNotes.push({
+          concept: noteObs.concept,
+          note: noteObs.value,
+          time: new Date(encounter.encounterDatetime).toLocaleString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+          }),
+          provider: {
+            name: provider?.provider?.person?.display || '',
+            role: provider?.encounterRole?.display || '',
+          },
+        });
+      }
+    });
+
+    // Sort by encounter datetime (most recent first)
+    return extractedNotes.sort((a, b) => {
+      const dateA = new Date(a.time);
+      const dateB = new Date(b.time);
+      return dateB.getTime() - dateA.getTime();
+    });
+  }, [data, conceptUuid]);
+
+  return {
+    notes,
+    error,
+    isLoading,
+    isValidating,
+    mutate,
+  };
+}

package/src/past-vitals/triage-notes/type/index.ts

@@ -0,0 +1,50 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+
+export interface Note {
+  concept: OpenmrsResource;
+  note: string;
+  provider: {
+    name: string;
+    role: string;
+  };
+  time: string;
+}
+
+interface Encounter {
+  uuid: string;
+  encounterDatetime: string;
+  encounterType: {
+    uuid: string;
+    display: string;
+  };
+  location: {
+    uuid: string;
+    display: string;
+  };
+  encounterProviders: Array<{
+    uuid: string;
+    provider: {
+      uuid: string;
+      person: {
+        display: string;
+      };
+    };
+    encounterRole: {
+      uuid: string;
+      display: string;
+    };
+  }>;
+  obs: Array<{
+    uuid: string;
+    concept: {
+      uuid: string;
+      display: string;
+    };
+    value: string;
+    obsDatetime: string;
+  }>;
+}
+
+export interface EncounterResponse {
+  results: Array<Encounter>;
+}

package/src/past-vitals/triage-vitals/triage-vitals-history.component.tsx

@@ -0,0 +1,229 @@
+import React, { type ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useReactToPrint } from 'react-to-print';
+import { Button, ContentSwitcher, DataTableSkeleton, IconSwitch, InlineLoading } from '@carbon/react';
+import { Analytics, Table } from '@carbon/react/icons';
+import { CardHeader, EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
+import {
+  AddIcon,
+  PrinterIcon,
+  age,
+  getPatientName,
+  formatDate,
+  parseDate,
+  useConfig,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import type { ConfigObject } from '../../config-schema';
+import { useVitalsAndBiometrics, useConceptUnits, withUnit } from '../../record-vitals-workspace/common';
+import styles from './triage-vitals-history.scss';
+import { VitalsTableHeader, VitalsTableRow } from './type';
+import PaginatedVitals from '../paginated-vitals/paginated-vitals.component';
+import VitalsChart from './vital-chart.component';
+
+interface VitalsOverviewProps {
+  patientUuid: string;
+  patient: fhir.Patient;
+  pageSize: number;
+  urlLabel: string;
+}
+
+const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, pageSize, urlLabel }) => {
+  const { t } = useTranslation();
+  const config = useConfig<ConfigObject>();
+  const displayText = t('vitalSigns', 'vital signs');
+  const headerTitle = t('vitalSigns', 'Vital Signs');
+  const [chartView, setChartView] = useState(false);
+  const isTablet = useLayoutType() === 'tablet';
+  const [isPrinting, setIsPrinting] = useState(false);
+  const contentToPrintRef = useRef(null);
+
+  const { excludePatientIdentifierCodeTypes } = useConfig();
+  const { data: vitals, error, isLoading, isValidating } = useVitalsAndBiometrics(patientUuid);
+  const { conceptUnits } = useConceptUnits();
+
+  const patientDetails = useMemo(() => {
+    const getGender = (gender: string): string => {
+      switch (gender) {
+        case 'male':
+          return t('male', 'Male');
+        case 'female':
+          return t('female', 'Female');
+        case 'other':
+          return t('other', 'Other');
+        case 'unknown':
+          return t('unknown', 'Unknown');
+        default:
+          return gender;
+      }
+    };
+
+    const identifiers =
+      patient?.identifier?.filter(
+        (identifier) => !excludePatientIdentifierCodeTypes?.uuids.includes(identifier.type.coding[0].code),
+      ) ?? [];
+
+    return {
+      name: patient ? getPatientName(patient) : '',
+      age: age(patient?.birthDate),
+      gender: getGender(patient?.gender),
+      location: patient?.address?.[0].city,
+      identifiers: identifiers?.length ? identifiers.map(({ value }) => value) : [],
+    };
+  }, [patient, t, excludePatientIdentifierCodeTypes?.uuids]);
+
+  const tableHeaders: Array<VitalsTableHeader> = [
+    {
+      key: 'dateRender',
+      header: t('dateAndTime', 'Date and time'),
+      isSortable: true,
+      sortFunc: (valueA, valueB) => new Date(valueA.date).getTime() - new Date(valueB.date).getTime(),
+    },
+    {
+      key: 'temperatureRender',
+      header: withUnit(t('temperatureAbbreviated', 'Temp'), conceptUnits.get(config.concepts.temperatureUuid) ?? ''),
+      isSortable: true,
+      sortFunc: (valueA, valueB) =>
+        valueA.temperature && valueB.temperature ? valueA.temperature - valueB.temperature : 0,
+    },
+    {
+      key: 'bloodPressureRender',
+      header: withUnit(
+        t('bloodPressureAbbreviated', 'BP'),
+        conceptUnits.get(config.concepts.systolicBloodPressureUuid) ?? '',
+      ),
+      isSortable: true,
+      sortFunc: (valueA, valueB) =>
+        valueA.systolic && valueB.systolic && valueA.diastolic && valueB.diastolic
+          ? valueA.systolic !== valueB.systolic
+            ? valueA.systolic - valueB.systolic
+            : valueA.diastolic - valueB.diastolic
+          : 0,
+    },
+    {
+      key: 'pulseRender',
+      header: withUnit(t('pulse', 'Pulse'), conceptUnits.get(config.concepts.pulseUuid) ?? ''),
+      isSortable: true,
+      sortFunc: (valueA, valueB) => (valueA.pulse && valueB.pulse ? valueA.pulse - valueB.pulse : 0),
+    },
+    {
+      key: 'respiratoryRateRender',
+      header: withUnit(
+        t('respiratoryRateAbbreviated', 'R. Rate'),
+        conceptUnits.get(config.concepts.respiratoryRateUuid) ?? '',
+      ),
+      isSortable: true,
+      sortFunc: (valueA, valueB) =>
+        valueA.respiratoryRate && valueB.respiratoryRate ? valueA.respiratoryRate - valueB.respiratoryRate : 0,
+    },
+    {
+      key: 'spo2Render',
+      header: withUnit(t('spo2', 'SpO2'), conceptUnits.get(config.concepts.oxygenSaturationUuid) ?? ''),
+      isSortable: true,
+      sortFunc: (valueA, valueB) => (valueA.spo2 && valueB.spo2 ? valueA.spo2 - valueB.spo2 : 0),
+    },
+  ];
+
+  const tableRows: Array<VitalsTableRow> = useMemo(
+    () =>
+      vitals?.map((vitalSigns) => {
+        return {
+          ...vitalSigns,
+          dateRender: formatDate(parseDate(vitalSigns.date.toString()), { mode: 'wide', time: true }),
+          bloodPressureRender: `${vitalSigns.systolic ?? '--'} / ${vitalSigns.diastolic ?? '--'}`,
+          bloodPressureRenderInterpretation: vitalSigns.bloodPressureRenderInterpretation,
+          pulseRender: vitalSigns.pulse ?? '--',
+          pulseRenderInterpretation: vitalSigns.pulseRenderInterpretation,
+          spo2Render: vitalSigns.spo2 ?? '--',
+          spo2RenderInterpretation: vitalSigns.spo2RenderInterpretation,
+          temperatureRender: vitalSigns.temperature ?? '--',
+          temperatureRenderInterpretation: vitalSigns.temperatureRenderInterpretation,
+          respiratoryRateRender: vitalSigns.respiratoryRate ?? '--',
+          respiratoryRateRenderInterpretation: vitalSigns.respiratoryRateRenderInterpretation,
+        };
+      }),
+    [vitals],
+  );
+
+  const onBeforeGetContentResolve = useRef(null);
+
+  useEffect(() => {
+    if (isPrinting && onBeforeGetContentResolve.current) {
+      onBeforeGetContentResolve.current();
+    }
+  }, [isPrinting]);
+
+  const handlePrint = useReactToPrint({
+    content: () => contentToPrintRef.current,
+    documentTitle: `OpenMRS - ${patientDetails.name} - ${headerTitle}`,
+    onBeforeGetContent: () =>
+      new Promise((resolve) => {
+        if (patient && headerTitle) {
+          onBeforeGetContentResolve.current = resolve;
+          setIsPrinting(true);
+        }
+      }),
+    onAfterPrint: () => {
+      onBeforeGetContentResolve.current = null;
+      setIsPrinting(false);
+    },
+  });
+
+  return (
+    <>
+      {(() => {
+        if (isLoading) {
+          return <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />;
+        }
+
+        if (error) {
+          return <ErrorState error={error} headerTitle={headerTitle} />;
+        }
+
+        if (vitals?.length) {
+          return (
+            <div className={styles.widgetCard}>
+              <CardHeader title={headerTitle}>
+                <div className={styles.backgroundDataFetchingIndicator}>
+                  <span>{isValidating ? <InlineLoading /> : null}</span>
+                </div>
+                <div className={styles.vitalsHeaderActionItems}>
+                  <ContentSwitcher
+                    onChange={(evt: ChangeEvent<HTMLButtonElement> & { name: string }) =>
+                      setChartView(evt.name === 'chartView')
+                    }
+                    size={isTablet ? 'md' : 'sm'}
+                    selectedIndex={chartView ? 1 : 0}>
+                    <IconSwitch name="tableView" text="Table view">
+                      <Table size={16} />
+                    </IconSwitch>
+                    <IconSwitch name="chartView" text="Chart view">
+                      <Analytics size={16} />
+                    </IconSwitch>
+                  </ContentSwitcher>
+                </div>
+              </CardHeader>
+              {chartView ? (
+                <VitalsChart patientVitals={vitals} conceptUnits={conceptUnits} config={config} />
+              ) : (
+                <div ref={contentToPrintRef}>
+                  <PaginatedVitals
+                    isPrinting={isPrinting}
+                    pageSize={pageSize}
+                    tableHeaders={tableHeaders}
+                    tableRows={tableRows}
+                    urlLabel={urlLabel}
+                    patient={patient}
+                  />
+                </div>
+              )}
+            </div>
+          );
+        }
+        return <EmptyState displayText={displayText} headerTitle={headerTitle} />;
+      })()}
+    </>
+  );
+};
+
+export default VitalsOverview;

package/src/past-vitals/triage-vitals/triage-vitals-history.scss

@@ -0,0 +1,48 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.widgetCard {
+  background-color: colors.$white;
+  border: 1px solid colors.$gray-20;
+}
+:global(.cds--tab-content) {
+  padding: 0;
+}
+.divider {
+  width: 1px;
+  height: layout.$spacing-05;
+  color: $ui-05;
+  margin: 0 layout.$spacing-05;
+}
+
+.vitalsHeaderActionItems {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: end;
+  padding-right: layout.$spacing-05;
+
+  & :global(.cds--content-switcher) {
+    max-width: max-content;
+
+    :global(.cds--content-switcher__label) {
+      height: layout.$spacing-05;
+    }
+  }
+}
+
+.customRow tbody {
+  white-space: nowrap;
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: end;
+}
+
+.printButton {
+  margin-left: 1.25rem;
+}

package/src/past-vitals/triage-vitals/type/index.ts

@@ -0,0 +1,32 @@
+import {
+  type ObservationInterpretation,
+  type PatientVitalsAndBiometrics,
+} from '../../../record-vitals-workspace/common';
+
+export interface VitalsTableRow extends PatientVitalsAndBiometrics {
+  id: string;
+  dateRender: string;
+  bloodPressureRender: string;
+  bloodPressureRenderInterpretation?: ObservationInterpretation;
+  pulseRender: string | number;
+  pulseRenderInterpretation?: ObservationInterpretation;
+  spo2Render: string | number;
+  spo2RenderInterpretation?: ObservationInterpretation;
+  temperatureRender: string | number;
+  temperatureRenderInterpretation?: ObservationInterpretation;
+  respiratoryRateRender: string | number;
+  respiratoryRateRenderInterpretation?: ObservationInterpretation;
+}
+
+export interface VitalsTableHeader {
+  key:
+    | 'dateRender'
+    | 'temperatureRender'
+    | 'bloodPressureRender'
+    | 'pulseRender'
+    | 'respiratoryRateRender'
+    | 'spo2Render';
+  header: string;
+  isSortable?: boolean;
+  sortFunc: (valueA: VitalsTableRow, valueB: VitalsTableRow) => number;
+}

package/src/past-vitals/triage-vitals/vital-chart.component.tsx

@@ -0,0 +1,198 @@
+import React, { useId, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Tab, TabListVertical, TabPanel, TabPanels, TabsVertical } from '@carbon/react';
+import { LineChart, ScaleTypes } from '@carbon/charts-react';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../config-schema';
+import { withUnit, type PatientVitalsAndBiometrics } from '../../record-vitals-workspace/common';
+import styles from './vitals-chart.scss';
+
+interface VitalsChartProps {
+  conceptUnits: Map<string, string>;
+  config: ConfigObject;
+  patientVitals: Array<PatientVitalsAndBiometrics>;
+}
+
+type VitalSignKey = 'systolic' | 'spo2' | 'temperature' | 'respiratoryRate' | 'pulse';
+
+interface VitalsChartData {
+  title: string;
+  value: VitalSignKey;
+}
+
+const VitalsChart: React.FC<VitalsChartProps> = ({ patientVitals, conceptUnits, config }) => {
+  const { t } = useTranslation();
+  const id = useId();
+  const [selectedVitalsSign, setSelectedVitalsSign] = useState<VitalsChartData>({
+    title: `${t('bp', 'BP')} (${conceptUnits.get(config.concepts.systolicBloodPressureUuid)})`,
+    value: 'systolic',
+  });
+
+  const vitalSigns: { id: string; title: string; value: VitalSignKey }[] = [
+    {
+      id: 'bloodPressure',
+      title: withUnit(t('bp', 'BP'), conceptUnits.get(config.concepts.systolicBloodPressureUuid) ?? '-'),
+      value: 'systolic',
+    },
+    {
+      id: 'oxygenSaturation',
+      title: withUnit(t('spo2', 'SpO2'), conceptUnits.get(config.concepts.oxygenSaturationUuid) ?? '-'),
+      value: 'spo2',
+    },
+    {
+      id: 'temperature',
+      title: withUnit(t('temp', 'Temp'), conceptUnits.get(config.concepts.temperatureUuid) ?? '-'),
+      value: 'temperature',
+    },
+    {
+      id: 'respiratoryRate',
+      title: withUnit(t('respiratoryRate', 'R. rate'), conceptUnits.get(config.concepts.respiratoryRateUuid) ?? '-'),
+      value: 'respiratoryRate',
+    },
+    {
+      id: 'pulse',
+      title: withUnit(t('pulse', 'Pulse'), conceptUnits.get(config.concepts.pulseUuid) ?? '-'),
+      value: 'pulse',
+    },
+  ];
+
+  const chartData = useMemo(() => {
+    return patientVitals
+      .filter((vitals) => vitals[selectedVitalsSign.value])
+      .slice(0, 10)
+      .sort((vitalA, vitalB) => new Date(vitalA.date).getTime() - new Date(vitalB.date).getTime())
+      .map((vitals) => {
+        if (['systolic', 'diastolic'].includes(selectedVitalsSign.value)) {
+          return [
+            {
+              group: 'Systolic blood pressure',
+              key: formatDate(parseDate(vitals.date), { year: true }),
+              value: vitals.systolic,
+              date: vitals.date,
+            },
+            {
+              group: 'Diastolic blood pressure',
+              key: formatDate(parseDate(vitals.date), { year: true }),
+              value: vitals.diastolic,
+              date: vitals.date,
+            },
+          ];
+        }
+        return {
+          group: selectedVitalsSign.value,
+          key: formatDate(parseDate(vitals.date)),
+          value: vitals[selectedVitalsSign.value],
+          date: vitals.date,
+        };
+      });
+  }, [patientVitals, selectedVitalsSign]);
+
+  const chartOptions = {
+    title: selectedVitalsSign.title,
+    axes: {
+      bottom: {
+        title: t('date', 'Date'),
+        mapsTo: 'date',
+        scaleType: ScaleTypes.TIME,
+      },
+      left: {
+        mapsTo: 'value',
+        title: selectedVitalsSign.title,
+        scaleType: ScaleTypes.LINEAR,
+        includeZero: false,
+      },
+    },
+    legend: {
+      enabled: false,
+    },
+    color: {
+      scale: {
+        [selectedVitalsSign.title]: '#6929c4',
+      },
+    },
+    tooltip: {
+      customHTML: ([{ value, group, key }]) =>
+        `<div class="cds--tooltip cds--tooltip--shown" style="min-width: max-content; font-weight:600">${value} - ${String(
+          group,
+        ).toUpperCase()}
+        <span style="color: #c6c6c6; font-size: 1rem; font-weight:600">${key}</span></div>`,
+    },
+    toolbar: {
+      enabled: true,
+      numberOfIcons: 4,
+      controls: [
+        {
+          type: 'Zoom in',
+        },
+        {
+          type: 'Zoom out',
+        },
+        {
+          type: 'Reset zoom',
+        },
+        {
+          type: 'Export as CSV',
+        },
+        {
+          type: 'Export as PNG',
+        },
+        {
+          type: 'Make fullscreen',
+        },
+      ],
+    },
+    zoomBar: {
+      top: {
+        enabled: true,
+      },
+    },
+    height: '400px',
+  };
+
+  return (
+    <div className={styles.vitalsChartContainer}>
+      <div className={styles.vitalSignsArea}>
+        <label className={styles.vitalsSignLabel} htmlFor={`${id}-tab`}>
+          {t('vitalSignDisplayed', 'Vital sign displayed')}
+        </label>
+        <TabsVertical>
+          <TabListVertical aria-label="Vitals tabs">
+            {vitalSigns.map(({ id, title, value }) => (
+              <Tab
+                className={classNames(styles.tab, { [styles.selectedTab]: selectedVitalsSign.title === title })}
+                id={`${id}-tab`}
+                key={id}
+                onClick={() =>
+                  setSelectedVitalsSign({
+                    title: title,
+                    value: value,
+                  })
+                }>
+                {title}
+              </Tab>
+            ))}
+          </TabListVertical>
+          <TabPanels>
+            {vitalSigns.map(({ id, title, value }) => (
+              <TabPanel key={id}>
+                <LineChart
+                  data={chartData
+                    .flat()
+                    .filter((data) =>
+                      value === 'systolic'
+                        ? data.group === 'Systolic blood pressure' || data.group === 'Diastolic blood pressure'
+                        : data.group === value,
+                    )}
+                  options={chartOptions}
+                />
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </TabsVertical>
+      </div>
+    </div>
+  );
+};
+
+export default VitalsChart;

package/src/past-vitals/triage-vitals/vitals-chart.scss

@@ -0,0 +1,70 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.bodyShort01 {
+  @include type.type-style('body-compact-01');
+}
+
+.vitalsChartContainer {
+  display: flex;
+  margin: 0 layout.$spacing-05;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.vitalSignsArea {
+  flex-grow: 1;
+  margin: layout.$spacing-03 0;
+
+  // This is a hack to override the max-width of the overflow menu button
+  :global(
+    .cds--chart-holder
+      .cds--cc--toolbar
+      .cds--overflow-menu-options
+      .cds--overflow-menu-options__option
+      .cds--overflow-menu-options__btn
+  ) {
+    max-width: none !important;
+  }
+
+  // Ensures the chart toolbar tooltips are visible
+  :global(.cds--tabs--vertical ~ .cds--tab-content) {
+    overflow-y: visible;
+  }
+}
+
+.vitalsSignLabel {
+  @extend .label01;
+  margin-bottom: layout.$spacing-05;
+  display: inline-block;
+}
+
+.tab {
+  outline: 0;
+  outline-offset: 0;
+  min-height: layout.$spacing-07 !important;
+  block-size: layout.$spacing-05 !important;
+
+  &:active,
+  &:focus {
+    outline: layout.$spacing-01 solid var(--brand-03) !important;
+  }
+
+  &[aria-selected='true'] {
+    box-shadow: inset 4px 0 0 0 var(--brand-03) !important;
+    border-bottom: none;
+    font-weight: 600;
+    margin-left: 0 !important;
+  }
+
+  &[aria-selected='false'] {
+    border-bottom: none;
+    border-left: layout.$spacing-01 solid $ui-03;
+    margin-left: 0 !important;
+  }
+}