Update Support Claims page

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/components/claim/status_tag_component.rb

@@ -8,19 +8,23 @@ def initialize(claim:, classes: [], html_attributes: {})
   end
 
   def call
-    content_tag(:p, claim.status.humanize, class: "govuk-tag #{css_class}")
+    govuk_tag(text: claim.status.humanize, colour:)
   end
 
   private
 
-  def css_class
-    style_status_classes.fetch(claim.status)
+  def default_attributes
+    super.merge!(class: super.class)
   end
 
-  def style_status_classes
+  def colour
+    status_colours.fetch(claim.status)
+  end
+
+  def status_colours
     {
-      draft: "govuk-tag--grey",
-      submitted: "govuk-tag--blue",
+      draft: "grey",
+      submitted: "blue",
     }.with_indifferent_access
   end
 end

app/controllers/claims/support/schools_controller.rb

@@ -5,7 +5,6 @@ class Claims::Support::SchoolsController < Claims::Support::ApplicationControlle
 
   def index
     @pagy, @schools = pagy(schools)
-    @search_param = params[:name_or_postcode]
   end
 
   def show; end

app/controllers/placements/support/organisations_controller.rb

@@ -2,7 +2,6 @@ class Placements::Support::OrganisationsController < Placements::Support::Applic
   def index
     @pagy, @organisations = pagy(organisations)
     @filters = filters_param
-    @search_param = search_param
   end
 
   def new

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>

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

@@ -10,7 +10,8 @@
 
       <%= render partial: "shared/search_form", locals: {
         url: claims_support_schools_path,
-        search_param: @search_param,
+        label: { text: t(".search_label"), size: "m" },
+        name: :name_or_postcode,
         clear_search_url: claims_support_schools_path,
       } %>
 
@@ -30,7 +31,7 @@
         </ul>
       <% else %>
         <p>
-          <%= t("no_results", for: @search_param) %>
+          <%= t("no_results", for: params[:name_or_postcode]) %>
         </p>
       <% end %>
     </div>

app/views/placements/support/organisations/_filter.html.erb

@@ -48,7 +48,7 @@
                                       checked: filters.include?(org_type)) %>
            <% end %>
          <% end %>
-         <%= form.hidden_field :name_or_postcode, value: @search_param %>
+         <%= form.hidden_field :name_or_postcode, value: search_param %>
        <% end %>
      </div>
     </div>

app/views/placements/support/organisations/index.html.erb

@@ -9,12 +9,13 @@
   </div>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-one-third">
-      <%= render partial: "filter", locals: { filters: @filters, search_param: @search_param } %>
+      <%= render partial: "filter", locals: { filters: @filters, search_param: params[:name_or_postcode] } %>
     </div>
     <div class="govuk-grid-column-two-thirds">
       <%= render partial: "shared/search_form", locals: {
         url: placements_support_organisations_path,
-        search_param: @search_param,
+        label: { text: t(".search_label"), size: "m" },
+        name: :name_or_postcode,
         clear_search_url: placements_support_organisations_path(filters: @filters),
         filters: @filters,
       } %>
@@ -27,7 +28,7 @@
         <%= govuk_pagination(pagy: @pagy) %>
         <p><%= t("pagination_info", from: @pagy.from, to: @pagy.to, count: @pagy.count) %></p>
       <% else %>
-        <p><%= no_results(@search_param, @filters) %></p>
+        <p><%= no_results(params[:name_or_postcode], @filters) %></p>
       <% end %>
     </div>
   </div>

app/views/shared/_search_form.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (url:, search_param:, clear_search_url: "", filters: []) -%>
+<%# locals: (url:, name:, value: params[name], clear_search_url: "", label:, filters: []) -%>
 
 <div class="govuk-form-group">
   <%= form_with(
@@ -7,8 +7,8 @@
     class: "search-form",
     data: { turbo: false },
   ) do |f| %>
