Update logs summary page

app/controllers/case_logs_controller.rb

@@ -5,8 +5,7 @@ class CaseLogsController < ApplicationController
   before_action :find_resource, except: %i[create index edit]
 
   def index
-    @completed_case_logs = current_user.completed_case_logs
-    @in_progress_case_logs = current_user.not_completed_case_logs
+    @case_logs = current_user.case_logs
   end
 
   def create

app/views/case_logs/_log_list.html.erb

@@ -1,29 +1,46 @@
+<figure class="app-figure">
+  <figcaption id="<%= title.dasherize %>" class="app-figure__caption">
+    <b><%= case_logs.count %></b> <%= title.downcase %>
+  </figcaption>
+  <div class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
     <table class="govuk-table">
-  <caption class="govuk-table__caption govuk-table__caption--m"><%= title %></caption>
       <thead class="govuk-table__head">
         <tr class="govuk-table__row">
-      <th scope="col" class="govuk-table__header">Log reference</th>
-      <th scope="col" class="govuk-table__header">Postcode</th>
-      <th scope="col" class="govuk-table__header">Tenant code</th>
-      <th scope="col" class="govuk-table__header"><%= date_title %></th>
+          <th class="govuk-table__header" scope="col">Log</th>
+          <th class="govuk-table__header" scope="col">Tenant</th>
+          <th class="govuk-table__header" scope="col">Property</th>
+          <th class="govuk-table__header" scope="col">Tenacy starts</th>
+          <th class="govuk-table__header" scope="col">Log created</th>
+          <th class="govuk-table__header" scope="col">Completed</th>
         </tr>
       </thead>
       <tbody class="govuk-table__body">
         <% case_logs.map do |log| %>
         <tr class="govuk-table__row">
-      <th scope="row" class="govuk-table__header">
+          <th class="govuk-table__header" scope="row">
             <%= govuk_link_to log.id, case_log_path(log) %>
           </th>
-      <td class="govuk-table__cell govuk-table__cell">
-        <%= log.property_postcode %>
+          <td class="govuk-table__cell app-!-font-tabular">
+            <%= log.tenant_code? ? log.tenant_code : '–' %>
           </td>
-      <td class="govuk-table__cell govuk-table__cell">
-        <%= log.tenant_code %>
+          <td class="govuk-table__cell app-!-font-tabular">
+            <%= log.propcode? ? log.propcode : '–' %>
           </td>
-      <td id="last-changed" class="govuk-table__cell">
-        <%= log.updated_at.to_formatted_s(:govuk_date) %>
+          <td class="govuk-table__cell">
+            <%= log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : '–' %>
+          </td>
+          <td class="govuk-table__cell">
+            <%= log.created_at.to_formatted_s(:govuk_date) %>
+          </td>
+          <td class="govuk-table__cell">
+            <%= govuk_tag(
+              colour: log.status == 'completed' ? 'blue' : 'grey',
+              text: log.status.humanize
+            ) %>
           </td>
         </tr>
         <% end %>
       </tbody>
     </table>
+  </div>
+</figure>

app/views/case_logs/index.html.erb

@@ -1,21 +1,14 @@
 <% content_for :title, "Logs" %>
 
-<div class="govuk-grid-row">
-  <div class="govuk-grid-column-two-thirds-from-desktop">
 <h1 class="govuk-heading-l">
   <%= content_for(:title) %>
 </h1>
 
-    <%= govuk_button_to "Create new log", case_logs_path %>
-
-    <% if @in_progress_case_logs.present? %>
-      <%= render partial: "log_list", locals: { case_logs: @in_progress_case_logs, title: "Logs you need to complete", date_title: "Last Changed" } %>
-    <% end %>
+<div class="govuk-button-group">
+  <%= govuk_button_to "Create a new lettings log", case_logs_path %>
+  <%= govuk_link_to "Upload logs", bulk_upload_case_logs_path %>
+</div>
 
-    <% if @completed_case_logs.present? %>
-      <%= render partial: "log_list", locals: { case_logs: @completed_case_logs, title: "Logs you’ve submitted", date_title: "Date Submitted" } %>
+<% if @case_logs.present? %>
+  <%= render partial: "log_list", locals: { case_logs: @case_logs, title: "Logs" } %>
 <% end %>
-
-    <p><a href="#" class="govuk-link">See all completed logs (<%= @completed_case_logs.count %>)</a></p>
-  </div>
-</div>

app/webpacker/styles/_figure.scss

@@ -0,0 +1,10 @@
+.app-figure {
+  margin: 0;
+}
+
+.app-figure__caption {
+  @include govuk-font($size: 19);
+  border-top: 1px solid $govuk-border-colour;
+  margin-bottom: govuk-spacing(6);
+  padding-top: govuk-spacing(4);
+}

