Embed vitals-settings in note

app/Helpers/helpers.php

@@ -621,9 +621,9 @@ if(!function_exists('vsValue')) {
     function vsValue($_v, $patient = null, $_direct = false)
     {
         if ($_direct) {
-            return $_v ? $_v : '<span class="font-weight-normal text-info text-sm font-italic">empty</span>';
+            return $_v ? $_v : '<span class="font-weight-normal text-info font-italic">empty</span>';
         }
-        return @($patient->{$_v}) ? $patient->{$_v} : '<span class="font-weight-normal text-info text-sm font-italic">empty</span>';
+        return @($patient->{$_v}) ? $patient->{$_v} : '<span class="font-weight-normal text-info font-italic">empty</span>';
     }
 }
 if(!function_exists('vsElement')) {

resources/views/app/patient/note/dashboard.blade.php

@@ -799,6 +799,102 @@
                     </div>
                 </div>
 
+                <div class="p-3 border-bottom screen-only">
+
+                    <div class="row" id="vitals-settings-{{$patient->uid}}">
+                        <div class="col-4 border-right">
+                            <div class="d-flex align-items-baseline">
+                                <b>BMI Management</b>
+                                <span class="mx-2 text-secondary">|</span>
+                                @include('app.patient.vitals-settings.bmi-management-form')
+                            </div>
+                            <div class="pt-3">
+                                @include('app.patient.vitals-settings.bmi-management-summary')
+                            </div>
+                        </div>
+                        <div class="col-8">
+                            <div class="d-flex align-items-baseline">
+                                <b>BP Management</b>
+                                <span class="mx-2 text-secondary">|</span>
+                                @include('app.patient.vitals-settings.bp-management-form')
+                            </div>
+                            <div class="pt-3">
+                                @include('app.patient.vitals-settings.bp-management-summary')
+                            </div>
+                        </div>
+                    </div>
+
+                    <script>
+                        (function () {
+                            function calculateUsualBmi() {
+                                let h = $('#bmi-management-settings [name="currentHeightInInches"]').val(),
+                                    w = $('#bmi-management-settings [name="usualWeightInPounds"]').val();
+                                let bmiElem = $('#bmi-management-settings [name="usualBmi"]').val(''),
+                                    bmiCategoryElem = $('#bmi-management-settings [name="usualBmiCategory"]').val('');
+                                calculateBmi(h, w, bmiElem, bmiCategoryElem);
+                                return false;
+                            }
+
+                            function calculateIdealBmi() {
+                                let h = $('#bmi-management-settings [name="currentHeightInInches"]').val(),
+                                    w = $('#bmi-management-settings [name="idealWeightInPounds"]').val();
+                                let bmiElem = $('#bmi-management-settings [name="idealBmi"]').val(''),
+                                    bmiCategoryElem = $('#bmi-management-settings [name="idealBmiCategory"]').val('');
+                                calculateBmi(h, w, bmiElem, bmiCategoryElem);
+                                return false;
+                            }
+
+                            function calculateBmi(h, w, bmiElem, bmiCategoryElem) {
+                                let bmi = 0,
+                                    bmiCategory = '';
+                                try {
+                                    h = +h;
+                                    w = +w;
+                                    bmi = (w / (h * h)) * 703;
+                                    bmiElem.val(bmi.toFixed(1));
+                                    if (bmi < 18.5) {
+                                        bmiCategory = '(Underweight)';
+                                    }
+                                    if (bmi >= 18.5 && bmi < 25) {
+                                        bmiCategory = '(Healthy)';
+                                    }
+                                    if (bmi >= 25 && bmi < 30) {
+                                        bmiCategory = '(Overweight)';
+                                    }
+                                    if (bmi >= 30) {
+                                        bmiCategory = '(Obese)';
+                                    }
+                                    bmiCategoryElem.val(bmiCategory);
+                                } catch (e) {
+                                    return false;
+                                }
+                            }
+
+                            function init() {
+                                $(document)
+                                    .off('change input paste keyup',
+                                        '#bmi-management-settings [name="currentHeightInInches"], #bmi-management-settings [name="usualWeightInPounds"]')
+                                    .on('change input paste keyup',
+                                        '#bmi-management-settings [name="currentHeightInInches"], #bmi-management-settings [name="usualWeightInPounds"]', function () {
+                                            return calculateUsualBmi();
+                                        });
+                                $(document)
+                                    .off('change input paste keyup',
+                                        '#bmi-management-settings [name="currentHeightInInches"], #bmi-management-settings [name="idealWeightInPounds"]')
+                                    .on('change input paste keyup',
+                                        '#bmi-management-settings [name="currentHeightInInches"], #bmi-management-settings [name="idealWeightInPounds"]', function () {
+                                            return calculateIdealBmi();
+                                        });
+
+                                $('#bmi-management-settings [name="currentHeightInInches"]').trigger('change');
+                            }
+
+                            addMCInitializer('vitals-settings-{{$patient->uid}}', init, '#vitals-settings-{{$patient->uid}}')
+                        }).call(window);
+                    </script>
+
+                </div>
+
                 <div class="p-3 border-bottom screen-only">
                     <div class="">
                         <div class="d-flex align-items-center mb-2">

resources/views/app/patient/vitals-settings.blade.php

@@ -7,7 +7,7 @@
     <hr class="m-neg-4">
 
     <div class="row" id="vitals-settings-{{$patient->uid}}">
-        <div class="col-6 border-right">
+        <div class="col-5 border-right">
             <div class="d-flex align-items-baseline">
                 <b>BMI Management</b>
                 <span class="mx-2 text-secondary">|</span>
@@ -17,7 +17,7 @@
                 @include('app.patient.vitals-settings.bmi-management-summary')
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-7">
             <div class="d-flex align-items-baseline">
                 <b>BP Management</b>
                 <span class="mx-2 text-secondary">|</span>

resources/views/app/patient/vitals-settings/bmi-management-summary.blade.php

@@ -8,10 +8,8 @@
 
 <div class="mb-1">
     <span class="text-secondary">Weight (usual):</span>
-    <b><?= vsValue('usual_weight_in_pounds', $patient) ?></b><span class="text-secondary">, ranging between</span>
-    <b><?= vsValue('usual_weight_in_pounds_min', $patient) ?></b>
-    <span class="text-secondary">and</span>
-    <b><?= vsValue('usual_weight_in_pounds_max', $patient) ?></b>
+    <b><?= vsValue('usual_weight_in_pounds', $patient) ?></b>
+    <span class="text-secondary">(range <?= vsValue('usual_weight_in_pounds_min', $patient) ?> to <?= vsValue('usual_weight_in_pounds_max', $patient) ?>)</span>
 </div>
 
 <div class="mb-3 ml-3">
@@ -22,10 +20,8 @@
 
 <div class="mb-1">
     <span class="text-secondary">Weight (ideal):</span>
-    <b><?= vsValue('ideal_weight_in_pounds', $patient) ?></b><span class="text-secondary">, ranging between</span>
-    <b><?= vsValue('ideal_weight_in_pounds_min', $patient) ?></b>
-    <span class="text-secondary">and</span>
-    <b><?= vsValue('ideal_weight_in_pounds_max', $patient) ?></b>
+    <b><?= vsValue('ideal_weight_in_pounds', $patient) ?></b>
+    <span class="text-secondary">(range <?= vsValue('ideal_weight_in_pounds_min', $patient) ?> to <?= vsValue('ideal_weight_in_pounds_max', $patient) ?>)</span>
 </div>
 
 <div class="mb-3 ml-3">

resources/views/app/patient/vitals-settings/bp-management-summary.blade.php

@@ -1,210 +1,243 @@
-<div class="text-secondary font-weight-bold mb-3">Usual BP:</div>
-<div class="pl-3 mb-2">
-    <div class="text-secondary font-weight-bold mb-2">
-        <i class="fa fa-sun"></i>
-        AM
-    </div>
-    <div class="pl-3">
-        <div class="mb-2 d-flex align-items-center">
-            <span class="text-secondary width-70px">SBP:</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_am_resting_sbp', $patient) ?></div>
-            <span class="text-secondary text-center text-sm">ranging between</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_am_resting_sbp_min', $patient) ?></div>
-            <span class="text-secondary">and</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_am_resting_sbp_max', $patient) ?></div>
-        </div>
-        <div class="mb-2 d-flex align-items-center">
-            <span class="text-secondary width-70px">DBP:</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_am_resting_dbp', $patient) ?></div>
-            <span class="text-secondary text-center text-sm">ranging between</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_am_resting_dbp_min', $patient) ?></div>
-            <span class="text-secondary">and</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_am_resting_dbp_max', $patient) ?></div>
+<div class="row">
+    <div class="col-6 border-right">
+        <div class="text-secondary font-weight-bold mb-3">Usual BP:</div>
+        <div class=" mb-3">
+            <div class="text-secondary font-weight-bold mb-2">
+                <i class="fa fa-sun"></i>
+                AM
+            </div>
+            <div class="">
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">SBP:</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('usual_am_resting_sbp', $patient) ?></div>
+                    <span class="text-secondary">(range
+                    <?= vsValue('usual_am_resting_sbp_min', $patient) ?>
+                    to
+                    <?= vsValue('usual_am_resting_sbp_max', $patient) ?>)</span>
+                </div>
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">DBP:</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('usual_am_resting_dbp', $patient) ?></div>
+                    <span class="text-secondary">(range
+                    <?= vsValue('usual_am_resting_dbp_min', $patient) ?>
+                    to
+                    <?= vsValue('usual_am_resting_dbp_max', $patient) ?>)</span>
+                </div>
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">Pulse:</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('usual_am_resting_pulse', $patient) ?></div>
+                    <span class="text-secondary">(range
+                    <?= vsValue('usual_am_resting_pulse_min', $patient) ?>
+                    to
+                    <?= vsValue('usual_am_resting_pulse_max', $patient) ?>)</span>
+                </div>
+            </div>
         </div>
-        <div class="mb-1 d-flex align-items-center">
-            <span class="text-secondary width-70px">Pulse:</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_am_resting_pulse', $patient) ?></div>
-            <span class="text-secondary text-center text-sm">ranging between</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_am_resting_pulse_min', $patient) ?></div>
-            <span class="text-secondary">and</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_am_resting_pulse_max', $patient) ?></div>
+        <div class=" mb-3">
+            <div class="text-secondary font-weight-bold mb-2">
+                <i class="fa fa-moon"></i>
+                PM
+            </div>
+            <div class="">
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">SBP:</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('usual_pm_resting_sbp', $patient) ?></div>
+                    <span class="text-secondary">(range
+                    <?= vsValue('usual_pm_resting_sbp_min', $patient) ?>
+                    to
+                    <?= vsValue('usual_pm_resting_sbp_max', $patient) ?>)</span>
+                </div>
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">DBP:</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('usual_pm_resting_dbp', $patient) ?></div>
+                    <span class="text-secondary">(range
+                    <?= vsValue('usual_pm_resting_dbp_min', $patient) ?>
+                    to
+                    <?= vsValue('usual_pm_resting_dbp_max', $patient) ?>)</span>
+                </div>
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">Pulse:</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('usual_pm_resting_pulse', $patient) ?></div>
+                    <span class="text-secondary">(range
+                    <?= vsValue('usual_pm_resting_pulse_min', $patient) ?>
+                    to
+                    <?= vsValue('usual_pm_resting_pulse_max', $patient) ?>)</span>
+                </div>
+            </div>
         </div>
     </div>
-</div>
-<div class="pl-3 mb-3">
-    <div class="text-secondary font-weight-bold mb-2">
-        <i class="fa fa-moon"></i>
-        PM
-    </div>
-    <div class="pl-3">
-        <div class="mb-2 d-flex align-items-center">
-            <span class="text-secondary width-70px">SBP:</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_pm_resting_sbp', $patient) ?></div>
-            <span class="text-secondary text-center text-sm">ranging between</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_pm_resting_sbp_min', $patient) ?></div>
-            <span class="text-secondary">and</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_pm_resting_sbp_max', $patient) ?></div>
-        </div>
-        <div class="mb-2 d-flex align-items-center">
-            <span class="text-secondary width-70px">DBP:</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_pm_resting_dbp', $patient) ?></div>
-            <span class="text-secondary text-center text-sm">ranging between</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_pm_resting_dbp_min', $patient) ?></div>
-            <span class="text-secondary">and</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_pm_resting_dbp_max', $patient) ?></div>
-        </div>
-        <div class="mb-1 d-flex align-items-center">
-            <span class="text-secondary width-70px">Pulse:</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_pm_resting_pulse', $patient) ?></div>
-            <span class="text-secondary text-center text-sm">ranging between</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_pm_resting_pulse_min', $patient) ?></div>
-            <span class="text-secondary">and</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('usual_pm_resting_pulse_max', $patient) ?></div>
+    <div class="col-6">
+        <div class="text-secondary font-weight-bold mb-3">Ideal BP:</div>
+        <div class=" mb-3">
+            <div class="">
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">SBP:</span>
+                    <div class="font-weight-bold"><?= vsValue('ideal_am_resting_sbp', $patient) ?></div>
+                    <span class="text-secondary">(range
+                    <?= vsValue('ideal_am_resting_sbp_min', $patient) ?>
+                    to
+                    <?= vsValue('ideal_am_resting_sbp_max', $patient) ?>)</span>
+                </div>
+                <div class="mb-3 d-flex align-items-center">
+                    <span class="text-secondary width-50px">Goal: &nbsp;</span>
+                    <div class="flex-grow-1">
+                        <?= vsValue('sbp_management_goal_category', $patient) ?>
+                    </div>
+                </div>
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">DBP:</span>
+                    <div class="font-weight-bold"><?= vsValue('ideal_am_resting_dbp', $patient) ?></div>
+                    <span class="text-secondary">(range
+                    <?= vsValue('ideal_am_resting_dbp_min', $patient) ?>
+                    to
+                    <?= vsValue('ideal_am_resting_dbp_max', $patient) ?>)</span>
+                </div>
+                <div class="mb-3 d-flex align-items-center">
+                    <span class="text-secondary width-50px">Goal: &nbsp;</span>
+                    <div class="flex-grow-1">
+                        <?= vsValue('dbp_management_goal_category', $patient) ?>
+                    </div>
+                </div>
+                <div class="mb-1 d-flex align-items-center">
+                    <span class="text-secondary width-50px">Pulse:</span>
+                    <div class="font-weight-bold"><?= vsValue('ideal_am_resting_pulse', $patient) ?></div>
+                    <span class="text-secondary">(range
+                    <?= vsValue('ideal_am_resting_pulse_min', $patient) ?>
+                    to
+                    <?= vsValue('ideal_am_resting_pulse_max', $patient) ?>)</span>
+                </div>
+                <div class="mb-3 d-flex align-items-center">
+                    <span class="text-secondary width-50px">Goal: &nbsp;</span>
+                    <div class="flex-grow-1">
+                        <?= vsValue('pulse_management_goal_category', $patient) ?>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </div>
+
 <hr class="my-3">
 
-<div class="text-secondary font-weight-bold mb-3">Ideal BP:</div>
-<div class="pl-3 mb-3">
-    <div class="pl-3">
-        <div class="mb-1 d-flex align-items-center">
-            <span class="text-secondary min-width-70px">SBP:</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('ideal_am_resting_sbp', $patient) ?></div>
-            <span class="text-secondary text-center text-sm">ranging between</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('ideal_am_resting_sbp_min', $patient) ?></div>
-            <span class="text-secondary">and</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('ideal_am_resting_sbp_max', $patient) ?></div>
-        </div>
-        <div class="mb-3 d-flex align-items-center">
-            <span class="text-secondary min-width-70px">Goal: &nbsp;</span>
-            <div class="flex-grow-1">
-                <?= vsValue('sbp_management_goal_category', $patient) ?>
+<div class="text-secondary font-weight-bold mb-3">Alerts</div>
+
+<div class="row">
+    <div class="col-6 border-right">
+        <div class=" mb-3">
+            <div class="text-secondary font-weight-bold mb-2">
+                <i class="fa fa-circle text-danger"></i>
+                Red
             </div>
-        </div>
-        <div class="mb-1 d-flex align-items-center">
-            <span class="text-secondary min-width-70px">DBP:</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('ideal_am_resting_dbp', $patient) ?></div>
-            <span class="text-secondary text-center text-sm">ranging between</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('ideal_am_resting_dbp_min', $patient) ?></div>
-            <span class="text-secondary">and</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('ideal_am_resting_dbp_max', $patient) ?></div>
-        </div>
-        <div class="mb-3 d-flex align-items-center">
-            <span class="text-secondary min-width-70px">Goal: &nbsp;</span>
-            <div class="flex-grow-1">
-                <?= vsValue('dbp_management_goal_category', $patient) ?>
+            <div class="">
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary">SBP: above</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_sbp_above', $patient) ?></div>
+                    <span class="text-secondary text-center">or below</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_sbp_below', $patient) ?></div>
+                </div>
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary">DBP: above</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_dbp_above', $patient) ?></div>
+                    <span class="text-secondary text-center">or below</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_dbp_below', $patient) ?></div>
+                </div>
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary">Pulse: above</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_pulse_above', $patient) ?></div>
+                    <span class="text-secondary text-center">or below</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_pulse_below', $patient) ?></div>
+                </div>
             </div>
         </div>
-        <div class="mb-1 d-flex align-items-center">
-            <span class="text-secondary min-width-70px">Pulse:</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('ideal_am_resting_pulse', $patient) ?></div>
-            <span class="text-secondary text-center text-sm">ranging between</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('ideal_am_resting_pulse_min', $patient) ?></div>
-            <span class="text-secondary">and</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('ideal_am_resting_pulse_max', $patient) ?></div>
-        </div>
-        <div class="mb-3 d-flex align-items-center">
-            <span class="text-secondary min-width-70px">Goal: &nbsp;</span>
-            <div class="flex-grow-1">
-                <?= vsValue('pulse_management_goal_category', $patient) ?>
+    </div>
+    <div class="col-6">
+        <div class=" mb-2">
+            <div class="text-secondary font-weight-bold mb-2">
+                <i class="fa fa-circle text-warning-mellow"></i>
+                Yellow
+            </div>
+            <div class="">
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary">SBP: above</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_sbp_above', $patient) ?></div>
+                    <span class="text-secondary text-center">or below</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_sbp_below', $patient) ?></div>
+                </div>
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary">DBP: above</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_dbp_above', $patient) ?></div>
+                    <span class="text-secondary text-center">or below</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_dbp_below', $patient) ?></div>
+                </div>
+                <div class="mb-2 d-flex align-items-center">
+                    <span class="text-secondary">Pulse: above</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_pulse_above', $patient) ?></div>
+                    <span class="text-secondary text-center">or below</span>
+                    <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_pulse_below', $patient) ?></div>
+                </div>
             </div>
         </div>
     </div>
 </div>
+
 <hr class="my-3">
 
-<div class="text-secondary font-weight-bold mb-3">Alerts</div>
-<div class="pl-3 mb-3">
-    <div class="text-secondary font-weight-bold mb-2">
-        <i class="fa fa-circle text-danger"></i>
-        Red
-    </div>
-    <div class="pl-3">
-        <div class="mb-2 d-flex align-items-center">
-            <span class="text-secondary">SBP: above</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_sbp_above', $patient) ?></div>
-            <span class="text-secondary text-center">or below</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_sbp_below', $patient) ?></div>
-        </div>
-        <div class="mb-2 d-flex align-items-center">
-            <span class="text-secondary">DBP: above</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_dbp_above', $patient) ?></div>
-            <span class="text-secondary text-center">or below</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_dbp_below', $patient) ?></div>
-        </div>
-        <div class="mb-2 d-flex align-items-center">
-            <span class="text-secondary">Pulse: above</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_pulse_above', $patient) ?></div>
-            <span class="text-secondary text-center">or below</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('red_alert_when_pulse_below', $patient) ?></div>
+<div class="row mb-2">
+    <div class="col-6 border-right">
+        <div class="d-flex align-items-start">
+            <span class="text-secondary min-width-140px pr-3">Reports prehypertension?</span>
+            <div>
+                <?= vsValue('has_prehypertension_dx', $patient) ?>
+            </div>
         </div>
     </div>
-</div>
-<div class="pl-3 mb-2">
-    <div class="text-secondary font-weight-bold mb-2">
-        <i class="fa fa-circle text-warning-mellow"></i>
-        Yellow
-    </div>
-    <div class="pl-3">
-        <div class="mb-2 d-flex align-items-center">
-            <span class="text-secondary">SBP: above</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_sbp_above', $patient) ?></div>
-            <span class="text-secondary text-center">or below</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_sbp_below', $patient) ?></div>
-        </div>
-        <div class="mb-2 d-flex align-items-center">
-            <span class="text-secondary">DBP: above</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_dbp_above', $patient) ?></div>
-            <span class="text-secondary text-center">or below</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_dbp_below', $patient) ?></div>
-        </div>
-        <div class="mb-2 d-flex align-items-center">
-            <span class="text-secondary">Pulse: above</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_pulse_above', $patient) ?></div>
-            <span class="text-secondary text-center">or below</span>
-            <div class="px-2 font-weight-bold"><?= vsValue('yellow_alert_when_pulse_below', $patient) ?></div>
+    <div class="col-6">
+        <div class="d-flex align-items-start">
+            <span class="text-secondary min-width-140px pr-3">Reports hypertension?</span>
+            <div>
+                <?= vsValue('has_hypertension_dx', $patient) ?>
+            </div>
         </div>
     </div>
 </div>
-<hr class="my-3">
-
-<div class="mb-2 d-flex align-items-start">
-    <span class="text-secondary min-width-140px pr-3">Reports prehypertension?</span>
-    <div>
-        <?= vsValue('has_prehypertension_dx', $patient) ?>
+<div class="row mb-2">
+    <div class="col-6 border-right">
+        <div class="d-flex align-items-start">
+            <span class="text-secondary min-width-140px pr-3">Reports hypertension medicine?</span>
+            <div>
+                <?= vsValue('is_prescribed_hypertension_medicine', $patient) ?>
+            </div>
+        </div>
     </div>
-</div>
-<div class="mb-2 d-flex align-items-start">
-    <span class="text-secondary min-width-140px pr-3">Reports hypertension?</span>
-    <div>
-        <?= vsValue('has_hypertension_dx', $patient) ?>
+    <div class="col-6">
+        <div class="d-flex align-items-start">
+            <span class="text-secondary min-width-140px pr-3">Is it a goal to reduce<br>hypertension medicine?</span>
+            <div>
+                <?= vsValue('is_goal_to_reduce_hypertension_medicine', $patient) ?>
+            </div>
+        </div>
     </div>
 </div>
-<div class="mb-2 d-flex align-items-start">
-    <span class="text-secondary min-width-140px pr-3">Reports hypertension medicine?</span>
-    <div>
-        <?= vsValue('is_prescribed_hypertension_medicine', $patient) ?>
+<div class="row mb-2">
+    <div class="col-6 border-right">
+        <div class="d-flex align-items-start">
+            <span class="text-secondary min-width-140px pr-3">Describe the goal</span>
+            <div>
+                <?= vsValue('goal_to_reduce_hypertension_medicine_memo', $patient) ?>
+            </div>
+        </div>
     </div>
-</div>
-<div class="mb-2 d-flex align-items-start">
-    <span class="text-secondary min-width-140px pr-3">Is it a goal to reduce<br>hypertension medicine?</span>
-    <div>
-        <?= vsValue('is_goal_to_reduce_hypertension_medicine', $patient) ?>
+    <div class="col-6">
+        <div class="d-flex align-items-center">
+            <span class="text-secondary min-width-140px pr-3">BP monitoring prescribed?</span>
+            <div>
+                <?= vsValue('is_bp_monitoring_needed', $patient) ?>
+            </div>
+        </div>
     </div>
 </div>
 
-<div class="text-secondary min-width-140px mb-1">Describe the goal:</div>
-<div>
-    <?= vsValue('goal_to_reduce_hypertension_medicine_memo', $patient) ?>
-</div>
-
-<div class="my-3 d-flex align-items-center">
-    <span class="text-secondary min-width-140px pr-3">BP monitoring prescribed?</span>
-    <div>
-        <?= vsValue('is_bp_monitoring_needed', $patient) ?>
-    </div>
-</div>
+<hr class="my-3">
 
 <div class="mb-2">
     <span class="text-secondary">ICDs:</span>