-    <%= f.govuk_text_field :name_or_postcode, type: :search, value: search_param, label: { text: t(".search-header"), size: "m" } %>
-    <%= f.govuk_submit t(".search") %>
+    <%= f.govuk_text_field name, type: :search, value:, label: %>
+    <%= f.govuk_submit t(".submit") %>
     <% if filters.present? %>
       <% filters.each do |filter| %>
         <%= f.hidden_field :filters, multiple: true, value: filter %>
@@ -17,8 +17,8 @@
   <% end %>
 </div>
 
-<% unless search_param.blank? %>
+<% unless value.blank? %>
   <p class="clear-search">
-    <%= govuk_link_to t(".clear_search"), clear_search_url, no_visited_state: true %>
+    <%= govuk_link_to t(".clear"), clear_search_url, no_visited_state: true %>
   </p>
 <% end %>

config/initializers/money.rb

@@ -22,5 +22,5 @@
   }
 end
 
-Money.locale_backend = nil
+Money.locale_backend = :i18n
 Money.rounding_mode = BigDecimal::ROUND_HALF_UP

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

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

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

@@ -18,6 +18,7 @@ en:
         index:
           heading: Organisations (%{records})
           add_organisation: Add organisation
+          search_label: Search by organisation name or postcode
         new:
           caption: Add organisation
           cancel: Cancel

config/locales/en/placements/support/organisations.yml

@@ -24,3 +24,4 @@ en:
           lead_school: Lead partner
           no_organisations: There are no onboarded organisations
           organisation_type: Organisation type
+          search_label: Search by organisation name or postcode

config/locales/en/shared/search_form.yml

@@ -1,6 +1,5 @@
 en:
   shared:
     search_form:
-      search-header: Search by organisation name or postcode
-      search: Search
-      clear_search: Clear search
+      submit: Search
+      clear: Clear search

spec/components/claim/card_component_spec.rb

@@ -0,0 +1,27 @@
+require "rails_helper"
+
+RSpec.describe Claim::CardComponent, type: :component do
+  include Rails.application.routes.url_helpers
+
+  subject(:component) { described_class.new(claim:) }
+
+  let(:claim) do
+    create(:claim, :submitted, created_at: "2024/04/08", school:) do |claim|
+      claim.mentor_trainings << create(:mentor_training, hours_completed: 20)
+    end
+  end
+
+  let(:school) { create(:claims_school, region: regions(:inner_london)) }
+
+  it "renders a card with claim details" do
+    render_inline(component)
+
+    expect(page).to have_link(claim.school.name, href: claims_support_claim_path(claim))
+    expect(page).to have_content(claim.reference)
+    expect(page).to have_content("Submitted")
+
+    expect(page).to have_content(claim.provider.name)
+    expect(page).to have_content("08/04/2024")
+    expect(page).to have_content("£1,072")
+  end
+end

spec/components/previews/claim/card_component_preview.rb

@@ -0,0 +1,11 @@
+class Claim::CardComponentPreview < ApplicationComponentPreview
+  def default
+    render Claim::CardComponent.new(claim:)
+  end
+
+  private
+
+  def claim
+    Claims::Claim.submitted.first
+  end
+end

spec/queries/claims/claims_query_spec.rb

@@ -14,6 +14,17 @@
       expect(claims_query).to eq([submitted_claim])
     end
 
+    context "when given a search query" do
+      let(:params) { { search: "1234" } }
+
+      it "filters the results by provided school ids" do
+        claim_with_partial_reference = create(:claim, :submitted, reference: "12345678")
+        _claim_without_partial_reference = create(:claim, :submitted, reference: "87654321")
+
+        expect(claims_query).to match_array([claim_with_partial_reference])
+      end
+    end
+
     context "when given school ids" do
       let(:school) { create(:claims_school) }
       let(:params) { { school_ids: [school.id] } }

spec/system/claims/schools/claims/create_claim_spec.rb

@@ -154,7 +154,7 @@ def then_i_check_my_answers
     within("dl.govuk-summary-list:nth(3)") do
       within(".govuk-summary-list__row:nth(1)") do
         expect(page).to have_content("Claim amount")
-        expect(page).to have_content("£1715.20")
+        expect(page).to have_content("£1,715.20")
       end
     end
   end