@digihmis/esm-triage-app 1.0.0

package/src/record-vitals-workspace/component/vitals-biometrics-input.scss

@@ -0,0 +1,358 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.productiveHeading04 {
+  @include type.type-style('heading-04');
+}
+
+.container {
+  width: 21.625rem;
+  border-bottom: 1px solid $ui-04;
+  margin-bottom: layout.$spacing-03;
+  :global(.omrs-breakpoint-lt-desktop) & {
+    width: 23.625rem;
+  }
+}
+
+.label {
+  @extend .label01;
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.numberInput {
+  border: none;
+  @extend .productiveHeading04;
+  text-align: center;
+  padding: 0;
+  color: $ui-05;
+
+  // TODO: Move to styleguide overrides
+  :global(.cds--number input[type='number']) {
+    border: none !important;
+    text-align: center;
+    @include type.type-style('heading-04');
+    font-family:
+      ibm plex sans,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      '.sfnstext-regular',
+      sans-serif;
+    min-width: auto !important;
+  }
+
+  :global(.cds--number--nosteppers input[type='number']) {
+    padding-right: layout.$spacing-05 !important;
+  }
+
+  ::placeholder {
+    color: $text-03;
+  }
+}
+
+.inputContainer {
+  @extend .productiveHeading04;
+  height: 4.875rem;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  color: $text-02;
+  background-color: $ui-01;
+
+  &.focused {
+    outline: layout.$spacing-01 solid colors.$blue-60;
+
+    input {
+      outline: none !important;
+    }
+
+    input[data-invalid]:not(:focus) {
+      outline: none;
+    }
+
+    svg {
+      display: none;
+    }
+  }
+}
+
+:global(.omrs-breakpoint-lt-desktop) .inputContainer {
+  background-color: $ui-02;
+}
+
+.inputContainer {
+  &:global(.red) {
+    background-color: colors.$red-20;
+
+    input {
+      background-color: colors.$red-20;
+    }
+  }
+
+  &:global(.green) {
+    background-color: colors.$green-20;
+
+    input {
+      background-color: colors.$green-20;
+    }
+  }
+
+  &:global(.yellow) {
+    background-color: colors.$yellow-10;
+    input {
+      background-color: colors.$yellow-10;
+    }
+  }
+}
+
+.numberInput {
+  svg {
+    display: none;
+  }
+
+  input[data-invalid]:not(:focus) {
+    outline: none !important;
+  }
+}
+
+.textarea {
+  border: none;
+  @extend .bodyLong01;
+  text-align: left;
+
+  textarea {
+    border-bottom: none;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.centered {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.unitName {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-03;
+}
+
+.invalidInputError {
+  max-width: 11rem;
+  color: $danger;
+  margin-bottom: layout.$spacing-03;
+}
+
+.layer {
+  width: 100%;
+}
+
+.labelContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.invalidInput {
+  outline: layout.$spacing-01 solid $danger;
+
+  &.focused {
+    border: none;
+  }
+}
+
+.invalidInputIcon {
+  svg {
+    color: $danger;
+  }
+}
+
+.critical-value {
+  background-color: colors.$red-10;
+  .numberInput {
+    svg {
+      display: none;
+    }
+
+    input {
+      background-color: colors.$red-10;
+    }
+
+    input[data-invalid]:not(:focus) {
+      outline: none;
+    }
+  }
+}
+
+.critically-low,
+.critically-high,
+.low,
+.high {
+  &::after {
+    @include type.type-style('heading-compact-01');
+    color: $text-02;
+  }
+}
+
+.low::after {
+  content: ' ↓';
+}
+
+.critically-low::after {
+  content: ' ↓↓';
+}
+
+.high::after {
+  content: ' ↑';
+}
+
+.critically-high::after {
+  content: ' ↑↑';
+}
+
+.inputInTabletView {
+  &.inputWithAbnormalValue {
+    .inputContainer {
+      background-color: colors.$red-20;
+
+      .numberInput {
+        input {
+          background-color: colors.$red-20;
+          outline: none;
+        }
+      }
+    }
+  }
+}
+
+.readonly {
+  cursor: default;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .readonly {
+  background-color: colors.$gray-10;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .readonly {
+  background-color: colors.$white-0;
+}
+
+.valueStatusContainer {
+  margin-top: 0.5rem;
+  padding: 0.75rem 1rem;
+  background-color: #f4f4f4;
+  border-left: 4px solid;
+  border-radius: 4px;
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.statusHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.statusLevel {
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.statusMessage {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #525252;
+  line-height: 1.4;
+}
+
+.rangeIndicator {
+  margin-top: 0.75rem;
+}
+
+.rangeBar {
+  position: relative;
+  display: flex;
+  height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+}
+
+.rangeSegment {
+  flex: 1;
+
+  &[data-level='critical-low'] {
+    background-color: #da1e28;
+  }
+
+  &[data-level='low'] {
+    background-color: #f1c21b;
+  }
+
+  &[data-level='normal'] {
+    background-color: #24a148;
+  }
+
+  &[data-level='high'] {
+    background-color: #f1c21b;
+  }
+
+  &[data-level='critical-high'] {
+    background-color: #da1e28;
+  }
+}
+
+.currentValueMarker {
+  position: absolute;
+  top: -4px;
+  width: 4px;
+  height: 16px;
+  border-radius: 2px;
+  transform: translateX(-50%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  z-index: 1;
+}
+
+.rangeLabels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: #8d8d8d;
+  margin-top: 0.25rem;
+}
+
+.rangeLabel {
+  white-space: nowrap;
+}

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

@@ -0,0 +1,200 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { type ConceptMetadata } from '../common';
+import { type VitalsBiometricsFormData } from '../schema';
+import { VitalsAndBiometricsFieldValuesMap } from '../record-vitals.resource';
+import { FHIRInterpretation, ObservationInterpretation, ObsReferenceRanges } from '../type';
+
+export function calculateBodyMassIndex(
+  weight: number,
+  height: number,
+  weightUnit: 'lb' | 'lbs' | 'g',
+  heightUnit: 'm' | 'cm' | 'in',
+) {
+  if (weight > 0 && height > 0) {
+    // Convert weight to kg
+    let weightInKg = weight;
+    if (weightUnit === 'lb' || weightUnit === 'lbs') {
+      weightInKg = weight * 0.453592;
+    } else if (weightUnit === 'g') {
+      weightInKg = weight / 1000;
+    }
+
+    // Convert height to cm
+    let heightInCm = height;
+    if (heightUnit === 'm') {
+      heightInCm = height * 100;
+    } else if (heightUnit === 'in') {
+      heightInCm = height * 2.54;
+    }
+
+    return Number((weightInKg / (heightInCm / 100) ** 2).toFixed(1));
+  }
+  return null;
+}
+
+export function assessValue(value: number | undefined, range?: ObsReferenceRanges): ObservationInterpretation {
+  if (range && value) {
+    if (range.hiCritical && value >= range.hiCritical) {
+      return 'critically_high';
+    }
+
+    if (range.hiNormal && value > range.hiNormal) {
+      return 'high';
+    }
+
+    if (range.lowCritical && value <= range.lowCritical) {
+      return 'critically_low';
+    }
+
+    if (range.lowNormal && value < range.lowNormal) {
+      return 'low';
+    }
+  }
+
+  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';
+  }
+
+  // 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';
+  }
+
+  if (systolicAssessment === 'critically_low' || diastolicAssessment === 'critically_low') {
+    return 'critically_low';
+  }
+
+  if (systolicAssessment === 'high' || diastolicAssessment === 'high') {
+    return 'high';
+  }
+
+  if (systolicAssessment === 'low' || diastolicAssessment === 'low') {
+    return 'low';
+  }
+
+  return 'normal';
+}
+
+export function generatePlaceholder(value: string) {
+  switch (value) {
+    case 'BMI':
+      return '';
+
+    case 'Temperature':
+    case 'Weight':
+      return '--.-';
+
+    case 'Height':
+    case 'diastolic':
+    case 'systolic':
+    case 'Pulse':
+      return '---';
+
+    default:
+      return '--';
+  }
+}
+
+export function getReferenceRangesForConcept(
+  conceptUuid: string | undefined | null,
+  conceptMetadata: Array<ConceptMetadata> | undefined,
+): ConceptMetadata | undefined {
+  if (!conceptUuid || !conceptMetadata?.length) {
+    return undefined;
+  }
+
+  return conceptMetadata?.find((metadata) => metadata.uuid === conceptUuid);
+}
+
+export function prepareObsForSubmission(
+  formData: VitalsBiometricsFormData,
+  dirtyFields: Record<string, boolean>,
+  formContext: 'creating' | 'editing',
+  initialFieldValuesMap: VitalsAndBiometricsFieldValuesMap,
+  fieldToConceptMap: Record<string, string>,
+): {
+  toBeVoided: Array<OpenmrsResource>;
+  newObs: Array<OpenmrsResource>;
+} {
+  return Object.entries(formData).reduce(
+    (obsForSubmission, [field, newValue]) => {
+      if (!fieldToConceptMap[`${field}Uuid`]) {
+        console.error(`Missing concept mapping for field: ${field}`);
+        return obsForSubmission;
+      }
+      if (formContext === 'editing' && initialFieldValuesMap.has(field) && dirtyFields[field]) {
+        // void old obs
+        const { obs } = initialFieldValuesMap.get(field);
+        obsForSubmission.toBeVoided.push({
+          uuid: obs.uuid,
+          voided: true,
+        });
+
+        if (newValue) {
+          obsForSubmission.newObs.push({
+            concept: fieldToConceptMap[`${field}Uuid`],
+            value: newValue,
+          });
+        }
+      } else if (dirtyFields[field] && newValue) {
+        // create new obs
+        obsForSubmission.newObs.push({
+          concept: fieldToConceptMap[`${field}Uuid`],
+          value: newValue,
+        });
+      }
+
+      return obsForSubmission;
+    },
+    {
+      toBeVoided: [],
+      newObs: [],
+    },
+  );
+}