From 943a49fa431ef7c0d422b7535ac22e820963d199 Mon Sep 17 00:00:00 2001
From: elasticspoon <mail@yuribocharov.dev>
Date: Sat, 23 Mar 2024 17:43:53 -0400
Subject: [PATCH] feat: rework court report generation

Add generate docx modal with date pickers to filter dates of case
contacts to include in the generated report.

Modify current tests to open the modal before
attempting to click within it.

Allow range filtering of contacts in case report
---
 app/assets/stylesheets/base/variables.scss    |   6 +
 app/assets/stylesheets/pages/casa_cases.scss  |  49 +++++
 .../stylesheets/pages/case_court_reports.scss |   0
 app/assets/stylesheets/shared/typography.scss |   5 +
 .../modal/footer_component.html.erb           |   2 +-
 .../modal/open_button_component.html.erb      |   2 +-
 .../case_court_reports_controller.rb          |  15 +-
 app/javascript/src/casa_case.js               |   6 +
 app/models/case_court_report_context.rb       |  31 ++-
 .../_generate_report_modal.html.erb           |  56 ++++++
 app/views/casa_cases/show.html.erb            |  44 +++-
 .../_generate_docx.html.erb                   |  75 +++++++
 app/views/case_court_reports/index.html.erb   |  40 +---
 .../modal/open_button_component_spec.rb       |   8 +-
 spec/factories/case_court_report_context.rb   |   8 +-
 spec/models/case_court_report_context_spec.rb | 190 +++++++++++++-----
 spec/models/case_court_report_spec.rb         |  24 ---
 spec/requests/case_court_reports_spec.rb      |  14 +-
 spec/system/casa_cases/show_spec.rb           |  74 +++++--
 spec/system/case_court_reports/index_spec.rb  | 116 ++++-------
 .../case_court_reports/index.html.erb_spec.rb |  22 +-
 21 files changed, 527 insertions(+), 260 deletions(-)
 create mode 100644 app/assets/stylesheets/pages/case_court_reports.scss
 create mode 100644 app/views/casa_cases/_generate_report_modal.html.erb
 create mode 100644 app/views/case_court_reports/_generate_docx.html.erb

diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss
index ab60d692c9..3aee370434 100644
--- a/app/assets/stylesheets/base/variables.scss
+++ b/app/assets/stylesheets/base/variables.scss
@@ -5,3 +5,9 @@ $red: #dc3545;
 $sidebar-inactive: #9AA4CA;
 $sidebar-active: #365CF5;
 $sidebar-dark: #1A2142;
+
+:root {
+  --dark: #262d3f; 
+  --gray: #5d657b;
+  --silver: #D9D9D9;
+}
diff --git a/app/assets/stylesheets/pages/casa_cases.scss b/app/assets/stylesheets/pages/casa_cases.scss
index 69ed2d9131..844301019c 100644
--- a/app/assets/stylesheets/pages/casa_cases.scss
+++ b/app/assets/stylesheets/pages/casa_cases.scss
@@ -113,3 +113,52 @@ body.casa_cases-show {
     display: block;
   }
 }
