@digihmis/esm-triage-app 1.0.0

package/src/queue-room-table/queue-room-table.scss

@@ -0,0 +1,193 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.activeVisitsContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  width: 100%;
+  margin: 1rem auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    margin: 0.5rem auto;
+    max-width: 100vw;
+    border-left: none;
+    border-right: none;
+  }
+}
+
+.tableContainer {
+  width: 100%;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    overflow-x: auto;
+  }
+}
+
+.activeVisitsTable {
+  width: 100%;
+
+  th,
+  td {
+    white-space: nowrap;
+    text-align: left;
+  }
+
+  tbody tr[data-parent-row] {
+    &:nth-last-of-type(2) > td {
+      border-bottom: none;
+    }
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    th,
+    td {
+      padding: layout.$spacing-03;
+      font-size: 0.875rem;
+    }
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    th,
+    td {
+      padding: layout.$spacing-02;
+      font-size: 0.8125rem;
+    }
+  }
+}
+
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: layout.$spacing-07;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-05;
+  }
+}
+
+.emptyStateContainer {
+  border: 1px solid colors.$gray-20;
+  padding: 3rem 0;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    padding: 2rem 0;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: 1.5rem 0;
+    border-left: none;
+    border-right: none;
+  }
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+  background: colors.$gray-20;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    width: 90%;
+    padding: layout.$spacing-04;
+  }
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    text-align: center;
+  }
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    @include type.type-style('heading-compact-01');
+  }
+}
+
+.emptyStateHelperText {
+  :global(.omrs-breakpoint-lt-tablet) & {
+    font-size: 0.875rem;
+    padding: 0 layout.$spacing-03;
+  }
+}
+
+.waitTime {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: layout.$spacing-01;
+    font-size: 0.75rem;
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+.longWait {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: layout.$spacing-02;
+  }
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  // flex-wrap: wrap;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    gap: layout.$spacing-02;
+    flex-direction: row;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: layout.$spacing-02;
+    flex-direction: row;
+
+    button {
+      font-size: 0.75rem;
+      padding: layout.$spacing-02 layout.$spacing-03;
+    }
+  }
+}
+
+.pagination {
+  background-color: colors.$gray-20;
+  border: 1px solid colors.$gray-20;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    font-size: 0.875rem;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-wrap: wrap;
+    padding: layout.$spacing-03;
+
+    :global(.cds--pagination__left),
+    :global(.cds--pagination__right) {
+      width: 100%;
+      justify-content: center;
+      margin: layout.$spacing-02 0;
+    }
+  }
+}

package/src/queue-room-table/type/index.ts

@@ -0,0 +1,30 @@
+export interface QueueEntry {
+  uuid: string;
+  display: string;
+  patient: {
+    uuid: string;
+    display: string;
+    person: {
+      display: string;
+      age: number;
+      gender: string;
+    };
+  };
+  priority: {
+    uuid: string;
+    display: string;
+  };
+  status: {
+    uuid: string;
+    display: string;
+  };
+  visit: {
+    uuid: string;
+  };
+  queueRoom: {
+    uuid: string;
+    display: string;
+  };
+  startedAt: string;
+  sortWeight: number;
+}

package/src/queue-room-table/useQueueActions.ts

@@ -0,0 +1,24 @@
+import { useConfig } from '@openmrs/esm-framework';
+import { updateQueueEntryStatus } from './queue-room-table.resource';
+
+export const useQueueActions = () => {
+  const config = useConfig();
+
+  const servePatient = async (queueEntryUuid: string) => {
+    return updateQueueEntryStatus(
+      queueEntryUuid,
+      config.concepts.inServiceStatusUuid,
+      config.concepts.completedStatusUuid,
+    );
+  };
+
+  const completeService = async (queueEntryUuid: string) => {
+    return updateQueueEntryStatus(
+      queueEntryUuid,
+      config.concepts.completedStatusUuid,
+      config.concepts.completedStatusUuid,
+    );
+  };
+
+  return { servePatient, completeService };
+};

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

