@digihmis/esm-triage-app 1.0.0

package/src/record-vitals-workspace/record-vitals.workspace.tsx

@@ -0,0 +1,612 @@
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Form,
+  ButtonSet,
+  Button,
+  Stack,
+  NumberInput,
+  Row,
+  NumberInputSkeleton,
+  ButtonSkeleton,
+  InlineNotification,
+  Column,
+} from '@carbon/react';
+import {
+  type DefaultWorkspaceProps,
+  ExtensionSlot,
+  Extension,
+  useConfig,
+  useLayoutType,
+  type AssignedExtension,
+  useSession,
+  useAbortController,
+  showSnackbar,
+  age,
+  navigate,
+  useVisit,
+} from '@openmrs/esm-framework';
+import styles from './record-vitals.scss';
+import classNames from 'classnames';
+import { type ConfigObject } from '../config-schema';
+import {
+  usePerson,
+  createOrUpdateVitalsAndBiometrics,
+  invalidateCachedVitalsAndBiometrics,
+  useConceptUnits,
+  useVitalsConceptMetadata,
+  useEncounterVitalsAndBiometrics,
+} from './record-vitals.resource';
+import {
+  calculateBodyMassIndex,
+  assessValue,
+  getReferenceRangesForConcept,
+  interpretBloodPressure,
+  prepareObsForSubmission,
+} from './helper';
+import { VitalsAndBiometricsFormSchema, type VitalsBiometricsFormData } from './schema';
+import capitalize from 'lodash-es/capitalize';
+import { extractNumbers, getMuacColorCode, isValueWithinReferenceRange } from './utils';
+import { useOptimisticVisitMutations } from '@openmrs/esm-patient-common-lib';
+import VitalsAndBiometricsInput from './component/vitals-biometrics-input.component';
+
+interface RecordVitalsWorkspaceProps extends DefaultWorkspaceProps {
+  patientUuid: string;
+  patient?: fhir.Patient;
+  formContext: 'creating' | 'editing';
+  editEncounterUuid?: string;
+  queueEntryUuid?: string;
+  completeServiceCallback?: () => Promise<void>;
+}
+
+const RecordVitalsWorkspace: React.FC<RecordVitalsWorkspaceProps> = ({
+  patientUuid,
+  patient,
+  editEncounterUuid,
+  formContext = 'creating',
+  queueEntryUuid,
+  completeServiceCallback,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const config = useConfig<ConfigObject>();
+  const biometricsUnitsSymbols = config.biometrics;
+  const useMuacColorStatus = config.vitals.useMuacColors;
+  const { activeVisit } = useVisit(patientUuid);
+
+  const session = useSession();
+  const { conceptUnits, isLoading: isLoadingConceptUnits } = useConceptUnits();
+  const {
+    conceptRanges,
+    conceptRangeMap,
+    data: conceptUnitsFromMetadata,
+    isLoading: isLoadingMetadata,
+  } = useVitalsConceptMetadata(patientUuid);
+
+  // Merge concept units from both sources
+  const allConceptUnits = useMemo(() => {
+    const merged = new Map(conceptUnits);
+    if (conceptUnitsFromMetadata) {
+      conceptUnitsFromMetadata.forEach((value, key) => {
+        if (!merged.has(key) && value) {
+          merged.set(key, value);
+        }
+      });
+    }
+    return merged;
+  }, [conceptUnits, conceptUnitsFromMetadata]);
+
+  const { person } = usePerson(patientUuid);
+  const openmrsId =
+    person?.identifiers?.find((id) => id.identifierType?.uuid === config.OpenmrsIdentifierTypeUuid)?.identifier || '';
+  const {
+    getRefinedInitialValues,
+    isLoading: isLoadingEncounter,
+    mutate: mutateEncounter,
+    vitalsAndBiometrics: initialFieldValuesMap,
+  } = useEncounterVitalsAndBiometrics(formContext === 'editing' ? editEncounterUuid : null);
+  const [hasInvalidVitals, setHasInvalidVitals] = useState(false);
+  const [muacColorCode, setMuacColorCode] = useState('');
+  const [showErrorNotification, setShowErrorNotification] = useState(false);
+  const [showErrorMessage, setShowErrorMessage] = useState(false);
+  const abortController = useAbortController();
+  const { invalidateVisitRelatedData } = useOptimisticVisitMutations(patientUuid);
+
+  const isLoadingInitialValues = useMemo(
+    () => (formContext === 'creating' ? false : isLoadingEncounter),
+    [formContext, isLoadingEncounter],
+  );
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { isDirty, isSubmitting, dirtyFields },
+    reset,
+  } = useForm<VitalsBiometricsFormData>({
+    mode: 'all',
+    resolver: zodResolver(VitalsAndBiometricsFormSchema),
+  });
+
+  useEffect(() => {
+    if (formContext === 'editing' && !isLoadingInitialValues && initialFieldValuesMap) {
+      reset(getRefinedInitialValues());
+    }
+  }, [formContext, isLoadingInitialValues, initialFieldValuesMap, getRefinedInitialValues, reset]);
+
+  useEffect(() => promptBeforeClosing(() => isDirty), [isDirty, promptBeforeClosing]);
+
+  const midUpperArmCircumference = watch('midUpperArmCircumference');
+  const systolicBloodPressure = watch('systolicBloodPressure');
+  const diastolicBloodPressure = watch('diastolicBloodPressure');
+  const respiratoryRate = watch('respiratoryRate');
+  const oxygenSaturation = watch('oxygenSaturation');
+  const temperature = watch('temperature');
+  const pulse = watch('pulse');
+  const weight = watch('weight');
+  const height = watch('height');
+
+  useEffect(() => {
+    const patientBirthDate = patient?.birthDate;
+    if (patientBirthDate && midUpperArmCircumference) {
+      const patientAge = extractNumbers(age(patientBirthDate));
+      getMuacColorCode(patientAge, midUpperArmCircumference, setMuacColorCode);
+    }
+  }, [watch, patient?.birthDate, midUpperArmCircumference]);
+
+  useEffect(() => {
+    if (height && weight) {
+      const computedBodyMassIndex = calculateBodyMassIndex(
+        weight,
+        height,
+        allConceptUnits.get(config.concepts.weightUuid) as 'lb' | 'lbs' | 'g',
+        allConceptUnits.get(config.concepts.heightUuid) as 'm' | 'cm' | 'in',
+      );
+      setValue('computedBodyMassIndex', computedBodyMassIndex);
+    }
+  }, [weight, height, setValue, allConceptUnits, config.concepts.weightUuid, config.concepts.heightUuid]);
+
+  function onError(err) {
+    if (err?.oneFieldRequired) {
+      setShowErrorNotification(true);
+    }
+  }
+
+  const concepts = useMemo(
+    () => ({
+      midUpperArmCircumferenceRange: conceptRangeMap.get(config.concepts.midUpperArmCircumferenceUuid),
+      diastolicBloodPressureRange: conceptRangeMap.get(config.concepts.diastolicBloodPressureUuid),
+      systolicBloodPressureRange: conceptRangeMap.get(config.concepts.systolicBloodPressureUuid),
+      oxygenSaturationRange: conceptRangeMap.get(config.concepts.oxygenSaturationUuid),
+      respiratoryRateRange: conceptRangeMap.get(config.concepts.respiratoryRateUuid),
+      temperatureRange: conceptRangeMap.get(config.concepts.temperatureUuid),
+      weightRange: conceptRangeMap.get(config.concepts.weightUuid),
+      heightRange: conceptRangeMap.get(config.concepts.heightUuid),
+      pulseRange: conceptRangeMap.get(config.concepts.pulseUuid),
+    }),
+    [conceptRangeMap, config.concepts],
+  );
+
+  const savePatientVitalsAndBiometrics = useCallback(
+    async (data: VitalsBiometricsFormData) => {
+      const formData = data;
+      setShowErrorMessage(true);
+      setShowErrorNotification(false);
+
+      data?.computedBodyMassIndex && delete data.computedBodyMassIndex;
+
+      const allFieldsAreValid = Object.entries(formData)
+        .filter(([, value]) => Boolean(value))
+        .every(([key, value]) => isValueWithinReferenceRange(conceptRanges, config.concepts[`${key}Uuid`], value));
+
+      if (allFieldsAreValid) {
+        setShowErrorMessage(false);
+        const { newObs, toBeVoided } = prepareObsForSubmission(
+          formData,
+          dirtyFields,
+          formContext,
+          initialFieldValuesMap,
+          config.concepts,
+        );
+
+        try {
+          await createOrUpdateVitalsAndBiometrics(
+            patientUuid,
+            config.vitals.encounterTypeUuid,
+            editEncounterUuid,
+            session?.sessionLocation?.uuid,
+            activeVisit?.uuid,
+            session?.currentProvider?.uuid,
+            [...newObs, ...toBeVoided],
+            abortController,
+          );
+
+          if (mutateEncounter) {
+            mutateEncounter();
+          }
+
+          invalidateVisitRelatedData({ observations: true, encounters: true });
+          invalidateCachedVitalsAndBiometrics();
+          closeWorkspaceWithSavedChanges();
+
+          showSnackbar({
+            isLowContrast: true,
+            kind: 'success',
+            title:
+              formContext === 'creating'
+                ? t('vitalsAndBiometricsSaved', 'Vitals and Biometrics saved')
+                : t('vitalsAndBiometricsUpdated', 'Vitals and Biometrics updated'),
+            subtitle: t('vitalsAndBiometricsNowAvailable', 'They are now visible on the Vitals and Biometrics page'),
+          });
+
+          if (formContext === 'creating') {
+            navigate({
+              to: `${window.spaBase}/home/triage/patient/${patientUuid}/vitals`,
+            });
+          }
+        } catch (error) {
+          showSnackbar({
+            title:
+              formContext === 'creating'
+                ? t('vitalsAndBiometricsSaveError', 'Error saving Vitals and Biometrics')
+                : t('vitalsAndBiometricsUpdateError', 'Error updating Vitals and Biometrics'),
+            kind: 'error',
+            isLowContrast: false,
+            subtitle: t('checkForValidity', 'Some of the values entered are invalid'),
+          });
+        }
+      } else {
+        setHasInvalidVitals(true);
+      }
+    },
+    [
+      abortController,
+      activeVisit?.uuid,
+      closeWorkspaceWithSavedChanges,
+      config.concepts,
+      config.vitals.encounterTypeUuid,
+      dirtyFields,
+      editEncounterUuid,
+      conceptRanges,
+      formContext,
+      initialFieldValuesMap,
+      mutateEncounter,
+      invalidateVisitRelatedData,
+      patientUuid,
+      session?.sessionLocation?.uuid,
+      session?.currentProvider?.uuid,
+      t,
+      completeServiceCallback,
+    ],
+  );
+
+  if (isLoadingConceptUnits || isLoadingInitialValues || isLoadingMetadata) {
+    return (
+      <Form className={styles.form}>
+        <ExtensionSlot name="visit-context-header-slot" state={{ patientUuid }} />
+        <div className={styles.grid}>
+          <Stack>
+            <Column>
+              <p className={styles.title}>{t('recordVitals', 'Record vitals')}</p>
+            </Column>
+            <Row className={styles.row}>
+              <Column>
+                <NumberInputSkeleton />
+              </Column>
+              <Column>
+                <NumberInputSkeleton />
+              </Column>
+              <Column>
+                <NumberInputSkeleton />
+              </Column>
+              <Column>
+                <NumberInputSkeleton />
+              </Column>
+            </Row>
+          </Stack>
+        </div>
+        <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+          <ButtonSkeleton className={styles.button} />
+          <ButtonSkeleton className={styles.button} />
+        </ButtonSet>
+      </Form>
+    );
+  }
+
+  return (
+    <Form
+      className={styles.form}
+      data-openmrs-role="record-vitals-form"
+      onSubmit={handleSubmit(savePatientVitalsAndBiometrics, onError)}>
+      <div className={styles.patientHeader}>
+        <span className={styles.patientName}>{capitalize(person?.display)}</span>
+        <span className={styles.patientDetails}>· {openmrsId} </span>
+        <span className={styles.patientDetails}>
+          · {person?.gender} · {person?.age} {t('years', 'yrs')}
+        </span>
+      </div>
+      <Stack gap={5} className={styles.container}>
+        <h1 className={styles.sectionTitle}>{t('vitalSigns', 'Vital Signs')}</h1>
+        <div className={styles.inputRow}>
+          <VitalsAndBiometricsInput
+            control={control}
+            fieldProperties={[
+              {
+                id: 'temperature',
+                max: concepts.temperatureRange?.hiAbsolute,
+                min: concepts.temperatureRange?.lowAbsolute,
+                name: t('temperature', 'Temperature'),
+                type: 'number',
+              },
+            ]}
+            interpretation={
+              temperature &&
+              assessValue(temperature, getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptRanges))
+            }
+            isValueWithinReferenceRange={
+              temperature
+                ? isValueWithinReferenceRange(conceptRanges, config.concepts['temperatureUuid'], temperature)
+                : true
+            }
+            showErrorMessage={showErrorMessage}
+            label={t('temperature', 'Temperature')}
+            unitSymbol={allConceptUnits.get(config.concepts.temperatureUuid) ?? ''}
+          />
+          <VitalsAndBiometricsInput
+            control={control}
+            fieldProperties={[
+              {
+                name: t('systolic', 'systolic'),
+                separator: '/',
+                type: 'number',
+                min: concepts.systolicBloodPressureRange?.lowAbsolute,
+                max: concepts.systolicBloodPressureRange?.hiAbsolute,
+                id: 'systolicBloodPressure',
+              },
+              {
+                name: t('diastolic', 'diastolic'),
+                type: 'number',
+                min: concepts.diastolicBloodPressureRange?.lowAbsolute,
+                max: concepts.diastolicBloodPressureRange?.hiAbsolute,
+                id: 'diastolicBloodPressure',
+              },
+            ]}
+            interpretation={
+              systolicBloodPressure &&
+              diastolicBloodPressure &&
+              interpretBloodPressure(systolicBloodPressure, diastolicBloodPressure, config.concepts, conceptRanges)
+            }
+            isValueWithinReferenceRange={
+              systolicBloodPressure &&
+              diastolicBloodPressure &&
+              isValueWithinReferenceRange(
+                conceptRanges,
+                config.concepts.systolicBloodPressureUuid,
+                systolicBloodPressure,
+              ) &&
+              isValueWithinReferenceRange(
+                conceptRanges,
+                config.concepts.diastolicBloodPressureUuid,
+                diastolicBloodPressure,
+              )
+            }
+            showErrorMessage={showErrorMessage}
+            label={t('bloodPressure', 'Blood pressure')}
+            unitSymbol={allConceptUnits.get(config.concepts.systolicBloodPressureUuid) ?? ''}
+          />
+        </div>
+        <div className={styles.inputRow}>
+          <VitalsAndBiometricsInput
+            control={control}
+            fieldProperties={[
+              {
+                name: t('pulse', 'Pulse'),
+                type: 'number',
+                min: concepts.pulseRange?.lowAbsolute,
+                max: concepts.pulseRange?.hiAbsolute,
+                id: 'pulse',
+              },
+            ]}
+            interpretation={
+              pulse && assessValue(pulse, getReferenceRangesForConcept(config.concepts.pulseUuid, conceptRanges))
+            }
+            isValueWithinReferenceRange={
+              pulse ? isValueWithinReferenceRange(conceptRanges, config.concepts['pulseUuid'], pulse) : true
+            }
+            label={t('heartRate', 'Heart rate')}
+            showErrorMessage={showErrorMessage}
+            unitSymbol={allConceptUnits.get(config.concepts.pulseUuid) ?? ''}
+          />
+          <VitalsAndBiometricsInput
+            control={control}
+            fieldProperties={[
+              {
+                name: t('respirationRate', 'Respiration rate'),
+                type: 'number',
+                min: concepts.respiratoryRateRange?.lowAbsolute,
+                max: concepts.respiratoryRateRange?.hiAbsolute,
+                id: 'respiratoryRate',
+              },
+            ]}
+            interpretation={
+              respiratoryRate &&
+              assessValue(
+                respiratoryRate,
+                getReferenceRangesForConcept(config.concepts.respiratoryRateUuid, conceptRanges),
+              )
+            }
+            isValueWithinReferenceRange={
+              respiratoryRate
+                ? isValueWithinReferenceRange(conceptRanges, config.concepts['respiratoryRateUuid'], respiratoryRate)
+                : true
+            }
+            showErrorMessage={showErrorMessage}
+            label={t('respirationRate', 'Respiration rate')}
+            unitSymbol={allConceptUnits.get(config.concepts.respiratoryRateUuid) ?? ''}
+          />
+        </div>
+        <div className={styles.inputRow}>
+          <VitalsAndBiometricsInput
+            control={control}
+            fieldProperties={[
+              {
+                name: t('oxygenSaturation', 'Oxygen saturation'),
+                type: 'number',
+                min: concepts.oxygenSaturationRange?.lowAbsolute,
+                max: concepts.oxygenSaturationRange?.hiAbsolute,
+                id: 'oxygenSaturation',
+              },
+            ]}
+            interpretation={
+              oxygenSaturation &&
+              assessValue(
+                oxygenSaturation,
+                getReferenceRangesForConcept(config.concepts.oxygenSaturationUuid, conceptRanges),
+              )
+            }
+            isValueWithinReferenceRange={
+              oxygenSaturation
+                ? isValueWithinReferenceRange(conceptRanges, config.concepts['oxygenSaturationUuid'], oxygenSaturation)
+                : true
+            }
+            showErrorMessage={showErrorMessage}
+            label={t('spo2', 'SpO2')}
+            unitSymbol={allConceptUnits.get(config.concepts.oxygenSaturationUuid) ?? ''}
+          />
+          <VitalsAndBiometricsInput
+            control={control}
+            fieldProperties={[
+              {
+                name: t('muac', 'MUAC'),
+                type: 'number',
+                min: concepts.midUpperArmCircumferenceRange?.lowAbsolute,
+                max: concepts.midUpperArmCircumferenceRange?.hiAbsolute,
+                id: 'midUpperArmCircumference',
+              },
+            ]}
+            muacColorCode={muacColorCode}
+            isValueWithinReferenceRange={
+              midUpperArmCircumference
+                ? isValueWithinReferenceRange(
+                    conceptRanges,
+                    config.concepts['midUpperArmCircumferenceUuid'],
+                    midUpperArmCircumference,
+                  )
+                : true
+            }
+            showErrorMessage={showErrorMessage}
+            label={t('muac', 'MUAC')}
+            unitSymbol={allConceptUnits.get(config.concepts.midUpperArmCircumferenceUuid) ?? ''}
+            useMuacColors={useMuacColorStatus}
+          />
+        </div>
+        <h1 className={styles.sectionTitle}>{t('anthropometric', 'Anthropometric')}</h1>
+        <div className={styles.inputRow}>
+          <VitalsAndBiometricsInput
+            control={control}
+            fieldProperties={[
+              {
+                name: t('weight', 'Weight'),
+                type: 'number',
+                min: concepts.weightRange?.lowAbsolute,
+                max: concepts.weightRange?.hiAbsolute,
+                id: 'weight',
+              },
+            ]}
+            interpretation={
+              weight && assessValue(weight, getReferenceRangesForConcept(config.concepts.weightUuid, conceptRanges))
+            }
+            isValueWithinReferenceRange={
+              weight ? isValueWithinReferenceRange(conceptRanges, config.concepts['weightUuid'], weight) : true
+            }
+            showErrorMessage={showErrorMessage}
+            label={t('weight', 'Weight')}
+            unitSymbol={allConceptUnits.get(config.concepts.weightUuid) ?? ''}
+          />
+          <VitalsAndBiometricsInput
+            control={control}
+            fieldProperties={[
+              {
+                name: t('height', 'Height'),
+                type: 'number',
+                min: concepts.heightRange?.lowAbsolute,
+                max: concepts.heightRange?.hiAbsolute,
+                id: 'height',
+              },
+            ]}
+            interpretation={
+              height && assessValue(height, getReferenceRangesForConcept(config.concepts.heightUuid, conceptRanges))
+            }
+            isValueWithinReferenceRange={
+              height ? isValueWithinReferenceRange(conceptRanges, config.concepts['heightUuid'], height) : true
+            }
+            showErrorMessage={showErrorMessage}
+            label={t('height', 'Height')}
+            unitSymbol={allConceptUnits.get(config.concepts.heightUuid) ?? ''}
+          />
+        </div>
+        <div className={styles.inputRow}>
+          <VitalsAndBiometricsInput
+            control={control}
+            fieldProperties={[
+              {
+                name: t('bmi', 'BMI'),
+                type: 'number',
+                id: 'computedBodyMassIndex',
+              },
+            ]}
+            readOnly
+            label={t('calculatedBmi', 'BMI (calc.)')}
+            unitSymbol={biometricsUnitsSymbols['bmiUnit']}
+          />
+        </div>
+        <h1 className={styles.sectionTitle}>{t('additionalNotes', 'Additional Notes')}</h1>
+
+        <VitalsAndBiometricsInput
+          control={control}
+          fieldWidth={isTablet ? '100%' : '100%'}
+          fieldProperties={[
+            {
+              name: t('notes', 'Notes'),
+              type: 'textarea',
+              id: 'generalPatientNote',
+            },
+          ]}
+          placeholder={t('additionalNoteText', 'Type any additional notes here')}
+          label={t('notes', 'Notes')}
+        />
+        {showErrorNotification && (
+          <Column className={styles.errorContainer}>
+            <InlineNotification
+              lowContrast
+              title={t('error', 'Error')}
+              subtitle={t('pleaseFillField', 'Please fill at least one field') + '.'}
+              onClose={() => setShowErrorNotification(false)}
+            />
+          </Column>
+        )}
+      </Stack>
+
+      <ButtonSet
+        className={classNames(styles.buttonSet, {
+          [styles.tablet]: isTablet,
+          [styles.desktop]: !isTablet,
+        })}>
+        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit" disabled={!isDirty || isSubmitting}>
+          <span>{t('recordVitals', 'Record Vitals')}</span>
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default RecordVitalsWorkspace;

package/src/record-vitals-workspace/schema/index.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod';
+
+export const VitalsAndBiometricsFormSchema = z
+  .object({
+    systolicBloodPressure: z.number(),
+    diastolicBloodPressure: z.number(),
+    respiratoryRate: z.number(),
+    oxygenSaturation: z.number(),
+    pulse: z.number(),
+    temperature: z.number(),
+    generalPatientNote: z.string(),
+    weight: z.number(),
+    height: z.number(),
+    midUpperArmCircumference: z.number(),
+    computedBodyMassIndex: z.number(),
+  })
+  .partial()
+  .refine(
+    (fields) => {
+      return Object.values(fields).some((value) => Boolean(value));
+    },
+    {
+      message: 'Please fill at least one field',
+      path: ['oneFieldRequired'],
+    },
+  );
+
+export type VitalsBiometricsFormData = z.infer<typeof VitalsAndBiometricsFormSchema>;