+
+#generate-docx-report-modal {
+  .dates-container {
+    display: flex;
+  }
+
+  .docx-report__modal-body {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1rem;
+
+  }
+
+  .modal-footer {
+    [data-bs-dismiss="modal"] {
+      padding-block: 11px;
+    }
+  }
+}
+
+.generate-report-button {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  border: solid 1px var(--silver);
+  padding: 1.2rem;
+  column-gap: 1.2rem;
+
+  &:hover {
+    border-color: black;
+  }
+
+  svg {
+    min-inline-size: 40px;
+    width: 40px;
+    height: auto;
+  }
+
+  div {
+    text-align: left;
+    h3 {
+      margin-block-end: .25rem;
+
+    }
+    p {
+
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/case_court_reports.scss b/app/assets/stylesheets/pages/case_court_reports.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/app/assets/stylesheets/shared/typography.scss b/app/assets/stylesheets/shared/typography.scss
index fc5b781712..7a5ec90bb8 100644
--- a/app/assets/stylesheets/shared/typography.scss
+++ b/app/assets/stylesheets/shared/typography.scss
@@ -1,4 +1,5 @@
 // TODO check in css so tests can run without internet
+@use "../base/variables.scss" as globals;
 @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
 
 body {
@@ -13,12 +14,16 @@ option {
   font-family: Inter;
   font-size: 16px;
   font-weight: 500;
+  line-height: 19px;
+  color: var(--dark);
 }
 
 .content-2 {
   font-family: Inter;
   font-size: 14px;
   font-weight: 500;
+  line-height: 22px;
+  color: var(--gray)
 }
 
 .content-3 {
diff --git a/app/components/modal/footer_component.html.erb b/app/components/modal/footer_component.html.erb
index 21320bd957..9675f4715a 100644
--- a/app/components/modal/footer_component.html.erb
+++ b/app/components/modal/footer_component.html.erb
@@ -1,4 +1,4 @@
 <div class="modal-footer <%= @class %>">
-  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+  <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
   <%= content %>
 </div>
diff --git a/app/components/modal/open_button_component.html.erb b/app/components/modal/open_button_component.html.erb
index e210fdaf8e..dfc1410b7b 100644
--- a/app/components/modal/open_button_component.html.erb
+++ b/app/components/modal/open_button_component.html.erb
@@ -1,4 +1,4 @@
-<button type="button" class="btn <%= @class %>" data-bs-toggle="modal" data-bs-target="<%= "##{@target}" %>">
+<button type="button" class="<%= @class %>" data-bs-toggle="modal" data-bs-target="<%= "##{@target}" %>">
   <% if @icon %>
     <i class="lni mr-10 lni-<%= @icon %>"></i>
   <% end %>
diff --git a/app/controllers/case_court_reports_controller.rb b/app/controllers/case_court_reports_controller.rb
index 54dc3df401..6338ad8283 100644
--- a/app/controllers/case_court_reports_controller.rb
+++ b/app/controllers/case_court_reports_controller.rb
@@ -28,11 +28,12 @@ def show
 
   def generate
     authorize CaseCourtReport
-    casa_case = CasaCase.find_by(case_params)
+    casa_case = CasaCase.find_by(case_number: case_params[:case_number])
+
     respond_to do |format|
       format.json do
         if casa_case
-          report_data = generate_report_to_string(casa_case, params[:time_zone])
+          report_data = generate_report_to_string(casa_case, date_range_params)
           save_report(report_data, casa_case)
 
           render json: {link: case_court_report_path(casa_case.case_number, format: "docx"), status: :ok}
@@ -53,6 +54,10 @@ def generate
 
   private
 
+  def date_range_params
+    params.permit(:time_zone, case_court_report: %i[start_date end_date])
+  end
+
   def case_params
     params.require(:case_court_report).permit(:case_number)
   end
@@ -69,7 +74,7 @@ def assigned_cases
     end
   end
 
-  def generate_report_to_string(casa_case, time_zone)
+  def generate_report_to_string(casa_case, time_range)
     return unless casa_case
 
     casa_case.casa_org.open_org_court_report_template do |template_docx_file|
@@ -77,7 +82,9 @@ def generate_report_to_string(casa_case, time_zone)
         volunteer_id: current_user.volunteer? ? current_user.id : casa_case.assigned_volunteers.first&.id,
         case_id: casa_case.id,
         path_to_template: template_docx_file.to_path,
-        time_zone: time_zone
+        time_zone: time_range[:time_zone],
+        start_date: time_range[:case_court_report][:start_date],
+        end_date: time_range[:case_court_report][:end_date]
       }
       context = CaseCourtReportContext.new(args).context
       court_report = CaseCourtReport.new(path_to_template: template_docx_file.to_path, context: context)
diff --git a/app/javascript/src/casa_case.js b/app/javascript/src/casa_case.js
index 3a8859e2fa..d0c39a679b 100644
--- a/app/javascript/src/casa_case.js
+++ b/app/javascript/src/casa_case.js
@@ -56,20 +56,24 @@ function copyOrdersFromCaseAction (id, caseNumber) {
 }
 
 function showBtn (el) {
+  if (!el) return
   el.classList.remove('d-none')
 }
 
 function hideBtn (el) {
+  if (!el) return
   el.classList.add('d-none')
 }
 
 function disableBtn (el) {
+  if (!el) return
   el.disabled = true
   el.classList.add('disabled')
   el.setAttribute('aria-disabled', true)
 }
 
 function enableBtn (el) {
+  if (!el) return
   el.disabled = false
   el.classList.remove('disabled')
   el.removeAttribute('aria-disabled')
@@ -101,6 +105,7 @@ function handleGenerateReport (e) {
     body: JSON.stringify(formData)
   }
   showBtn(spinner)
+  hideBtn($('#btnGenerateReport .lni-download')[0])
   window.fetch(url, options)
     .then(response => {
       return response.json()
@@ -113,6 +118,7 @@ function handleGenerateReport (e) {
         return
       }
       hideBtn(spinner)
+      showBtn($('#btnGenerateReport .lni-download')[0])
       enableBtn(generateBtn)
       window.open(data.link, '_blank')
     })
diff --git a/app/models/case_court_report_context.rb b/app/models/case_court_report_context.rb
index 9d10bb1637..2868cd4557 100644
--- a/app/models/case_court_report_context.rb
+++ b/app/models/case_court_report_context.rb
@@ -3,7 +3,7 @@
 require "date"
 
 class CaseCourtReportContext
-  attr_reader :report_path, :template
+  attr_reader :report_path, :template, :date_range
 
   def initialize(args = {})
     @casa_case = CasaCase.friendly.find(args[:case_id])
@@ -12,6 +12,7 @@ def initialize(args = {})
     @path_to_template = args[:path_to_template]
     @court_date = args[:court_date] || @casa_case.next_court_date
     @case_court_orders = args[:case_court_orders] || @casa_case.case_court_orders
+    @date_range = calculate_date_range(args)
   end
 
   def context
@@ -35,8 +36,7 @@ def context
   #   - :dates [Array<String>]
   #   - :dates_by_medium_type [Array<String>]
   def case_contacts
-    cccts = CaseContactContactType.includes(:case_contact, :contact_type).where("case_contacts.casa_case_id": @casa_case.id)
-    interviewees = filter_out_old_case_contacts(cccts)
+    interviewees = filtered_interviewees
     return [] unless interviewees.size.positive?
 
     CaseContactsContactDates.new(interviewees).contact_dates_details
@@ -56,13 +56,11 @@ def case_orders(orders)
     end
   end
 
-  def filter_out_old_case_contacts(interviewees)
-    most_recent_court_date = @casa_case.most_recent_past_court_date&.date
-    if most_recent_court_date
-      interviewees.where("occurred_at >= ?", most_recent_court_date)
-    else
-      interviewees
-    end
+  def filtered_interviewees
+    # this query is slow
+    CaseContactContactType.includes(:case_contact, :contact_type)
+      .where("case_contacts.casa_case_id": @casa_case.id)
+      .where("case_contacts.occurred_at": @date_range)
   end
 
   def case_details
@@ -89,4 +87,17 @@ def org_address(path_to_template)
     is_default_template = path_to_template.end_with?("default_report_template.docx")
     @volunteer.casa_org.address if @volunteer && is_default_template
   end
+
+  private
+
+  def calculate_date_range(args)
+    zone = args[:time_zone] ? ActiveSupport::TimeZone.new(args[:time_zone]) : Time.zone
+
+    start_date = @casa_case.most_recent_past_court_date&.date&.in_time_zone(zone)
+    start_date = zone.parse(args[:start_date]) if args[:start_date]&.present?
+
+    end_date = args[:end_date]&.present? ? zone.parse(args[:end_date]) : nil
+
+    start_date..end_date
+  end
 end
diff --git a/app/views/casa_cases/_generate_report_modal.html.erb b/app/views/casa_cases/_generate_report_modal.html.erb
new file mode 100644
index 0000000000..170aaa8c1e
--- /dev/null
+++ b/app/views/casa_cases/_generate_report_modal.html.erb
@@ -0,0 +1,56 @@
+<%= form_with url: generate_case_court_reports_path, local: false do |form| %>
+  <% id = "generate-docx-report-modal" %>
+  <%= render(Modal::OpenButtonComponent.new(
+    target: id, 
+    klass: "d-inline main-btn btn-hover btn-sm success-btn pull-right mb-2")) do %>
+    Generate Report
+  <% end %>
+  <%= render(Modal::GroupComponent.new(id: id)) do |component| %>
+    <% component.with_header(text: "Download Court Report as a .docx", id: id, klass: "content-1") %>
+    <% component.with_body do %>
+      <div class="docx-report__modal-body">
+      <p class="content-3 md-10">
+      To download a court report specify the date range.
+      </p>
+      <div class="input-style-1" id="case_select_body">
+        <%= form.hidden_field :case_number, value: @casa_case.case_number %>
+        <%= form.hidden_field :time_zone, id: "user-time-zone" %>
+        <h4 class="mb-10">Casa Case:</h4>
+        <p><%= @casa_case.decorate.court_report_select_option.first %></p>
+      </div>
+      <div class="dates-container">
+        <div class="field form-group mb-20">
+          <h6><label class="form-label" for="start_date">Starting From</label></h6>
+          <%= form.text_field :start_date,
+            value: Time.zone.now.strftime(::DateHelper::RUBY_MONTH_DAY_YEAR_FORMAT),
+            data: { provide: "datepicker",
+                    date_format: ::DateHelper::JQUERY_MONTH_DAY_YEAR_FORMAT },
+                    class: "form-control" %>
+        </div>
+
+        <div class="field form-group mb-20">
+          <h6><label class="form-label" for="end_date">Ending At</label></h6>
+          <%= form.text_field :end_date,
+            value: Time.zone.now.strftime(::DateHelper::RUBY_MONTH_DAY_YEAR_FORMAT),
+            data: { provide: "datepicker",
+                    date_format: ::DateHelper::JQUERY_MONTH_DAY_YEAR_FORMAT },
+                    class: "form-control" %>
+        </div>
+      </div>
+      </div>
+    <% end %>
+    <% component.with_footer do %>
+        <%= button_tag type: :submit,
+          data: {
+            button_name: "Generate Report"
+          },
+          id: "btnGenerateReport",
+          class: "main-btn primary-btn btn-hover btn-sm",
+          onclick: "setTimeZone()" do %>
+          <i class="lni lni-download mr-10"></i>
+          <i id="spinner" class='fas fa-spin d-none mr-10'>⏳</i>
+          Generate Report
+        <% end %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/app/views/casa_cases/show.html.erb b/app/views/casa_cases/show.html.erb
index f18c2d1e4d..a95e2b51fb 100644
--- a/app/views/casa_cases/show.html.erb
+++ b/app/views/casa_cases/show.html.erb
@@ -23,14 +23,7 @@
                                       margin: false) %>
       <% end %>
     <% end %>
-    <%= form_with url: generate_case_court_reports_path, local: false, class: "d-inline" do |form| %>
-      <%= form.hidden_field :case_number, value: @casa_case.case_number %>
-      <%= button_tag "Generate Report", type: :submit,
-                     data: {button_name: "Generate Report"},
-                     id: "btnGenerateReport",
-                     class: "main-btn success-btn btn-hover btn-sm pull-right mb-2" %>
-      <i id="spinner" class='fas fa-spin d-none pull-right'>⏳</i>
-    <% end %>
+    <%= render "casa_cases/generate_report_modal" %>
     <% if @casa_case.casa_org.show_fund_request %>
       <%= link_to("New Fund Request", new_casa_case_fund_request_path(@casa_case),
 class: "btn btn-primary pull-left casa-case-button") %>
@@ -156,4 +149,39 @@ class: "btn btn-primary pull-left casa-case-button") %>
       window.localStorage.removeItem('casa-contact-form')
     }
   });
