@kenyaemr/esm-service-queues-app 7.0.2-pre.65

package/src/current-visit/current-visit.scss

@@ -0,0 +1,34 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.visitContainer {
+  background-color: $ui-background;
+  display: grid;
+  grid-template-columns: max-content auto;
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.heading {
+  @include type.type-style('heading-compact-02');
+}
+
+.subHeading {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.structuredListRow {
+  border-bottom: none;
+}
+
+.structuredList {
+  margin-bottom: 0;
+}
+
+.wrapper {
+  margin: spacing.$spacing-03;
+}

package/src/current-visit/hooks/useVitalsConceptMetadata.tsx

@@ -0,0 +1,101 @@
+import useSWRImmutable from 'swr/immutable';
+import { openmrsFetch, useConfig, formatTime, parseDate, restBaseUrl } from '@openmrs/esm-framework';
+import { type Observation, type PatientVitals, Encounter } from '../../types/index';
+import { type ConfigObject } from '../../config-schema';
+
+export function useVitalsConceptMetadata() {
+  const customRepresentation =
+    'custom:(setMembers:(uuid,display,hiNormal,hiAbsolute,hiCritical,lowNormal,lowAbsolute,lowCritical,units))';
+
+  const apiUrl = `${restBaseUrl}/concept/?q=VITALS SIGNS&v=${customRepresentation}`;
+
+  const { data, error, isLoading } = useSWRImmutable<{ data: VitalsConceptMetadataResponse }, Error>(
+    apiUrl,
+    openmrsFetch,
+  );
+
+  const conceptMetadata = data?.data?.results[0]?.setMembers;
+
+  const conceptUnits = conceptMetadata?.length
+    ? new Map<string, string>(conceptMetadata.map((concept) => [concept.uuid, concept.units]))
+    : new Map<string, string>([]);
+  return {
+    data: conceptUnits,
+    isError: error,
+    isLoading,
+    conceptMetadata,
+  };
+}
+
+export const withUnit = (label: string, unit: string | null | undefined) => {
+  return `${label} ${unit ? `(${unit})` : ''}`;
+};
+
+export interface ConceptMetadata {
+  uuid: string;
+  display: string;
+  hiNormal: number | string | null;
+  hiAbsolute: number | string | null;
+  hiCritical: number | string | null;
+  lowNormal: number | string | null;
+  lowAbsolute: number | string | null;
+  lowCritical: number | string | null;
+  units: string | null;
+}
+
+interface VitalsConceptMetadataResponse {
+  results: Array<{
+    setMembers: Array<ConceptMetadata>;
+  }>;
+}
+
+export const useVitalsFromObs = (encounter) => {
+  const config = useConfig<ConfigObject>();
+
+  const vitals: Array<PatientVitals> = [];
+
+  encounter.forEach((enc) => {
+    enc.obs?.forEach((obs: Observation) => {
+      if (obs.concept?.uuid === config.concepts.pulseUuid) {
+        vitals.push({
+          pulse: obs.value,
+          provider: {
+            name: encounter.encounterProviders?.length ? encounter.encounterProviders[0].provider.person.display : '',
+            role: encounter.encounterProviders?.length ? encounter.encounterProviders[0].encounterRole.display : '',
+          },
+          time: formatTime(parseDate(obs.obsDatetime)),
+        });
+      } else if (obs.concept?.uuid === config.concepts.oxygenSaturationUuid) {
+        vitals.push({
+          oxygenSaturation: obs.value,
+        });
+      } else if (obs.concept?.uuid === config.concepts.respiratoryRateUuid) {
+        vitals.push({
+          respiratoryRate: obs.value,
+        });
+      } else if (obs.concept?.uuid === config.concepts.temperatureUuid) {
+        vitals.push({
+          temperature: obs.value,
+        });
+      } else if (obs.concept?.uuid === config.concepts.systolicBloodPressureUuid) {
+        vitals.push({
+          systolic: obs.value,
+        });
+      } else if (obs.concept?.uuid === config.concepts.diastolicBloodPressureUuid) {
+        vitals.push({
+          diastolic: obs.value,
+        });
+      } else if (obs.concept?.uuid === config.concepts.weightUuid) {
+        vitals.push({
+          weight: obs.value,
+        });
+      } else if (obs.concept?.uuid === config.concepts.heightUuid) {
+        vitals.push({
+          height: obs.value,
+        });
+      }
+    });
+  });
+
+  return vitals;
+};

package/src/current-visit/visit-details/biometrics-config-schema.ts

@@ -0,0 +1,14 @@
+import { Type } from '@openmrs/esm-framework';
+
+export default {
+  bmiUnit: {
+    _type: Type.String,
+    _default: 'kg / m²',
+  },
+};
+
+export interface BiometricsConfigObject {
+  bmiUnit: string;
+  heightUnit: string;
+  weightUnit: string;
+}

package/src/current-visit/visit-details/current-visit-details.component.tsx

@@ -0,0 +1,96 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  StructuredListBody,
+  StructuredListCell,
+  StructuredListHead,
+  StructuredListRow,
+  StructuredListWrapper,
+} from '@carbon/react';
+import { type OpenmrsResource, formatTime, parseDate } from '@openmrs/esm-framework';
+import { type Note, type Encounter, type Observation, type DiagnosisItem } from '../../types/index';
+import { useVitalsFromObs } from '../hooks/useVitalsConceptMetadata';
+import TriageNote from './triage-note.component';
+import Vitals from './vitals.component';
+import styles from '../current-visit.scss';
+
+interface CurrentVisitProps {
+  patientUuid: string;
+  encounters: Array<Encounter | OpenmrsResource>;
+}
+
+enum visitTypes {
+  CURRENT = 'currentVisit',
+  PAST = 'pastVisit',
+}
+
+const CurrentVisitDetails: React.FC<CurrentVisitProps> = ({ patientUuid, encounters }) => {
+  const { t } = useTranslation();
+
+  const [diagnoses, notes, vitalsToRetrieve]: [Array<DiagnosisItem>, Array<Note>, Array<Encounter>] = useMemo(() => {
+    const notes: Array<Note> = [];
+    const vitalsToRetrieve: Array<Encounter> = [];
+    const diagnoses: Array<DiagnosisItem> = [];
+
+    // Iterating through every Encounter
+    encounters?.forEach((enc: Encounter) => {
+      // Check for Visit Diagnoses and Notes
+      if (enc.encounterType?.display === 'Visit Note') {
+        enc.obs.forEach((obs: Observation) => {
+          if (obs.concept && obs.concept.display === 'Visit Diagnoses') {
+            // // Putting all the diagnoses in a single array.
+            diagnoses.push({
+              diagnosis: obs.groupMembers.find((mem) => mem.concept.display === 'PROBLEM LIST').value.display,
+            });
+          } else if (obs.concept && obs.concept.display === 'General patient note') {
+            // Putting all notes in a single array.
+            notes.push({
+              note: obs.value,
+              provider: {
+                name: enc.encounterProviders.length ? enc.encounterProviders[0].provider.person.display : '',
+                role: enc.encounterProviders.length ? enc.encounterProviders[0].encounterRole.display : '',
+              },
+              time: formatTime(parseDate(obs.obsDatetime)),
+              concept: obs.concept,
+            });
+          }
+        });
+      }
+
+      vitalsToRetrieve.push(enc);
+    });
+    return [diagnoses, notes, vitalsToRetrieve];
+  }, [encounters]);
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.visitContainer}>
+        <StructuredListWrapper className={styles.structuredList}>
+          <StructuredListHead></StructuredListHead>
+          <StructuredListBody>
+            <StructuredListRow className={styles.structuredListRow}>
+              <StructuredListCell>{t('triageNote', 'Triage note')}</StructuredListCell>
+              <StructuredListCell>
+                <TriageNote notes={notes} diagnoses={diagnoses} patientUuid={patientUuid} />
+              </StructuredListCell>
+            </StructuredListRow>
+
+            <StructuredListRow className={styles.structuredListRow}>
+              <StructuredListCell>{t('vitals', 'Vitals')}</StructuredListCell>
+              <StructuredListCell>
+                {' '}
+                <Vitals
+                  vitals={useVitalsFromObs(vitalsToRetrieve)}
+                  patientUuid={patientUuid}
+                  visitType={visitTypes.CURRENT}
+                />
+              </StructuredListCell>
+            </StructuredListRow>
+          </StructuredListBody>
+        </StructuredListWrapper>
+      </div>
+    </div>
+  );
+};
+
+export default CurrentVisitDetails;

