Update Support Claims page

- Add Claim::CardComponent
- Add pagination count to Support Claims page heading and title
- Add search bar to filter claims by reference number

app/assets/stylesheets/components/_all.scss

@@ -1,3 +1,4 @@
+@import "claim/card";
 @import "autocomplete";
 @import "content_header";
 @import "header";

app/assets/stylesheets/components/claim/card.scss

@@ -0,0 +1,46 @@
+.claim-card {
+  display: flex;
+  flex-direction: column;
+  gap: govuk-spacing(1);
+  border-bottom: 1px solid $govuk-border-colour;
+  padding: govuk-spacing(2) 0;
+  margin-bottom: govuk-spacing(1);
+
+  .claim-card__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    .claim-card__header__name {
+      display: flex;
+      gap: govuk-spacing(1);
+
+      &.govuk-heading-s {
+        margin-bottom: govuk-spacing(1);
+      }
+    }
+  }
+
+  .claim-card__body {
+    display: flex;
+    justify-content: space-between;
+    gap: govuk-spacing(2);
+
+    .claim-card__body__provider {
+      flex-grow: 1;
+      max-width: 66%;
+    }
+
+    .claim-card__body__right {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-end;
+    }
+
+    .govuk-body-s {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+}

app/components/claim/card_component.html.erb

@@ -0,0 +1,20 @@
+<div class="claim-card">
+  <div class="claim-card__header">
+    <div class="claim-card__header__name govuk-heading-s">
+      <%= govuk_link_to claim.school.name, claims_support_claim_path(claim), no_visited_state: true %>
+      <span class="govuk-caption-m"><%= claim.reference %></span>
+    </div>
+    <div><%= render Claim::StatusTagComponent.new(claim:, classes: %w[govuk-body-s]) %></div>
+  </div>
+
+  <div class="claim-card__body">
+    <div class="claim-card__body__provider">
+      <div class="govuk-body-s"><%= claim.provider.name %></div>
+    </div>
+
+    <div class="claim-card__body__right">
+      <div class="govuk-body-s"><%= l(claim.created_at.to_date, format: :short) %></div>
+      <div class="govuk-body-s"><%= humanized_money_with_symbol(claim.amount) %></div>
+    </div>
+  </div>
+</div>

app/components/claim/card_component.rb

@@ -0,0 +1,9 @@
+class Claim::CardComponent < ApplicationComponent
+  attr_reader :claim
+
+  def initialize(claim:, classes: [], html_attributes: {})
+    super(classes:, html_attributes:)
+
+    @claim = claim
+  end
+end

app/queries/claims/claims_query.rb

@@ -1,13 +1,20 @@
 class Claims::ClaimsQuery < ApplicationQuery
   def call
     scope = Claims::Claim.submitted
+    scope = search_condition(scope)
     scope = school_condition(scope)
     scope = provider_condition(scope)
     scope.order_created_at_desc
   end
 
   private
 
+  def search_condition(scope)
+    return scope if params[:search].blank?
+
+    scope.where(Claims::Claim.arel_table[:reference].matches("%#{params[:search]}%"))
+  end
+
   def school_condition(scope)
     return scope if params[:school_ids].blank?
 

app/views/claims/support/claims/index.html.erb

@@ -1,33 +1,39 @@
 <%= render "claims/support/primary_navigation", current: :claims %>
-<%= content_for :page_title, t(".heading") %>
+<%= content_for :page_title, t(".heading", count: @pagy.count) %>
 
 <div class="govuk-width-container">
+  <h1 class="govuk-heading-l"><%= t(".heading", count: @pagy.count) %></h1>
+
+  <%= govuk_button_to(t(".download_csv"), download_csv_claims_support_claims_path, method: :get) %>
+
   <div class="govuk-grid-row">
+    <div class="govuk-grid-column-one-third">
+      <div class="app-filter">
+        <div class="app-filter__header">
+          <div class="govuk-heading-m">Filter</div>
+        </div>
+      </div>
+    </div>
+
     <div class="govuk-grid-column-two-thirds">
-      <h1 class="govuk-heading-l"><%= t(".heading") %></h1>
+      <%= render partial: "shared/search_form", locals: {
+        url: claims_support_claims_path,
+        label: { text: t(".search_label"), size: "s" },
+        name: :search,
+        clear_search_url: claims_support_claims_path,
+      } %>
 
-      <% if @claims.any? %>
-        <%= govuk_button_to(t(".download_csv"), download_csv_claims_support_claims_path, method: :get) %>
-
-        <%= govuk_table do |table| %>
-          <% table.with_head do |head| %>
-            <% head.with_row do |row| %>
-              <% row.with_cell(header: true, text: Claims::Claim.human_attribute_name(:id)) %>
-              <% row.with_cell(header: true, text: Claims::Claim.human_attribute_name(:status)) %>
-            <% end %>
-          <% end %>
+      <div class="govuk-section-break govuk-section-break--m govuk-section-break--visible"></div>
 
-          <% table.with_body do |body| %>
-            <% @claims.each do |claim| %>
-              <% body.with_row do |row| %>
-                <% row.with_cell(text: govuk_link_to(claim.id, claims_support_claim_path(claim))) %>
-                <% row.with_cell(text: render(Claim::StatusTagComponent.new(claim:))) %>
-              <% end %>
-            <% end %>
+      <% if @claims.any? %>
+        <div class="govuk-!-margin-bottom-2">
+          <% @claims.each do |claim| %>
+            <%= render Claim::CardComponent.new(claim:) %>
           <% end %>
-        <% end %>
+        </div>
 
         <%= govuk_pagination(pagy: @pagy) %>
+
         <p>
           <%= t("pagination_info", from: @pagy.from, to: @pagy.to, count: @pagy.count) %>
         </p>

config/locales/en/claims/support/claims.yml

@@ -3,7 +3,7 @@ en:
     support:
       claims:
         index:
-          heading: Claims
+          heading: Claims (%{count})
           download_csv: Download claims
           search_label: Search by claim reference
         show:

spec/system/claims/support/claims/view_a_claim_spec.rb

@@ -36,7 +36,7 @@ def when_i_visit_claim_index_page
   end
 
   def when_i_click_on_claim(claim)
-    click_on(claim.id)
+    click_on(claim.school.name)
   end
 
   def then_i_can_see_the_details_of_a_submitted_claim

spec/system/claims/support/claims/view_claims_spec.rb

@@ -13,6 +13,7 @@
   scenario "Support user visits the claims index page" do
     when_i_visit_claim_index_page
     then_i_see_a_list_of_submitted_claims
+    and_i_see_no_draft_claims
   end
 
   private
@@ -27,15 +28,17 @@ def when_i_visit_claim_index_page
   end
 
   def then_i_see_a_list_of_submitted_claims
-    expect(page).to have_content("ID")
-    expect(page).to have_content("Status")
-    expect(page).to have_selector("tbody tr", count: 1)
-
-    expect(page).not_to have_selector("td", text: claim_1.id)
-
-    within("tbody tr:nth-child(1)") do
-      expect(page).to have_selector("td", text: claim_2.id)
-      expect(page).to have_selector("td", text: "Submitted")
+    within(".claim-card:nth-child(1)") do
+      expect(page).to have_content(claim_2.school.name)
+      expect(page).to have_content(claim_2.reference)
+      expect(page).to have_content("Submitted")
+      expect(page).to have_content(claim_2.provider.name)
+      expect(page).to have_content(I18n.l(claim_2.created_at.to_date, format: :short))
+      expect(page).to have_content(claim_2.amount.format(no_cents_if_whole: true))
     end
   end
+
+  def and_i_see_no_draft_claims
+    expect(page).not_to have_content(claim_1.reference)
+  end
 end