+  const ELEMENTS = {
+    'caseSelect': '#case-selection',
+    'generateBtn': '#btnGenerateReport',
+  }
+  const showBtn = el => el.classList.remove('d-none')
+  const enableBtn = (el) => {
+    el.disabled = false
+    el.classList.remove('disabled')
+    el.removeAttribute('aria-disabled')
+  }
+
+  const handleSelect = (e) => {
+    const selectEl = e.target
+    const generateBtn = selectEl.form.querySelector(ELEMENTS.generateBtn)
+
+    // when selecting a case, reset buttons to initial state
+    enableBtn(generateBtn)
+    showBtn(generateBtn)
+  }
+
+  const bindElements = () => {
+    const caseSelectEl = document.querySelector(ELEMENTS.caseSelect)
+
+    if (caseSelectEl)
+      caseSelectEl.addEventListener('change', handleSelect)
+  }
+
+  const setTimeZone = () => {
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+    document.getElementById("user-time-zone").value = timeZone
+  }
+
+  window.onload = function () {
+    bindElements()
+  }
 </script>
diff --git a/app/views/case_court_reports/_generate_docx.html.erb b/app/views/case_court_reports/_generate_docx.html.erb
new file mode 100644
index 0000000000..87d3ffc1f7
--- /dev/null
+++ b/app/views/case_court_reports/_generate_docx.html.erb
@@ -0,0 +1,75 @@
+<%= form_with url: generate_case_court_reports_path, local: false do |form| %>
+  <% id = "generate-docx-report-modal" %>
+  <%= render(Modal::OpenButtonComponent.new(target: id, klass: "btn generate-report-button")) do %>
+    <svg viewBox="0 0 40 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>Word Document Logo</title>
+      <path d="M25 0H5C3.67392 0 2.40215 0.526784 1.46447 1.46447C0.526784 2.40215 0 3.67392 0 5V45C0 46.3261 0.526784 47.5979 1.46447 48.5355C2.40215 49.4732 3.67392 50 5 50H35C36.3261 50 37.5979 49.4732 38.5355 48.5355C39.4732 47.5979 40 46.3261 40 45V15L25 0ZM28 45H24.5L20 28L15.5 45H12L6.5 22.5H10.25L13.75 39.5L18.25 22.5H21.5L26 39.5L29.5 22.5H33.25L28 45ZM22.5 17.5V3.75L36.25 17.5H22.5Z" fill="#4A6CF7" />
+    </svg>
+    <div>
+      <h3 class="content-1">Download Court Report as .docx</h3>
+      <p class="content-2">
+      The Court Report is pre-filled with information for your case. You can select among currently active cases assigned to you. The document is in Microsoft Word format (.docx).
+      </p>
+    </div>
+  <% end %>
+  <%= render(Modal::GroupComponent.new(id: id)) do |component| %>
+    <% component.with_header(text: "Download Court Report as a .docx", id: id, klass: "content-1") %>
+    <% component.with_body do %>
+      <div class="docx-report__modal-body">
+      <p class="content-3 md-10">
+      To download a court report, choose an active case and specify the date range.
+      </p>
+      <div class="input-style-1" id="case_select_body">
+        <%= form.label :case_selection, "Case" %>
+        <% select_options = @assigned_cases.map { |casa_case| casa_case.decorate.court_report_select_option } %>
+
+        <% show_search = !current_user.volunteer? %>
+
+        <% select_case_prompt = show_search ? "Search by volunteer name or case number" : "Select case number" %>
+        <% select2_class = show_search ? " select2" : "" %>
+        <%= select_tag :case_number,
+          options_for_select(select_options),
+          prompt: select_case_prompt,
+          include_blank: false,
+          id: "case-selection",
+          class: "custom-select#{select2_class}",
+          data: { dropdown_parent: "##{id}" } %>
+
+      <%= form.hidden_field :time_zone, id: "user-time-zone" %>
+      </div>
+      <div class="dates-container">
+        <div class="field form-group mb-20">
+          <h6><label class="form-label" for="start_date">Starting From</label></h6>
+          <%= form.text_field :start_date,
+            value: Time.zone.now.strftime(::DateHelper::RUBY_MONTH_DAY_YEAR_FORMAT),
+            data: { provide: "datepicker",
+                    date_format: ::DateHelper::JQUERY_MONTH_DAY_YEAR_FORMAT },
+                    class: "form-control" %>
+        </div>
+
+        <div class="field form-group mb-20">
+          <h6><label class="form-label" for="end_date">Ending At</label></h6>
+          <%= form.text_field :end_date,
+            value: Time.zone.now.strftime(::DateHelper::RUBY_MONTH_DAY_YEAR_FORMAT),
+            data: { provide: "datepicker",
+                    date_format: ::DateHelper::JQUERY_MONTH_DAY_YEAR_FORMAT },
+                    class: "form-control" %>
+        </div>
+      </div>
+      </div>
+    <% end %>
+    <% component.with_footer do %>
+        <%= button_tag type: :submit,
+          data: {
+            button_name: "Generate Report"
+          },
+          id: "btnGenerateReport",
+          class: "main-btn primary-btn btn-hover btn-sm",
+          onclick: "setTimeZone()" do %>
+          <i class="lni lni-download mr-10"></i>
+          <i id="spinner" class='fas fa-spin d-none mr-10'>⏳</i>
+          Generate Report
+        <% end %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/app/views/case_court_reports/index.html.erb b/app/views/case_court_reports/index.html.erb
index 4ab06e896e..6b6ecbd2e8 100644
--- a/app/views/case_court_reports/index.html.erb
+++ b/app/views/case_court_reports/index.html.erb
@@ -2,7 +2,7 @@
   <div class="row align-items-center">
     <div class="col-md-6">
       <div class="title mb-30">