package/src/current-visit/visit-details/triage-note.component.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Button, Tag } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { ArrowRight } from '@carbon/react/icons';
+import { navigate } from '@openmrs/esm-framework';
+import { type DiagnosisItem, type Note } from '../../types/index';
+import styles from './triage-note.scss';
+
+interface TriageNoteProps {
+  notes: Array<Note>;
+  diagnoses: Array<DiagnosisItem>;
+  patientUuid: string;
+}
+
+const TriageNote: React.FC<TriageNoteProps> = ({ notes, patientUuid, diagnoses }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      {diagnoses.length > 0
+        ? diagnoses.map((d: DiagnosisItem, ind) => (
+            <Tag type="blue" size="md">
+              {d.diagnosis}
+            </Tag>
+          ))
+        : null}
+      {notes.length ? (
+        notes.map((note: Note, i) => (
+          <div>
+            <p>{note.note}</p>
+            <p className={styles.subHeading}>
+              {note.provider.name ? <span> {note.provider.name} </span> : null} · {note.time}
+            </p>
+          </div>
+        ))
+      ) : (
+        <div>
+          <p className={styles.emptyText}>{t('tirageNotYetCompleted', 'Triage has not yet been completed')}</p>
+          <Button
+            size="sm"
+            kind="ghost"
+            renderIcon={(props) => <ArrowRight size={16} {...props} />}
+            onClick={() => navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/chart` })}
+            iconDescription={t('triageForm', 'Triage form')}>
+            {t('triageForm', 'Triage form')}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TriageNote;

package/src/current-visit/visit-details/triage-note.scss

@@ -0,0 +1,89 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.subHeading {
+  @include type.type-style('label-01');
+  color: var(--text-02);
+}
+
+.emptyText {
+  padding: spacing.$spacing-05;
+  @include type.type-style('body-02');
+}
+
+.unit {
+  @include type.type-style('body-compact-01');
+  color: var(--text-02);
+  margin-left: spacing.$spacing-02;
+}
+
+.vitalValues {
+  @include type.type-style('body-compact-02');
+  color: $ui-05;
+  margin-left: spacing.$spacing-02;
+}
+
+.grid {
+  padding-left: 0;
+}
+
+.vitalValuesWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.notification {
+  fill: $danger;
+}
+
+.danger-icon {
+  color: $danger;
+  height: spacing.$spacing-02;
+  width: spacing.$spacing-02;
+  margin-left: spacing.$spacing-02;
+}
+
+.iconWrapper {
+  margin-left: spacing.$spacing-02;
+}
+
+.critically-low,
+.critically-high,
+.low,
+.high {
+  &::after {
+    @include type.type-style('heading-compact-01');
+  }
+}
+
+.low::after {
+  content: ' ↓';
+}
+
+.critically-low::after {
+  content: ' ↓↓';
+}
+
+.high::after {
+  content: ' ↑';
+}
+
+.critically-high::after {
+  content: ' ↑↑';
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0.25rem 0.5rem;
+}
+
+.tile {
+  background-color: white;
+}

package/src/current-visit/visit-details/vitals-config-schema.ts

@@ -0,0 +1,17 @@
+import { Type } from '@openmrs/esm-framework';
+
+export default {
+  formUuid: {
+    _type: Type.UUID,
+    _default: 'a000cb34-9ec1-4344-a1c8-f692232f6edd',
+  },
+  encounterTypeUuid: {
+    _type: Type.UUID,
+    _default: '67a71486-1a54-468f-ac3e-7091a9a79584',
+  },
+};
+
+export interface VitalsConfigObject {
+  formUuid: string;
+  encounterTypeUuid: string;
+}

package/src/current-visit/visit-details/vitals.component.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, Tile } from '@carbon/react';
+import { ArrowRight, CircleFilled } from '@carbon/react/icons';
+import { navigate, useConfig } from '@openmrs/esm-framework';
+import { calculateBMI, assessValue, getReferenceRangesForConcept } from '../current-visit.resource';
+import { useVitalsConceptMetadata } from '../hooks/useVitalsConceptMetadata';
+import { type ConfigObject } from '../../config-schema';
+import { type PatientVitals } from '../../types/index';
+import styles from './triage-note.scss';
+
+interface VitalsComponentProps {
+  vitals: Array<PatientVitals>;
+  patientUuid: string;
+  visitType: string;
+}
+
+const Vitals: React.FC<VitalsComponentProps> = ({ vitals, patientUuid, visitType }) => {
+  const { t } = useTranslation();
+  const config = useConfig<ConfigObject>();
+  const { data: conceptUnits, conceptMetadata } = useVitalsConceptMetadata();
+
+  const vitalsToDisplay = vitals.reduce(
+    (previousVital, currentVital) => Object.assign(previousVital, currentVital),
+    {},
+  );
+
+  return (
+    <div>
+      {Object.keys(vitalsToDisplay).length > 0 ? (
+        <div>
+          <div className={styles.row}>
+            <Tile className={styles.tile}>
+              <p>{t('temperature', 'Temperature')}</p>
+              <div className={styles.vitalValuesWrapper}>
+                <p className={styles.vitalValues}>{vitalsToDisplay.temperature ? vitalsToDisplay.temperature : '--'}</p>
+                <p className={styles.unit}>{conceptUnits.get(config.concepts.temperatureUuid) ?? ''}</p>
+                <p>{}</p>
+              </div>
+            </Tile>
+            <Tile className={styles.tile}>
+              <p>{t('bp', 'Bp')}</p>
+              <div className={styles.vitalValuesWrapper}>
+                <p className={styles.vitalValues}>
+                  {vitalsToDisplay.systolic ? vitalsToDisplay.systolic : '--'} /
+                  {vitalsToDisplay.systolic ? vitalsToDisplay.diastolic : '--'}
+                </p>
+                <p className={styles.unit}>{conceptUnits.get(config.concepts.systolicBloodPressureUuid) ?? ''}</p>
+              </div>
+            </Tile>
+            <Tile className={styles.tile}>
+              <p>
+                {t('heartRate', 'Heart rate')}
+                {assessValue(
+                  vitalsToDisplay.pulse,
+                  getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata),
+                ) !== 'normal' ? (
+                  <CircleFilled className={styles['danger-icon']} size={16} />
+                ) : null}
+              </p>
+              <div className={styles.vitalValuesWrapper}>
+                <p className={styles.vitalValues}>{vitalsToDisplay.pulse ? vitalsToDisplay.pulse : '--'}</p>
+                <p className={styles.unit}>{conceptUnits.get(config.concepts.pulseUuid) ?? ''}</p>
+                <p className={styles.iconWrapper}>
+                  {assessValue(
+                    vitalsToDisplay.pulse,
+                    getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata),
+                  ) === 'high' ? (
+                    <span className={styles.high}></span>
+                  ) : assessValue(
+                      vitalsToDisplay.pulse,
+                      getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata),
+                    ) === 'critically_high' ? (
+                    <span className={styles['critically-high']}></span>
+                  ) : assessValue(
+                      vitalsToDisplay.pulse,
+                      getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata),
+                    ) === 'low' ? (
+                    <span className={styles.low}></span>
+                  ) : assessValue(
+                      vitalsToDisplay.pulse,
+                      getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata),
+                    ) === 'critically_low' ? (
+                    <span className={styles['critically-low']}></span>
+                  ) : null}
+                </p>
+              </div>
+            </Tile>
+            <Tile className={styles.tile}>
+              <p>{t('sp02', 'Sp02')}</p>
+              <div className={styles.vitalValuesWrapper}>
+                <p className={styles.vitalValues}>
+                  {vitalsToDisplay.oxygenSaturation ? vitalsToDisplay.oxygenSaturation : '--'}
+                </p>
+                <p className={styles.unit}>{conceptUnits.get(config.concepts.oxygenSaturationUuid) ?? ''}</p>
+              </div>
+            </Tile>
+          </div>
+          <div className={styles.row}>
+            <Tile className={styles.tile}>
+              <p>{t('rRate', 'R. Rate')}</p>
+              <div className={styles.vitalValuesWrapper}>
+                <p className={styles.vitalValues}>
+                  {vitalsToDisplay.respiratoryRate ? vitalsToDisplay.respiratoryRate : '--'}
+                </p>
+                <p className={styles.unit}>{conceptUnits.get(config.concepts.respiratoryRateUuid) ?? ''}</p>
+              </div>
+            </Tile>
+            <Tile className={styles.tile}>
+              <p>{t('height', 'Height')}</p>
+              <div className={styles.vitalValuesWrapper}>
+                <p className={styles.vitalValues}>{vitalsToDisplay.height ? vitalsToDisplay.height : '--'}</p>
+                <p className={styles.unit}>{conceptUnits.get(config.concepts.heightUuid) ?? ''}</p>
+              </div>
+            </Tile>
+            <Tile className={styles.tile}>
+              <p>{t('weight', 'Weight')}</p>
+              <div className={styles.vitalValuesWrapper}>
+                <p className={styles.vitalValues}>{vitalsToDisplay.weight ? vitalsToDisplay.weight : '--'} </p>
+                <p className={styles.unit}>{conceptUnits.get(config.concepts.weightUuid) ?? ''}</p>
+              </div>
+            </Tile>
+            <Tile className={styles.tile}>
+              <p>{t('bmi', 'Bmi')}</p>
+              <div className={styles.vitalValuesWrapper}>
+                <p className={styles.vitalValues}>
+                  {' '}
+                  {calculateBMI(Number(vitalsToDisplay.weight), Number(vitalsToDisplay.height))}
+                </p>
+                <p className={styles.unit}>{config.biometrics['bmiUnit']}</p>
+              </div>
+            </Tile>
+          </div>
+          <p className={styles.subHeading}>
+            {vitalsToDisplay.provider?.name ? <span> {vitalsToDisplay.provider.name} </span> : null} ·{' '}
+            {vitalsToDisplay.time}
+          </p>
+        </div>
+      ) : (
+        <div>
+          {visitType === 'currentVisit' ? (
+            <div>
+              <p className={styles.emptyText}>
+                {t('vitalsNotRecordedForVisit', 'Vitals has not been recorded for this patient for this visit')}
+              </p>
+              <Button
+                size="sm"
+                kind="ghost"
+                renderIcon={(props) => <ArrowRight size={16} {...props} />}
+                onClick={() => navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/chart` })}
+                iconDescription={t('vitalsForm', 'Vitals form')}>
+                {t('vitalsForm', 'Vitals form')}
+              </Button>
+            </div>
+          ) : (
+            <p className={classNames(styles.bodyLong01, styles.text02)}>{t('noVitalsFound', 'No vitals found')}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Vitals;

package/src/dashboard.meta.ts

@@ -0,0 +1,5 @@
+export const dashboardMeta = {
+  name: 'service-queues',
+  slot: 'service-queues-dashboard-slot',
+  title: 'Service queues',
+};

package/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare type SideNavProps = {};

package/src/helpers/functions.ts

@@ -0,0 +1,28 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+
+export const getGender = (gender, t) => {
+  switch (gender) {
+    case 'M':
+      return t('male', 'Male');
+    case 'F':
+      return t('female', 'Female');
+    case 'O':
+      return t('other', 'Other');
+    case 'U':
+      return t('unknown', 'Unknown');
+    default:
+      return gender;
+  }
+};
+
+export function findObsByConceptUUID(arr: Array<OpenmrsResource>, ids: Array<string>) {
+  for (const visit of arr) {
+    return visit.obs.filter((o) => {
+      return ids.includes(o.concept.uuid);
+    });
+  }
+}
+
+export function timeDiffInMinutes(date1: Date, date2: Date) {
+  return Math.round((date1.getTime() - date2.getTime()) / (1000 * 3600 * 24));
+}