Implement programme status tallies for the new session overview pahe

The session overview page is getting a new design layout which focuses on
giving greater details about the progress of a session using tallies across
various metrics such Eligible cohort, Vaccinated, Could not vaccinate etc.

The overview page no is longer divided into 2 columns, and instead split up
into 5 sections:

1. Programme status
2. Consent status
3. Session dates
4. Action required
5. About the location

This commit will start with Programme status. The new design will only activate
if the URL has the query param "tallies=true". This gives the testers are chance
to see and understand the new design as it's built out.

Author: jhenderson

app/assets/stylesheets/components/_card.scss

@@ -3,78 +3,83 @@
 
 .app-card {
   &--aqua-green {
-    .nhsuk-card__heading--feature {
-      background-color: nhsuk-colour("aqua-green");
+    background-color: nhsuk-tint(nhsuk-colour("aqua-green"), 80%);
+    border-color: nhsuk-tint(nhsuk-colour("aqua-green"), 50%);
+    color: nhsuk-shade(nhsuk-colour("aqua-green"), 50%);
+
+    &.nhsuk-card__clickable:active {
+      border-color: nhsuk-shade(nhsuk-colour("aqua-green"), 50%);
     }
   }
 
-  &--dark-orange {
-    .nhsuk-card__heading--feature {
-      background-color: app.$dark-orange-colour;
+  &--blue {
+    background-color: nhsuk-tint(nhsuk-colour("blue"), 80%);
+    border-color: nhsuk-tint(nhsuk-colour("blue"), 30%);
+    color: nhsuk-shade(nhsuk-colour("blue"), 30%);
+
+    &.nhsuk-card__clickable:active {
+      border-color: nhsuk-shade(nhsuk-colour("blue"), 30%);
     }
   }
 
   &--green {
-    .nhsuk-card__heading--feature {
-      background-color: nhsuk-colour("green");
+    background-color: nhsuk-tint(nhsuk-colour("green"), 80%);
+    border-color: nhsuk-tint(nhsuk-colour("green"), 40%);
+    color: nhsuk-shade(nhsuk-colour("green"), 40%);
+
+    &.nhsuk-card__clickable:active {
+      border-color: nhsuk-shade(nhsuk-colour("green"), 40%);
     }
   }
 
   &--grey {
-    .nhsuk-card__heading--feature {
-      background-color: nhsuk-colour("grey-1");
-    }
-  }
+    background-color: nhsuk-tint(nhsuk-colour("grey-1"), 80%);
+    border-color: nhsuk-tint(nhsuk-colour("grey-1"), 30%);
+    color: nhsuk-shade(nhsuk-colour("grey-1"), 30%);
 
-  &--purple {
-    .nhsuk-card__heading--feature {
-      background-color: nhsuk-colour("purple");
+    &.nhsuk-card__clickable:active {
+      border-color: nhsuk-shade(nhsuk-colour("grey-1"), 30%);
     }
   }
 
   &--red {
-    .nhsuk-card__heading--feature {
-      background-color: nhsuk-colour("red");
+    background-color: nhsuk-tint(nhsuk-colour("red"), 80%);
+    border-color: nhsuk-tint(nhsuk-colour("red"), 50%);
+    color: nhsuk-shade(nhsuk-colour("red"), 50%);
+
+    &.nhsuk-card__clickable:active {
+      border-color: nhsuk-shade(nhsuk-colour("red"), 50%);
     }
   }
 
-  &--reversed {
-    background-color: nhsuk-colour("blue");
-    border-color: nhsuk-shade(nhsuk-colour("blue"), 25%);
-    color: nhsuk-colour("white");
+  &--yellow {
+    background-color: nhsuk-tint(nhsuk-colour("warm-yellow"), 80%);
+    border-color: nhsuk-colour("warm-yellow");
 
-    &:active {
-      border-color: nhsuk-shade(nhsuk-colour("blue"), 50%);
+    .nhsuk-card__heading--feature {
+      background-color: nhsuk-colour("warm-yellow");
+      color: $nhsuk-text-colour;
     }
 
-    .nhsuk-card__link {
-      @include nhsuk-link-style-white;
+    blockquote {
+      border-color: nhsuk-colour("warm-yellow");
     }
   }
 
-  &--offset {
-    background-color: rgba(nhsuk-colour("grey-5"), 0.5);
-  }
-
-  &--data {
-    display: flex;
-
-    .nhsuk-card__content {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-    }
-
-    .nhsuk-card__heading {
-      @include nhsuk-typography-weight-normal;
+  &--aqua-green,
+  &--blue,
+  &--green,
+  &--grey,
+  &--red,
+  &--yellow {
+    .nhsuk-card__link,
+    .nhsuk-card__link:hover {
+      color: inherit;
     }
+  }
 
-    .nhsuk-card__description {
-      margin-top: auto;
-
-      @include nhsuk-font-size(48);
-      @include nhsuk-typography-weight-bold;
-    }
+  &--offset {
+    background-color: rgba(nhsuk-colour("grey-5"), 0.5);
   }
 }
 
@@ -90,3 +95,59 @@
     @include nhsuk-responsive-padding(3, "bottom");
   }
 }
+
+// Align counts across cards
+.nhsuk-card:has(> .nhsuk-card__content > .app-card__count) {
+  display: flex;
+
+  .nhsuk-card__heading {
+    line-height: 1.2;
+  }
+
+  .nhsuk-card__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+
+.app-card__count {
+  @include nhsuk-font-size(48);
+  @include nhsuk-typography-weight-bold;
+
+  .app-card--dense & {
+    @include nhsuk-font-size(26);
+  }
+}
+
+.app-card__heading {
+  &--aqua-green {
+    background-color: nhsuk-colour("aqua-green");
+  }
+
+  &--dark-orange {
+    background-color: app.$dark-orange-colour;
+  }
+
+  &--green {
+    background-color: nhsuk-colour("green");
+  }
+
+  &--grey {
+    background-color: nhsuk-colour("grey-1");
+  }
+
+  &--purple {
+    background-color: nhsuk-colour("purple");
+  }
+
+  &--red {
+    background-color: nhsuk-colour("red");
+  }
+
+  &--warm-yellow {
+    background-color: nhsuk-colour("warm-yellow");
+    color: $nhsuk-text-colour;
+  }
+}

app/components/app_card_component.rb

@@ -17,7 +17,7 @@ class AppCardComponent < ViewComponent::Base
         <% end %>
 
         <% if description.present? %>
-          <p class="nhsuk-card__description"><%= description %></p>
+          <p class="nhsuk-card__description <%= discription_classes %>"><%= description %></p>
         <% end %>
 
         <%= content %>
@@ -36,7 +36,8 @@ def initialize(
     data: false,
     compact: false,
     filters: false,
-    section: false
+    section: false,
+    style_as_count: false
   )
     @link_to = link_to
     @colour = colour
@@ -46,6 +47,7 @@ def initialize(
     @compact = compact
     @filters = filters
     @section = section
+    @style_as_count = style_as_count
 
     @feature = (colour.present? && !data && !compact) || filters
   end
@@ -94,4 +96,8 @@ def heading_classes
       ("nhsuk-card__heading--feature" if @feature)
     ].compact.join(" ")
   end
+
+  def discription_classes
+    [("app-card__count" if @style_as_count)].compact.join(" ")
+  end
 end

app/components/app_session_overview_tallies_component.html.erb

@@ -0,0 +1,26 @@
+<div class="nhsuk-grid-column-full">
+  <% programmes.each do |programme| %>
+    <section>
+      <h3 class="nhsuk-heading-m nhsuk-u-margin-bottom-4">
+        <%= programme.name %>
+      </h3>
+      <ul class="nhsuk-grid-row nhsuk-card-group">
+        <% tally_cards_for_programme(programme).each do |card_data| %>
+          <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
+            <%= render AppCardComponent.new(
+                  heading_level: 5,
+                  colour: card_data[:colour],
+                  data: true,
+                  compact: true,
+                  style_as_count: true,
+                  link_to: card_data[:link_to],
+                ) do |card| %>
+              <% card.with_heading { card_data[:heading] } %>
+              <% card.with_description { card_data[:count] } %>
+            <% end %>
+          </li>
+        <% end %>
+      </ul>
+    </section>
+  <% end %>
+</div>

app/components/app_session_overview_tallies_component.rb

@@ -0,0 +1,134 @@
+# frozen_string_literal: true
+
+class AppSessionOverviewTalliesComponent < ViewComponent::Base
+  def initialize(session)
+    @session = session
+    @patient_ids = session.patient_ids
+    @academic_year = session.academic_year
+  end
+
+  attr_reader :session, :patient_ids, :academic_year
+
+  delegate :govuk_table, to: :helpers
+  delegate :programmes, to: :session
+
+  def tally_cards_for_programme(programme)
+    [
+      {
+        heading: "Eligible cohort",
+        colour: "blue",
+        count: eligible_for_vaccination_count(programme).to_s,
+        link_to: nil
+      },
+      {
+        heading: "Vaccinated",
+        colour: "green",
+        count: vaccinated_count(programme).to_s,
+        link_to:
+          session_patients_path(
+            @session,
+            vaccination_status: "vaccinated",
+            programme_types: [programme.type]
+          )
+      },
+      {
+        heading: "Could not vaccinate",
+        colour: "red",
+        count: could_not_vaccinate_count(programme).to_s,
+        link_to:
+          session_patients_path(
+            @session,
+            vaccination_status: "could_not_vaccinate",
+            programme_types: [programme.type]
+          )
+      },
+      {
+        heading: "No outcome",
+        colour: "grey",
+        count: no_outcome_count(programme).to_s,
+        link_to:
+          session_patients_path(
+            @session,
+            vaccination_status: "none_yet",
+            programme_types: [programme.type]
+          )
+      }
+    ]
+  end
+
+  private
+
+  def eligible_for_vaccination_count(programme)
+    patients_in_programme_cohort(programme).count -
+      previously_vaccinated_count(programme) -
+      vaccinated_at_different_locations_count(programme)
+  end
+
+  def vaccinated_count(programme)
+    administered_vaccination_count(programme)
+  end
+
+  def could_not_vaccinate_count(programme)
+    Patient::VaccinationStatus
+      .where(programme:, academic_year:, patient_id: patient_ids)
+      .could_not_vaccinate
+      .count
+  end
+
+  def no_outcome_count(programme)
+    Patient::VaccinationStatus
+      .where(programme:, academic_year:, patient_id: patient_ids)
+      .none_yet
+      .count
+  end
+
+  def patients_in_programme_cohort(programme)
+    session.patients.appear_in_programmes(programme, academic_year:)
+  end
+
+  def previously_vaccinated_count(programme)
+    return 0 if programme.seasonal?
+
+    Patient::VaccinationStatus
+      .where(programme_id: programme.id, patient_id: patient_ids)
+      .where("academic_year < ?", academic_year)
+      .vaccinated
+      .count
+  end
+
+  def administered_vaccination_count(programme)
+    Patient::VaccinationStatus
+      .where(
+        academic_year:,
+        programme_id: programme.id,
+        patient_id: patient_ids
+      )
+      .vaccinated
+      .count
+  end
+
+  def vaccinated_at_different_locations_count(programme)
+    vaccination_records =
+      VaccinationRecord
+        .where(
+          patient_id: patient_ids,
+          programme_id: programme.id,
+          outcome: %w[administered already_had]
+        )
+        .where.not(location: session.location)
+
+    # The VaccinatedCriteria class is responsible for determining whether a
+    # patient is considered vaccinated or not. There's some nuance around
+    # Td/IPV and MenACWY where a patient may have a vaccination record, but
+    # if it's the wrong dose or if the patient was younger than 10 years old
+    # it doesn't count.
+    session.patients.count do |patient|
+      VaccinatedCriteria.call(
+        programme:,
+        academic_year:,
+        patient:,
+        vaccination_records:
+      )
+    end
+  end
+end