-        <h1>Report Categories</h1>
+        <h1>Generate Reports</h1>
       </div>
     </div>
   </div>
@@ -11,42 +11,8 @@
   <div class="row">
     <div class="col-lg-12">
       <div class="card-style mb-30">
-        <h6 class="mb-10">Generate Court Report</h6>
-        <p class="text-sm mb-25">
-          The Court Report is pre-filled with information for your case. You can select among currently active cases assigned to you. The document is in Microsoft Word format (.docx).
-        </p>
-        <%= form_with url: generate_case_court_reports_path, local: false do |form| %>
-          <div class="input-style-1">
-            <%= form.label :case_selection, "Case Number:" %>
-            <% select_options = @assigned_cases.map { |casa_case| casa_case.decorate.court_report_select_option } %>
-
-            <% show_search = !current_user.volunteer? %>
-
-            <% select_case_prompt = show_search ? "Search by volunteer name or case number" : "Select case number" %>
-            <% select2_class = show_search ? "select2" : "" %>
-
-            <%= select_tag :case_number,
-                          options_for_select(select_options),
-                          prompt: select_case_prompt,
-                          include_blank: false,
-                          id: "case-selection",
-                          class: "custom-select #{select2_class}" %>
-
-            <%= form.hidden_field :time_zone, id: "user-time-zone" %>
-          </div>
-          <div class="input-style-1">
-            <%= button_tag type: :submit,
-                           data: {
-                             button_name: "Generate Report"
-                           },
-                           id: "btnGenerateReport",
-                           class: "main-btn primary-btn btn-hover btn-sm",
-                           onclick: "setTimeZone()" do %>
-              <i class="lni lni-download mr-10"></i> Generate Report
-            <% end %>
-            <i id="spinner" class='fas fa-spin d-none'>⏳</i>
-          </div>
-        <% end %>
+        <h6 class="mb-10">Court Reports</h6>
+        <%= render "case_court_reports/generate_docx" %>
       </div>
     </div>
   </div>
diff --git a/spec/components/modal/open_button_component_spec.rb b/spec/components/modal/open_button_component_spec.rb
index 6052e9f70c..c8172c7273 100644
--- a/spec/components/modal/open_button_component_spec.rb
+++ b/spec/components/modal/open_button_component_spec.rb
@@ -8,7 +8,7 @@
   it "renders the button with text and icon" do
     render_inline(Modal::OpenButtonComponent.new(target: "myModal", text: "Example Text", icon: "example-icon", klass: "example-class"))
 
-    expect(page).to have_css("button[type='button'][class='btn example-class'][data-bs-toggle='modal'][data-bs-target='#myModal']")
+    expect(page).to have_css("button[type='button'][class='example-class'][data-bs-toggle='modal'][data-bs-target='#myModal']")
     expect(page).to have_css("button i.lni.mr-10.lni-example-icon")
     expect(page).to have_text("Example Text")
   end
@@ -16,7 +16,7 @@
   it "renders the button with only text" do
     render_inline(Modal::OpenButtonComponent.new(target: "myModal", text: "Example Text"))
 
-    expect(page).to have_css("button[type='button'][class='btn '][data-bs-toggle='modal'][data-bs-target='#myModal']")
+    expect(page).to have_css("button[type='button'][class=''][data-bs-toggle='modal'][data-bs-target='#myModal']")
     expect(page).not_to have_css("button i")
     expect(page).to have_text("Example Text")
   end
@@ -26,7 +26,7 @@
       "Example Text"
     end
 
-    expect(page).to have_css("button[type='button'][class='btn '][data-bs-toggle='modal'][data-bs-target='#myModal']")
+    expect(page).to have_css("button[type='button'][class=''][data-bs-toggle='modal'][data-bs-target='#myModal']")
     expect(page).not_to have_css("button i")
     expect(page).to have_text("Example Text")
   end
@@ -36,7 +36,7 @@
       "Example Text"
     end
 
-    expect(page).to have_css("button[type='button'][class='btn '][data-bs-toggle='modal'][data-bs-target='#myModal']")
+    expect(page).to have_css("button[type='button'][class=''][data-bs-toggle='modal'][data-bs-target='#myModal']")
     expect(page).not_to have_css("button i")
     expect(page).to have_text("Example Text")
     expect(page).to_not have_text("Overwritten")
diff --git a/spec/factories/case_court_report_context.rb b/spec/factories/case_court_report_context.rb
index 1d0301a5f5..435b474fd1 100644
--- a/spec/factories/case_court_report_context.rb
+++ b/spec/factories/case_court_report_context.rb
@@ -9,6 +9,9 @@
       case_court_orders { nil }
       path_to_report { Rails.root.join("tmp", "test_report.docx").to_s }
       path_to_template { Rails.root.join("app", "documents", "templates", "default_report_template.docx").to_s }
