investigating how to add appointment status bar

Author: swebberuk

manage_breast_screening/assets/sass/main.scss

@@ -80,3 +80,44 @@ a[href="#"] {
     }
   }
 }
+
+.app-status-bar {
+  background-color: #00386e;
+  color: #ffffff;
+  padding: 8px 0;
+  border-bottom: 1px solid #d8dde0;
+}
+
+.app-status-bar a {
+  color: #ffffff;
+}
+.app-status-bar a:hover, .app-status-bar a:active {
+  color: #ffffff;
+}
+.app-status-bar a:focus {
+  color: #212b32;
+}
+
+.app-status-bar__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  align-items: center;
+}
+
+.app-status-bar__row + .app-status-bar__row {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.app-status-bar__item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.app-status-bar__key {
+  font-weight: 600 !important;
+  opacity: 0.9;
+}

manage_breast_screening/core/jinja2/components/appointment-status-bar/macro.jinja

@@ -0,0 +1,3 @@
+{% macro appointment_status_bar(presented_appointment) %}
+  {%- include 'components/appointment-status-bar/template.jinja' -%}
+{% endmacro %}

manage_breast_screening/core/jinja2/components/appointment-status-bar/template.jinja

@@ -0,0 +1,33 @@
+{% from 'nhsuk/components/tag/macro.jinja' import tag %}
+
+{% if presented_appointment.active %}
+  <div class="app-status-bar undefined app-status-bar--rows-2">
+    <div class="nhsuk-width-container">
+        <div class="app-status-bar__row">
+            <div class="app-status-bar__item">
+              <span class="app-status-bar__key">Appointment:</span>
+              <span>{{ presented_appointment.clinic_slot.slot_time_and_clinic_date }}</span>
+            </div>
+            <div class="app-status-bar__item">
+              {{ tag({
+              "text": presented_appointment.current_status.text,
+              "classes": presented_appointment.current_status.classes
+              }) }}
+            </div>
+        </div>
+        <div class="app-status-bar__row">
+            <div class="app-status-bar__item">
+              <strong>{{ presented_appointment.participant.full_name }}</strong>
+            </div>
+            <div class="app-status-bar__item">
+              <span class="app-status-bar__key">DOB:</span>
+              <span>{{ presented_appointment.participant.date_of_birth }} ({{ presented_appointment.participant.age }})</span>
+            </div>
+            <div class="app-status-bar__item">
+              <span class="app-status-bar__key">NHS:</span>
+              <span>{{ presented_appointment.participant.nhs_number }}</span>
+            </div>
+        </div>
+    </div>
+  </div>
+{% endif %}

manage_breast_screening/core/jinja2/layout-app.jinja

@@ -1,5 +1,6 @@
 {% from 'nhsuk/components/header/macro.jinja' import header %}
 {% from "notification-banner/macro.jinja" import notificationBanner %}
+{% from 'components/appointment-status-bar/macro.jinja' import appointment_status_bar %}
 
 {% set assetPath = STATIC_URL ~ "/assets" %}
 {% extends "nhsuk/template.jinja" %}
@@ -33,6 +34,10 @@
       ]
     }
   }) }}
+
+  {{ 
+    appointment_status_bar(presented_appointment)
+  }}
 {% endblock %}
 
 {% block content %}