app/webpacker/styles/_table-group.scss

@@ -0,0 +1,44 @@
+.app-table-group {
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin: govuk-spacing(-3) govuk-spacing(-3) govuk-spacing(3);
+  padding: 0 govuk-spacing(3);
+  scrollbar-color: $govuk-text-colour govuk-colour("light-grey");
+
+  .govuk-table {
+    margin-bottom: -1px;
+  }
+
+  .govuk-table__header,
+  .govuk-table__cell {
+    white-space: nowrap;
+  }
+
+  &::-webkit-scrollbar {
+    height: govuk-spacing(1);
+    width: govuk-spacing(1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $govuk-text-colour;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: govuk-colour("light-grey");
+  }
+}
+
+.app-table-group:focus {
+  box-shadow: 0 0 0 #{$govuk-focus-width * 2} $govuk-focus-colour;
+  outline: $govuk-focus-width solid govuk-colour("black");
+}
+
+.app-table-group:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+
+.app-table-group:focus-visible {
+  box-shadow: 0 0 0 #{$govuk-focus-width * 2} $govuk-focus-colour;
+  outline: $govuk-focus-width solid govuk-colour("black");
+}

app/webpacker/styles/application.scss

@@ -13,14 +13,29 @@ $govuk-global-styles: true;
 @import "~govuk-frontend/govuk/all";
 
 @import "accessible-autocomplete";
+@import "figure";
 @import "input";
 @import "related-navigation";
 @import "section-skip-link";
 @import "tab-navigation";
+@import "table-group";
 @import "task-list";
 @import "template";
 
-// Overrides
+// App utilities
 .app-\!-colour-muted {
   color: $govuk-secondary-text-colour !important;
 }
+
+.app-\!-font-tabular {
+  @include govuk-font($size: false, $tabular: true);
+}
+
+// Overrides
+.govuk-button-group {
+  align-items: center;
+}
+
+.govuk-tag {
+  white-space: nowrap;
+}

spec/features/form/form_navigation_spec.rb

@@ -26,10 +26,10 @@ RSpec.describe "Form Navigation" do
     sign_in user
   end
 
-  describe "Create new log" do
+  describe "Create a new lettings log" do
     it "redirects to the task list for the new log" do
       visit("/logs")
-      click_button("Create new log")
+      click_button("Create a new lettings log")
       id = CaseLog.order(created_at: :desc).first.id
       expect(page).to have_content("Log #{id}")
     end

spec/views/case_log_index_view_spec.rb

@@ -2,51 +2,18 @@ require "rails_helper"
 
 RSpec.describe "case_logs/index" do
   let(:in_progress_log) { FactoryBot.create(:case_log, :in_progress) }
-  let(:completed_log) { FactoryBot.create(:case_log, :completed) }
 
-  context "with an in progress log list" do
+  context "with a log list" do
     before do
-      assign(:in_progress_case_logs, [in_progress_log])
-      assign(:completed_case_logs, [])
+      assign(:case_logs, [in_progress_log])
       render
     end
 
-    it "renders a table for in progress logs only" do
+    it "renders a table for all logs" do
       expect(rendered).to match(/<table class="govuk-table">/)
-      expect(rendered).to match(/Logs you need to complete/)
-      expect(rendered).not_to match(/Logs you’ve submitted/)
-      expect(rendered).to match(in_progress_log.tenant_code)
-      expect(rendered).to match(in_progress_log.property_postcode)
-    end
-  end
-
-  context "with a completed log list" do
-    before do
-      assign(:in_progress_case_logs, [])
-      assign(:completed_case_logs, [completed_log])
-      render
-    end
-
-    it "renders a table for in progress logs only" do
-      expect(rendered).to match(/<table class="govuk-table">/)
-      expect(rendered).to match(/Logs you’ve submitted/)
-      expect(rendered).not_to match(/Logs you need to complete/)
-      expect(rendered).to match(completed_log.tenant_code)
-      expect(rendered).to match(completed_log.property_postcode)
-    end
-  end
-
-  context "with a completed log list and an in_progress log list" do
-    before do
-      assign(:in_progress_case_logs, [in_progress_log])
-      assign(:completed_case_logs, [completed_log])
-      render
-    end
-
-    it "renders two tables, one for each status" do
-      expect(rendered).to match(/<table class="govuk-table">/)
-      expect(rendered).to match(/Logs you’ve submitted/)
-      expect(rendered).to match(/Logs you need to complete/)
+      expect(rendered).to match(/logs/)
+      expect(rendered).to match(in_progress_log.created_at.to_formatted_s(:govuk_date))
+      expect(rendered).to match(in_progress_log.status.humanize)
     end
   end
 end