mirror of
https://github.com/we-promise/sure.git
synced 2026-05-25 21:44:56 +00:00
81e66870d7
* Add period navigation arrows to reports view * Fix accessibility: render disabled next arrow as span instead of anchor * Add tests for period navigation arrows and localized strings * Refactor period navigation: move date logic to controller * Fix test assertions: tighten selectors and remove debug code * Redesign period navigation arrows to match budget screen style * custom period test assert next period * Add YTD tests and fix indentation in period navigation tests * Add period picker menu to reports navigation * Fix accessibility: use disabled button for next arrow * fix a test that was lost in the repos update * Use i18n for period navigation labels * Add accessible labels to period picker navigation links * Use i18n for quarter and YTD labels in period picker * Add accessible labels to active period navigation chevrons * Tighten custom period navigation test assertions * Add comment clarifying build_period_navigation dependency on setup_report_data * Replace link_to with DS::Link in period picker navigation Use Date#quarter instead of manual quarter calculation Remove border from month/quarter/year display in period picker
212 lines
9.3 KiB
Plaintext
212 lines
9.3 KiB
Plaintext
<% content_for :page_header do %>
|
|
<div class="space-y-4 mb-6">
|
|
<header class="flex justify-between items-center text-primary font-medium gap-4">
|
|
<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 %>
|
|
|
|
<%# Print Report Button %>
|
|
<%= link_to print_reports_path(period_type: @period_type, start_date: @start_date, end_date: @end_date),
|
|
target: "_blank",
|
|
rel: "noopener",
|
|
aria: { label: t("reports.index.print_report") },
|
|
class: "font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary border border-secondary bg-transparent hover:bg-surface-hover" do %>
|
|
<%= icon("printer", size: "sm") %>
|
|
<span class="hidden sm:inline"><%= t("reports.index.print_report") %></span>
|
|
<% end %>
|
|
</header>
|
|
|
|
<%# Period Navigation Tabs %>
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div class="flex items-center gap-2 overflow-x-auto no-scrollbar">
|
|
<%= 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>
|
|
</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: "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 %>
|
|
<% if @nav %>
|
|
<div class="flex items-center gap-1 mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<%= render DS::Link.new(
|
|
variant: "icon",
|
|
icon: "chevron-left",
|
|
href: reports_path(period_type: @period_type, start_date: @nav[:prev_start], end_date: @nav[:prev_end]),
|
|
aria: { label: t("reports.index.previous_period") },
|
|
) %>
|
|
|
|
<% if @nav[:at_latest] %>
|
|
<button disabled aria-label="<%= t('reports.index.next_period') %>" class="text-subdued inline-flex items-center justify-center w-9 h-9 rounded-lg cursor-not-allowed">
|
|
<%= icon("chevron-right", color: "current") %>
|
|
</button>
|
|
<% else %>
|
|
<%= render DS::Link.new(
|
|
variant: "icon",
|
|
icon: "chevron-right",
|
|
href: reports_path(period_type: @period_type, start_date: @nav[:next_start], end_date: @nav[:next_end]),
|
|
aria: { label: t("reports.index.next_period") },
|
|
) %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% if [:monthly, :quarterly, :ytd].include?(@period_type) %>
|
|
<%= render DS::Menu.new(variant: "button") do |menu| %>
|
|
<% menu.with_button class: "flex items-center gap-1 hover:bg-alpha-black-25 cursor-pointer rounded-md p-2" do %>
|
|
<span class="text-primary font-medium text-lg lg:text-base"><%= @nav[:label] %></span>
|
|
<%= icon("chevron-down") %>
|
|
<% end %>
|
|
|
|
<% menu.with_custom_content do %>
|
|
<%= render "reports/period_picker", period_type: @period_type, start_date: @start_date %>
|
|
<% end %>
|
|
<% end %>
|
|
<% else %>
|
|
<span class="text-primary font-medium text-lg lg:text-base"><%= @nav[:label] %></span>
|
|
<% end %>
|
|
|
|
<div class="ml-auto">
|
|
<%= render DS::Link.new(
|
|
text: t("reports.index.today"),
|
|
variant: "outline",
|
|
href: reports_path(period_type: @period_type),
|
|
) %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="w-full space-y-6 lg:pb-6">
|
|
<% 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="p-4" 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>
|