From 889bb4ef6423a7c091c54db54d02c091b3393f11 Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Sun, 22 Oct 2023 03:17:29 +0300
Subject: [PATCH 01/17] implement the vitals input states

---
 .../vitals-biometrics-form.component.tsx      | 30 ++++++++
 .../vitals-biometrics-input.component.tsx     | 49 ++++++++++---
 .../vitals-biometrics-input.scss              | 73 ++++++++++++++++++-
 .../src/vitals/vitals.resource.tsx            |  4 +-
 4 files changed, 144 insertions(+), 12 deletions(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
index 33d1e0c11d..acee027e27 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
@@ -26,6 +26,8 @@ import {
 } from './vitals-biometrics-form.utils';
 import { savePatientVitals, useVitals } from '../vitals.resource';
 import VitalsBiometricInput from './vitals-biometrics-input.component';
+import { assessValue, getReferenceRangesForConcept } from '../vitals.resource';
+
 import styles from './vitals-biometrics-form.scss';
 
 const vitalsBiometricsFormSchema = z
@@ -232,6 +234,10 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
               <VitalsBiometricInput
                 title={t('bloodPressure', 'Blood Pressure')}
                 control={control}
+                interpretation={assessValue(
+                  diastolicBloodPressure,
+                  getReferenceRangesForConcept(config.concepts.systolicBloodPressureUuid, conceptMetadata),
+                )}
                 textFields={[
                   {
                     name: t('systolic', 'systolic'),
@@ -268,6 +274,10 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
               <VitalsBiometricInput
                 title={t('pulse', 'Pulse')}
                 control={control}
+                interpretation={assessValue(
+                  pulse,
+                  getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata),
+                )}
                 textFields={[
                   {
                     name: t('pulse', 'Pulse'),
@@ -286,6 +296,10 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
               <VitalsBiometricInput
                 title={t('respirationRate', 'Respiration Rate')}
                 control={control}
+                interpretation={assessValue(
+                  respiratoryRate,
+                  getReferenceRangesForConcept(config.concepts.respiratoryRateUuid, conceptMetadata),
+                )}
                 textFields={[
                   {
                     name: t('respirationRate', 'Respiration Rate'),
@@ -307,6 +321,10 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
               <VitalsBiometricInput
                 title={t('spo2', 'SpO2')}
                 control={control}
+                interpretation={assessValue(
+                  oxygenSaturation,
+                  getReferenceRangesForConcept(config.concepts.oxygenSaturationUuid, conceptMetadata),
+                )}
                 textFields={[
                   {
                     name: t('oxygenSaturation', 'Oxygen Saturation'),
@@ -329,6 +347,10 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
               <VitalsBiometricInput
                 title={t('temp', 'Temp')}
                 control={control}
+                interpretation={assessValue(
+                  temperature,
+                  getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptMetadata),
+                )}
                 textFields={[
                   {
                     name: t('temperature', 'Temperature'),
@@ -375,6 +397,10 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
               <VitalsBiometricInput
                 title={t('weight', 'Weight')}
                 control={control}
+                interpretation={assessValue(
+                  weight,
+                  getReferenceRangesForConcept(config.concepts.weightUuid, conceptMetadata),
+                )}
                 textFields={[
                   {
                     name: t('weight', 'Weight'),
@@ -396,6 +422,10 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
               <VitalsBiometricInput
                 title={t('height', 'Height')}
                 control={control}
+                interpretation={assessValue(
+                  height,
+                  getReferenceRangesForConcept(config.concepts.heightUuid, conceptMetadata),
+                )}
                 textFields={[
                   {
                     name: t('height', 'Height'),
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index 471d16cda4..69e0842324 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -40,6 +40,7 @@ interface VitalsBiometricInputProps {
   placeholder?: string;
   disabled?: boolean;
   isWithinNormalRange?: boolean;
+  interpretation?: string;
 }
 
 const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
@@ -54,10 +55,24 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
   muacColorCode,
   useMuacColors,
   isWithinNormalRange = true,
+  interpretation,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const [invalid, setInvalid] = useState(false);
+  const [isFocused, setFocused] = useState(false);
+
+  const handleFocus = () => {
+    setFocused(true);
+  };
+
+  const handleBlur = () => {
+    setFocused(false);
+  };
+
+  const flaggedCritical =
+    interpretation && ['critically_low', 'critically_high', 'high', 'low'].includes(interpretation);
+  const flaggedAbnormal = interpretation && interpretation !== 'normal';
 
   function checkValidity(value, onChange) {
     setInvalid(!(Number(value) || value === ''));
@@ -68,12 +83,29 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
   }
 
   return (
-    <div className={styles.inputContainer} style={{ width: textFieldWidth }}>
-      <p className={styles.vitalsBiometricInputLabel01}>{title}</p>
+    <div
+      className={`${styles.inputContainer} ${isTablet ? styles.inputInTabletView : ''} ${
+        flaggedCritical ? styles.isCriticalInput : ''
+      }`}
+      style={{ width: textFieldWidth }}
+    >
+      <div className={styles.labelAndIcons}>
+        <p className={styles.vitalsBiometricInputLabel01}>{title}</p>
+        {flaggedAbnormal ? (
+          <div title="abnormal value">
+            {interpretation === 'high' ? <span className={styles.high}></span> : null}
+            {interpretation === 'critically_high' ? <span className={styles['critically-high']}></span> : null}
+            {interpretation === 'low' ? <span className={styles.low}></span> : null}
+            {interpretation === 'critically_low' ? <span className={styles['critically-low']}></span> : null}
+          </div>
+        ) : null}
+      </div>
       <div
-        className={`${styles.textInputContainer} ${disabled && styles.disabledInput} ${
-          !isWithinNormalRange && styles.danger
-        } ${useMuacColors ? muacColorCode : undefined}`}
+        className={`${styles.textInputContainer} ${isFocused ? styles.focused : ''} ${
+          flaggedCritical && styles['critical-value']
+        } ${flaggedAbnormal && styles['abnormal-value']} ${disabled && styles.disabledInput} ${
+          useMuacColors ? muacColorCode : undefined
+        }`}
         style={{ ...textFieldStyles }}
       >
         <div className={styles.centerDiv}>
@@ -87,9 +119,7 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
                     render={({ field: { onBlur, onChange, value, ref } }) => (
                       <NumberInput
                         allowEmpty
-                        className={`${styles.textInput} ${disabled && styles.disabledInput} ${val.className} ${
-                          !isWithinNormalRange && styles.danger
-                        }`}
+                        className={`${styles.textInput} ${disabled && styles.disabledInput} ${val.className}`}
                         defaultValue="--"
                         disabled={disabled}
                         disableWheel
@@ -99,7 +129,8 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
                         max={val.max}
                         min={val.min}
                         name={val.name}
-                        onBlur={onBlur}
+                        onBlur={handleBlur}
+                        onFocus={handleFocus}
                         onChange={(e) => checkValidity(e.target.value, onChange)}
                         style={{ ...textFieldStyles }}
                         ref={ref}
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
index 4d0e7dbd3c..6d7b6550b7 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
@@ -57,6 +57,14 @@
   padding: spacing.$spacing-03;
   color: $text-02;
   background-color: $ui-01;
+
+  &.focused {
+    border: 2px solid colors.$blue-60;
+
+    input {
+      outline: none !important;
+    }
+  }
 }
 
 :global(.omrs-breakpoint-lt-desktop) .textInputContainer {
@@ -125,4 +133,67 @@
 
 .layer {
   width: 100%;
-}
\ No newline at end of file
+}
+
+.labelAndIcons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.critical-value {
+  background-color: colors.$red-10;
+  .textInput {
+    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 {
+  &.isCriticalInput {
+    .textInputContainer {
+      background-color: colors.$red-20;
+
+      .textInput {
+        input {
+          background-color: colors.$red-20;
+          outline: none;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx
index db4b27167c..8884f3c038 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx
@@ -244,7 +244,7 @@ export function editPatientVitals(
 }
 
 export function assessValue(value: number, range: ObsMetaInfo): ObservationInterpretation {
-  if (range?.hiCritical && value >= range.hiCritical) {
+  if ((range?.hiCritical && value >= range.hiCritical) || (range?.hiAbsolute && value >= range.hiAbsolute)) {
     return 'critically_high';
   }
 
@@ -252,7 +252,7 @@ export function assessValue(value: number, range: ObsMetaInfo): ObservationInter
     return 'high';
   }
 
-  if (range?.lowCritical && value <= range.lowCritical) {
+  if ((range?.lowCritical && value <= range.lowCritical) || (range?.lowAbsolute && value <= range.lowAbsolute)) {
     return 'critically_low';
   }
 

From 588af903779b99e542117769d9aa5897af929e96 Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Mon, 23 Oct 2023 00:23:06 +0300
Subject: [PATCH 02/17] add mock functions to the tests

---
 .../vitals-biometrics-form/vitals-biometrics-form.test.tsx      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
index 1bfc1a5881..f6af4751d2 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
@@ -61,6 +61,8 @@ jest.mock('@openmrs/esm-patient-common-lib', () => {
 
 jest.mock('../vitals.resource', () => ({
   savePatientVitals: jest.fn(),
+  assessValue: jest.fn(),
+  getReferenceRangesForConcept: jest.fn(),
   useVitals: jest.fn().mockImplementation(() => ({
     mutate: jest.fn,
   })),

From 3bebb9e0b91b4c6a8463c00986fa4ebb3e666138 Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Mon, 23 Oct 2023 15:37:36 +0300
Subject: [PATCH 03/17] add input placeholders as per zero height docs

---
 .../vitals-biometrics-form.utils.ts           |  4 ++++
 .../vitals-biometrics-input.component.tsx     |  2 ++
 .../src/vitals/vitals.resource.tsx            | 20 +++++++++++++++++++
 3 files changed, 26 insertions(+)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.utils.ts b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.utils.ts
index 1b66e0d6ad..18dd26ef41 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.utils.ts
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.utils.ts
@@ -19,6 +19,10 @@ export function isValueWithinReferenceRange(
   }
 
   const concept = conceptMetadata.find((c) => c.uuid === conceptUuid);
+  // Don't validate inputs if the value is empty or the concept is not found
+  if (value === undefined || value === '' || concept === undefined) {
+    return true;
+  }
   return isNumber(concept?.lowAbsolute) && isNumber(concept?.hiAbsolute)
     ? Number(value) >= Number(concept.lowAbsolute) && Number(value) <= Number(concept.hiAbsolute)
     : true;
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index 69e0842324..d5cccf27fc 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -4,6 +4,7 @@ import { FormLabel, Layer, NumberInput, TextArea } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useLayoutType } from '@openmrs/esm-framework';
 import { VitalsBiometricsFormData } from './vitals-biometrics-form.component';
+import { generatePlaceholder } from '../vitals.resource';
 import styles from './vitals-biometrics-input.scss';
 
 type Id =
@@ -119,6 +120,7 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
                     render={({ field: { onBlur, onChange, value, ref } }) => (
                       <NumberInput
                         allowEmpty
+                        placeholder={generatePlaceholder(val.name)}
                         className={`${styles.textInput} ${disabled && styles.disabledInput} ${val.className}`}
                         defaultValue="--"
                         disabled={disabled}
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx
index 8884f3c038..3308463458 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx
@@ -309,3 +309,23 @@ export function interpretBloodPressure(systolic, diastolic, concepts, conceptMet
 
   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 '--';
+  }
+}

From 7317a9e18a80a9d546b1ce6301811e59f00987aa Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Mon, 23 Oct 2023 15:40:36 +0300
Subject: [PATCH 04/17] fix tests

---
 .../vitals-biometrics-form/vitals-biometrics-form.test.tsx       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
index f6af4751d2..0c068a1ba7 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
@@ -63,6 +63,7 @@ jest.mock('../vitals.resource', () => ({
   savePatientVitals: jest.fn(),
   assessValue: jest.fn(),
   getReferenceRangesForConcept: jest.fn(),
+  generatePlaceholder: jest.fn(),
   useVitals: jest.fn().mockImplementation(() => ({
     mutate: jest.fn,
   })),

From a530ad27d374580832afa68361c77bff3d255bd3 Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Wed, 25 Oct 2023 00:10:06 +0300
Subject: [PATCH 05/17] PR feedback

---
 .../vitals-biometrics-form/vitals-biometrics-form.utils.ts | 7 ++-----
 .../vitals-biometrics-input.component.tsx                  | 5 +----
 .../esm-patient-vitals-app/src/vitals/vitals.resource.tsx  | 4 ++--
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.utils.ts b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.utils.ts
index 18dd26ef41..7c54a12f36 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.utils.ts
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.utils.ts
@@ -14,15 +14,12 @@ export function isValueWithinReferenceRange(
   conceptUuid: string,
   value: string | number,
 ) {
-  if (value === undefined || value === '') {
-    return true;
-  }
-
   const concept = conceptMetadata.find((c) => c.uuid === conceptUuid);
-  // Don't validate inputs if the value is empty or the concept is not found
+
   if (value === undefined || value === '' || concept === undefined) {
     return true;
   }
+
   return isNumber(concept?.lowAbsolute) && isNumber(concept?.hiAbsolute)
     ? Number(value) >= Number(concept.lowAbsolute) && Number(value) <= Number(concept.hiAbsolute)
     : true;
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index d5cccf27fc..387470a45d 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -94,10 +94,7 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
         <p className={styles.vitalsBiometricInputLabel01}>{title}</p>
         {flaggedAbnormal ? (
           <div title="abnormal value">
-            {interpretation === 'high' ? <span className={styles.high}></span> : null}
-            {interpretation === 'critically_high' ? <span className={styles['critically-high']}></span> : null}
-            {interpretation === 'low' ? <span className={styles.low}></span> : null}
-            {interpretation === 'critically_low' ? <span className={styles['critically-low']}></span> : null}
+            <span className={styles[interpretation.replace('_', '-')]} />
           </div>
         ) : null}
       </div>
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx
index 3308463458..73108bc6d4 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx
@@ -244,7 +244,7 @@ export function editPatientVitals(
 }
 
 export function assessValue(value: number, range: ObsMetaInfo): ObservationInterpretation {
-  if ((range?.hiCritical && value >= range.hiCritical) || (range?.hiAbsolute && value >= range.hiAbsolute)) {
+  if (range?.hiCritical && value >= range.hiCritical) {
     return 'critically_high';
   }
 
@@ -252,7 +252,7 @@ export function assessValue(value: number, range: ObsMetaInfo): ObservationInter
     return 'high';
   }
 
-  if ((range?.lowCritical && value <= range.lowCritical) || (range?.lowAbsolute && value <= range.lowAbsolute)) {
+  if (range?.lowCritical && value <= range.lowCritical) {
     return 'critically_low';
   }
 

From d662ceb89e21c7e3fdd4d5d7bbdfe3fcc2c369f8 Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Wed, 25 Oct 2023 00:19:39 +0300
Subject: [PATCH 06/17] Remove duplicate variable

---
 .../vitals-biometrics-input.component.tsx                | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index 387470a45d..a8b4826648 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -73,7 +73,6 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
 
   const flaggedCritical =
     interpretation && ['critically_low', 'critically_high', 'high', 'low'].includes(interpretation);
-  const flaggedAbnormal = interpretation && interpretation !== 'normal';
 
   function checkValidity(value, onChange) {
     setInvalid(!(Number(value) || value === ''));
@@ -92,7 +91,7 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
     >
       <div className={styles.labelAndIcons}>
         <p className={styles.vitalsBiometricInputLabel01}>{title}</p>
-        {flaggedAbnormal ? (
+        {flaggedCritical ? (
           <div title="abnormal value">
             <span className={styles[interpretation.replace('_', '-')]} />
           </div>
@@ -101,9 +100,7 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
       <div
         className={`${styles.textInputContainer} ${isFocused ? styles.focused : ''} ${
           flaggedCritical && styles['critical-value']
-        } ${flaggedAbnormal && styles['abnormal-value']} ${disabled && styles.disabledInput} ${
-          useMuacColors ? muacColorCode : undefined
-        }`}
+        } ${disabled && styles.disabledInput} ${useMuacColors ? muacColorCode : undefined}`}
         style={{ ...textFieldStyles }}
       >
         <div className={styles.centerDiv}>
@@ -118,7 +115,7 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
                       <NumberInput
                         allowEmpty
                         placeholder={generatePlaceholder(val.name)}
-                        className={`${styles.textInput} ${disabled && styles.disabledInput} ${val.className}`}
+                        className={`${styles.textInput} ${disabled ? styles.disabledInput : ''} ${val.className}`}
                         defaultValue="--"
                         disabled={disabled}
                         disableWheel

From 7e321ab36a83ca1c69cd907f12b61e38d81811e5 Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Wed, 25 Oct 2023 02:18:11 +0300
Subject: [PATCH 07/17] fix the error state

---
 .../vitals-biometrics-form.component.tsx      |  9 +++++++
 .../vitals-biometrics-input.component.tsx     | 19 +++++++++++---
 .../vitals-biometrics-input.scss              | 26 +++++++++++++++++++
 3 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
index acee027e27..01b8c04ea7 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
@@ -73,6 +73,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
   const [muacColorCode, setMuacColorCode] = useState('');
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const [showErrorNotification, setShowErrorNotification] = useState(false);
+  const [showErrorMessage, setShowErrorMessage] = useState(false);
 
   const { control, handleSubmit, getValues, watch, setValue } = useForm<VitalsBiometricsFormData>({
     mode: 'all',
@@ -128,6 +129,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
   );
 
   const savePatientVitalsAndBiometrics = (data: VitalsBiometricsFormData) => {
+    setShowErrorMessage(true);
     data?.computedBodyMassIndex && delete data.computedBodyMassIndex;
     const patientVitalAndBiometrics = data;
 
@@ -149,6 +151,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
     }
     if (isFieldValid) {
       setIsSubmitting(true);
+      setShowErrorMessage(false);
       const ac = new AbortController();
       savePatientVitals(
         config.vitals.encounterTypeUuid,
@@ -315,6 +318,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   config.concepts['respiratoryRateUuid'],
                   respiratoryRate,
                 )}
+                showErrorMessage={showErrorMessage}
               />
             </Column>
             <Column>
@@ -340,6 +344,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   config.concepts['oxygenSaturationUuid'],
                   oxygenSaturation,
                 )}
+                showErrorMessage={showErrorMessage}
               />
             </Column>
 
@@ -366,6 +371,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   config.concepts['temperatureUuid'],
                   temperature,
                 )}
+                showErrorMessage={showErrorMessage}
               />
             </Column>
           </Row>
@@ -416,6 +422,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   config.concepts['weightUuid'],
                   weight,
                 )}
+                showErrorMessage={showErrorMessage}
               />
             </Column>
             <Column>
@@ -441,6 +448,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   config.concepts['heightUuid'],
                   height,
                 )}
+                showErrorMessage={showErrorMessage}
               />
             </Column>
             <Column>
@@ -479,6 +487,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   config.concepts['midUpperArmCircumferenceUuid'],
                   midUpperArmCircumference,
                 )}
+                showErrorMessage={showErrorMessage}
               />
             </Column>
           </Row>
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index a8b4826648..c57039e4b3 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -1,6 +1,7 @@
 import React, { Fragment, useState } from 'react';
 import { Control, Controller } from 'react-hook-form';
 import { FormLabel, Layer, NumberInput, TextArea } from '@carbon/react';
+import { Warning } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { useLayoutType } from '@openmrs/esm-framework';
 import { VitalsBiometricsFormData } from './vitals-biometrics-form.component';
@@ -42,6 +43,7 @@ interface VitalsBiometricInputProps {
   disabled?: boolean;
   isWithinNormalRange?: boolean;
   interpretation?: string;
+  showErrorMessage?: boolean;
 }
 
 const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
@@ -57,6 +59,7 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
   useMuacColors,
   isWithinNormalRange = true,
   interpretation,
+  showErrorMessage,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -82,6 +85,10 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
     }
   }
 
+  const isInvalidInput = !isWithinNormalRange || invalid;
+  const showInvalidInputError = showErrorMessage && isInvalidInput;
+  const errorMessageClass = showInvalidInputError ? styles.invalidInput : '';
+
   return (
     <div
       className={`${styles.inputContainer} ${isTablet ? styles.inputInTabletView : ''} ${
@@ -95,12 +102,16 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
           <div title="abnormal value">
             <span className={styles[interpretation.replace('_', '-')]} />
           </div>
+        ) : showInvalidInputError ? (
+          <div className={styles.invalidInputIcon}>
+            <Warning />
+          </div>
         ) : null}
       </div>
       <div
         className={`${styles.textInputContainer} ${isFocused ? styles.focused : ''} ${
           flaggedCritical && styles['critical-value']
-        } ${disabled && styles.disabledInput} ${useMuacColors ? muacColorCode : undefined}`}
+        } ${disabled ? styles.disabledInput : ''} ${useMuacColors ? muacColorCode : undefined} ${errorMessageClass}`}
         style={{ ...textFieldStyles }}
       >
         <div className={styles.centerDiv}>
@@ -168,11 +179,11 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
         </div>
         <p className={styles.unitName}>{unitSymbol}</p>
       </div>
-      {(!isWithinNormalRange || invalid) && (
+      {showInvalidInputError ? (
         <FormLabel className={styles.danger}>
-          {t('numericInputError', 'Must be a number with in acceptable ranges')}
+          {t('numericInputError', `Only numbers ${textFields[0].min} - ${textFields[0].max} permitted`)}
         </FormLabel>
-      )}
+      ) : null}
     </div>
   );
 };
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
index 6d7b6550b7..0a7b6bedb7 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
@@ -64,6 +64,14 @@
     input {
       outline: none !important;
     }
+
+    input[data-invalid]:not(:focus) {
+      outline: none;
+    }
+
+    svg {
+      display: none;
+    }
   }
 }
 
@@ -94,6 +102,15 @@
   }
 }
 
+.textInput {
+  svg {
+    display: none;
+  }
+
+  input[data-invalid]:not(:focus) {
+    outline: none !important;
+  }
+}
 .textarea {
   border: none;
   @extend .bodyLong01;
@@ -140,6 +157,15 @@
   justify-content: space-between;
   align-items: center;
 }
+.invalidInput {
+  border: 2px solid $danger;
+}
+
+.invalidInputIcon {
+  svg {
+    color: $danger;
+  }
+}
 
 .critical-value {
   background-color: colors.$red-10;

From 6727447e612be62f4ad852505f7482e426065993 Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Wed, 25 Oct 2023 02:30:26 +0300
Subject: [PATCH 08/17] Fix error message and translations

---
 .../vitals-biometrics-input.component.tsx                    | 5 ++++-
 packages/esm-patient-vitals-app/translations/en.json         | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index c57039e4b3..11f962b81a 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -181,7 +181,10 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
       </div>
       {showInvalidInputError ? (
         <FormLabel className={styles.danger}>
-          {t('numericInputError', `Only numbers ${textFields[0].min} - ${textFields[0].max} permitted`)}
+          {t('numericInputError', `Only numbers "{min}" - "{max}" permitted`, {
+            min: textFields[0].min,
+            max: textFields[0].max,
+          })}
         </FormLabel>
       ) : null}
     </div>
diff --git a/packages/esm-patient-vitals-app/translations/en.json b/packages/esm-patient-vitals-app/translations/en.json
index 0a0f707d69..c10781d297 100644
--- a/packages/esm-patient-vitals-app/translations/en.json
+++ b/packages/esm-patient-vitals-app/translations/en.json
@@ -19,7 +19,7 @@
   "muac": "MUAC",
   "noDataRecorded": "No data has been recorded for this patient",
   "notes": "Notes",
-  "numericInputError": "Must be a number within acceptable ranges",
+  "numericInputError": "Only numbers \"{min}\" - \"{max}\" permitted",
   "other": "Other",
   "overdue": "Overdue",
   "oxygenSaturation": "Oxygen Saturation",

From df473690a5c39d500938f2a49a936324f94617f1 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Mon, 30 Oct 2023 23:52:52 +0300
Subject: [PATCH 09/17] Fix blood pressure interpretation

---
 .../vitals-biometrics-form.component.tsx      | 30 +++++++++----------
 .../vitals-biometrics-form.test.tsx           |  3 +-
 .../vitals-biometrics-form.utils.ts           |  2 +-
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
index 01b8c04ea7..cb1ab97d1a 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Button, ButtonSet, Column, Form, Row, Stack, InlineNotification } from '@carbon/react';
+import { Button, ButtonSet, Column, Form, InlineNotification, Row, Stack } from '@carbon/react';
 import {
   age,
   createErrorHandler,
@@ -20,14 +20,18 @@ import { DefaultWorkspaceProps, useVitalsConceptMetadata } from '@openmrs/esm-pa
 import type { ConfigObject } from '../../config-schema';
 import {
   calculateBodyMassIndex,
-  isValueWithinReferenceRange,
   extractNumbers,
-  getColorCode,
+  getMuacColorCode,
+  isValueWithinReferenceRange,
 } from './vitals-biometrics-form.utils';
-import { savePatientVitals, useVitals } from '../vitals.resource';
+import {
+  assessValue,
+  getReferenceRangesForConcept,
+  interpretBloodPressure,
+  savePatientVitals,
+  useVitals,
+} from '../vitals.resource';
 import VitalsBiometricInput from './vitals-biometrics-input.component';
-import { assessValue, getReferenceRangesForConcept } from '../vitals.resource';
-
 import styles from './vitals-biometrics-form.scss';
 
 const vitalsBiometricsFormSchema = z
@@ -69,7 +73,6 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
   const { currentVisit } = useVisit(patientUuid);
   const { mutate } = useVitals(patientUuid);
   const { data: conceptUnits, conceptMetadata, conceptRanges } = useVitalsConceptMetadata();
-  const [bodyMassIndex, setBodyMassIndex] = useState<number>();
   const [muacColorCode, setMuacColorCode] = useState('');
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const [showErrorNotification, setShowErrorNotification] = useState(false);
@@ -93,13 +96,8 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
   const weight = watch('weight');
   const height = watch('height');
 
-  const isBodyMassIndexValueAbnormal = (bmi: number) => {
-    if (!bmi) return false;
-    return bmi < 18.5 || bmi > 24.9;
-  };
-
   useEffect(() => {
-    getColorCode(extractNumbers(age(patient.patient?.birthDate)), midUpperArmCircumference, setMuacColorCode);
+    getMuacColorCode(extractNumbers(age(patient.patient?.birthDate)), midUpperArmCircumference, setMuacColorCode);
   }, [watch, patient.patient?.birthDate, midUpperArmCircumference]);
 
   const concepts = useMemo(
@@ -237,9 +235,11 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
               <VitalsBiometricInput
                 title={t('bloodPressure', 'Blood Pressure')}
                 control={control}
-                interpretation={assessValue(
+                interpretation={interpretBloodPressure(
+                  systolicBloodPressure,
                   diastolicBloodPressure,
-                  getReferenceRangesForConcept(config.concepts.systolicBloodPressureUuid, conceptMetadata),
+                  config.concepts,
+                  conceptMetadata,
                 )}
                 textFields={[
                   {
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
index 0c068a1ba7..36300636ac 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
@@ -60,10 +60,11 @@ jest.mock('@openmrs/esm-patient-common-lib', () => {
 });
 
 jest.mock('../vitals.resource', () => ({
-  savePatientVitals: jest.fn(),
   assessValue: jest.fn(),
   getReferenceRangesForConcept: jest.fn(),
   generatePlaceholder: jest.fn(),
+  interpretBloodPressure: jest.fn(),
+  savePatientVitals: jest.fn(),
   useVitals: jest.fn().mockImplementation(() => ({
     mutate: jest.fn,
   })),
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.utils.ts b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.utils.ts
index 7c54a12f36..da1d123124 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.utils.ts
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.utils.ts
@@ -35,7 +35,7 @@ export function extractNumbers(str: string) {
   return parseInt(match[0], 10);
 }
 
-export function getColorCode(age: number, muac: number, setColorCode: (color) => void) {
+export function getMuacColorCode(age: number, muac: number, setColorCode: (color) => void) {
   switch (true) {
     // children 5 years and below with a muac equal to 14
     case age <= 5 && muac <= 11.5 && muac > 0:

From 5f477dbd61e735f14cd54766ebb759049d942f1e Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Tue, 31 Oct 2023 10:39:22 +0300
Subject: [PATCH 10/17] Change validation error message and placeholder color

---
 .../vitals-biometrics-form.component.tsx      |  20 ++-
 .../vitals-biometrics-form.scss               |   4 +
 .../vitals-biometrics-input.component.tsx     | 159 +++++++++---------
 .../vitals-biometrics-input.scss              |  16 +-
 .../translations/am.json                      |   2 +-
 .../translations/ar.json                      |   2 +-
 .../translations/en.json                      |   2 +-
 .../translations/es.json                      |   2 +-
 .../translations/fr.json                      |   2 +-
 .../translations/he.json                      |   2 +-
 10 files changed, 117 insertions(+), 94 deletions(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
index cb1ab97d1a..fdf76ada24 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
@@ -54,7 +54,7 @@ const vitalsBiometricsFormSchema = z
       return Object.values(fields).some((value) => Boolean(value));
     },
     {
-      message: 'Atleast one fields is required',
+      message: 'Please fill at least one field',
       path: ['oneFieldRequired'],
     },
   );
@@ -77,6 +77,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const [showErrorNotification, setShowErrorNotification] = useState(false);
   const [showErrorMessage, setShowErrorMessage] = useState(false);
+  const [hasInvalidVitals, setHasInvalidVitals] = useState(false);
 
   const { control, handleSubmit, getValues, watch, setValue } = useForm<VitalsBiometricsFormData>({
     mode: 'all',
@@ -137,13 +138,8 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
         isValueWithinReferenceRange(conceptMetadata, config.concepts[key + 'Uuid'], patientVitalAndBiometrics[key]) ==
         false
       ) {
+        setHasInvalidVitals(true);
         isFieldValid = false;
-        showNotification({
-          title: t('vitalsAndBiometricsSaveError', 'Error saving vitals and biometrics'),
-          kind: 'error',
-          critical: true,
-          description: t('checkForValidity', 'Some of the values entered are invalid'),
-        });
         break;
       }
     }
@@ -502,6 +498,16 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                 />
               </Column>
             )}
+            {hasInvalidVitals && (
+              <Column>
+                <InlineNotification
+                  className={styles.errorNotification}
+                  lowContrast={false}
+                  title={t('vitalsAndBiometricsSaveError', 'Error saving vitals and biometrics')}
+                  subtitle={t('checkForValidity', 'Some of the values entered are invalid')}
+                />
+              </Column>
+            )}
           </Row>
         </Stack>
       </div>
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.scss
index 49f947c0cb..57d08f36a6 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.scss
@@ -66,3 +66,7 @@
 .noteInput {
   width: 100%;
 }
+
+.errorNotification {
+  margin: 0.5rem 0;
+}
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index 11f962b81a..7afd9854e8 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -90,104 +90,107 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
   const errorMessageClass = showInvalidInputError ? styles.invalidInput : '';
 
   return (
-    <div
-      className={`${styles.inputContainer} ${isTablet ? styles.inputInTabletView : ''} ${
-        flaggedCritical ? styles.isCriticalInput : ''
-      }`}
-      style={{ width: textFieldWidth }}
-    >
-      <div className={styles.labelAndIcons}>
-        <p className={styles.vitalsBiometricInputLabel01}>{title}</p>
-        {flaggedCritical ? (
-          <div title="abnormal value">
-            <span className={styles[interpretation.replace('_', '-')]} />
-          </div>
-        ) : showInvalidInputError ? (
-          <div className={styles.invalidInputIcon}>
-            <Warning />
-          </div>
-        ) : null}
-      </div>
+    <>
       <div
-        className={`${styles.textInputContainer} ${isFocused ? styles.focused : ''} ${
-          flaggedCritical && styles['critical-value']
-        } ${disabled ? styles.disabledInput : ''} ${useMuacColors ? muacColorCode : undefined} ${errorMessageClass}`}
-        style={{ ...textFieldStyles }}
+        className={`${styles.inputContainer} ${isTablet ? styles.inputInTabletView : ''} ${
+          flaggedCritical ? styles.isCriticalInput : ''
+        }`}
+        style={{ width: textFieldWidth }}
       >
-        <div className={styles.centerDiv}>
-          {textFields.map((val, i) => {
-            return val.type === 'number' ? (
-              <Fragment key={`vitals-text-input-${val.name}-${i}`}>
-                <ResponsiveWrapper isTablet={isTablet}>
+        <div className={styles.labelAndIcons}>
+          <p className={styles.vitalsBiometricInputLabel01}>{title}</p>
+          {flaggedCritical ? (
+            <div title="abnormal value">
+              <span className={styles[interpretation.replace('_', '-')]} />
+            </div>
+          ) : showInvalidInputError ? (
+            <div className={styles.invalidInputIcon}>
+              <Warning />
+            </div>
+          ) : null}
+        </div>
+        <div
+          className={`${styles.textInputContainer} ${isFocused ? styles.focused : ''} ${
+            flaggedCritical && styles['critical-value']
+          } ${disabled ? styles.disabledInput : ''} ${useMuacColors ? muacColorCode : undefined} ${errorMessageClass}`}
+          style={{ ...textFieldStyles }}
+        >
+          <div className={styles.centerDiv}>
+            {textFields.map((val, i) => {
+              return val.type === 'number' ? (
+                <Fragment key={`vitals-text-input-${val.name}-${i}`}>
+                  <ResponsiveWrapper isTablet={isTablet}>
+                    <Controller
+                      name={val.id}
+                      control={control}
+                      render={({ field: { onBlur, onChange, value, ref } }) => (
+                        <NumberInput
+                          allowEmpty
+                          placeholder={generatePlaceholder(val.name)}
+                          className={`${styles.textInput} ${disabled ? styles.disabledInput : ''} ${val.className}`}
+                          defaultValue="--"
+                          disabled={disabled}
+                          disableWheel
+                          hideSteppers
+                          id={val.name + 'input'}
+                          label={''}
+                          max={val.max}
+                          min={val.min}
+                          name={val.name}
+                          onBlur={handleBlur}
+                          onFocus={handleFocus}
+                          onChange={(e) => checkValidity(e.target.value, onChange)}
+                          style={{ ...textFieldStyles }}
+                          ref={ref}
+                          title={val.name}
+                          type={val.type}
+                          value={value}
+                        />
+                      )}
+                    />
+                  </ResponsiveWrapper>
+                  {val?.separator}
+                </Fragment>
+              ) : (
+                <ResponsiveWrapper key={`vitals-text-area-${val.name}-${i}`} isTablet={isTablet}>
                   <Controller
                     name={val.id}
                     control={control}
                     render={({ field: { onBlur, onChange, value, ref } }) => (
-                      <NumberInput
-                        allowEmpty
-                        placeholder={generatePlaceholder(val.name)}
-                        className={`${styles.textInput} ${disabled ? styles.disabledInput : ''} ${val.className}`}
-                        defaultValue="--"
-                        disabled={disabled}
-                        disableWheel
-                        hideSteppers
-                        id={val.name + 'input'}
-                        label={''}
-                        max={val.max}
-                        min={val.min}
-                        name={val.name}
-                        onBlur={handleBlur}
-                        onFocus={handleFocus}
-                        onChange={(e) => checkValidity(e.target.value, onChange)}
+                      <TextArea
+                        key={val.name}
                         style={{ ...textFieldStyles }}
-                        ref={ref}
-                        title={val.name}
-                        type={val.type}
+                        className={styles.textarea}
+                        id={val.name}
+                        name={val.name}
+                        labelText={''}
+                        onChange={(e) => onChange(e.target.value)}
+                        onBlur={onBlur}
+                        rows={2}
+                        placeholder={placeholder}
                         value={value}
+                        title={val.name}
+                        ref={ref}
                       />
                     )}
                   />
                 </ResponsiveWrapper>
-                {val?.separator}
-              </Fragment>
-            ) : (
-              <ResponsiveWrapper key={`vitals-text-area-${val.name}-${i}`} isTablet={isTablet}>
-                <Controller
-                  name={val.id}
-                  control={control}
-                  render={({ field: { onBlur, onChange, value, ref } }) => (
-                    <TextArea
-                      key={val.name}
-                      style={{ ...textFieldStyles }}
-                      className={styles.textarea}
-                      id={val.name}
-                      name={val.name}
-                      labelText={''}
-                      onChange={(e) => onChange(e.target.value)}
-                      onBlur={onBlur}
-                      rows={2}
-                      placeholder={placeholder}
-                      value={value}
-                      title={val.name}
-                      ref={ref}
-                    />
-                  )}
-                />
-              </ResponsiveWrapper>
-            );
-          })}
+              );
+            })}
+          </div>
+          <p className={styles.unitName}>{unitSymbol}</p>
         </div>
-        <p className={styles.unitName}>{unitSymbol}</p>
       </div>
       {showInvalidInputError ? (
-        <FormLabel className={styles.danger}>
-          {t('numericInputError', `Only numbers "{min}" - "{max}" permitted`, {
+        <FormLabel className={styles.invalidInputError}>
+          {t('validationInputError', `Value must be between {{min}} and {{max}} {{unitSymbol}}`, {
             min: textFields[0].min,
             max: textFields[0].max,
+            unitSymbol: unitSymbol,
           })}
         </FormLabel>
       ) : null}
-    </div>
+    </>
   );
 };
 
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
index 0a7b6bedb7..9318ba2c9c 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
@@ -18,7 +18,7 @@
 .inputContainer {
   width: 11.625rem;
   border-bottom: 1px solid $ui-04;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
 }
 
 .vitalsBiometricInputLabel01 {
@@ -45,6 +45,10 @@
   :global(.cds--number--nosteppers input[type="number"]) {
     padding-right: 1rem !important;
   }
+
+  ::placeholder {
+    color: $text-03;
+  }
 }
 
 .textInputContainer {
@@ -144,8 +148,9 @@
   }
 }
 
-.danger {
+.invalidInputError {
   color: $danger;
+  margin-bottom: spacing.$spacing-03;
 }
 
 .layer {
@@ -157,8 +162,13 @@
   justify-content: space-between;
   align-items: center;
 }
+
 .invalidInput {
-  border: 2px solid $danger;
+  outline: 2px solid $danger;
+
+  &.focused {
+    border: none;
+  }
 }
 
 .invalidInputIcon {
diff --git a/packages/esm-patient-vitals-app/translations/am.json b/packages/esm-patient-vitals-app/translations/am.json
index a16078e927..6491940411 100644
--- a/packages/esm-patient-vitals-app/translations/am.json
+++ b/packages/esm-patient-vitals-app/translations/am.json
@@ -19,7 +19,6 @@
   "muac": "MUAC",
   "noDataRecorded": "No data has been recorded for this patient",
   "notes": "Notes",
-  "numericInputError": "Must be a number with in acceptable ranges",
   "other": "Other",
   "overdue": "Overdue",
   "oxygenSaturation": "Oxygen Saturation",
@@ -39,6 +38,7 @@
   "temperature": "Temperature",
   "temperatureAbbreviated": "Temp",
   "unknown": "Unknown",
+  "validationInputError": "Value must be between {{min}} and {{max}} {{unitSymbol}}",
   "vitals": "Vitals",
   "vitalsAndBiometrics": "Vitals and biometrics",
   "vitalsAndBiometricsNowAvailable": "They are now visible on the Vitals and Biometrics page",
diff --git a/packages/esm-patient-vitals-app/translations/ar.json b/packages/esm-patient-vitals-app/translations/ar.json
index 182de406fd..54ec40ab96 100644
--- a/packages/esm-patient-vitals-app/translations/ar.json
+++ b/packages/esm-patient-vitals-app/translations/ar.json
@@ -19,7 +19,6 @@
   "muac": "MUAC",
   "noDataRecorded": "لم يتم تسجيل أي بيانات لهذا المريض",
   "notes": "ملاحظات",
-  "numericInputError": "يجب أن يكون رقمًا ضمن النطاقات المقبولة",
   "other": "أخرى",
   "overdue": "متأخر",
   "oxygenSaturation": "تشبع الأكسجين",
@@ -39,6 +38,7 @@
   "temperature": "درجة الحرارة",
   "temperatureAbbreviated": "درجة الحرارة",
   "unknown": "غير معروف",
+  "validationInputError": "Value must be between {{min}} and {{max}} {{unitSymbol}}",
   "vitals": "العلامات الحيوية",
   "vitalsAndBiometrics": "العلامات الحيوية والقياسات البيومترية",
   "vitalsAndBiometricsNowAvailable": "هم الآن مرئيون على صفحة العلامات الحيوية والقياسات البيومترية",
diff --git a/packages/esm-patient-vitals-app/translations/en.json b/packages/esm-patient-vitals-app/translations/en.json
index c10781d297..797ca6ba14 100644
--- a/packages/esm-patient-vitals-app/translations/en.json
+++ b/packages/esm-patient-vitals-app/translations/en.json
@@ -19,7 +19,6 @@
   "muac": "MUAC",
   "noDataRecorded": "No data has been recorded for this patient",
   "notes": "Notes",
-  "numericInputError": "Only numbers \"{min}\" - \"{max}\" permitted",
   "other": "Other",
   "overdue": "Overdue",
   "oxygenSaturation": "Oxygen Saturation",
@@ -39,6 +38,7 @@
   "temperature": "Temperature",
   "temperatureAbbreviated": "Temp",
   "unknown": "Unknown",
+  "validationInputError": "Value must be between {{min}} and {{max}} {{unitSymbol}}",
   "vitals": "Vitals",
   "vitalsAndBiometrics": "Vitals and biometrics",
   "vitalsAndBiometricsNowAvailable": "They are now visible on the Vitals and Biometrics page",
diff --git a/packages/esm-patient-vitals-app/translations/es.json b/packages/esm-patient-vitals-app/translations/es.json
index 120adcc917..0f7e21f857 100644
--- a/packages/esm-patient-vitals-app/translations/es.json
+++ b/packages/esm-patient-vitals-app/translations/es.json
@@ -19,7 +19,6 @@
   "muac": "PB/MUAC",
   "noDataRecorded": "No se han registrado datos para este paciente",
   "notes": "Notas",
-  "numericInputError": "Debe ser un número dentro de los rangos aceptables",
   "other": "Otro",
   "overdue": "Atrasado",
   "oxygenSaturation": "Saturación de oxígeno",
@@ -39,6 +38,7 @@
   "temperature": "Temperatura",
   "temperatureAbbreviated": "Temp",
   "unknown": "Desconocido",
+  "validationInputError": "Value must be between {{min}} and {{max}} {{unitSymbol}}",
   "vitals": "Signos vitales",
   "vitalsAndBiometrics": "Signos vitales y biométricos",
   "vitalsAndBiometricsNowAvailable": "Ahora son visibles en la página de Signos vitales y biométricos",
diff --git a/packages/esm-patient-vitals-app/translations/fr.json b/packages/esm-patient-vitals-app/translations/fr.json
index 805c3450b1..696eff6197 100644
--- a/packages/esm-patient-vitals-app/translations/fr.json
+++ b/packages/esm-patient-vitals-app/translations/fr.json
@@ -19,7 +19,6 @@
   "muac": "Circonférence du bras moyen",
   "noDataRecorded": "Aucune donnée n'a été enregistrée pour ce patient",
   "notes": "Notes",
-  "numericInputError": "Doit être un nombre dans des intervalles acceptables",
   "other": "Other",
   "overdue": "Overdue",
   "oxygenSaturation": "Saturation d'oxygène",
@@ -39,6 +38,7 @@
   "temperature": "Température",
   "temperatureAbbreviated": "Temp",
   "unknown": "Unknown",
+  "validationInputError": "Value must be between {{min}} and {{max}} {{unitSymbol}}",
   "vitals": "Signes vitaux",
   "vitalsAndBiometrics": "Signes vitaux et biométrie",
   "vitalsAndBiometricsNowAvailable": "Ils sont désormais visibles sur la page Signes vitaux et biométrie",
diff --git a/packages/esm-patient-vitals-app/translations/he.json b/packages/esm-patient-vitals-app/translations/he.json
index 9b38af31f2..74342f2ea9 100644
--- a/packages/esm-patient-vitals-app/translations/he.json
+++ b/packages/esm-patient-vitals-app/translations/he.json
@@ -19,7 +19,6 @@
   "muac": "MUAC",
   "noDataRecorded": "לא נרשמו נתונים עבור מטופל זה",
   "notes": "הערות",
-  "numericInputError": "חייב להיות מספר בטווח התקין",
   "other": "Other",
   "overdue": "מאחר",
   "oxygenSaturation": "רווי חמצן",
@@ -39,6 +38,7 @@
   "temperature": "טמפרטורה",
   "temperatureAbbreviated": "טמפ'",
   "unknown": "Unknown",
+  "validationInputError": "Value must be between {{min}} and {{max}} {{unitSymbol}}",
   "vitals": "מדדים חיוניים",
   "vitalsAndBiometrics": "מדדים חיוניים וביומטרים",
   "vitalsAndBiometricsNowAvailable": "הם כעת זמינים בדף מדדים חיוניים וביומטרים",

From 7bb060d19df830b786462cb48fa401dbbbf70219 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Tue, 31 Oct 2023 22:53:25 +0300
Subject: [PATCH 11/17] Implement design feedback from Ciaran

- Biometrics input should be readOnly, not disabled
- Abnormal value feedback should be triggered when we remove focus from a field
- Use classnames library to clean up conditional classnames
---
 package.json                                  |   1 +
 .../vitals-biometrics-form.component.tsx      | 124 +++++++++---------
 .../vitals-biometrics-input.component.tsx     | 115 ++++++++--------
 .../vitals-biometrics-input.scss              |   8 --
 yarn.lock                                     |   3 +-
 5 files changed, 126 insertions(+), 125 deletions(-)

diff --git a/package.json b/package.json
index 508be95c2a..75cda7e47b 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
   "packageManager": "yarn@3.6.3",
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
+    "classnames": "^2.3.2",
     "react-hook-form": "^7.46.2",
     "react-to-print": "^2.14.13",
     "zod": "^3.22.2"
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
index fdf76ada24..b58a75cfd9 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
@@ -229,15 +229,8 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
           <Row className={styles.row}>
             <Column>
               <VitalsBiometricInput
-                title={t('bloodPressure', 'Blood Pressure')}
                 control={control}
-                interpretation={interpretBloodPressure(
-                  systolicBloodPressure,
-                  diastolicBloodPressure,
-                  config.concepts,
-                  conceptMetadata,
-                )}
-                textFields={[
+                fields={[
                   {
                     name: t('systolic', 'systolic'),
                     separator: '/',
@@ -254,7 +247,12 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'diastolicBloodPressure',
                   },
                 ]}
-                unitSymbol={conceptUnits.get(config.concepts.systolicBloodPressureUuid) ?? ''}
+                interpretation={interpretBloodPressure(
+                  systolicBloodPressure,
+                  diastolicBloodPressure,
+                  config.concepts,
+                  conceptMetadata,
+                )}
                 isWithinNormalRange={
                   isValueWithinReferenceRange(
                     conceptMetadata,
@@ -267,17 +265,14 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     diastolicBloodPressure,
                   )
                 }
+                title={t('bloodPressure', 'Blood Pressure')}
+                unitSymbol={conceptUnits.get(config.concepts.systolicBloodPressureUuid) ?? ''}
               />
             </Column>
             <Column>
               <VitalsBiometricInput
-                title={t('pulse', 'Pulse')}
                 control={control}
-                interpretation={assessValue(
-                  pulse,
-                  getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata),
-                )}
-                textFields={[
+                fields={[
                   {
                     name: t('pulse', 'Pulse'),
                     type: 'number',
@@ -286,20 +281,20 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'pulse',
                   },
                 ]}
-                unitSymbol={conceptUnits.get(config.concepts.pulseUuid) ?? ''}
+                interpretation={assessValue(
+                  pulse,
+                  getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata),
+                )}
                 isWithinNormalRange={isValueWithinReferenceRange(conceptMetadata, config.concepts['pulseUuid'], pulse)}
+                title={t('pulse', 'Pulse')}
+                unitSymbol={conceptUnits.get(config.concepts.pulseUuid) ?? ''}
               />
             </Column>
 
             <Column>
               <VitalsBiometricInput
-                title={t('respirationRate', 'Respiration Rate')}
                 control={control}
-                interpretation={assessValue(
-                  respiratoryRate,
-                  getReferenceRangesForConcept(config.concepts.respiratoryRateUuid, conceptMetadata),
-                )}
-                textFields={[
+                fields={[
                   {
                     name: t('respirationRate', 'Respiration Rate'),
                     type: 'number',
@@ -308,24 +303,24 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'respiratoryRate',
                   },
                 ]}
-                unitSymbol={conceptUnits.get(config.concepts.respiratoryRateUuid) ?? ''}
+                interpretation={assessValue(
+                  respiratoryRate,
+                  getReferenceRangesForConcept(config.concepts.respiratoryRateUuid, conceptMetadata),
+                )}
                 isWithinNormalRange={isValueWithinReferenceRange(
                   conceptMetadata,
                   config.concepts['respiratoryRateUuid'],
                   respiratoryRate,
                 )}
                 showErrorMessage={showErrorMessage}
+                title={t('respirationRate', 'Respiration Rate')}
+                unitSymbol={conceptUnits.get(config.concepts.respiratoryRateUuid) ?? ''}
               />
             </Column>
             <Column>
               <VitalsBiometricInput
-                title={t('spo2', 'SpO2')}
                 control={control}
-                interpretation={assessValue(
-                  oxygenSaturation,
-                  getReferenceRangesForConcept(config.concepts.oxygenSaturationUuid, conceptMetadata),
-                )}
-                textFields={[
+                fields={[
                   {
                     name: t('oxygenSaturation', 'Oxygen Saturation'),
                     type: 'number',
@@ -334,25 +329,25 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'oxygenSaturation',
                   },
                 ]}
-                unitSymbol={conceptUnits.get(config.concepts.oxygenSaturationUuid) ?? ''}
+                interpretation={assessValue(
+                  oxygenSaturation,
+                  getReferenceRangesForConcept(config.concepts.oxygenSaturationUuid, conceptMetadata),
+                )}
                 isWithinNormalRange={isValueWithinReferenceRange(
                   conceptMetadata,
                   config.concepts['oxygenSaturationUuid'],
                   oxygenSaturation,
                 )}
                 showErrorMessage={showErrorMessage}
+                title={t('spo2', 'SpO2')}
+                unitSymbol={conceptUnits.get(config.concepts.oxygenSaturationUuid) ?? ''}
               />
             </Column>
 
             <Column>
               <VitalsBiometricInput
-                title={t('temp', 'Temp')}
                 control={control}
-                interpretation={assessValue(
-                  temperature,
-                  getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptMetadata),
-                )}
-                textFields={[
+                fields={[
                   {
                     name: t('temperature', 'Temperature'),
                     type: 'number',
@@ -361,13 +356,18 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'temperature',
                   },
                 ]}
-                unitSymbol={conceptUnits.get(config.concepts.temperatureUuid) ?? ''}
+                interpretation={assessValue(
+                  temperature,
+                  getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptMetadata),
+                )}
                 isWithinNormalRange={isValueWithinReferenceRange(
                   conceptMetadata,
                   config.concepts['temperatureUuid'],
                   temperature,
                 )}
                 showErrorMessage={showErrorMessage}
+                title={t('temp', 'Temp')}
+                unitSymbol={conceptUnits.get(config.concepts.temperatureUuid) ?? ''}
               />
             </Column>
           </Row>
@@ -375,10 +375,9 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
           <Row className={styles.row}>
             <Column className={styles.noteInput}>
               <VitalsBiometricInput
-                textFieldWidth={isTablet ? '70%' : '100%'}
-                title={t('notes', 'Notes')}
                 control={control}
-                textFields={[
+                fieldWidth={isTablet ? '70%' : '100%'}
+                fields={[
                   {
                     name: t('notes', 'Notes'),
                     type: 'textArea',
@@ -386,6 +385,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   },
                 ]}
                 placeholder={t('additionalNoteText', 'Type any additional notes here')}
+                title={t('notes', 'Notes')}
               />
             </Column>
           </Row>
@@ -397,13 +397,8 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
           <Row className={styles.row}>
             <Column>
               <VitalsBiometricInput
-                title={t('weight', 'Weight')}
                 control={control}
-                interpretation={assessValue(
-                  weight,
-                  getReferenceRangesForConcept(config.concepts.weightUuid, conceptMetadata),
-                )}
-                textFields={[
+                fields={[
                   {
                     name: t('weight', 'Weight'),
                     type: 'number',
@@ -412,24 +407,24 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'weight',
                   },
                 ]}
-                unitSymbol={conceptUnits.get(config.concepts.weightUuid) ?? ''}
+                interpretation={assessValue(
+                  weight,
+                  getReferenceRangesForConcept(config.concepts.weightUuid, conceptMetadata),
+                )}
                 isWithinNormalRange={isValueWithinReferenceRange(
                   conceptMetadata,
                   config.concepts['weightUuid'],
                   weight,
                 )}
                 showErrorMessage={showErrorMessage}
+                title={t('weight', 'Weight')}
+                unitSymbol={conceptUnits.get(config.concepts.weightUuid) ?? ''}
               />
             </Column>
             <Column>
               <VitalsBiometricInput
-                title={t('height', 'Height')}
                 control={control}
-                interpretation={assessValue(
-                  height,
-                  getReferenceRangesForConcept(config.concepts.heightUuid, conceptMetadata),
-                )}
-                textFields={[
+                fields={[
                   {
                     name: t('height', 'Height'),
                     type: 'number',
@@ -438,37 +433,39 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'height',
                   },
                 ]}
-                unitSymbol={conceptUnits.get(config.concepts.heightUuid) ?? ''}
+                interpretation={assessValue(
+                  height,
+                  getReferenceRangesForConcept(config.concepts.heightUuid, conceptMetadata),
+                )}
                 isWithinNormalRange={isValueWithinReferenceRange(
                   conceptMetadata,
                   config.concepts['heightUuid'],
                   height,
                 )}
                 showErrorMessage={showErrorMessage}
+                title={t('height', 'Height')}
+                unitSymbol={conceptUnits.get(config.concepts.heightUuid) ?? ''}
               />
             </Column>
             <Column>
               <VitalsBiometricInput
-                title={t('calculatedBmi', 'BMI (calc.)')}
                 control={control}
-                textFields={[
+                fields={[
                   {
                     name: t('bmi', 'BMI'),
                     type: 'number',
                     id: 'computedBodyMassIndex',
                   },
                 ]}
+                readOnly
+                title={t('calculatedBmi', 'BMI (calc.)')}
                 unitSymbol={biometricsUnitsSymbols['bmiUnit']}
-                disabled
               />
             </Column>
             <Column>
               <VitalsBiometricInput
-                title={t('muac', 'MUAC')}
                 control={control}
-                useMuacColors={useMuacColorStatus}
-                muacColorCode={muacColorCode}
-                textFields={[
+                fields={[
                   {
                     name: t('muac', 'MUAC'),
                     type: 'number',
@@ -477,13 +474,16 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'midUpperArmCircumference',
                   },
                 ]}
-                unitSymbol={conceptUnits.get(config.concepts.midUpperArmCircumferenceUuid) ?? ''}
+                muacColorCode={muacColorCode}
                 isWithinNormalRange={isValueWithinReferenceRange(
                   conceptMetadata,
                   config.concepts['midUpperArmCircumferenceUuid'],
                   midUpperArmCircumference,
                 )}
                 showErrorMessage={showErrorMessage}
+                title={t('muac', 'MUAC')}
+                unitSymbol={conceptUnits.get(config.concepts.midUpperArmCircumferenceUuid) ?? ''}
+                useMuacColors={useMuacColorStatus}
               />
             </Column>
           </Row>
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index 7afd9854e8..7cf8123fbe 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useState } from 'react';
+import classNames from 'classnames';
 import { Control, Controller } from 'react-hook-form';
 import { FormLabel, Layer, NumberInput, TextArea } from '@carbon/react';
 import { Warning } from '@carbon/react/icons';
@@ -21,12 +22,21 @@ type Id =
   | 'midUpperArmCircumference'
   | 'computedBodyMassIndex';
 
+interface ResponsiveWrapperProps {
+  children: React.ReactNode;
+  isTablet: boolean;
+}
 interface VitalsBiometricInputProps {
-  title: string;
   control: Control<VitalsBiometricsFormData>;
   muacColorCode?: string;
-  useMuacColors?: boolean;
-  textFields: Array<{
+  interpretation?: string;
+  isWithinNormalRange?: boolean;
+  placeholder?: string;
+  readOnly?: boolean;
+  showErrorMessage?: boolean;
+  fieldStyles?: React.CSSProperties;
+  fieldWidth?: string;
+  fields: Array<{
     id: Id;
     name: string;
     separator?: string;
@@ -36,30 +46,25 @@ interface VitalsBiometricInputProps {
     min?: number | null;
     max?: number | null;
   }>;
+  title: string;
+  useMuacColors?: boolean;
   unitSymbol?: string;
-  textFieldWidth?: string;
-  textFieldStyles?: React.CSSProperties;
-  placeholder?: string;
-  disabled?: boolean;
-  isWithinNormalRange?: boolean;
-  interpretation?: string;
-  showErrorMessage?: boolean;
 }
 
 const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
-  title,
   control,
-  textFields,
-  unitSymbol,
-  textFieldStyles,
-  textFieldWidth,
-  placeholder,
-  disabled,
-  muacColorCode,
-  useMuacColors,
-  isWithinNormalRange = true,
   interpretation,
+  isWithinNormalRange = true,
+  muacColorCode,
+  placeholder,
+  readOnly,
   showErrorMessage,
+  fields,
+  fieldStyles,
+  fieldWidth,
+  title,
+  unitSymbol,
+  useMuacColors,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -74,7 +79,7 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
     setFocused(false);
   };
 
-  const flaggedCritical =
+  const isFlaggedCritical =
     interpretation && ['critically_low', 'critically_high', 'high', 'low'].includes(interpretation);
 
   function checkValidity(value, onChange) {
@@ -89,17 +94,24 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
   const showInvalidInputError = showErrorMessage && isInvalidInput;
   const errorMessageClass = showInvalidInputError ? styles.invalidInput : '';
 
+  const containerClasses = classNames(styles.inputContainer, {
+    [styles.inputInTabletView]: isTablet,
+    [styles.isCriticalInput]: !isFocused && isFlaggedCritical,
+  });
+
+  const textInputClasses = classNames(styles.textInputContainer, {
+    [styles.focused]: isFocused,
+    [styles['critical-value']]: !isFocused && isFlaggedCritical,
+    [muacColorCode]: useMuacColors,
+    [errorMessageClass]: true,
+  });
+
   return (
     <>
-      <div
-        className={`${styles.inputContainer} ${isTablet ? styles.inputInTabletView : ''} ${
-          flaggedCritical ? styles.isCriticalInput : ''
-        }`}
-        style={{ width: textFieldWidth }}
-      >
+      <div className={containerClasses} style={{ width: fieldWidth }}>
         <div className={styles.labelAndIcons}>
           <p className={styles.vitalsBiometricInputLabel01}>{title}</p>
-          {flaggedCritical ? (
+          {!isFocused && isFlaggedCritical ? (
             <div title="abnormal value">
               <span className={styles[interpretation.replace('_', '-')]} />
             </div>
@@ -109,27 +121,20 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
             </div>
           ) : null}
         </div>
-        <div
-          className={`${styles.textInputContainer} ${isFocused ? styles.focused : ''} ${
-            flaggedCritical && styles['critical-value']
-          } ${disabled ? styles.disabledInput : ''} ${useMuacColors ? muacColorCode : undefined} ${errorMessageClass}`}
-          style={{ ...textFieldStyles }}
-        >
+        <div className={textInputClasses} style={{ ...fieldStyles }}>
           <div className={styles.centerDiv}>
-            {textFields.map((val, i) => {
+            {fields.map((val, i) => {
               return val.type === 'number' ? (
-                <Fragment key={`vitals-text-input-${val.name}-${i}`}>
+                <Fragment key={`${val.name}-${i}-number-input`}>
                   <ResponsiveWrapper isTablet={isTablet}>
                     <Controller
                       name={val.id}
                       control={control}
-                      render={({ field: { onBlur, onChange, value, ref } }) => (
+                      render={({ field: { onChange, value, ref } }) => (
                         <NumberInput
                           allowEmpty
-                          placeholder={generatePlaceholder(val.name)}
-                          className={`${styles.textInput} ${disabled ? styles.disabledInput : ''} ${val.className}`}
+                          className={`${styles.textInput} ${val.className}`}
                           defaultValue="--"
-                          disabled={disabled}
                           disableWheel
                           hideSteppers
                           id={val.name + 'input'}
@@ -138,10 +143,12 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
                           min={val.min}
                           name={val.name}
                           onBlur={handleBlur}
-                          onFocus={handleFocus}
                           onChange={(e) => checkValidity(e.target.value, onChange)}
-                          style={{ ...textFieldStyles }}
+                          onFocus={handleFocus}
+                          placeholder={generatePlaceholder(val.name)}
+                          readOnly={readOnly}
                           ref={ref}
+                          style={{ ...fieldStyles }}
                           title={val.name}
                           type={val.type}
                           value={value}
@@ -152,25 +159,25 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
                   {val?.separator}
                 </Fragment>
               ) : (
-                <ResponsiveWrapper key={`vitals-text-area-${val.name}-${i}`} isTablet={isTablet}>
+                <ResponsiveWrapper key={`${val.name}-${i}-textarea`} isTablet={isTablet}>
                   <Controller
                     name={val.id}
                     control={control}
                     render={({ field: { onBlur, onChange, value, ref } }) => (
                       <TextArea
-                        key={val.name}
-                        style={{ ...textFieldStyles }}
                         className={styles.textarea}
                         id={val.name}
-                        name={val.name}
+                        key={val.name + 'textarea'}
                         labelText={''}
-                        onChange={(e) => onChange(e.target.value)}
+                        name={val.name}
                         onBlur={onBlur}
-                        rows={2}
+                        onChange={(e) => onChange(e.target.value)}
                         placeholder={placeholder}
-                        value={value}
-                        title={val.name}
                         ref={ref}
+                        rows={2}
+                        style={{ ...fieldStyles }}
+                        title={val.name}
+                        value={value}
                       />
                     )}
                   />
@@ -184,8 +191,8 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
       {showInvalidInputError ? (
         <FormLabel className={styles.invalidInputError}>
           {t('validationInputError', `Value must be between {{min}} and {{max}} {{unitSymbol}}`, {
-            min: textFields[0].min,
-            max: textFields[0].max,
+            min: fields[0].min,
+            max: fields[0].max,
             unitSymbol: unitSymbol,
           })}
         </FormLabel>
@@ -194,8 +201,8 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
   );
 };
 
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
+const ResponsiveWrapper: React.FC<ResponsiveWrapperProps> = ({ children, isTablet }) => {
   return isTablet ? <Layer className={styles.layer}>{children} </Layer> : <>{children}</>;
-}
+};
 
 export default VitalsBiometricInput;
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
index 9318ba2c9c..5d7836b8b8 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
@@ -140,14 +140,6 @@
   margin-top: spacing.$spacing-03;
 }
 
-.disabledInput {
-  background-color: $ui-01 !important;
-
-  :global(.cds--number input[type="number"]) {
-    background-color: $ui-01 !important;
-  }
-}
-
 .invalidInputError {
   color: $danger;
   margin-bottom: spacing.$spacing-03;
diff --git a/yarn.lock b/yarn.lock
index f910cae6e2..ffc1a9ec57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6932,6 +6932,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": ^6.7.3
     "@typescript-eslint/parser": ^6.7.3
     babel-preset-minify: ^0.5.2
+    classnames: ^2.3.2
     concurrently: ^8.2.1
     cross-env: ^7.0.3
     css-loader: ^6.6.0
@@ -12234,7 +12235,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:2.3.2":
+"classnames@npm:2.3.2, classnames@npm:^2.3.2":
   version: 2.3.2
   resolution: "classnames@npm:2.3.2"
   checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e

From 2a7b70b6cb3458be61a18bbf4d252212558fb675 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Tue, 31 Oct 2023 23:06:08 +0300
Subject: [PATCH 12/17] Adjust tests

---
 .../vitals-biometrics-input.component.tsx     |  4 +-
 .../vitals-biometrics-input.test.tsx          | 63 ++++---------------
 2 files changed, 14 insertions(+), 53 deletions(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index 7cf8123fbe..485531e389 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -9,7 +9,7 @@ import { VitalsBiometricsFormData } from './vitals-biometrics-form.component';
 import { generatePlaceholder } from '../vitals.resource';
 import styles from './vitals-biometrics-input.scss';
 
-type Id =
+type fieldId =
   | 'systolicBloodPressure'
   | 'diastolicBloodPressure'
   | 'respiratoryRate'
@@ -37,7 +37,7 @@ interface VitalsBiometricInputProps {
   fieldStyles?: React.CSSProperties;
   fieldWidth?: string;
   fields: Array<{
-    id: Id;
+    id: fieldId;
     name: string;
     separator?: string;
     type?: string | 'text';
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.test.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.test.tsx
index bd86824290..297f7d67c5 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.test.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.test.tsx
@@ -3,8 +3,6 @@ import { screen, render } from '@testing-library/react';
 import VitalsBiometricsInput from './vitals-biometrics-input.component';
 import userEvent from '@testing-library/user-event';
 
-const mockOnChange = jest.fn();
-
 jest.mock('react-hook-form', () => ({
   ...jest.requireActual('react-hook-form'),
   useFormContext: jest.fn().mockImplementation(() => ({
@@ -58,28 +56,22 @@ jest.mock('react-hook-form', () => ({
 }));
 
 describe('VitalsBiometricsInput', () => {
-  const mockProps = {
-    title: 'Heart Rate',
-    textFields: [
-      {
-        name: 'heartRate',
-        type: 'number',
-        value: 120,
-      },
-    ],
-    unitSymbol: 'bpm',
-  };
-
   it('should display the correct text input with correct value', async () => {
     const user = userEvent.setup();
 
     render(
       <VitalsBiometricsInput
+        control={undefined}
         isWithinNormalRange
-        title={mockProps.title}
-        onInputChange={mockOnChange}
-        textFields={mockProps.textFields}
-        unitSymbol={mockProps.unitSymbol}
+        fields={[
+          {
+            id: 'pulse',
+            name: 'heartRate',
+            type: 'number',
+          },
+        ]}
+        title="Heart Rate"
+        unitSymbol="bpm"
       />,
     );
 
@@ -94,44 +86,13 @@ describe('VitalsBiometricsInput', () => {
   it('should display the correct text area with correct value', async () => {
     render(
       <VitalsBiometricsInput
+        control={undefined}
         isWithinNormalRange
+        fields={[{ id: 'generalPatientNote', name: 'Notes', type: 'textArea' }]}
         title="Notes"
-        onInputChange={mockOnChange}
-        textFields={[
-          {
-            name: 'Notes',
-            type: 'textArea',
-            value: '',
-          },
-        ]}
       />,
     );
 
     expect(screen.getByRole('textbox')).toBeInTheDocument();
   });
-
-  it('should disable input when the disabled prop is set to `true`', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <VitalsBiometricsInput
-        isWithinNormalRange
-        title={mockProps.title}
-        onInputChange={mockOnChange}
-        textFields={mockProps.textFields}
-        unitSymbol={mockProps.unitSymbol}
-        disabled
-      />,
-    );
-
-    expect(screen.getByText(/Heart Rate/i)).toBeInTheDocument();
-    expect(screen.getByText(/bpm/i)).toBeInTheDocument();
-    expect(screen.getByRole('spinbutton')).toBeInTheDocument();
-
-    const inputTextBox = await screen.findByRole('spinbutton');
-
-    await user.type(inputTextBox, '7');
-
-    expect(inputTextBox).toHaveProperty('disabled');
-  });
 });

From 5f1e0a253d0c1a62738fb79b6f8ca408b84686f1 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Thu, 2 Nov 2023 00:25:14 +0300
Subject: [PATCH 13/17] Yet more changes

  - Make the BMI input readonly
  - Reorder inputs to match designs
  - Update tests
---
 .../vitals-biometrics-form.component.tsx      |  66 ++--
 .../vitals-biometrics-form.test.tsx           |   2 +-
 .../vitals-biometrics-input.component.tsx     |  12 +-
 .../vitals-biometrics-input.scss              |  12 +
 .../vitals-biometrics-input.test.tsx          | 368 ++++++++++++++++--
 .../src/vitals/vitals-chart.component.tsx     |   4 +-
 .../translations/am.json                      |   2 +-
 .../translations/en.json                      |   4 +-
 8 files changed, 393 insertions(+), 77 deletions(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
index b58a75cfd9..7def0af830 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
@@ -79,7 +79,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
   const [showErrorMessage, setShowErrorMessage] = useState(false);
   const [hasInvalidVitals, setHasInvalidVitals] = useState(false);
 
-  const { control, handleSubmit, getValues, watch, setValue } = useForm<VitalsBiometricsFormData>({
+  const { control, handleSubmit, watch, setValue } = useForm<VitalsBiometricsFormData>({
     mode: 'all',
     resolver: zodResolver(vitalsBiometricsFormSchema),
   });
@@ -227,6 +227,32 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
             <p className={styles.title}>{t('recordVitals', 'Record vitals')}</p>
           </Column>
           <Row className={styles.row}>
+            <Column>
+              <VitalsBiometricInput
+                control={control}
+                fields={[
+                  {
+                    id: 'temperature',
+                    max: concepts.temperatureRange.highAbsolute,
+                    min: concepts.temperatureRange.lowAbsolute,
+                    name: t('temperature', 'Temperature'),
+                    type: 'number',
+                  },
+                ]}
+                interpretation={assessValue(
+                  temperature,
+                  getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptMetadata),
+                )}
+                isWithinNormalRange={isValueWithinReferenceRange(
+                  conceptMetadata,
+                  config.concepts['temperatureUuid'],
+                  temperature,
+                )}
+                showErrorMessage={showErrorMessage}
+                title={t('temperature', 'Temperature')}
+                unitSymbol={conceptUnits.get(config.concepts.temperatureUuid) ?? ''}
+              />
+            </Column>
             <Column>
               <VitalsBiometricInput
                 control={control}
@@ -265,7 +291,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     diastolicBloodPressure,
                   )
                 }
-                title={t('bloodPressure', 'Blood Pressure')}
+                title={t('bloodPressure', 'Blood pressure')}
                 unitSymbol={conceptUnits.get(config.concepts.systolicBloodPressureUuid) ?? ''}
               />
             </Column>
@@ -286,17 +312,16 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata),
                 )}
                 isWithinNormalRange={isValueWithinReferenceRange(conceptMetadata, config.concepts['pulseUuid'], pulse)}
-                title={t('pulse', 'Pulse')}
+                title={t('heartRate', 'Heart rate')}
                 unitSymbol={conceptUnits.get(config.concepts.pulseUuid) ?? ''}
               />
             </Column>
-
             <Column>
               <VitalsBiometricInput
                 control={control}
                 fields={[
                   {
-                    name: t('respirationRate', 'Respiration Rate'),
+                    name: t('respirationRate', 'Respiration rate'),
                     type: 'number',
                     min: concepts.respiratoryRateRange.lowAbsolute,
                     max: concepts.respiratoryRateRange.highAbsolute,
@@ -313,7 +338,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   respiratoryRate,
                 )}
                 showErrorMessage={showErrorMessage}
-                title={t('respirationRate', 'Respiration Rate')}
+                title={t('respirationRate', 'Respiration rate')}
                 unitSymbol={conceptUnits.get(config.concepts.respiratoryRateUuid) ?? ''}
               />
             </Column>
@@ -322,7 +347,7 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                 control={control}
                 fields={[
                   {
-                    name: t('oxygenSaturation', 'Oxygen Saturation'),
+                    name: t('oxygenSaturation', 'Oxygen saturation'),
                     type: 'number',
                     min: concepts.oxygenSaturationRange.lowAbsolute,
                     max: concepts.oxygenSaturationRange.highAbsolute,
@@ -343,33 +368,6 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                 unitSymbol={conceptUnits.get(config.concepts.oxygenSaturationUuid) ?? ''}
               />
             </Column>
-
-            <Column>
-              <VitalsBiometricInput
-                control={control}
-                fields={[
-                  {
-                    name: t('temperature', 'Temperature'),
-                    type: 'number',
-                    min: concepts.temperatureRange.lowAbsolute,
-                    max: concepts.temperatureRange.highAbsolute,
-                    id: 'temperature',
-                  },
-                ]}
-                interpretation={assessValue(
-                  temperature,
-                  getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptMetadata),
-                )}
-                isWithinNormalRange={isValueWithinReferenceRange(
-                  conceptMetadata,
-                  config.concepts['temperatureUuid'],
-                  temperature,
-                )}
-                showErrorMessage={showErrorMessage}
-                title={t('temp', 'Temp')}
-                unitSymbol={conceptUnits.get(config.concepts.temperatureUuid) ?? ''}
-              />
-            </Column>
           </Row>
 
           <Row className={styles.row}>
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
index 36300636ac..faa973a989 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.test.tsx
@@ -192,7 +192,7 @@ describe('VitalsBiometricsForm', () => {
     );
   });
 
-  it('renders an error notification if there was a problem saving vital biometrics', async () => {
+  it('renders an error notification if there was a problem saving vitals and biometrics', async () => {
     const user = userEvent.setup();
 
     const error = {
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index 485531e389..387e8d8887 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -26,6 +26,7 @@ interface ResponsiveWrapperProps {
   children: React.ReactNode;
   isTablet: boolean;
 }
+
 interface VitalsBiometricInputProps {
   control: Control<VitalsBiometricsFormData>;
   muacColorCode?: string;
@@ -69,14 +70,14 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const [invalid, setInvalid] = useState(false);
-  const [isFocused, setFocused] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
 
   const handleFocus = () => {
-    setFocused(true);
+    setIsFocused(true);
   };
 
   const handleBlur = () => {
-    setFocused(false);
+    setIsFocused(false);
   };
 
   const isFlaggedCritical =
@@ -100,8 +101,9 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
   });
 
   const textInputClasses = classNames(styles.textInputContainer, {
-    [styles.focused]: isFocused,
     [styles['critical-value']]: !isFocused && isFlaggedCritical,
+    [styles.focused]: isFocused,
+    [styles.readonly]: readOnly,
     [muacColorCode]: useMuacColors,
     [errorMessageClass]: true,
   });
@@ -134,7 +136,7 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
                         <NumberInput
                           allowEmpty
                           className={`${styles.textInput} ${val.className}`}
-                          defaultValue="--"
+                          defaultValue={''}
                           disableWheel
                           hideSteppers
                           id={val.name + 'input'}
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
index 5d7836b8b8..395b4ba491 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
@@ -225,3 +225,15 @@
     }
   }
 }
+
+.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;
+}
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.test.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.test.tsx
index 297f7d67c5..31fbf9b922 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.test.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.test.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { assessValue, getReferenceRangesForConcept } from '../vitals.resource';
 import VitalsBiometricsInput from './vitals-biometrics-input.component';
-import userEvent from '@testing-library/user-event';
 
 jest.mock('react-hook-form', () => ({
   ...jest.requireActual('react-hook-form'),
@@ -55,44 +56,347 @@ jest.mock('react-hook-form', () => ({
   }),
 }));
 
+const mockConceptMetadata = [
+  {
+    uuid: '5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    display: 'Systolic blood pressure',
+    hiNormal: 140,
+    hiAbsolute: 250,
+    hiCritical: 180,
+    lowNormal: 100,
+    lowAbsolute: 0,
+    lowCritical: 85,
+    units: 'mmHg',
+  },
+  {
+    uuid: '5086AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    display: 'Diastolic blood pressure',
+    hiNormal: 90,
+    hiAbsolute: 150,
+    hiCritical: 120,
+    lowNormal: 55,
+    lowAbsolute: 0,
+    lowCritical: 40,
+    units: 'mmHg',
+  },
+  {
+    uuid: '5088AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    display: 'Temperature (c)',
+    hiNormal: null,
+    hiAbsolute: 43,
+    hiCritical: null,
+    lowNormal: null,
+    lowAbsolute: 25,
+    lowCritical: null,
+    units: 'DEG C',
+  },
+  {
+    uuid: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    display: 'Height (cm)',
+    hiNormal: null,
+    hiAbsolute: 272,
+    hiCritical: null,
+    lowNormal: null,
+    lowAbsolute: 10,
+    lowCritical: null,
+    units: 'cm',
+  },
+  {
+    uuid: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    display: 'Weight (kg)',
+    hiNormal: null,
+    hiAbsolute: 250,
+    hiCritical: null,
+    lowNormal: null,
+    lowAbsolute: 0,
+    lowCritical: null,
+    units: 'kg',
+  },
+  {
+    uuid: '5087AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    display: 'Pulse',
+    hiNormal: 100,
+    hiAbsolute: 230,
+    hiCritical: 130,
+    lowNormal: 55,
+    lowAbsolute: 0,
+    lowCritical: 49,
+    units: 'beats/min',
+  },
+  {
+    uuid: '5092AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    display: 'Arterial blood oxygen saturation (pulse oximeter)',
+    hiNormal: null,
+    hiAbsolute: 100,
+    hiCritical: null,
+    lowNormal: 95,
+    lowAbsolute: 0,
+    lowCritical: 90,
+    units: '%',
+  },
+  {
+    uuid: '1343AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    display: 'Mid-upper arm circumference',
+    hiNormal: null,
+    hiAbsolute: null,
+    hiCritical: null,
+    lowNormal: null,
+    lowAbsolute: null,
+    lowCritical: null,
+    units: 'cm',
+  },
+  {
+    uuid: '5242AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    display: 'Respiratory rate',
+    hiNormal: 18,
+    hiAbsolute: 999,
+    hiCritical: 26,
+    lowNormal: 12,
+    lowAbsolute: 0,
+    lowCritical: 8,
+    units: 'breaths/min',
+  },
+  {
+    uuid: '5283AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    display: 'Karnofsky performance score',
+    hiNormal: null,
+    hiAbsolute: null,
+    hiCritical: null,
+    lowNormal: null,
+    lowAbsolute: null,
+    lowCritical: null,
+    units: '%',
+  },
+];
+
+jest.mock('@openmrs/esm-patient-common-lib', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-patient-common-lib');
+
+  return {
+    ...originalModule,
+    useVitalsConceptMetadata: jest.fn().mockImplementation(() => ({
+      data: new Map([
+        ['5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', 'mmHg'],
+        ['5086AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', 'mmHg'],
+        ['5088AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', 'DEG C'],
+        ['5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', 'cm'],
+        ['5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', 'kg'],
+        ['5087AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', 'beats/min'],
+        ['5092AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', '%'],
+        ['1343AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', 'cm'],
+        ['5242AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', 'breaths/min'],
+        ['5283AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', '%'],
+      ]),
+      conceptMetadata: [
+        {
+          uuid: '5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          display: 'Systolic blood pressure',
+          hiNormal: 140,
+          hiAbsolute: 250,
+          hiCritical: 180,
+          lowNormal: 100,
+          lowAbsolute: 0,
+          lowCritical: 85,
+          units: 'mmHg',
+        },
+        {
+          uuid: '5086AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          display: 'Diastolic blood pressure',
+          hiNormal: 90,
+          hiAbsolute: 150,
+          hiCritical: 120,
+          lowNormal: 55,
+          lowAbsolute: 0,
+          lowCritical: 40,
+          units: 'mmHg',
+        },
+        {
+          uuid: '5088AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          display: 'Temperature (c)',
+          hiNormal: null,
+          hiAbsolute: 43,
+          hiCritical: null,
+          lowNormal: null,
+          lowAbsolute: 25,
+          lowCritical: null,
+          units: 'DEG C',
+        },
+        {
+          uuid: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          display: 'Height (cm)',
+          hiNormal: null,
+          hiAbsolute: 272,
+          hiCritical: null,
+          lowNormal: null,
+          lowAbsolute: 10,
+          lowCritical: null,
+          units: 'cm',
+        },
+        {
+          uuid: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          display: 'Weight (kg)',
+          hiNormal: null,
+          hiAbsolute: 250,
+          hiCritical: null,
+          lowNormal: null,
+          lowAbsolute: 0,
+          lowCritical: null,
+          units: 'kg',
+        },
+        {
+          uuid: '5087AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          display: 'Pulse',
+          hiNormal: 100,
+          hiAbsolute: 230,
+          hiCritical: 130,
+          lowNormal: 55,
+          lowAbsolute: 0,
+          lowCritical: 49,
+          units: 'beats/min',
+        },
+        {
+          uuid: '5092AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          display: 'Arterial blood oxygen saturation (pulse oximeter)',
+          hiNormal: null,
+          hiAbsolute: 100,
+          hiCritical: null,
+          lowNormal: 95,
+          lowAbsolute: 0,
+          lowCritical: 90,
+          units: '%',
+        },
+        {
+          uuid: '1343AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          display: 'Mid-upper arm circumference',
+          hiNormal: null,
+          hiAbsolute: null,
+          hiCritical: null,
+          lowNormal: null,
+          lowAbsolute: null,
+          lowCritical: null,
+          units: 'cm',
+        },
+        {
+          uuid: '5242AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          display: 'Respiratory rate',
+          hiNormal: 18,
+          hiAbsolute: 999,
+          hiCritical: 26,
+          lowNormal: 12,
+          lowAbsolute: 0,
+          lowCritical: 8,
+          units: 'breaths/min',
+        },
+        {
+          uuid: '5283AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          display: 'Karnofsky performance score',
+          hiNormal: null,
+          hiAbsolute: null,
+          hiCritical: null,
+          lowNormal: null,
+          lowAbsolute: null,
+          lowCritical: null,
+          units: '%',
+        },
+      ],
+    })),
+  };
+});
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    useConfig: jest.fn().mockReturnValue({
+      concepts: {
+        pulseUuid: '5087AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      },
+    }),
+  };
+});
+
+const testProps = {
+  control: undefined,
+  isWithinNormalRange: true,
+  fields: [],
+  interpretation: undefined,
+  placeholder: '',
+  title: '',
+  unitSymbol: '',
+};
+
 describe('VitalsBiometricsInput', () => {
-  it('should display the correct text input with correct value', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <VitalsBiometricsInput
-        control={undefined}
-        isWithinNormalRange
-        fields={[
-          {
-            id: 'pulse',
-            name: 'heartRate',
-            type: 'number',
-          },
-        ]}
-        title="Heart Rate"
-        unitSymbol="bpm"
-      />,
-    );
+  it('renders number inputs based correctly on the props provided', () => {
+    testProps.fields = [
+      {
+        id: 'pulse',
+        name: 'Heart rate',
+        type: 'number',
+      },
+    ];
+    testProps.title = 'Heart rate';
+    testProps.unitSymbol = 'bpm';
+
+    renderVitalsBiometricsInput();
 
-    expect(screen.getByText(/Heart Rate/i)).toBeInTheDocument();
+    const heartRateInput = screen.getByRole('spinbutton', { name: /heart rate/i });
+    expect(heartRateInput).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('--')).toBeInTheDocument();
+    expect(screen.getByTitle(/heart rate/i)).toBeInTheDocument();
     expect(screen.getByText(/bpm/i)).toBeInTheDocument();
-    expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+  });
+
+  it('renders textarea inputs correctly based on the props provided', () => {
+    testProps.fields = [
+      {
+        id: 'generalPatientNote',
+        name: 'Notes',
+        type: 'textArea',
+      },
+    ];
+    testProps.placeholder = 'Type any additional notes here';
+    testProps.title = 'Notes';
+
+    renderVitalsBiometricsInput();
 
-    const inputTextBox = await screen.findByRole('spinbutton');
-    await user.type(inputTextBox, '75');
+    const noteInput = screen.getByRole('textbox', { name: /notes/i });
+    expect(noteInput).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/type any additional notes here/i)).toBeInTheDocument();
+    expect(screen.getByTitle(/notes/i)).toBeInTheDocument();
   });
 
-  it('should display the correct text area with correct value', async () => {
-    render(
-      <VitalsBiometricsInput
-        control={undefined}
-        isWithinNormalRange
-        fields={[{ id: 'generalPatientNote', name: 'Notes', type: 'textArea' }]}
-        title="Notes"
-      />,
+  it('should validate the input based on the provided interpretation and reference range values', () => {
+    const config = useConfig();
+
+    testProps.fields = [
+      {
+        id: 'pulse',
+        name: 'Heart rate',
+        min: 0,
+        max: 230,
+        type: 'number',
+      },
+    ];
+    testProps.interpretation = assessValue(
+      300,
+      getReferenceRangesForConcept(config.concepts.pulseUuid, mockConceptMetadata),
     );
+    testProps.title = 'Heart rate';
+    testProps.unitSymbol = 'bpm';
+
+    renderVitalsBiometricsInput();
 
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    screen.findByRole('spinbutton');
+
+    expect(screen.getByRole('spinbutton', { name: /heart rate/i })).toBeInTheDocument();
+    const abnormalValueFlag = screen.getByTitle(/abnormal value/i);
+    expect(abnormalValueFlag).toBeInTheDocument();
+    const criticallyHighFlag = abnormalValueFlag.querySelector('span.critically-high');
+    expect(criticallyHighFlag).toBeInTheDocument();
   });
 });
+
+function renderVitalsBiometricsInput() {
+  render(<VitalsBiometricsInput {...testProps} />);
+}
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-chart.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-chart.component.tsx
index 17430ea10f..6913479f4d 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-chart.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-chart.component.tsx
@@ -42,7 +42,7 @@ const VitalsChart: React.FC<VitalsChartProps> = ({ patientVitals, conceptUnits,
     },
     {
       id: 'oxygenSaturation',
-      title: withUnit(t('spo2', 'SPO2'), conceptUnits.get(config.concepts.oxygenSaturationUuid) ?? '-'),
+      title: withUnit(t('spo2', 'SpO2'), conceptUnits.get(config.concepts.oxygenSaturationUuid) ?? '-'),
       value: 'spo2',
     },
     {
@@ -52,7 +52,7 @@ const VitalsChart: React.FC<VitalsChartProps> = ({ patientVitals, conceptUnits,
     },
     {
       id: 'respiratoryRate',
-      title: withUnit(t('respiratoryRate', 'R. Rate'), conceptUnits.get(config.concepts.respiratoryRateUuid) ?? '-'),
+      title: withUnit(t('respiratoryRate', 'R. rate'), conceptUnits.get(config.concepts.respiratoryRateUuid) ?? '-'),
       value: 'respiratoryRate',
     },
     {
diff --git a/packages/esm-patient-vitals-app/translations/am.json b/packages/esm-patient-vitals-app/translations/am.json
index 6491940411..aa838aac19 100644
--- a/packages/esm-patient-vitals-app/translations/am.json
+++ b/packages/esm-patient-vitals-app/translations/am.json
@@ -28,7 +28,7 @@
   "pulse": "Pulse",
   "recordBiometrics": "Record biometrics",
   "recordVitals": "Record vitals",
-  "respirationRate": "Respiration Rate",
+  "respirationRate": "Respiration rate",
   "respiratoryRate": "R. rate",
   "saveAndClose": "Save and close",
   "seeAll": "See all",
diff --git a/packages/esm-patient-vitals-app/translations/en.json b/packages/esm-patient-vitals-app/translations/en.json
index 797ca6ba14..9d76834f3f 100644
--- a/packages/esm-patient-vitals-app/translations/en.json
+++ b/packages/esm-patient-vitals-app/translations/en.json
@@ -28,8 +28,8 @@
   "pulse": "Pulse",
   "recordBiometrics": "Record biometrics",
   "recordVitals": "Record vitals",
-  "respirationRate": "Respiration Rate",
-  "respiratoryRate": "R. Rate",
+  "respirationRate": "Respiration rate",
+  "respiratoryRate": "R. rate",
   "saveAndClose": "Save and close",
   "seeAll": "See all",
   "spo2": "SpO2",

From 79557ebfea9fe6fe7249d0b82b520cd45552c90b Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Thu, 2 Nov 2023 22:14:22 +0300
Subject: [PATCH 14/17] Fixup

---
 .../vitals-biometrics-form.component.tsx      | 323 +++++++++---------
 .../vitals-biometrics-form.scss               |   4 +
 .../vitals-biometrics-input.component.tsx     | 255 +++++++-------
 .../vitals-biometrics-input.scss              |  37 +-
 .../vitals-biometrics-input.test.tsx          |  27 +-
 .../translations/am.json                      |   1 +
 .../translations/ar.json                      |   1 +
 .../translations/en.json                      |   1 +
 .../translations/es.json                      |   1 +
 .../translations/fr.json                      |   1 +
 .../translations/he.json                      |   1 +
 .../translations/km.json                      |   4 +-
 12 files changed, 352 insertions(+), 304 deletions(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
index 7def0af830..da262a86bc 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
@@ -31,10 +31,10 @@ import {
   savePatientVitals,
   useVitals,
 } from '../vitals.resource';
-import VitalsBiometricInput from './vitals-biometrics-input.component';
+import VitalsAndBiometricsInput from './vitals-biometrics-input.component';
 import styles from './vitals-biometrics-form.scss';
 
-const vitalsBiometricsFormSchema = z
+const VitalsAndBiometricFormSchema = z
   .object({
     systolicBloodPressure: z.number(),
     diastolicBloodPressure: z.number(),
@@ -59,9 +59,9 @@ const vitalsBiometricsFormSchema = z
     },
   );
 
-export type VitalsBiometricsFormData = z.infer<typeof vitalsBiometricsFormSchema>;
+export type VitalsBiometricsFormData = z.infer<typeof VitalsAndBiometricFormSchema>;
 
-const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid, closeWorkspace }) => {
+const VitalsAndBiometricsForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid, closeWorkspace }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const config = useConfig<ConfigObject>();
@@ -73,15 +73,15 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
   const { currentVisit } = useVisit(patientUuid);
   const { mutate } = useVitals(patientUuid);
   const { data: conceptUnits, conceptMetadata, conceptRanges } = useVitalsConceptMetadata();
+  const [hasInvalidVitals, setHasInvalidVitals] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [muacColorCode, setMuacColorCode] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const [showErrorNotification, setShowErrorNotification] = useState(false);
   const [showErrorMessage, setShowErrorMessage] = useState(false);
-  const [hasInvalidVitals, setHasInvalidVitals] = useState(false);
 
   const { control, handleSubmit, watch, setValue } = useForm<VitalsBiometricsFormData>({
     mode: 'all',
-    resolver: zodResolver(vitalsBiometricsFormSchema),
+    resolver: zodResolver(VitalsAndBiometricFormSchema),
   });
 
   const encounterUuid = currentVisit?.encounters?.find((encounter) => encounter?.form?.uuid === config.vitals.formUuid)
@@ -101,6 +101,19 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
     getMuacColorCode(extractNumbers(age(patient.patient?.birthDate)), midUpperArmCircumference, setMuacColorCode);
   }, [watch, patient.patient?.birthDate, midUpperArmCircumference]);
 
+  useEffect(() => {
+    if (height && weight) {
+      const computedBodyMassIndex = calculateBodyMassIndex(weight, height);
+      setValue('computedBodyMassIndex', computedBodyMassIndex);
+    }
+  }, [weight, height, setValue]);
+
+  function onError(err) {
+    if (err?.oneFieldRequired) {
+      setShowErrorNotification(true);
+    }
+  }
+
   const concepts = useMemo(
     () => ({
       midUpperArmCircumferenceRange: conceptRanges.get(config.concepts.midUpperArmCircumferenceUuid),
@@ -128,33 +141,31 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
   );
 
   const savePatientVitalsAndBiometrics = (data: VitalsBiometricsFormData) => {
+    const formData = data;
     setShowErrorMessage(true);
+    setShowErrorNotification(false);
+
     data?.computedBodyMassIndex && delete data.computedBodyMassIndex;
-    const patientVitalAndBiometrics = data;
 
-    let isFieldValid = true;
-    for (const key in patientVitalAndBiometrics) {
-      if (
-        isValueWithinReferenceRange(conceptMetadata, config.concepts[key + 'Uuid'], patientVitalAndBiometrics[key]) ==
-        false
-      ) {
-        setHasInvalidVitals(true);
-        isFieldValid = false;
-        break;
-      }
-    }
-    if (isFieldValid) {
+    let allFieldsAreValid = false;
+
+    allFieldsAreValid = Object.entries(formData)
+      .filter(([, value]) => Boolean(value))
+      .every(([key, value]) => isValueWithinReferenceRange(conceptMetadata, config.concepts[`${key}Uuid`], value));
+
+    if (allFieldsAreValid) {
       setIsSubmitting(true);
       setShowErrorMessage(false);
-      const ac = new AbortController();
+      const abortController = new AbortController();
+
       savePatientVitals(
         config.vitals.encounterTypeUuid,
         config.vitals.formUuid,
         config.concepts,
         patientUuid,
-        patientVitalAndBiometrics,
+        formData,
         new Date(),
-        ac,
+        abortController,
         session?.sessionLocation?.uuid,
       )
         .then((response) => {
@@ -183,18 +194,11 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
           });
         })
         .finally(() => {
-          ac.abort();
+          abortController.abort();
         });
     }
   };
 
-  useEffect(() => {
-    if (height && weight) {
-      const computedBodyMassIndex = calculateBodyMassIndex(weight, height);
-      setValue('computedBodyMassIndex', computedBodyMassIndex);
-    }
-  }, [weight, height, setValue]);
-
   if (config.vitals.useFormEngine) {
     return (
       <ExtensionSlot
@@ -213,12 +217,6 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
     );
   }
 
-  const onError = (err) => {
-    if (err?.oneFieldRequired) {
-      setShowErrorNotification(true);
-    }
-  };
-
   return (
     <Form className={styles.form}>
       <div className={styles.grid}>
@@ -228,9 +226,9 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
           </Column>
           <Row className={styles.row}>
             <Column>
-              <VitalsBiometricInput
+              <VitalsAndBiometricsInput
                 control={control}
-                fields={[
+                fieldProperties={[
                   {
                     id: 'temperature',
                     max: concepts.temperatureRange.highAbsolute,
@@ -239,24 +237,27 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     type: 'number',
                   },
                 ]}
-                interpretation={assessValue(
-                  temperature,
-                  getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptMetadata),
-                )}
-                isWithinNormalRange={isValueWithinReferenceRange(
-                  conceptMetadata,
-                  config.concepts['temperatureUuid'],
-                  temperature,
-                )}
+                interpretation={
+                  temperature &&
+                  assessValue(
+                    temperature,
+                    getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptMetadata),
+                  )
+                }
+                isValueWithinReferenceRange={
+                  temperature
+                    ? isValueWithinReferenceRange(conceptMetadata, config.concepts['temperatureUuid'], temperature)
+                    : true
+                }
                 showErrorMessage={showErrorMessage}
-                title={t('temperature', 'Temperature')}
+                label={t('temperature', 'Temperature')}
                 unitSymbol={conceptUnits.get(config.concepts.temperatureUuid) ?? ''}
               />
             </Column>
             <Column>
-              <VitalsBiometricInput
+              <VitalsAndBiometricsInput
                 control={control}
-                fields={[
+                fieldProperties={[
                   {
                     name: t('systolic', 'systolic'),
                     separator: '/',
@@ -273,13 +274,19 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'diastolicBloodPressure',
                   },
                 ]}
-                interpretation={interpretBloodPressure(
-                  systolicBloodPressure,
-                  diastolicBloodPressure,
-                  config.concepts,
-                  conceptMetadata,
-                )}
-                isWithinNormalRange={
+                interpretation={
+                  systolicBloodPressure &&
+                  diastolicBloodPressure &&
+                  interpretBloodPressure(
+                    systolicBloodPressure,
+                    diastolicBloodPressure,
+                    config.concepts,
+                    conceptMetadata,
+                  )
+                }
+                isValueWithinReferenceRange={
+                  systolicBloodPressure &&
+                  diastolicBloodPressure &&
                   isValueWithinReferenceRange(
                     conceptMetadata,
                     config.concepts.systolicBloodPressureUuid,
@@ -291,14 +298,14 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     diastolicBloodPressure,
                   )
                 }
-                title={t('bloodPressure', 'Blood pressure')}
+                label={t('bloodPressure', 'Blood pressure')}
                 unitSymbol={conceptUnits.get(config.concepts.systolicBloodPressureUuid) ?? ''}
               />
             </Column>
             <Column>
-              <VitalsBiometricInput
+              <VitalsAndBiometricsInput
                 control={control}
-                fields={[
+                fieldProperties={[
                   {
                     name: t('pulse', 'Pulse'),
                     type: 'number',
@@ -307,19 +314,20 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'pulse',
                   },
                 ]}
-                interpretation={assessValue(
-                  pulse,
-                  getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata),
-                )}
-                isWithinNormalRange={isValueWithinReferenceRange(conceptMetadata, config.concepts['pulseUuid'], pulse)}
-                title={t('heartRate', 'Heart rate')}
+                interpretation={
+                  pulse && assessValue(pulse, getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata))
+                }
+                isValueWithinReferenceRange={
+                  pulse && isValueWithinReferenceRange(conceptMetadata, config.concepts['pulseUuid'], pulse)
+                }
+                label={t('heartRate', 'Heart rate')}
                 unitSymbol={conceptUnits.get(config.concepts.pulseUuid) ?? ''}
               />
             </Column>
             <Column>
-              <VitalsBiometricInput
+              <VitalsAndBiometricsInput
                 control={control}
-                fields={[
+                fieldProperties={[
                   {
                     name: t('respirationRate', 'Respiration rate'),
                     type: 'number',
@@ -328,24 +336,26 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'respiratoryRate',
                   },
                 ]}
-                interpretation={assessValue(
-                  respiratoryRate,
-                  getReferenceRangesForConcept(config.concepts.respiratoryRateUuid, conceptMetadata),
-                )}
-                isWithinNormalRange={isValueWithinReferenceRange(
-                  conceptMetadata,
-                  config.concepts['respiratoryRateUuid'],
-                  respiratoryRate,
-                )}
+                interpretation={
+                  respiratoryRate &&
+                  assessValue(
+                    respiratoryRate,
+                    getReferenceRangesForConcept(config.concepts.respiratoryRateUuid, conceptMetadata),
+                  )
+                }
+                isValueWithinReferenceRange={
+                  respiratoryRate &&
+                  isValueWithinReferenceRange(conceptMetadata, config.concepts['respiratoryRateUuid'], respiratoryRate)
+                }
                 showErrorMessage={showErrorMessage}
-                title={t('respirationRate', 'Respiration rate')}
+                label={t('respirationRate', 'Respiration rate')}
                 unitSymbol={conceptUnits.get(config.concepts.respiratoryRateUuid) ?? ''}
               />
             </Column>
             <Column>
-              <VitalsBiometricInput
+              <VitalsAndBiometricsInput
                 control={control}
-                fields={[
+                fieldProperties={[
                   {
                     name: t('oxygenSaturation', 'Oxygen saturation'),
                     type: 'number',
@@ -354,17 +364,23 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'oxygenSaturation',
                   },
                 ]}
-                interpretation={assessValue(
-                  oxygenSaturation,
-                  getReferenceRangesForConcept(config.concepts.oxygenSaturationUuid, conceptMetadata),
-                )}
-                isWithinNormalRange={isValueWithinReferenceRange(
-                  conceptMetadata,
-                  config.concepts['oxygenSaturationUuid'],
-                  oxygenSaturation,
-                )}
+                interpretation={
+                  oxygenSaturation &&
+                  assessValue(
+                    oxygenSaturation,
+                    getReferenceRangesForConcept(config.concepts.oxygenSaturationUuid, conceptMetadata),
+                  )
+                }
+                isValueWithinReferenceRange={
+                  oxygenSaturation &&
+                  isValueWithinReferenceRange(
+                    conceptMetadata,
+                    config.concepts['oxygenSaturationUuid'],
+                    oxygenSaturation,
+                  )
+                }
                 showErrorMessage={showErrorMessage}
-                title={t('spo2', 'SpO2')}
+                label={t('spo2', 'SpO2')}
                 unitSymbol={conceptUnits.get(config.concepts.oxygenSaturationUuid) ?? ''}
               />
             </Column>
@@ -372,18 +388,18 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
 
           <Row className={styles.row}>
             <Column className={styles.noteInput}>
-              <VitalsBiometricInput
+              <VitalsAndBiometricsInput
                 control={control}
                 fieldWidth={isTablet ? '70%' : '100%'}
-                fields={[
+                fieldProperties={[
                   {
                     name: t('notes', 'Notes'),
-                    type: 'textArea',
+                    type: 'textarea',
                     id: 'generalPatientNote',
                   },
                 ]}
                 placeholder={t('additionalNoteText', 'Type any additional notes here')}
-                title={t('notes', 'Notes')}
+                label={t('notes', 'Notes')}
               />
             </Column>
           </Row>
@@ -394,9 +410,9 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
           </Column>
           <Row className={styles.row}>
             <Column>
-              <VitalsBiometricInput
+              <VitalsAndBiometricsInput
                 control={control}
-                fields={[
+                fieldProperties={[
                   {
                     name: t('weight', 'Weight'),
                     type: 'number',
@@ -405,24 +421,22 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'weight',
                   },
                 ]}
-                interpretation={assessValue(
-                  weight,
-                  getReferenceRangesForConcept(config.concepts.weightUuid, conceptMetadata),
-                )}
-                isWithinNormalRange={isValueWithinReferenceRange(
-                  conceptMetadata,
-                  config.concepts['weightUuid'],
-                  weight,
-                )}
+                interpretation={
+                  weight &&
+                  assessValue(weight, getReferenceRangesForConcept(config.concepts.weightUuid, conceptMetadata))
+                }
+                isValueWithinReferenceRange={
+                  height && isValueWithinReferenceRange(conceptMetadata, config.concepts['weightUuid'], weight)
+                }
                 showErrorMessage={showErrorMessage}
-                title={t('weight', 'Weight')}
+                label={t('weight', 'Weight')}
                 unitSymbol={conceptUnits.get(config.concepts.weightUuid) ?? ''}
               />
             </Column>
             <Column>
-              <VitalsBiometricInput
+              <VitalsAndBiometricsInput
                 control={control}
-                fields={[
+                fieldProperties={[
                   {
                     name: t('height', 'Height'),
                     type: 'number',
@@ -431,24 +445,22 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                     id: 'height',
                   },
                 ]}
-                interpretation={assessValue(
-                  height,
-                  getReferenceRangesForConcept(config.concepts.heightUuid, conceptMetadata),
-                )}
-                isWithinNormalRange={isValueWithinReferenceRange(
-                  conceptMetadata,
-                  config.concepts['heightUuid'],
-                  height,
-                )}
+                interpretation={
+                  height &&
+                  assessValue(height, getReferenceRangesForConcept(config.concepts.heightUuid, conceptMetadata))
+                }
+                isValueWithinReferenceRange={
+                  weight && isValueWithinReferenceRange(conceptMetadata, config.concepts['heightUuid'], height)
+                }
                 showErrorMessage={showErrorMessage}
-                title={t('height', 'Height')}
+                label={t('height', 'Height')}
                 unitSymbol={conceptUnits.get(config.concepts.heightUuid) ?? ''}
               />
             </Column>
             <Column>
-              <VitalsBiometricInput
+              <VitalsAndBiometricsInput
                 control={control}
-                fields={[
+                fieldProperties={[
                   {
                     name: t('bmi', 'BMI'),
                     type: 'number',
@@ -456,14 +468,14 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   },
                 ]}
                 readOnly
-                title={t('calculatedBmi', 'BMI (calc.)')}
+                label={t('calculatedBmi', 'BMI (calc.)')}
                 unitSymbol={biometricsUnitsSymbols['bmiUnit']}
               />
             </Column>
             <Column>
-              <VitalsBiometricInput
+              <VitalsAndBiometricsInput
                 control={control}
-                fields={[
+                fieldProperties={[
                   {
                     name: t('muac', 'MUAC'),
                     type: 'number',
@@ -473,42 +485,47 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
                   },
                 ]}
                 muacColorCode={muacColorCode}
-                isWithinNormalRange={isValueWithinReferenceRange(
-                  conceptMetadata,
-                  config.concepts['midUpperArmCircumferenceUuid'],
-                  midUpperArmCircumference,
-                )}
+                isValueWithinReferenceRange={
+                  height &&
+                  weight &&
+                  isValueWithinReferenceRange(
+                    conceptMetadata,
+                    config.concepts['midUpperArmCircumferenceUuid'],
+                    midUpperArmCircumference,
+                  )
+                }
                 showErrorMessage={showErrorMessage}
-                title={t('muac', 'MUAC')}
+                label={t('muac', 'MUAC')}
                 unitSymbol={conceptUnits.get(config.concepts.midUpperArmCircumferenceUuid) ?? ''}
                 useMuacColors={useMuacColorStatus}
               />
             </Column>
           </Row>
-          <Row>
-            {showErrorNotification && (
-              <Column>
-                <InlineNotification
-                  lowContrast
-                  title={t('error', 'Error')}
-                  subtitle={t('pleaseFillField', 'Please fill at least one field') + '.'}
-                  onClose={() => setShowErrorNotification(false)}
-                />
-              </Column>
-            )}
-            {hasInvalidVitals && (
-              <Column>
-                <InlineNotification
-                  className={styles.errorNotification}
-                  lowContrast={false}
-                  title={t('vitalsAndBiometricsSaveError', 'Error saving vitals and biometrics')}
-                  subtitle={t('checkForValidity', 'Some of the values entered are invalid')}
-                />
-              </Column>
-            )}
-          </Row>
         </Stack>
       </div>
+
+      {showErrorNotification && (
+        <Column className={styles.errorContainer}>
+          <InlineNotification
+            lowContrast
+            title={t('error', 'Error')}
+            subtitle={t('pleaseFillField', 'Please fill at least one field') + '.'}
+            onClose={() => setShowErrorNotification(false)}
+          />
+        </Column>
+      )}
+
+      {hasInvalidVitals && (
+        <Column className={styles.errorContainer}>
+          <InlineNotification
+            className={styles.errorNotification}
+            lowContrast={false}
+            title={t('vitalsAndBiometricsSaveError', 'Error saving vitals and biometrics')}
+            subtitle={t('checkForValidity', 'Some of the values entered are invalid')}
+          />
+        </Column>
+      )}
+
       <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
         <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
           {t('discard', 'Discard')}
@@ -527,4 +544,4 @@ const VitalsAndBiometricForms: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
   );
 };
 
-export default VitalsAndBiometricForms;
+export default VitalsAndBiometricsForm;
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.scss
index 57d08f36a6..a5a35f8c64 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.scss
@@ -70,3 +70,7 @@
 .errorNotification {
   margin: 0.5rem 0;
 }
+
+.errorContainer {
+  margin: 1rem;
+}
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index 387e8d8887..891df813ca 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -1,107 +1,108 @@
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useId, useState } from 'react';
 import classNames from 'classnames';
-import { Control, Controller } from 'react-hook-form';
+import { type Control, Controller } from 'react-hook-form';
 import { FormLabel, Layer, NumberInput, TextArea } from '@carbon/react';
 import { Warning } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { useLayoutType } from '@openmrs/esm-framework';
-import { VitalsBiometricsFormData } from './vitals-biometrics-form.component';
 import { generatePlaceholder } from '../vitals.resource';
+import { VitalsBiometricsFormData } from './vitals-biometrics-form.component';
 import styles from './vitals-biometrics-input.scss';
 
 type fieldId =
-  | 'systolicBloodPressure'
+  | 'computedBodyMassIndex'
   | 'diastolicBloodPressure'
-  | 'respiratoryRate'
-  | 'oxygenSaturation'
-  | 'pulse'
-  | 'temperature'
   | 'generalPatientNote'
-  | 'weight'
   | 'height'
   | 'midUpperArmCircumference'
-  | 'computedBodyMassIndex';
+  | 'oxygenSaturation'
+  | 'pulse'
+  | 'respiratoryRate'
+  | 'systolicBloodPressure'
+  | 'temperature'
+  | 'weight';
+
+type AbnormalValue = 'critically_low' | 'critically_high' | 'high' | 'low';
+type FieldTypes = 'number' | 'textarea';
 
 interface ResponsiveWrapperProps {
   children: React.ReactNode;
   isTablet: boolean;
 }
 
-interface VitalsBiometricInputProps {
+interface VitalsAndBiometricsInputProps {
   control: Control<VitalsBiometricsFormData>;
-  muacColorCode?: string;
-  interpretation?: string;
-  isWithinNormalRange?: boolean;
-  placeholder?: string;
-  readOnly?: boolean;
-  showErrorMessage?: boolean;
   fieldStyles?: React.CSSProperties;
   fieldWidth?: string;
-  fields: Array<{
-    id: fieldId;
-    name: string;
-    separator?: string;
-    type?: string | 'text';
+  fieldProperties: Array<{
     className?: string;
+    id: fieldId;
     invalid?: boolean;
-    min?: number | null;
     max?: number | null;
+    min?: number | null;
+    name: string;
+    separator?: string;
+    type?: FieldTypes;
   }>;
-  title: string;
-  useMuacColors?: boolean;
+  interpretation?: string;
+  isValueWithinReferenceRange?: boolean;
+  label: string;
+  muacColorCode?: string;
+  placeholder?: string;
+  readOnly?: boolean;
+  showErrorMessage?: boolean;
   unitSymbol?: string;
+  useMuacColors?: boolean;
 }
 
-const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
+const VitalsAndBiometricsInput: React.FC<VitalsAndBiometricsInputProps> = ({
   control,
+  fieldProperties,
+  fieldStyles,
+  fieldWidth,
   interpretation,
-  isWithinNormalRange = true,
+  isValueWithinReferenceRange = true,
+  label,
   muacColorCode,
   placeholder,
   readOnly,
   showErrorMessage,
-  fields,
-  fieldStyles,
-  fieldWidth,
-  title,
   unitSymbol,
   useMuacColors,
 }) => {
   const { t } = useTranslation();
+  const fieldId = useId();
   const isTablet = useLayoutType() === 'tablet';
   const [invalid, setInvalid] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
 
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
+  const abnormalValues: Array<AbnormalValue> = ['critically_low', 'critically_high', 'high', 'low'];
 
-  const isFlaggedCritical =
-    interpretation && ['critically_low', 'critically_high', 'high', 'low'].includes(interpretation);
+  const hasAbnormalValue = !isFocused && interpretation && abnormalValues.includes(interpretation as AbnormalValue);
 
   function checkValidity(value, onChange) {
     setInvalid(!(Number(value) || value === ''));
 
     if (!invalid) {
-      onChange(Number(value));
+      onChange(value === '' ? undefined : Number(value));
     }
   }
 
-  const isInvalidInput = !isWithinNormalRange || invalid;
-  const showInvalidInputError = showErrorMessage && isInvalidInput;
+  function handleFocusChange(isFocused: boolean) {
+    setIsFocused(isFocused);
+  }
+
+  const isInvalidInput = !isValueWithinReferenceRange || invalid;
+  const showInvalidInputError = Boolean(showErrorMessage && isInvalidInput);
   const errorMessageClass = showInvalidInputError ? styles.invalidInput : '';
 
-  const containerClasses = classNames(styles.inputContainer, {
+  const containerClasses = classNames(styles.container, {
     [styles.inputInTabletView]: isTablet,
-    [styles.isCriticalInput]: !isFocused && isFlaggedCritical,
+    [styles.inputWithAbnormalValue]: hasAbnormalValue,
   });
 
-  const textInputClasses = classNames(styles.textInputContainer, {
-    [styles['critical-value']]: !isFocused && isFlaggedCritical,
+  const inputClasses = classNames(styles.inputContainer, {
+    [styles['critical-value']]: hasAbnormalValue,
     [styles.focused]: isFocused,
     [styles.readonly]: readOnly,
     [muacColorCode]: useMuacColors,
@@ -111,100 +112,114 @@ const VitalsBiometricInput: React.FC<VitalsBiometricInputProps> = ({
   return (
     <>
       <div className={containerClasses} style={{ width: fieldWidth }}>
-        <div className={styles.labelAndIcons}>
-          <p className={styles.vitalsBiometricInputLabel01}>{title}</p>
-          {!isFocused && isFlaggedCritical ? (
-            <div title="abnormal value">
-              <span className={styles[interpretation.replace('_', '-')]} />
-            </div>
-          ) : showInvalidInputError ? (
-            <div className={styles.invalidInputIcon}>
+        <section className={styles.labelContainer}>
+          <span className={styles.label}>{label}</span>
+
+          {Boolean(hasAbnormalValue) ? (
+            <span className={styles[interpretation.replace('_', '-')]} title={t('abnormalValue', 'Abnormal value')} />
+          ) : null}
+
+          {showInvalidInputError ? (
+            <span className={styles.invalidInputIcon}>
               <Warning />
-            </div>
+            </span>
           ) : null}
-        </div>
-        <div className={textInputClasses} style={{ ...fieldStyles }}>
-          <div className={styles.centerDiv}>
-            {fields.map((val, i) => {
-              return val.type === 'number' ? (
-                <Fragment key={`${val.name}-${i}-number-input`}>
-                  <ResponsiveWrapper isTablet={isTablet}>
+        </section>
+        <section className={inputClasses} style={{ ...fieldStyles }}>
+          <div className={styles.centered}>
+            {fieldProperties.map((fieldProperty) => {
+              if (fieldProperty.type === 'number') {
+                const numberInputClasses = classNames(styles.numberInput, fieldProperty.className);
+
+                return (
+                  <Fragment key={fieldProperty.id}>
+                    <ResponsiveWrapper isTablet={isTablet}>
+                      <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}
+                              min={fieldProperty.min}
+                              name={fieldProperty.name}
+                              onBlur={() => handleFocusChange(false)}
+                              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                                checkValidity(event.target.value, onChange)
+                              }
+                              onFocus={() => handleFocusChange(true)}
+                              placeholder={generatePlaceholder(fieldProperty.name)}
+                              readOnly={readOnly}
+                              ref={ref}
+                              style={{ ...fieldStyles }}
+                              title={fieldProperty.name}
+                              type={fieldProperty.type}
+                              value={value}
+                            />
+                          );
+                        }}
+                      />
+                    </ResponsiveWrapper>
+                    {fieldProperty?.separator}
+                  </Fragment>
+                );
+              }
+
+              if (fieldProperty.type === 'textarea') {
+                return (
+                  <ResponsiveWrapper key={fieldProperty.id} isTablet={isTablet}>
                     <Controller
-                      name={val.id}
+                      name={fieldProperty.id}
                       control={control}
-                      render={({ field: { onChange, value, ref } }) => (
-                        <NumberInput
-                          allowEmpty
-                          className={`${styles.textInput} ${val.className}`}
-                          defaultValue={''}
-                          disableWheel
-                          hideSteppers
-                          id={val.name + 'input'}
-                          label={''}
-                          max={val.max}
-                          min={val.min}
-                          name={val.name}
-                          onBlur={handleBlur}
-                          onChange={(e) => checkValidity(e.target.value, onChange)}
-                          onFocus={handleFocus}
-                          placeholder={generatePlaceholder(val.name)}
-                          readOnly={readOnly}
+                      render={({ field: { onChange, ref, value } }) => (
+                        <TextArea
+                          className={styles.textarea}
+                          id={`${fieldId}-${fieldProperty.id}`}
+                          labelText={''}
+                          maxCount={100}
+                          name={fieldProperty.name}
+                          onBlur={() => handleFocusChange(false)}
+                          onChange={onChange}
+                          onFocus={() => handleFocusChange(true)}
+                          placeholder={placeholder}
                           ref={ref}
+                          rows={2}
                           style={{ ...fieldStyles }}
-                          title={val.name}
-                          type={val.type}
+                          title={fieldProperty.name}
                           value={value}
                         />
                       )}
                     />
                   </ResponsiveWrapper>
-                  {val?.separator}
-                </Fragment>
-              ) : (
-                <ResponsiveWrapper key={`${val.name}-${i}-textarea`} isTablet={isTablet}>
-                  <Controller
-                    name={val.id}
-                    control={control}
-                    render={({ field: { onBlur, onChange, value, ref } }) => (
-                      <TextArea
-                        className={styles.textarea}
-                        id={val.name}
-                        key={val.name + 'textarea'}
-                        labelText={''}
-                        name={val.name}
-                        onBlur={onBlur}
-                        onChange={(e) => onChange(e.target.value)}
-                        placeholder={placeholder}
-                        ref={ref}
-                        rows={2}
-                        style={{ ...fieldStyles }}
-                        title={val.name}
-                        value={value}
-                      />
-                    )}
-                  />
-                </ResponsiveWrapper>
-              );
+                );
+              }
             })}
           </div>
-          <p className={styles.unitName}>{unitSymbol}</p>
-        </div>
+          {Boolean(unitSymbol) && <p className={styles.unitName}>{unitSymbol}</p>}
+        </section>
       </div>
-      {showInvalidInputError ? (
+
+      {showInvalidInputError && (
         <FormLabel className={styles.invalidInputError}>
           {t('validationInputError', `Value must be between {{min}} and {{max}} {{unitSymbol}}`, {
-            min: fields[0].min,
-            max: fields[0].max,
+            min: fieldProperties[0].min,
+            max: fieldProperties[0].max,
             unitSymbol: unitSymbol,
           })}
         </FormLabel>
-      ) : null}
+      )}
     </>
   );
 };
 
-const ResponsiveWrapper: React.FC<ResponsiveWrapperProps> = ({ children, isTablet }) => {
-  return isTablet ? <Layer className={styles.layer}>{children} </Layer> : <>{children}</>;
-};
+function ResponsiveWrapper({ children, isTablet }: ResponsiveWrapperProps) {
+  return isTablet ? <Layer className={styles.layer}>{children} </Layer> : <Fragment>{children}</Fragment>;
+}
 
-export default VitalsBiometricInput;
+export default VitalsAndBiometricsInput;
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
index 395b4ba491..4b000f6765 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
@@ -15,19 +15,19 @@
   @include type.type-style("heading-04");
 }
 
-.inputContainer {
+.container {
   width: 11.625rem;
   border-bottom: 1px solid $ui-04;
   margin-bottom: spacing.$spacing-03;
 }
 
-.vitalsBiometricInputLabel01 {
+.label {
   @extend .label01;
   color: $text-02;
   margin-bottom: spacing.$spacing-03;
 }
 
-.textInput {
+.numberInput {
   border: none;
   @extend .productiveHeading04;
   text-align: center;
@@ -51,19 +51,18 @@
   }
 }
 
-.textInputContainer {
+.inputContainer {
   @extend .productiveHeading04;
   height: 4.875rem;
   display: flex;
   justify-content: center;
   flex-direction: column;
   text-align: center;
-  padding: spacing.$spacing-03;
   color: $text-02;
   background-color: $ui-01;
 
   &.focused {
-    border: 2px solid colors.$blue-60;
+    outline: 2px solid colors.$blue-60;
 
     input {
       outline: none !important;
@@ -79,11 +78,11 @@
   }
 }
 
-:global(.omrs-breakpoint-lt-desktop) .textInputContainer {
+:global(.omrs-breakpoint-lt-desktop) .inputContainer {
   background-color: $ui-02;
 }
 
-.textInputContainer {
+.inputContainer {
   &:global(.red) {
     background-color: colors.$red-20;
 
@@ -91,6 +90,7 @@
       background-color: colors.$red-20;
     }
   }
+
   &:global(.green) {
     background-color: colors.$green-20;
 
@@ -98,6 +98,7 @@
       background-color: colors.$green-20;
     }
   }
+
   &:global(.yellow) {
     background-color: colors.$yellow-10;
      input {
@@ -106,7 +107,7 @@
   }
 }
 
-.textInput {
+.numberInput {
   svg {
     display: none;
   }
@@ -115,6 +116,7 @@
     outline: none !important;
   }
 }
+
 .textarea {
   border: none;
   @extend .bodyLong01;
@@ -122,10 +124,14 @@
 
   textarea {
     border-bottom: none;
+
+    &:focus {
+      outline: none;
+    }
   }
 }
 
-.centerDiv {
+.centered {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -141,6 +147,7 @@
 }
 
 .invalidInputError {
+  max-width: 11rem;
   color: $danger;
   margin-bottom: spacing.$spacing-03;
 }
@@ -149,7 +156,7 @@
   width: 100%;
 }
 
-.labelAndIcons {
+.labelContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -171,7 +178,7 @@
 
 .critical-value {
   background-color: colors.$red-10;
-  .textInput {
+  .numberInput {
     svg {
       display: none;
     }
@@ -212,11 +219,11 @@
 
 
 .inputInTabletView {
-  &.isCriticalInput {
-    .textInputContainer {
+  &.inputWithAbnormalValue {
+    .inputContainer {
       background-color: colors.$red-20;
 
-      .textInput {
+      .numberInput {
         input {
           background-color: colors.$red-20;
           outline: none;
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.test.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.test.tsx
index 31fbf9b922..f5ee1b0dac 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.test.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { screen, render } from '@testing-library/react';
 import { useConfig } from '@openmrs/esm-framework';
 import { assessValue, getReferenceRangesForConcept } from '../vitals.resource';
-import VitalsBiometricsInput from './vitals-biometrics-input.component';
+import VitalsAndBiometricsInput from './vitals-biometrics-input.component';
 
 jest.mock('react-hook-form', () => ({
   ...jest.requireActual('react-hook-form'),
@@ -319,23 +319,23 @@ jest.mock('@openmrs/esm-framework', () => {
 const testProps = {
   control: undefined,
   isWithinNormalRange: true,
-  fields: [],
+  fieldProperties: [],
   interpretation: undefined,
   placeholder: '',
-  title: '',
+  label: '',
   unitSymbol: '',
 };
 
-describe('VitalsBiometricsInput', () => {
+describe('VitalsAndBiometricsInput', () => {
   it('renders number inputs based correctly on the props provided', () => {
-    testProps.fields = [
+    testProps.fieldProperties = [
       {
         id: 'pulse',
         name: 'Heart rate',
         type: 'number',
       },
     ];
-    testProps.title = 'Heart rate';
+    testProps.label = 'Heart rate';
     testProps.unitSymbol = 'bpm';
 
     renderVitalsBiometricsInput();
@@ -348,15 +348,15 @@ describe('VitalsBiometricsInput', () => {
   });
 
   it('renders textarea inputs correctly based on the props provided', () => {
-    testProps.fields = [
+    testProps.fieldProperties = [
       {
         id: 'generalPatientNote',
         name: 'Notes',
-        type: 'textArea',
+        type: 'textarea',
       },
     ];
     testProps.placeholder = 'Type any additional notes here';
-    testProps.title = 'Notes';
+    testProps.label = 'Notes';
 
     renderVitalsBiometricsInput();
 
@@ -369,7 +369,7 @@ describe('VitalsBiometricsInput', () => {
   it('should validate the input based on the provided interpretation and reference range values', () => {
     const config = useConfig();
 
-    testProps.fields = [
+    testProps.fieldProperties = [
       {
         id: 'pulse',
         name: 'Heart rate',
@@ -382,7 +382,7 @@ describe('VitalsBiometricsInput', () => {
       300,
       getReferenceRangesForConcept(config.concepts.pulseUuid, mockConceptMetadata),
     );
-    testProps.title = 'Heart rate';
+    testProps.label = 'Heart rate';
     testProps.unitSymbol = 'bpm';
 
     renderVitalsBiometricsInput();
@@ -392,11 +392,10 @@ describe('VitalsBiometricsInput', () => {
     expect(screen.getByRole('spinbutton', { name: /heart rate/i })).toBeInTheDocument();
     const abnormalValueFlag = screen.getByTitle(/abnormal value/i);
     expect(abnormalValueFlag).toBeInTheDocument();
-    const criticallyHighFlag = abnormalValueFlag.querySelector('span.critically-high');
-    expect(criticallyHighFlag).toBeInTheDocument();
+    expect(abnormalValueFlag).toHaveClass('critically-high');
   });
 });
 
 function renderVitalsBiometricsInput() {
-  render(<VitalsBiometricsInput {...testProps} />);
+  render(<VitalsAndBiometricsInput {...testProps} />);
 }
diff --git a/packages/esm-patient-vitals-app/translations/am.json b/packages/esm-patient-vitals-app/translations/am.json
index aa838aac19..4d936bd2fc 100644
--- a/packages/esm-patient-vitals-app/translations/am.json
+++ b/packages/esm-patient-vitals-app/translations/am.json
@@ -1,4 +1,5 @@
 {
+  "abnormalValue": "Abnormal value",
   "add": "Add",
   "additionalNoteText": "Type any additional notes here",
   "bloodPressure": "Blood Pressure",
diff --git a/packages/esm-patient-vitals-app/translations/ar.json b/packages/esm-patient-vitals-app/translations/ar.json
index 54ec40ab96..9797ed0188 100644
--- a/packages/esm-patient-vitals-app/translations/ar.json
+++ b/packages/esm-patient-vitals-app/translations/ar.json
@@ -1,4 +1,5 @@
 {
+  "abnormalValue": "Abnormal value",
   "add": "أضف",
   "additionalNoteText": "اكتب أي ملاحظات إضافية هنا",
   "bloodPressure": "ضغط الدم",
diff --git a/packages/esm-patient-vitals-app/translations/en.json b/packages/esm-patient-vitals-app/translations/en.json
index 9d76834f3f..063ca06fd3 100644
--- a/packages/esm-patient-vitals-app/translations/en.json
+++ b/packages/esm-patient-vitals-app/translations/en.json
@@ -1,4 +1,5 @@
 {
+  "abnormalValue": "Abnormal value",
   "add": "Add",
   "additionalNoteText": "Type any additional notes here",
   "bloodPressure": "Blood Pressure",
diff --git a/packages/esm-patient-vitals-app/translations/es.json b/packages/esm-patient-vitals-app/translations/es.json
index 0f7e21f857..bf78078c63 100644
--- a/packages/esm-patient-vitals-app/translations/es.json
+++ b/packages/esm-patient-vitals-app/translations/es.json
@@ -1,4 +1,5 @@
 {
+  "abnormalValue": "Abnormal value",
   "add": "Añadir",
   "additionalNoteText": "Escriba aquí cualquier nota adicional",
   "bloodPressure": "Presión arterial",
diff --git a/packages/esm-patient-vitals-app/translations/fr.json b/packages/esm-patient-vitals-app/translations/fr.json
index 696eff6197..cf44db37bb 100644
--- a/packages/esm-patient-vitals-app/translations/fr.json
+++ b/packages/esm-patient-vitals-app/translations/fr.json
@@ -1,4 +1,5 @@
 {
+  "abnormalValue": "Abnormal value",
   "add": "Ajouter",
   "additionalNoteText": "Tapez les notes supplémentaires ici",
   "bloodPressure": "Pression sanguine",
diff --git a/packages/esm-patient-vitals-app/translations/he.json b/packages/esm-patient-vitals-app/translations/he.json
index 74342f2ea9..778b8c7f48 100644
--- a/packages/esm-patient-vitals-app/translations/he.json
+++ b/packages/esm-patient-vitals-app/translations/he.json
@@ -1,4 +1,5 @@
 {
+  "abnormalValue": "Abnormal value",
   "add": "הוסף",
   "additionalNoteText": "הקלד הערות נוספות כאן",
   "bloodPressure": "לחץ דם",
diff --git a/packages/esm-patient-vitals-app/translations/km.json b/packages/esm-patient-vitals-app/translations/km.json
index 78315a7a0b..36d0f7c7d3 100644
--- a/packages/esm-patient-vitals-app/translations/km.json
+++ b/packages/esm-patient-vitals-app/translations/km.json
@@ -1,4 +1,5 @@
 {
+  "abnormalValue": "Abnormal value",
   "add": "បន្ថែម",
   "additionalNoteText": "វាយបញ្ចូលកំណត់ចំណាំបន្ថែមនៅទីនេះ",
   "bloodPressure": "សម្ពាធឈាម",
@@ -19,7 +20,6 @@
   "muac": "រង្វង់ដើមដៃពាក់ផ្នែកខាងលើ(MUAC)",
   "noDataRecorded": "មិនមានទិន្នន័យត្រូវបានកត់ត្រាសម្រាប់អ្នកជំងឺនេះទេ",
   "notes": "កំណត់សម្គាល់",
-  "numericInputError": "ត្រូវតែជាលេខ",
   "other": "ផ្សេងៗ",
   "overdue": "ហួសពេលកំណត់",
   "oxygenSaturation": "ការឆ្អែតអុកស៊ីសែន",
@@ -32,7 +32,7 @@
   "respirationRate": "ចង្វាក់ដង្ហើម",
   "respiratoryRate": "ចង្វាក់ដង្ហើម",
   "saveAndClose": "រក្សាទុក និងបិទ",
-  "seeAll": "ឃើញ​ទាំងអស់",
+  "seeAll": "ឃើញទាំងអស់",
   "spo2": "កំហាប់អុកស៊ីសែន",
   "systolic": "ស៊ីស្តូលិក",
   "temp": "សីតុណ្ហភាព",

From a64f54106cae3b6e47d900becd6588fbc97ad8f5 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Fri, 3 Nov 2023 21:30:30 +0300
Subject: [PATCH 15/17] Remove unit symbol from validation error message

---
 .../vitals-biometrics-input.component.tsx                      | 3 +--
 packages/esm-patient-vitals-app/translations/am.json           | 2 +-
 packages/esm-patient-vitals-app/translations/ar.json           | 2 +-
 packages/esm-patient-vitals-app/translations/en.json           | 2 +-
 packages/esm-patient-vitals-app/translations/es.json           | 2 +-
 packages/esm-patient-vitals-app/translations/fr.json           | 2 +-
 packages/esm-patient-vitals-app/translations/he.json           | 2 +-
 7 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index 891df813ca..6afc9acfca 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -207,10 +207,9 @@ const VitalsAndBiometricsInput: React.FC<VitalsAndBiometricsInputProps> = ({
 
       {showInvalidInputError && (
         <FormLabel className={styles.invalidInputError}>
-          {t('validationInputError', `Value must be between {{min}} and {{max}} {{unitSymbol}}`, {
+          {t('validationInputError', `Value must be between {{min}} and {{max}}`, {
             min: fieldProperties[0].min,
             max: fieldProperties[0].max,
-            unitSymbol: unitSymbol,
           })}
         </FormLabel>
       )}
diff --git a/packages/esm-patient-vitals-app/translations/am.json b/packages/esm-patient-vitals-app/translations/am.json
index 4d936bd2fc..3d4885be6a 100644
--- a/packages/esm-patient-vitals-app/translations/am.json
+++ b/packages/esm-patient-vitals-app/translations/am.json
@@ -39,7 +39,7 @@
   "temperature": "Temperature",
   "temperatureAbbreviated": "Temp",
   "unknown": "Unknown",
-  "validationInputError": "Value must be between {{min}} and {{max}} {{unitSymbol}}",
+  "validationInputError": "Value must be between {{min}} and {{max}}",
   "vitals": "Vitals",
   "vitalsAndBiometrics": "Vitals and biometrics",
   "vitalsAndBiometricsNowAvailable": "They are now visible on the Vitals and Biometrics page",
diff --git a/packages/esm-patient-vitals-app/translations/ar.json b/packages/esm-patient-vitals-app/translations/ar.json
index 9797ed0188..fd26b1b22c 100644
--- a/packages/esm-patient-vitals-app/translations/ar.json
+++ b/packages/esm-patient-vitals-app/translations/ar.json
@@ -39,7 +39,7 @@
   "temperature": "درجة الحرارة",
   "temperatureAbbreviated": "درجة الحرارة",
   "unknown": "غير معروف",
-  "validationInputError": "Value must be between {{min}} and {{max}} {{unitSymbol}}",
+  "validationInputError": "Value must be between {{min}} and {{max}}",
   "vitals": "العلامات الحيوية",
   "vitalsAndBiometrics": "العلامات الحيوية والقياسات البيومترية",
   "vitalsAndBiometricsNowAvailable": "هم الآن مرئيون على صفحة العلامات الحيوية والقياسات البيومترية",
diff --git a/packages/esm-patient-vitals-app/translations/en.json b/packages/esm-patient-vitals-app/translations/en.json
index 063ca06fd3..7433cc54de 100644
--- a/packages/esm-patient-vitals-app/translations/en.json
+++ b/packages/esm-patient-vitals-app/translations/en.json
@@ -39,7 +39,7 @@
   "temperature": "Temperature",
   "temperatureAbbreviated": "Temp",
   "unknown": "Unknown",
-  "validationInputError": "Value must be between {{min}} and {{max}} {{unitSymbol}}",
+  "validationInputError": "Value must be between {{min}} and {{max}}",
   "vitals": "Vitals",
   "vitalsAndBiometrics": "Vitals and biometrics",
   "vitalsAndBiometricsNowAvailable": "They are now visible on the Vitals and Biometrics page",
diff --git a/packages/esm-patient-vitals-app/translations/es.json b/packages/esm-patient-vitals-app/translations/es.json
index bf78078c63..6cfdd4b6b2 100644
--- a/packages/esm-patient-vitals-app/translations/es.json
+++ b/packages/esm-patient-vitals-app/translations/es.json
@@ -39,7 +39,7 @@
   "temperature": "Temperatura",
   "temperatureAbbreviated": "Temp",
   "unknown": "Desconocido",
-  "validationInputError": "Value must be between {{min}} and {{max}} {{unitSymbol}}",
+  "validationInputError": "Value must be between {{min}} and {{max}}",
   "vitals": "Signos vitales",
   "vitalsAndBiometrics": "Signos vitales y biométricos",
   "vitalsAndBiometricsNowAvailable": "Ahora son visibles en la página de Signos vitales y biométricos",
diff --git a/packages/esm-patient-vitals-app/translations/fr.json b/packages/esm-patient-vitals-app/translations/fr.json
index cf44db37bb..b3f5672e8f 100644
--- a/packages/esm-patient-vitals-app/translations/fr.json
+++ b/packages/esm-patient-vitals-app/translations/fr.json
@@ -39,7 +39,7 @@
   "temperature": "Température",
   "temperatureAbbreviated": "Temp",
   "unknown": "Unknown",
-  "validationInputError": "Value must be between {{min}} and {{max}} {{unitSymbol}}",
+  "validationInputError": "Value must be between {{min}} and {{max}}",
   "vitals": "Signes vitaux",
   "vitalsAndBiometrics": "Signes vitaux et biométrie",
   "vitalsAndBiometricsNowAvailable": "Ils sont désormais visibles sur la page Signes vitaux et biométrie",
diff --git a/packages/esm-patient-vitals-app/translations/he.json b/packages/esm-patient-vitals-app/translations/he.json
index 778b8c7f48..8c4034c80b 100644
--- a/packages/esm-patient-vitals-app/translations/he.json
+++ b/packages/esm-patient-vitals-app/translations/he.json
@@ -39,7 +39,7 @@
   "temperature": "טמפרטורה",
   "temperatureAbbreviated": "טמפ'",
   "unknown": "Unknown",
-  "validationInputError": "Value must be between {{min}} and {{max}} {{unitSymbol}}",
+  "validationInputError": "Value must be between {{min}} and {{max}}",
   "vitals": "מדדים חיוניים",
   "vitalsAndBiometrics": "מדדים חיוניים וביומטרים",
   "vitalsAndBiometricsNowAvailable": "הם כעת זמינים בדף מדדים חיוניים וביומטרים",

From bf10d96f83bc8b4f81a6643fc91c9009764c9c07 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Fri, 3 Nov 2023 22:18:57 +0300
Subject: [PATCH 16/17] Set validation error message conditionally

---
 .../vitals-biometrics-form/vitals-biometrics-form.component.tsx | 2 ++
 packages/esm-patient-vitals-app/translations/km.json            | 1 +
 2 files changed, 3 insertions(+)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
index da262a86bc..94ed297035 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-form.component.tsx
@@ -196,6 +196,8 @@ const VitalsAndBiometricsForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
         .finally(() => {
           abortController.abort();
         });
+    } else {
+      setHasInvalidVitals(true);
     }
   };
 
diff --git a/packages/esm-patient-vitals-app/translations/km.json b/packages/esm-patient-vitals-app/translations/km.json
index 36d0f7c7d3..2b9ba27ba8 100644
--- a/packages/esm-patient-vitals-app/translations/km.json
+++ b/packages/esm-patient-vitals-app/translations/km.json
@@ -39,6 +39,7 @@
   "temperature": "សីតុណ្ហភាព",
   "temperatureAbbreviated": "សីតុណ្ហភាព",
   "unknown": "មិនដឹង",
+  "validationInputError": "Value must be between {{min}} and {{max}}",
   "vitals": "សញ្ញាជីវិត",
   "vitalsAndBiometrics": "សញ្ញាជីវិត និងជីវមាត្រ",
   "vitalsAndBiometricsNowAvailable": "ឥឡូវនេះពួកវាអាចមើលឃើញនៅលើទំព័រ សញ្ញាជីវិត និងជីវមាត្រ",

From 0c102e1e290a63a9ed013ab89875fd435eff8ea6 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Fri, 3 Nov 2023 22:48:38 +0300
Subject: [PATCH 17/17] Nothing commit to trigger status checks

---
 .../vitals/vitals-biometrics-form/vitals-biometrics-input.scss   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
index 4b000f6765..dd0c4ec903 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-biometrics-form/vitals-biometrics-input.scss
@@ -217,7 +217,6 @@
   content: " ↑↑";
 }
 
-
 .inputInTabletView {
   &.inputWithAbnormalValue {
     .inputContainer {