@@ -0,0 +1,19 @@
+export {
+  createOrUpdateVitalsAndBiometrics,
+  deleteEncounter,
+  invalidateCachedVitalsAndBiometrics,
+  useConceptUnits,
+  useEncounterVitalsAndBiometrics,
+  useVitalsAndBiometrics,
+  useVitalsConceptMetadata,
+  withUnit,
+  type ConceptMetadata,
+} from '../record-vitals.resource';
+export {
+  assessValue,
+  calculateBodyMassIndex,
+  generatePlaceholder,
+  getReferenceRangesForConcept,
+  interpretBloodPressure,
+} from '../helper';
+export type { ObservationInterpretation, PatientVitalsAndBiometrics } from '../type';

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

@@ -0,0 +1,433 @@
+import React, { Fragment, useId, useState } from 'react';
+import classNames from 'classnames';
+import { type Control, Controller } from 'react-hook-form';
+import { FormLabel, NumberInput, TextArea } from '@carbon/react';
+import { Warning, WarningAlt, ErrorFilled, Misuse, CheckmarkFilled } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { useLayoutType, ResponsiveWrapper } from '@openmrs/esm-framework';
+import { generatePlaceholder } from '../common';
+import styles from './vitals-biometrics-input.scss';
+import { VitalsBiometricsFormData } from '../schema';
+
+type fieldId =
+  | 'computedBodyMassIndex'
+  | 'diastolicBloodPressure'
+  | 'generalPatientNote'
+  | 'height'
+  | 'midUpperArmCircumference'
+  | 'oxygenSaturation'
+  | 'pulse'
+  | 'respiratoryRate'
+  | 'systolicBloodPressure'
+  | 'temperature'
+  | 'weight';
+
+type AbnormalValue = 'critically_low' | 'critically_high' | 'high' | 'low';
+type FieldTypes = 'number' | 'textarea';
+
+interface ReferenceRange {
+  absoluteHigh?: number;
+  criticalHigh?: number;
+  normalHigh?: number;
+  normalLow?: number;
+  criticalLow?: number;
+  absoluteLow?: number;
+}
+
+interface ValueCategory {
+  level: 'absoluteHigh' | 'criticalHigh' | 'normalHigh' | 'normalLow' | 'criticalLow' | 'absoluteLow' | 'normal';
+  severity: 'critical' | 'warning' | 'info' | 'normal';
+  message: string;
+  icon: React.ComponentType<any>;
+  color: string;
+}
+
+interface VitalsAndBiometricsInputProps {
+  control: Control<VitalsBiometricsFormData>;
+  fieldStyles?: React.CSSProperties;
+  fieldWidth?: string;
+  fieldProperties: Array<{
+    className?: string;
+    id: fieldId;
+    invalid?: boolean;
+    max?: number | null;
+    min?: number | null;
+    name: string;
+    separator?: string;
+    type?: FieldTypes;
+  }>;
+  interpretation?: string;
+  isValueWithinReferenceRange?: boolean;
+  label: string;
+  muacColorCode?: string;
+  placeholder?: string;
+  readOnly?: boolean;
+  referenceRange?: ReferenceRange;
+  showErrorMessage?: boolean;
+  unitSymbol?: string;
+  useMuacColors?: boolean;
+}
+
+const VitalsAndBiometricsInput: React.FC<VitalsAndBiometricsInputProps> = ({
+  control,
+  fieldProperties,
+  fieldStyles,
+  fieldWidth,
+  interpretation,
+  isValueWithinReferenceRange = true,
+  label,
+  muacColorCode,
+  placeholder,
+  readOnly,
+  referenceRange,
+  showErrorMessage,
+  unitSymbol,
+  useMuacColors,
+}) => {
+  const { t } = useTranslation();
+  const fieldId = useId();
+  const isTablet = useLayoutType() === 'tablet';
+  const [invalid, setInvalid] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [currentValue, setCurrentValue] = useState<number | undefined>();
+  const [valueCategory, setValueCategory] = useState<ValueCategory | null>(null);
+
+  const abnormalValues: Array<AbnormalValue> = ['critically_low', 'critically_high', 'high', 'low'];
+  const hasAbnormalValue = !isFocused && interpretation && abnormalValues.includes(interpretation as AbnormalValue);
+
+  function categorizeValue(value: number): ValueCategory | null {
+    if (!referenceRange) {
+      return null;
+    }
+
+    const { absoluteHigh, criticalHigh, normalHigh, normalLow, criticalLow, absoluteLow } = referenceRange;
+
+    // Check absolute high
+    if (absoluteHigh !== undefined && value > absoluteHigh) {
+      return {
+        level: 'absoluteHigh',
+        severity: 'critical',
+        message: t('absoluteHighError', 'Absolute High: Value {{value}} exceeds maximum safe limit of {{max}}', {
+          value,
+          max: absoluteHigh,
+        }),
+        icon: Misuse,
+        color: '#da1e28',
+      };
+    }
+
+    // Check critical high
+    if (criticalHigh !== undefined && value > criticalHigh) {
+      return {
+        level: 'criticalHigh',
+        severity: 'critical',
+        message: t(
+          'criticalHighError',
+          'Critical High: Value {{value}} is dangerously high (safe range: {{normalLow}}-{{normalHigh}})',
+          { value, normalLow, normalHigh },
+        ),
+        icon: ErrorFilled,
+        color: '#ff832b',
+      };
+    }
+
+    // Check normal high
+    if (normalHigh !== undefined && value > normalHigh) {
+      return {
+        level: 'normalHigh',
+        severity: 'warning',
+        message: t('normalHighWarning', 'Above Normal: {{value}} exceeds normal range ({{normalLow}}-{{normalHigh}})', {
+          value,
+          normalLow,
+          normalHigh,
+        }),
+        icon: WarningAlt,
+        color: '#f1c21b',
+      };
+    }
+
+    // Check if below normal low
+    if (normalLow !== undefined && value < normalLow) {
+      // Check absolute low
+      if (absoluteLow !== undefined && value < absoluteLow) {
+        return {
+          level: 'absoluteLow',
+          severity: 'critical',
+          message: t('absoluteLowError', 'Absolute Low: Value {{value}} is below minimum safe limit of {{min}}', {
+            value,
+            min: absoluteLow,
+          }),
+          icon: Misuse,
+          color: '#da1e28',
+        };
+      }
+
+      // Check critical low
+      if (criticalLow !== undefined && value < criticalLow) {
+        return {
+          level: 'criticalLow',
+          severity: 'critical',
+          message: t(
+            'criticalLowError',
+            'Critical Low: Value {{value}} is dangerously low (safe range: {{normalLow}}-{{normalHigh}})',
+            { value, normalLow, normalHigh },
+          ),
+          icon: ErrorFilled,
+          color: '#ff832b',
+        };
+      }
+
+      // Normal low
+      return {
+        level: 'normalLow',
+        severity: 'warning',
+        message: t('normalLowWarning', 'Below Normal: {{value}} is under normal range ({{normalLow}}-{{normalHigh}})', {
+          value,
+          normalLow,
+          normalHigh,
+        }),
+        icon: WarningAlt,
+        color: '#f1c21b',
+      };
+    }
+
+    // Value is normal
+    return {
+      level: 'normal',
+      severity: 'normal',
+      message: t('normalValue', 'Value is within normal range'),
+      icon: CheckmarkFilled,
+      color: '#24a148',
+    };
+  }
+
+  function checkValidity(value, onChange) {
+    const numValue = Number(value);
+    setInvalid(!(numValue || value === ''));
+
+    if (!invalid) {
+      const finalValue = value === '' ? undefined : numValue;
+      onChange(finalValue);
+      setCurrentValue(finalValue);
+
+      if (finalValue !== undefined && referenceRange) {
+        const category = categorizeValue(finalValue);
+        setValueCategory(category);
+      } else {
+        setValueCategory(null);
+      }
+    }
+  }
+
+  function handleFocusChange(isFocused: boolean) {
+    setIsFocused(isFocused);
+  }
+
+  function calculateMarkerPosition(value: number | undefined, range: ReferenceRange): string {
+    if (!value) {
+      return '50%';
+    }
+
+    const min = range.absoluteLow ?? range.criticalLow ?? range.normalLow ?? 0;
+    const max = range.absoluteHigh ?? range.criticalHigh ?? range.normalHigh ?? 100;
+
+    const clampedValue = Math.max(min, Math.min(max, value));
+    const percentage = ((clampedValue - min) / (max - min)) * 100;
+
+    return `${Math.max(0, Math.min(100, percentage))}%`;
+  }
+
+  const ValueStatusBadge = () => {
+    if (!showInvalidInputError || !valueCategory) {
+      return null;
+    }
+
+    const IconComponent = valueCategory.icon;
+
+    return (
+      <div
+        className={styles.valueStatusContainer}
+        style={{
+          borderLeftColor: valueCategory.color,
+        }}>
+        <div className={styles.statusHeader}>
+          <IconComponent
+            style={{
+              color: valueCategory.color,
+              minWidth: '20px',
+              minHeight: '20px',
+              width: '20px',
+              height: '20px',
+            }}
+            aria-label={`${valueCategory.severity} status icon`}
+          />
+          <span className={styles.statusLevel} style={{ color: valueCategory.color }}>
+            {valueCategory.level
+              .replace(/([A-Z])/g, ' $1')
+              .replace(/^./, (str) => str.toUpperCase())
+              .trim()}
+          </span>
+        </div>
+        <p className={styles.statusMessage}>{valueCategory.message}</p>
+        {referenceRange && (
+          <div className={styles.rangeIndicator}>
+            <div className={styles.rangeBar}>
+              <span className={styles.rangeSegment} data-level="critical-low" title="Critical Low" />
+              <span className={styles.rangeSegment} data-level="low" title="Below Normal" />
+              <span className={styles.rangeSegment} data-level="normal" title="Normal Range" />
+              <span className={styles.rangeSegment} data-level="high" title="Above Normal" />
+              <span className={styles.rangeSegment} data-level="critical-high" title="Critical High" />
+              <span
+                className={styles.currentValueMarker}
+                style={{
+                  left: calculateMarkerPosition(currentValue, referenceRange),
+                  backgroundColor: valueCategory.color,
+                }}
+                title={`Current: ${currentValue}`}
+              />
+            </div>
+            <div className={styles.rangeLabels}>
+              <span className={styles.rangeLabel}>
+                {referenceRange.absoluteLow ?? referenceRange.criticalLow ?? referenceRange.normalLow}
+              </span>
+              <span className={styles.rangeLabel}>
+                {referenceRange.normalLow} - {referenceRange.normalHigh}
+              </span>
+              <span className={styles.rangeLabel}>
+                {referenceRange.absoluteHigh ?? referenceRange.criticalHigh ?? referenceRange.normalHigh}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const isInvalidInput = !isValueWithinReferenceRange || invalid || (valueCategory && valueCategory.level !== 'normal');
+  const showInvalidInputError = Boolean(showErrorMessage && isInvalidInput && !isFocused);
+  const errorMessageClass = showInvalidInputError ? styles.invalidInput : '';
+
+  const containerClasses = classNames(styles.container, {
+    [styles.inputInTabletView]: isTablet,
+    [styles.inputWithAbnormalValue]: hasAbnormalValue,
+  });
+
+  const inputClasses = classNames(styles.inputContainer, {
+    [styles['critical-value']]: hasAbnormalValue,
+    [styles.focused]: isFocused,
+    [styles.readonly]: readOnly,
+    [muacColorCode]: useMuacColors,
+    [errorMessageClass]: true,
+  });
+
+  return (
+    <>
+      <div className={containerClasses} style={{ width: fieldWidth }}>
+        <section className={styles.labelContainer}>
+          <span className={styles.label} id={`${fieldId}-label`}>
+            {label}
+          </span>
+
+          {Boolean(hasAbnormalValue) ? (
+            <span
+              className={styles[interpretation.replace('_', '-')]}
+              title={t('abnormalValue', 'Abnormal value')}
+              data-interpretation={interpretation}>
+              &nbsp;
+            </span>
+          ) : null}
+
+          {showInvalidInputError ? (
+            <span className={styles.invalidInputIcon}>
+              <Warning />
+            </span>
+          ) : null}
+        </section>
+        <section className={inputClasses} style={{ ...fieldStyles }}>
+          <div
+            className={classNames({
+              [styles.centered]: !isTablet || unitSymbol === 'mmHg',
+            })}>
+            {fieldProperties.map((fieldProperty) => {
+              if (fieldProperty.type === 'number') {
+                const numberInputClasses = classNames(styles.numberInput, fieldProperty.className);
+
+                return (
+                  <Fragment key={fieldProperty.id}>
+                    <ResponsiveWrapper>
+                      <Controller
+                        name={fieldProperty.id}
+                        control={control}
+                        render={({ field: { onChange, ref, value } }) => {
+                          return (
+                            <NumberInput
+                              allowEmpty
+                              className={numberInputClasses}
+                              defaultValue={''}
+                              disableWheel
+                              hideSteppers
+                              id={`${fieldId}-${fieldProperty.id}`}
+                              max={fieldProperty.max ?? undefined}
+                              min={fieldProperty.min ?? undefined}
+                              name={fieldProperty.name}
+                              onBlur={() => handleFocusChange(false)}
+                              onChange={(event, { value }) => checkValidity(value, onChange)}
+                              onFocus={() => handleFocusChange(true)}
+                              placeholder={generatePlaceholder(fieldProperty.name)}
+                              readOnly={readOnly}
+                              ref={ref}
+                              style={{ ...fieldStyles }}
+                              title={fieldProperty.name}
+                              type="number"
+                              value={value}
+                            />
+                          );
+                        }}
+                      />
+                    </ResponsiveWrapper>
+                    {fieldProperty?.separator}
+                  </Fragment>
+                );
+              }
+
+              if (fieldProperty.type === 'textarea') {
+                return (
+                  <ResponsiveWrapper key={fieldProperty.id}>
+                    <Controller
+                      name={fieldProperty.id}
+                      control={control}
+                      render={({ field: { onChange, ref, value } }) => (
+                        <TextArea
+                          className={styles.textarea}
+                          id={`${fieldId}-${fieldProperty.id}`}
+                          labelText={''}
+                          aria-labelledby={`${fieldId}-label`}
+                          maxCount={100}
+                          name={fieldProperty.name}
+                          onBlur={() => handleFocusChange(false)}
+                          onChange={onChange}
+                          onFocus={() => handleFocusChange(true)}
+                          placeholder={placeholder}
+                          ref={ref}
+                          rows={2}
+                          style={{ ...fieldStyles }}
+                          title={fieldProperty.name}
+                          value={value}
+                        />
+                      )}
+                    />
+                  </ResponsiveWrapper>
+                );
+              }
+            })}
+          </div>
+          {Boolean(unitSymbol) && <p className={styles.unitName}>{unitSymbol}</p>}
+        </section>
+      </div>
+
+      <ValueStatusBadge />
+    </>
+  );
+};
+
+export default VitalsAndBiometricsInput;