+      start_date { nil }
+      end_date { nil }
+      time_zone { nil }
     end
 
     initialize_with {
@@ -25,7 +28,10 @@
         path_to_report: path_to_report,
         path_to_template: path_to_template,
         court_date: court_date,
-        case_court_orders: case_court_orders
+        case_court_orders: case_court_orders,
+        start_date: start_date,
+        end_date: end_date,
+        time_zone: time_zone
       )
     }
   end
diff --git a/spec/models/case_court_report_context_spec.rb b/spec/models/case_court_report_context_spec.rb
index 301f424e78..45ee767d1f 100644
--- a/spec/models/case_court_report_context_spec.rb
+++ b/spec/models/case_court_report_context_spec.rb
@@ -3,6 +3,8 @@
 require "rails_helper"
 require "sablon"
 
+A_TIMEZONE = "America/New_York"
+
 RSpec.describe CaseCourtReportContext, type: :model do
   let(:volunteer) { create(:volunteer, :with_casa_cases) }
   let(:path_to_template) { Rails.root.join("app", "documents", "templates", "default_report_template.docx").to_s }
@@ -106,85 +108,143 @@
         expect(instance.latest_hearing_date).to eq("___<LATEST HEARING DATE>____")
       end
     end
-  end
 
-  describe "#case_contacts" do
-    let(:casa_case) { create(:casa_case) }
-    let(:context) { build(:case_court_report_context, casa_case: casa_case) }
+    context "when there are multiple hearing dates" do
+      let(:casa_case_with_court_dates) {
+        casa_case = create(:casa_case)
 
-    it "returns an empty array if there are no interviewees" do
-      expect(context.case_contacts).to eq([])
-    end
+        casa_case.court_dates << build(:court_date, date: 9.months.ago)
+        casa_case.court_dates << build(:court_date, date: 3.months.ago)
+        casa_case.court_dates << build(:court_date, date: 15.months.ago)
 
-    # not sure how to test this without just restating the code
-    # context 'when there are interviewees' do
-    #   it 'it calls CaseContactsContactDates with filtered values' do
-    #     create_list(:case_contact_contact_type, 3, case_contact: create(:case_contact, casa_case: casa_case))
-    #     context.case_contacts
-    #   end
-    # end
+        casa_case
+      }
+
+      let(:court_report_context_with_latest_hearing_date) { build(:case_court_report_context, casa_case: casa_case_with_court_dates) }
+
+      it "sets latest_hearing_date as the latest past court date" do
+        expect(court_report_context_with_latest_hearing_date.latest_hearing_date).to eq("October 1, 2020")
+      end
+    end
   end
 
-  describe "#filter_out_old_case_contacts" do
-    let(:casa_case) { create(:casa_case) }
-    let(:court_date) { nil }
-    let(:court_report_context) { build(:case_court_report_context, casa_case: casa_case, court_date: court_date) }
+  describe "#calculate_date_range" do
+    context "when @time_zone is set" do
+      it "converts to provided timezone" do
+        context = build_context(start_date: 10.day.ago, end_date: 2.day.ago, court_date: nil, time_zone: A_TIMEZONE)
+        expect(context.date_range).to eq(zone_days_ago(10)..zone_days_ago(2))
+      end
+
+      it "uses current time if end_date not provided" do
+        context = build_context(start_date: 10.day.ago, end_date: nil, court_date: nil, time_zone: A_TIMEZONE)
+        expect(context.date_range).to eq(zone_days_ago(10)..nil)
+      end
+
+      it "uses court date if available if no start_date" do
+        context = build_context(start_date: nil, end_date: 2.day.ago, court_date: 6.day.ago, time_zone: A_TIMEZONE)
+        expect(context.date_range).to eq(zone_days_ago(6)..zone_days_ago(2))
+      end
+
+      it "uses nil(includes everything) if no court date or start_date" do
+        context = build_context(start_date: nil, end_date: 2.day.ago, court_date: nil, time_zone: A_TIMEZONE)
 
-    context "when there is no most recent court date" do
-      it "returns all interviewees" do
-        interviewees = build_list(:case_contact, 3)
-        expect(court_report_context.filter_out_old_case_contacts(interviewees)).to match_array(interviewees)
+        expect(context.date_range).to eq(nil..zone_days_ago(2))
       end
     end
 
-    context "when there is a most recent court date" do
-      let(:date) { 5.day.ago }
-      let(:court_date) { build(:court_date, date: date) }
-      let(:casa_case) { create(:casa_case, court_dates: [court_date]) }
+    context "when @time_zone is not set" do
+      it "uses server time zone" do
+        context = build_context(start_date: 10.day.ago, end_date: 2.day.ago, court_date: nil, time_zone: nil)
+        expect(context.date_range).to eq(days_ago(10)..days_ago(2))
+      end
+
+      it "uses nil if end_date not provided" do
+        context = build_context(start_date: 10.day.ago, end_date: nil, court_date: nil, time_zone: nil)
+        expect(context.date_range).to eq(days_ago(10)..nil)
+      end
 
-      it "filters out case contacts before the court date" do
-        create_list(:case_contact, 3, occurred_at: date - 1.day, casa_case: casa_case)
-        included_interviewee = create(:case_contact, occurred_at: date + 1.day, casa_case: casa_case)
+      it "uses court date if available if no start_date" do
+        context = build_context(start_date: nil, end_date: 2.day.ago, court_date: 6.day.ago, time_zone: nil)
+        expect(context.date_range).to eq(days_ago(6)..days_ago(2))
+      end
 
-        result = court_report_context.filter_out_old_case_contacts(CaseContact.all)
+      it "uses nil if no court date or start_date" do
+        context = build_context(start_date: nil, end_date: 2.day.ago, court_date: nil, time_zone: nil)
 
-        expect(result).to contain_exactly(included_interviewee)
+        expect(context.date_range).to eq(nil..days_ago(2))
       end
     end
   end
 
-  describe "#context" do
-    let(:court_report_context) { build(:case_court_report_context) }
+  describe "#filtered_interviewees" do
+    it "filters based on date range" do
+      casa_case = create(:casa_case)
+      court_report_context = build(:case_court_report_context, start_date: 5.day.ago.to_s, end_date: 5.day.ago.to_s, casa_case: casa_case)
 
