sure/app/views/reports/index.html.erb

<% content_for :head do %>
  <style media="print">
    /* Print-specific custom property overrides for values using --alpha() */
    :root {
      --print-shadow-color: rgba(11, 11, 11, 0.06);
    }

    @page {
      margin: 0.75in;
    }

    body {
      background: var(--color-gray-50);
      color: var(--color-gray-900);
      font-family: var(--font-sans);
    }

    #notification-tray,
    #cta,
    #chat-container,
    turbo-frame#modal,
    turbo-frame#drawer,
    [data-print="hide"] {
      display: none !important;
    }

    [data-controller="app-layout"] {
      height: auto !important;
      overflow: visible !important;
      display: block !important;
    }

    [data-app-layout-target="content"] {
      max-width: none !important;
      max-height: none !important;
      height: auto !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: visible !important;
    }

    body,
    html {
      height: auto !important;
      overflow: visible !important;
    }

    main {
      overflow: visible !important;
      height: auto !important;
      max-height: none !important;
    }

    [data-app-layout-target="content"] > .hidden.lg\:flex {
      display: none !important;
    }

    .reports-page {
      background: transparent;
      padding: 0 !important;
    }

    .reports-print-sheet {
      background: var(--color-white);
      border-radius: 16px;
      padding: 0.75in 0.65in;
      box-shadow: 0 10px 25px var(--print-shadow-color);
    }

    .reports-page section {
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .reports-print-hide,
    [data-reports-section-target="button"],
    [data-reports-sortable-target="handle"] {
      display: none !important;
    }

    [data-reports-section-target="content"] {
      display: block !important;
    }

    section[data-section-key="transactions_breakdown"] {
      break-before: page;
      page-break-before: always;
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    .reports-page table th,
    .reports-page table td {
      padding-inline: 0.5rem !important;
    }
  </style>
<% end %>

<% content_for :page_header do %>
  <div class="space-y-4 mb-6 reports-print-hide">
    <div class="space-y-1">
      <h1 class="text-xl lg:text-3xl font-medium text-primary">
        <%= t("reports.index.title") %>
      </h1>
      <p class="text-sm lg:text-base text-secondary">
        <%= t("reports.index.subtitle") %>
      </p>
    </div>

    <%# Flash messages %>
    <% if flash[:alert].present? %>
      <div class="p-3 rounded-lg bg-destructive-surface text-sm text-destructive">
        <%= flash[:alert] %>
      </div>
    <% end %>

    <%# Period Navigation Tabs %>
    <div class="reports-print-hide flex items-center gap-2 overflow-x-auto pb-2">
      <%= render DS::Link.new(
        text: t("reports.index.periods.monthly"),
        variant: @period_type == :monthly ? "secondary" : "ghost",
        href: reports_path(period_type: :monthly),
        size: :sm
      ) %>
      <%= render DS::Link.new(
        text: t("reports.index.periods.quarterly"),
        variant: @period_type == :quarterly ? "secondary" : "ghost",
        href: reports_path(period_type: :quarterly),
        size: :sm
      ) %>
      <%= render DS::Link.new(
        text: t("reports.index.periods.ytd"),
        variant: @period_type == :ytd ? "secondary" : "ghost",
        href: reports_path(period_type: :ytd),
        size: :sm
      ) %>
      <%= render DS::Link.new(
        text: t("reports.index.periods.last_6_months"),
        variant: @period_type == :last_6_months ? "secondary" : "ghost",
        href: reports_path(period_type: :last_6_months),
        size: :sm
      ) %>
      <%= render DS::Link.new(
        text: t("reports.index.periods.custom"),
        variant: @period_type == :custom ? "secondary" : "ghost",
        href: reports_path(period_type: :custom),
        size: :sm
      ) %>
    </div>

    <%# Custom Date Range Picker (only shown when custom is selected) %>
    <% if @period_type == :custom %>
      <%= form_with url: reports_path, method: :get, data: { controller: "auto-submit-form" }, class: "reports-print-hide flex items-center gap-3 bg-surface-inset p-3 rounded-lg" do |f| %>
        <%= f.hidden_field :period_type, value: :custom %>

        <div class="flex items-center gap-2">
          <label class="text-sm font-medium text-secondary"><%= t("reports.index.date_range.from") %></label>
          <%= f.date_field :start_date,
                           value: @start_date.strftime("%Y-%m-%d"),
                           data: { auto_submit_form_target: "auto" },
                           autocomplete: "off",
                           class: "px-3 py-1.5 border border-primary rounded-lg text-sm bg-container-inset text-primary" %>
        </div>
        <span class="text-secondary">—</span>
        <div class="flex items-center gap-2">
          <label class="text-sm font-medium text-secondary"><%= t("reports.index.date_range.to") %></label>
          <%= f.date_field :end_date,
                           value: @end_date.strftime("%Y-%m-%d"),
                           data: { auto_submit_form_target: "auto" },
                           autocomplete: "off",
                           class: "px-3 py-1.5 border border-primary rounded-lg text-sm bg-container-inset text-primary" %>
        </div>
      <% end %>
    <% end %>

    <%# Period Display %>
    <div class="text-sm text-secondary">
      <%= t("reports.index.showing_period",
            start: @start_date.strftime("%b %-d, %Y"),
            end: @end_date.strftime("%b %-d, %Y")) %>
    </div>
  </div>
<% end %>

<div class="reports-page w-full space-y-6 pb-24 reports-print-sheet">
  <% if Current.family.transactions.any? %>
    <%# Summary Dashboard - Always visible, not collapsible %>
    <section>
      <%= render partial: "reports/summary_dashboard", locals: {
        metrics: @summary_metrics,
        period_type: @period_type
      } %>
    </section>

    <%# Collapsible & Reorderable Sections %>
    <div data-controller="reports-sortable" data-action="dragover->reports-sortable#dragOver drop->reports-sortable#drop" role="list" aria-label="Reports sections">
      <% @reports_sections.each do |section| %>
        <% next unless section[:visible] %>
        <section
          class="bg-container rounded-xl shadow-border-xs transition-all mb-6 group focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2"
          data-reports-sortable-target="section"
          data-section-key="<%= section[:key] %>"
          data-controller="reports-section"
          data-reports-section-section-key-value="<%= section[:key] %>"
          data-reports-section-collapsed-value="<%= Current.user.reports_section_collapsed?(section[:key]) %>"
          draggable="true"
          tabindex="0"
          role="listitem"
          aria-grabbed="false"
          aria-label="<%= t(section[:title]) %> section. Press Enter or Space to grab for reordering, then use arrow keys to move."
          data-action="
            dragstart->reports-sortable#dragStart
            dragend->reports-sortable#dragEnd
            touchstart->reports-sortable#touchStart
            touchmove->reports-sortable#touchMove
            touchend->reports-sortable#touchEnd
            keydown->reports-sortable#handleKeyDown">
          <div class="px-4 py-2 flex items-center justify-between">
            <div class="flex items-center gap-2">
              <button
                type="button"
                class="text-secondary hover:text-primary transition-colors p-0.5"
                data-action="click->reports-section#toggle keydown->reports-section#handleToggleKeydown"
                data-reports-section-target="button"
                aria-label="<%= t("reports.index.toggle_section") %>"
                aria-expanded="<%= !Current.user.reports_section_collapsed?(section[:key]) %>">
                <%= icon("chevron-down", size: "sm", class: "transition-transform", data: { reports_section_target: "chevron" }) %>
              </button>
              <h2 class="text-base font-medium">
                <%= t(section[:title]) %>
              </h2>
            </div>
            <button
              type="button"
              class="cursor-grab active:cursor-grabbing text-secondary hover:text-primary transition-colors p-0.5 opacity-0 group-hover:opacity-100"
              aria-label="<%= t("reports.index.drag_to_reorder") %>">
              <%= icon("grip-vertical", size: "sm") %>
            </button>
          </div>
          <div class="py-4 px-6" data-reports-section-target="content">
            <%= render partial: section[:partial], locals: section[:locals] %>
          </div>
        </section>
      <% end %>
    </div>
  <% else %>
    <%# Empty State %>
    <section>
      <%= render partial: "reports/empty_state" %>
    </section>
  <% end %>
</div>