Update Blood Pressure range; Skip sending mean pressure to backend

src/Components/Common/BloodPressureFormField.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next";
+import { properRoundOf } from "../../Utils/utils";
 import { FieldValidator } from "../Form/FieldValidators";
 import FormField from "../Form/FormFields/FormField";
 import RangeAutocompleteFormField from "../Form/FormFields/RangeAutocompleteFormField";
@@ -11,37 +13,34 @@ import { BloodPressure } from "../Patient/models";
 type Props = FormFieldBaseProps<BloodPressure>;
 
 export default function BloodPressureFormField(props: Props) {
+  const { t } = useTranslation();
   const field = useFormFieldPropsResolver(props);
 
   const handleChange = (event: FieldChangeEvent<number>) => {
     const value: BloodPressure = {
       ...field.value,
       [event.name]: event.value,
     };
-    value.mean = meanArterialPressure(value);
     field.onChange({ name: field.name, value });
   };
 
-  const map =
-    !!props.value?.diastolic &&
-    !!props.value.systolic &&
-    meanArterialPressure(props.value);
+  const map = props.value && meanArterialPressure(props.value);
 
   return (
     <FormField
       field={{
         ...field,
         labelSuffix: map ? (
-          <span className="font-medium">MAP: {map.toFixed(1)}</span>
+          <span className="font-medium">MAP: {map}</span>
         ) : undefined,
       }}
     >
       <div className="flex flex-row items-center">
         <RangeAutocompleteFormField
           name="systolic"
-          placeholder="Systolic"
+          placeholder={t("systolic")}
           start={0}
-          end={250}
+          end={400}
           step={1}
           value={field.value?.systolic}
           onChange={handleChange}
@@ -50,27 +49,27 @@ export default function BloodPressureFormField(props: Props) {
           thresholds={[
             {
               value: 0,
-              label: "Low",
+              label: t("low"),
               className: "hidden md:block text-danger-500",
             },
             {
               value: 100,
-              label: "Normal",
+              label: t("normal"),
               className: "hidden md:block text-primary-500",
             },
             {
               value: 140,
-              label: "High",
+              label: t("high"),
               className: "hidden md:block text-warning-500",
             },
           ]}
         />
         <span className="px-2 text-lg font-medium text-secondary-400">/</span>
         <RangeAutocompleteFormField
           name="diastolic"
-          placeholder="Diastolic"
+          placeholder={t("diastolic")}
           start={0}
-          end={250}
+          end={400}
           step={1}
           value={field.value?.diastolic}
           onChange={handleChange}
@@ -79,17 +78,17 @@ export default function BloodPressureFormField(props: Props) {
           thresholds={[
             {
               value: 0,
-              label: "Low",
+              label: t("low"),
               className: "hidden md:block text-danger-500",
             },
             {
               value: 50,
-              label: "Normal",
+              label: t("normal"),
               className: "hidden md:block text-primary-500",
             },
             {
               value: 90,
-              label: "High",
+              label: t("high"),
               className: "hidden md:block text-warning-500",
             },
           ]}
@@ -104,18 +103,12 @@ export const meanArterialPressure = ({
   systolic,
 }: BloodPressure) => {
   if (diastolic != null && systolic != null) {
-    return (2 * diastolic + systolic) / 3;
+    return properRoundOf((2 * diastolic + systolic) / 3);
   }
 };
 
 export const BloodPressureValidator: FieldValidator<BloodPressure> = (bp) => {
-  if (Object.values(bp).every((v) => v == null)) {
-    return;
-  }
-  if (bp.diastolic == null) {
-    return "Diastolic is missing. Either specify both or clear both.";
-  }
-  if (bp.systolic == null) {
-    return "Systolic is missing. Either specify both or clear both.";
+  if (Object.values(bp).some((v) => v == null)) {
+    return "blood_pressure_missing_attrs";
   }
 };

src/Components/Facility/Consultations/PrimaryParametersPlot.tsx

@@ -10,24 +10,14 @@ import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { PainDiagrams } from "./PainDiagrams";
 import PageTitle from "../../Common/PageTitle";
 import dayjs from "../../../Utils/dayjs";
+import { meanArterialPressure } from "../../Common/BloodPressureFormField";
 
 interface PrimaryParametersPlotProps {
   facilityId: string;
   patientId: string;
   consultationId: string;
 }
 
-const sanitizeBPAttribute = (value: number | undefined) => {
-  // Temp. hack until the cleaning of daily rounds as a db migration is done.
-  // TODO: remove once migration is merged.
-
-  if (value == null || value < 0) {
-    return;
-  }
-
-  return value;
-};
-
 export const PrimaryParametersPlot = ({
   consultationId,
 }: PrimaryParametersPlotProps) => {
@@ -88,19 +78,19 @@ export const PrimaryParametersPlot = ({
     {
       name: "diastolic",
       data: Object.values(results)
-        .map((p: any) => p.bp && sanitizeBPAttribute(p.bp.diastolic))
+        .map((p: any) => p.bp?.diastolic)
         .reverse(),
     },
     {
       name: "systolic",
       data: Object.values(results)
-        .map((p: any) => p.bp && sanitizeBPAttribute(p.bp.systolic))
+        .map((p: any) => p.bp?.systolic)
         .reverse(),
     },
     {
       name: "mean",
       data: Object.values(results)
-        .map((p: any) => p.bp && sanitizeBPAttribute(p.bp.mean))
+        .map((p: any) => p.bp && meanArterialPressure(p.bp))
         .reverse(),
     },
   ];

src/Components/Facility/models.tsx

@@ -403,9 +403,8 @@ export type PrimaryParametersPlotFields =
 
 export type PrimaryParametersPlotRes = {
   bp: {
-    mean?: number;
-    systolic?: number;
-    diastolic?: number;
+    systolic: number;
+    diastolic: number;
   };
   pulse: number;
   temperature: string;

src/Components/LogUpdate/CriticalCarePreview.tsx

@@ -16,6 +16,7 @@ import { VentilatorFields } from "./Sections/RespiratorySupport/Ventilator";
 import PressureSore from "./Sections/PressureSore/PressureSore";
 import { IOBalanceSections } from "./Sections/IOBalance";
 import PainChart from "./components/PainChart";
+import { meanArterialPressure } from "../Common/BloodPressureFormField";
 
 type Props = {
   facilityId: string;
@@ -201,7 +202,7 @@ export default function CriticalCarePreview(props: Props) {
               <RangeDetail
                 label="Systolic"
                 value={data.bp.systolic}
-                max={250}
+                max={400}
                 unit="mmHg"
                 valueDescriptions={rangeValueDescription({
                   low: 99,
@@ -211,13 +212,13 @@ export default function CriticalCarePreview(props: Props) {
               <RangeDetail
                 label="Diastolic"
                 value={data.bp.diastolic}
-                max={180}
+                max={400}
                 unit="mmHg"
                 valueDescriptions={rangeValueDescription({ low: 49, high: 89 })}
               />
               <Detail
                 label="Mean"
-                value={data.bp.mean && properRoundOf(data.bp.mean)}
+                value={data.bp && meanArterialPressure(data.bp)}
               />
             </div>
           )}

src/Components/LogUpdate/Sections/Vitals.tsx

@@ -1,11 +1,10 @@
+import { useTranslation } from "react-i18next";
 import {
   celsiusToFahrenheit,
   fahrenheitToCelsius,
-  properRoundOf,
   rangeValueDescription,
 } from "../../../Utils/utils";
 import { meanArterialPressure } from "../../Common/BloodPressureFormField";
-
 import RadioFormField from "../../Form/FormFields/RadioFormField";
 import RangeFormField from "../../Form/FormFields/RangeFormField";
 import TextAreaFormField from "../../Form/FormFields/TextAreaFormField";
@@ -15,39 +14,40 @@ import PainChart from "../components/PainChart";
 import { LogUpdateSectionMeta, LogUpdateSectionProps } from "../utils";
 
 const Vitals = ({ log, onChange }: LogUpdateSectionProps) => {
+  const { t } = useTranslation();
+
   const handleBloodPressureChange = (event: FieldChangeEvent<number>) => {
     const bp = {
       ...(log.bp ?? {}),
       [event.name]: event.value,
     };
-    bp.mean = meanArterialPressure(bp);
     onChange({ bp });
   };
 
   return (
     <div className="space-y-8">
       <div className="flex items-end justify-between">
         <h2 className="text-lg">Blood Pressure</h2>
-        <span>MAP: {(log.bp?.mean && properRoundOf(log.bp.mean)) || "--"}</span>
+        <span>MAP: {(log.bp && meanArterialPressure(log.bp)) || "--"}</span>
       </div>
       <RangeFormField
-        label="Systolic"
+        label={t("systolic")}
         name="systolic"
         onChange={handleBloodPressureChange}
         value={log.bp?.systolic}
         min={0}
-        max={250}
+        max={400}
         step={1}
         unit="mmHg"
         valueDescriptions={rangeValueDescription({ low: 99, high: 139 })}
       />
       <RangeFormField
-        label="Diastolic"
+        label={t("diastolic")}
         name="diastolic"
         onChange={handleBloodPressureChange}
         value={log.bp?.diastolic}
-        min={30}
-        max={180}
+        min={0}
+        max={400}
         step={1}
         unit="mmHg"
         valueDescriptions={rangeValueDescription({ low: 49, high: 89 })}

src/Components/Patient/DailyRounds.tsx

@@ -85,9 +85,7 @@ export const DailyRounds = (props: any) => {
     bp: {
       systolic: undefined,
       diastolic: undefined,
-      mean: undefined,
     },
-    // bed: null,
   };
 
   const initError = Object.assign(
@@ -247,7 +245,7 @@ export const DailyRounds = (props: any) => {
         case "bp": {
           const error = BloodPressureValidator(state.form.bp);
           if (error) {
-            errors.bp = error;
+            errors.bp = t(error);
             invalidForm = true;
             scrollTo("bloodPressure");
           }

src/Components/Patient/models.tsx

@@ -288,7 +288,6 @@ export const DailyRoundTypes = [
 
 export interface BloodPressure {
   diastolic?: number;
-  mean?: number;
   systolic?: number;
 }
 

src/Components/Scribe/formDetails.ts

@@ -129,7 +129,7 @@ const DAILY_ROUND_FORM_SCRIBE_DATA: Field[] = [
   {
     friendlyName: "bp",
     id: "bp",
-    default: { systolic: null, diastolic: null, mean: null },
+    default: { systolic: null, diastolic: null },
     type: "{ systolic?: number, diastolic?: number }",
     example: "{ systolic: 120 }",
     description:

src/Locale/en/Common.json

@@ -192,5 +192,8 @@
   "discard": "Discard",
   "live": "Live",
   "discharged": "Discharged",
-  "archived": "Archived"
-}
+  "archived": "Archived",
+  "normal": "Normal",
+  "low": "Low",
+  "high": "High"
+}

src/Locale/en/LogUpdate.json

@@ -52,5 +52,8 @@
   "NURSING_CARE_PROCEDURE__chest_tube_care": "Chest Tube Care",
   "NURSING_CARE_PROCEDURE__tracheostomy_care": "Tracheostomy Care",
   "NURSING_CARE_PROCEDURE__stoma_care": "Stoma Care",
-  "NURSING_CARE_PROCEDURE__catheter_care": "Catheter Care"
+  "NURSING_CARE_PROCEDURE__catheter_care": "Catheter Care",
+  "blood_pressure_missing_attrs": "Both systolic and diastolic is required",
+  "systolic": "Systolic",
+  "diastolic": "Diastolic"
 }