-    describe ":created_date" do
-      it "has a created date equal to the current date" do
-        expect(court_report_context.context[:created_date]).to eq("January 1, 2021")
-      end
+      create_list(:case_contact, 3, occurred_at: 10.day.ago, casa_case: casa_case)
+      create_list(:case_contact, 3, occurred_at: 1.day.ago, casa_case: casa_case)
+      included_interviewee = create(:case_contact, occurred_at: 5.day.ago, casa_case: casa_case)
+
+      result = court_report_context.filtered_interviewees.map(&:case_contact)
+
+      expect(result).to contain_exactly(included_interviewee)
     end
 
-    describe ":latest_hearing_date" do
-      context "when there are no hearing dates" do
-        it "contains text prompting the reader to enter a hearing date" do
-          expect(court_report_context.context[:latest_hearing_date]).to eq("___<LATEST HEARING DATE>____")
-        end
-      end
+    it "filters if start of date range is nil" do
+      casa_case = create(:casa_case)
+      court_report_context = build(:case_court_report_context, start_date: nil, end_date: 5.day.ago.to_s, casa_case: casa_case)
+
+      create_list(:case_contact, 3, occurred_at: 1.day.ago, casa_case: casa_case)
+      interviewees = create_list(:case_contact, 3, occurred_at: 10.day.ago, casa_case: casa_case)
+      interviewees.append(create(:case_contact, occurred_at: 5.day.ago, casa_case: casa_case))
 
-      context "when there are multiple hearing dates" do
-        let(:casa_case_with_court_dates) {
-          casa_case = create(:casa_case)
+      result = court_report_context.filtered_interviewees.map(&:case_contact)
 
-          casa_case.court_dates << build(:court_date, date: 9.months.ago)
-          casa_case.court_dates << build(:court_date, date: 3.months.ago)
-          casa_case.court_dates << build(:court_date, date: 15.months.ago)
+      expect(result).to match_array(interviewees)
+    end
+
+    it "filters if end of date range is nil" do
+      casa_case = create(:casa_case)
+      court_report_context = build(:case_court_report_context, start_date: 5.day.ago.to_s, end_date: nil, casa_case: casa_case)
+
+      create_list(:case_contact, 3, occurred_at: 10.day.ago, casa_case: casa_case)
+      interviewees = create_list(:case_contact, 3, occurred_at: 1.day.ago, casa_case: casa_case)
+      interviewees.append(create(:case_contact, occurred_at: 5.day.ago, casa_case: casa_case))
+
+      result = court_report_context.filtered_interviewees.map(&:case_contact)
+
+      expect(result).to match_array(interviewees)
+    end
+
+    it "does not filter if both start and end of date range are nil" do
+      casa_case = create(:casa_case)
+      court_report_context = build(:case_court_report_context, start_date: nil, end_date: nil, casa_case: casa_case)
+
+      create_list(:case_contact, 3, occurred_at: 10.day.ago, casa_case: casa_case)
+      create_list(:case_contact, 3, occurred_at: 1.day.ago, casa_case: casa_case)
+      create(:case_contact, occurred_at: 5.day.ago, casa_case: casa_case)
 
-          casa_case
-        }
+      result = court_report_context.filtered_interviewees.map(&:case_contact)
+
+      expect(result).to match_array(CaseContact.all)
+    end
+
+    it "returns an empty array if there are no interviewees" do
+      casa_case = create(:casa_case)
+      court_report_context = build(:case_court_report_context, start_date: 5.day.ago.to_s, end_date: nil, casa_case: casa_case)
+
+      result = court_report_context.filtered_interviewees.map(&:case_contact)
+
+      expect(result).to match_array([])
+    end
+  end
 
-        let(:court_report_context_with_latest_hearing_date) { build(:case_court_report_context, casa_case: casa_case_with_court_dates) }
+  describe "#context" do
+    let(:court_report_context) { build(:case_court_report_context) }
 
-        it "sets latest_hearing_date as the latest past court date" do
-          expect(court_report_context_with_latest_hearing_date.context[:latest_hearing_date]).to eq("October 1, 2020")
-        end
+    describe ":created_date" do
+      it "has a created date equal to the current date" do
+        expect(court_report_context.context[:created_date]).to eq("January 1, 2021")
       end
     end
   end
@@ -204,3 +264,23 @@
     end
   end
 end
+
+def build_context(start_date:, end_date:, court_date:, time_zone:)
+  args = {time_zone: time_zone, start_date: start_date.to_s, end_date: end_date.to_s}
+
+  if court_date
+    court_date_object = build(:court_date, date: court_date)
+    court_case = create(:casa_case, court_dates: [court_date_object])
+    args[:casa_case] = court_case if court_date
+  end
+
+  build(:case_court_report_context, **args)
+end
+
+def zone_days_ago(days)
+  ActiveSupport::TimeZone.new(A_TIMEZONE).now - days.days
+end
+
+def days_ago(days)
+  days.days.ago
+end
diff --git a/spec/models/case_court_report_spec.rb b/spec/models/case_court_report_spec.rb
index 1c747c4f19..17783455dd 100644
--- a/spec/models/case_court_report_spec.rb
+++ b/spec/models/case_court_report_spec.rb
@@ -32,30 +32,6 @@
         end
       end
 
-      describe "with court date in the future" do
-        let!(:far_past_case_contact) { create :case_contact, occurred_at: 5.days.ago, casa_case_id: casa_case_with_contacts.id }
-
-        before do
-          create(:court_date, casa_case: casa_case_with_contacts, date: 1.day.from_now)
-        end
-
-        describe "without past court date" do
-          it "has all case contacts ever created for the youth" do
-            expect(report.context[:case_contacts].length).to eq(5)
-          end
-        end
-
-        describe "with past court date" do
-          let!(:court_date) { create(:court_date, date: 2.days.ago, casa_case_id: casa_case_with_contacts.id) }
-
-          it "has all case contacts created since the previous court date including case contact created on the court date" do
-            create(:case_contact, casa_case: casa_case_with_contacts, created_at: court_date.date, notes: "created ON most recent court date")
-            expect(casa_case_with_contacts.court_dates.length).to eq(2)
-            expect(report.context[:case_contacts].length).to eq(5)
-          end
-        end
-      end
-
       describe "has valid @context" do
         subject { report.context }
 
diff --git a/spec/requests/case_court_reports_spec.rb b/spec/requests/case_court_reports_spec.rb
index efafbba821..6eb22f5fb4 100644
--- a/spec/requests/case_court_reports_spec.rb
+++ b/spec/requests/case_court_reports_spec.rb
@@ -99,7 +99,15 @@
   # case_court_reports#generate
   describe "POST /case_court_reports" do
     let(:casa_case) { volunteer.casa_cases.first }
-    let(:params) { {case_court_report: {case_number: casa_case.case_number.to_s}} }
+    let(:params) {
+      {
+        case_court_report: {
+          case_number: casa_case.case_number.to_s,
+          start_date: "January 1, 2020",
+          end_date: "January 1, 2021"
+        }
+      }
+    }
 
     subject(:request) do
       post generate_case_court_reports_path, params: params, headers: {ACCEPT: "application/json"}
@@ -175,7 +183,9 @@
 
         docx_response = Docx::Document.open(StringIO.new(followed_link_response.body))
 
-        expect(docx_response.paragraphs.map(&:to_s)).to include("Date Written: #{I18n.l(user_different_timezone.at(server_time).to_date, format: :full, default: nil)}")
+        expect(docx_response.paragraphs.map(&:to_s))
+          .to include("Date Written: #{I18n.l(user_different_timezone.at(server_time)
+            .to_date, format: :full, default: nil)}")
       end
     end
 
diff --git a/spec/system/casa_cases/show_spec.rb b/spec/system/casa_cases/show_spec.rb
index f48c6f570d..ba7b45188c 100644
--- a/spec/system/casa_cases/show_spec.rb
+++ b/spec/system/casa_cases/show_spec.rb
@@ -41,6 +41,58 @@
     end
   end
 
+  describe "Report Generation", js: true do
+    let(:modal_selector) { '[data-bs-target="#generate-docx-report-modal"]' }
+    let(:user) { volunteer }
+
+    before do
+      travel_to Date.new(2021, 1, 1)
+      sign_in user
+      visit casa_case_path(casa_case.id)
+    end
+
+    context "when first arriving to 'Generate Court Report' page" do
+      it "generation modal hidden" do
+        expect(page).to have_selector "#btnGenerateReport", text: "Generate Report", visible: false
+        expect(page).not_to have_selector ".select2"
+      end
+    end
+
+    context "after opening 'Download Court Report' modal" do
+      before do
+        page.find(modal_selector).click
+      end
+
+      # putting all this in the same system test shaves 3 seconds off the test suite
+      it "modal has correct contents" do
+        start_date = page.find("#start_date").value
+        expect(start_date).to eq("January 01, 2021") # default date
+
+        end_date = page.find("#end_date").value
+        expect(end_date).to eq("January 01, 2021") # default date
+
+        expect(page).to have_selector "#btnGenerateReport", text: "Generate Report", visible: true
+        expect(page).to_not have_selector ".select2"
+
+        expect(page).to have_selector("#btnGenerateReport .lni-download", visible: true)
+        expect(page).to_not have_selector("#btnGenerateReport[disabled]")
+        expect(page).to have_selector("#spinner", visible: :hidden)
+
+        within("#generate-docx-report-modal") do
+          expect(page).to have_content(casa_case.case_number)
+
+        # when choosing the prompt option (value is empty) and click on 'Generate Report' button, nothing should happen"
+        # should have disabled generate button, download icon and no spinner
+          click_button "Generate Report"
+        end
+
+        expect(page).to have_selector("#btnGenerateReport .lni-download", visible: :hidden)
+        expect(page).to have_selector("#btnGenerateReport[disabled]")
+        expect(page).to have_selector("#spinner", visible: true)
+      end
+    end
+  end
+
   context "admin user" do
     let(:user) { admin }
 
@@ -137,28 +189,6 @@
       expect(page).to have_content(casa_case.case_court_orders[0].implementation_status_symbol)
     end
 
-    context "when generating a report, supervisor sees waiting page", js: true do
-      before do
-        click_button "Generate Report"
-      end
-
-      describe "'Generate Report' button" do
-        it "has been disabled" do
-          options = {visible: :visible}
-
-          expect(page).to have_selector "#btnGenerateReport[disabled]", **options
-        end
-      end
-
-      describe "Spinner" do
-        it "becomes visible" do
-          options = {visible: :visible}
-
-          expect(page).to have_selector "#spinner", **options
-        end
-      end
-    end
-
     context "when old case contacts are hidden" do
       it "should display all case contacts to supervisor", js: true do
         casa_case = create(:casa_case, casa_org: organization)
diff --git a/spec/system/case_court_reports/index_spec.rb b/spec/system/case_court_reports/index_spec.rb
index 249c5e5e7f..bb2a9d2745 100644
--- a/spec/system/case_court_reports/index_spec.rb
+++ b/spec/system/case_court_reports/index_spec.rb
@@ -6,79 +6,71 @@
   let(:casa_cases) { CasaCase.actively_assigned_to(volunteer) }
   let(:younger_than_transition_age) { volunteer.casa_cases.reject(&:in_transition_age?).first }
   let(:at_least_transition_age) { volunteer.casa_cases.find(&:in_transition_age?) }
+  let(:modal_selector) { '[data-bs-target="#generate-docx-report-modal"]' }
 
   before do
+    travel_to Date.new(2021, 1, 1)
     sign_in volunteer
     visit case_court_reports_path
   end
 
-  context "when first arriving to 'Generate Court Report' page" do
-    it "sees 'Generate Report' button" do
-      options = {text: "Generate Report", visible: true}
+  context "when first arriving to 'Generate Court Report' page", js: true do
+    it "generation modal hidden" do
+      expect(page).to have_selector "#btnGenerateReport", text: "Generate Report", visible: false
+      expect(page).to have_selector "#case-selection", visible: false
+      expect(page).not_to have_selector ".select2"
+    end
+  end
 
-      expect(page).to have_selector "#btnGenerateReport", **options
+  context "after opening 'Download Court Report' modal", js: true do
+    before do
+      page.find(modal_selector).click
     end
 
-    it { expect(page).not_to have_selector ".select2" }
+    # putting all this in the same system test shaves 3 seconds off the test suite
+    it "modal has correct contents" do
+      start_date = page.find("#start_date").value
+      expect(start_date).to eq("January 01, 2021") # default date
 
-    it "shows a select element with default selection 'Select case number'" do
-      expected_text = "Select case number"
-      find("#case-selection").click.first("option", text: expected_text).select_option
+      end_date = page.find("#end_date").value
+      expect(end_date).to eq("January 01, 2021") # default date
 
-      expect(page).to have_selector "#case-selection option:first-of-type", text: expected_text
-      expect(page).to have_select "case-selection", selected: expected_text
-    end
+      expect(page).to have_selector "#btnGenerateReport", text: "Generate Report", visible: true
+      expect(page).to_not have_selector ".select2"
 
-    it "shows n+1 options in total, e.g 3 options <- 2 assigned cases + 1 prompt text" do
+      # shows n+1 options in total, e.g 3 options <- 2 assigned cases + 1 prompt text
       expected_number_of_options = casa_cases.size + 1
-
       expect(page).to have_selector "#case-selection option", count: expected_number_of_options
-    end
 
-    it "shows transition stamp for transitioned case" do
+      # shows transition stamp for transitioned case
       expected_text = "#{at_least_transition_age.case_number} - transition"
-
-      expect(page).to have_selector "#case-selection option", text: expected_text
-    end
-
-    it "shows non-transition stamp for non-transitioned case" do
-      expected_text = "#{younger_than_transition_age.case_number} - non-transition"
-
       expect(page).to have_selector "#case-selection option", text: expected_text
-    end
 
-    it "adds data-lookup attribute for searching by volunteer name" do
+      # adds data-lookup attribute for searching by volunteer name
       casa_cases.each do |casa_case|
         lookup = casa_case.assigned_volunteers.map(&:display_name).join(",")
         expect(page).to have_selector "#case-selection option[data-lookup='#{lookup}']"
       end
-    end
-  end
 
-  context "when choosing the prompt option (value is empty) and click on 'Generate Report' button, nothing should happen", js: true do
-    let(:option_text) { "Select case number" }
+      # shows non-transition stamp for non-transitioned case
+      expected_text = "#{younger_than_transition_age.case_number} - non-transition"
+      expect(page).to have_selector "#case-selection option", text: expected_text
 
-    before do
-      # to find the select element, use either 'name' or 'id' attribute
-      # in this case, id = "case-selection", name = "case_number"
-      page.select "Select case number", from: "case-selection"
-      # the above will have the same effect as the below
-      # find("#case-selection").select "Select case number"
-      click_button "Generate Report"
-    end
+      # shows a select element with default selection 'Select case number'
+      expected_text = "Select case number"
+      find("#case-selection").click.first("option", text: expected_text).select_option
 
-    describe "'Generate Report' button" do
-      it "does not become disabled" do
-        expect(page).not_to have_selector "#btnGenerateReport[disabled]"
-      end
-    end
+      expect(page).to have_selector "#case-selection option:first-of-type", text: expected_text
+      expect(page).to have_select "case-selection", selected: expected_text
 
-    describe "Spinner" do
-      it "does not become visible" do
-        options = {visible: :hidden}
+      # when choosing the prompt option (value is empty) and click on 'Generate Report' button, nothing should happen"
+      # should have disabled generate button, download icon and no spinner
+      page.select "Select case number", from: "case-selection"
+      click_button "Generate Report"
 
-        expect(page).to have_selector "#spinner", **options
-      end
+      expect(page).to have_selector("#btnGenerateReport .lni-download", visible: true)
+      expect(page).to_not have_selector("#btnGenerateReport[disabled]")
+      expect(page).to have_selector("#spinner", visible: :hidden)
     end
   end
 
@@ -89,6 +81,7 @@
     let(:non_transitioned_option_text) { "#{non_transitioned_case_number} - non-transition(assigned to Name Last)" }
 
     it "has transition case option selected" do
+      page.find(modal_selector).click
       page.select transitioned_option_text, from: "case-selection"
 
       click_button "Generate Report"
@@ -97,6 +90,7 @@
     end
 
     it "has non-transitioned case option selected" do
+      page.find(modal_selector).click
       page.select non_transitioned_option_text, from: "case-selection"
 
       click_button "Generate Report"
@@ -105,39 +99,12 @@
     end
   end
 
-  context "when generating a report, volunteer sees waiting page", js: true do
-    let(:casa_case) { casa_cases.find(&:in_transition_age?) }
-    let(:option_text) { "#{casa_case.case_number} - transition" }
-
-    before do
-      # to find the select element, use either 'name' or 'id' attribute
-      # in this case, id = "case-selection", name = "case_number"
-      page.select option_text, from: "case-selection"
-      click_button "Generate Report"
-    end
-
-    describe "'Generate Report' button" do
-      it "has been disabled" do
-        options = {visible: :visible}
-
-        expect(page).to have_selector "#btnGenerateReport[disabled]", **options
-      end
-    end
-
-    describe "Spinner" do
-      it "becomes visible" do
-        options = {visible: :visible}
-
-        expect(page).to have_selector "#spinner", **options
-      end
-    end
-  end
-
   context "when selecting a case, volunteer can generate and download a report", js: true do
     let(:casa_case) { casa_cases.find(&:in_transition_age?) }
     let(:option_text) { "#{casa_case.case_number} - transition" }
 
     before do
+      page.find(modal_selector).click
       # to find the select element, use either 'name' or 'id' attribute
       # in this case, id = "case-selection", name = "case_number"
       page.select option_text, from: "case-selection"
@@ -204,6 +171,7 @@
     end
   end
 
+  # TODO: make this a request spec
   describe "as a supervisor" do
     before do
       sign_in supervisor
diff --git a/spec/views/case_court_reports/index.html.erb_spec.rb b/spec/views/case_court_reports/index.html.erb_spec.rb
index 5fbc26a429..ed3fba8f3e 100644
--- a/spec/views/case_court_reports/index.html.erb_spec.rb
+++ b/spec/views/case_court_reports/index.html.erb_spec.rb
@@ -16,28 +16,16 @@
     end
 
     it "has a card with card title 'Generate Court Report'", :aggregate_failures do
+      expect(rendered).to have_selector("h6", text: "Court Reports", count: 1)
       expect(rendered).to have_selector("div", class: "card-style", count: 1)
-      expect(rendered).to have_selector("h6", text: "Generate Court Report", count: 1)
     end
 
-    it "displays a form" do
-      expect(rendered).to have_selector("form", count: 1)
+    it "page has title 'Gererate Reports'" do
+      expect(rendered).to have_selector("h1", text: "Generate Reports", count: 1)
     end
 
-    it "has a dropdown select with shows 2 options" do
-      expect(rendered).to have_selector("select#case-selection option", count: 3)
-    end
-
-    it "has a drowndown select element for CASA case" do
-      expect(rendered).to have_selector("select#case-selection")
-    end
-
-    it "has a 'Generate Report' button" do
-      expect(rendered).to have_selector("button[@type='submit']", text: "Generate Report", id: "btnGenerateReport")
-    end
-
-    it "has a 'Spinner' button" do
-      expect(rendered).to have_selector("i#spinner")
+    it "has button with 'Download Court Report as .docx' text" do
+      expect(rendered).to have_selector("button", text: /Download Court Report as \.docx/i, count: 1)
     end
   end
 end