mirror of
https://github.com/we-promise/sure.git
synced 2026-04-10 07:44:48 +00:00
61ee9d34cf
* Refactor report and dashboard tables from div grids to semantic HTML Convert div-based grid layouts to proper <table>/<thead>/<tbody>/<tr>/<th>/<td> elements in report views and the dashboard investment summary: - reports/_breakdown_table + _category_row (income/expense breakdown) - reports/_trends_insights (monthly trends) - reports/_net_worth (asset/liability summaries) - reports/_investment_performance (top holdings) - pages/dashboard/_investment_summary (top holdings) Replaces shared/ruler dividers with border-b border-divider on <tr> elements. Updates test selectors from div[data-category] to tr[data-category] and from [role="columnheader"] to thead/th. Closes #1121 * Address PR review feedback - Restore w-max sm:w-full wrapper on report tables to preserve horizontal scroll behavior on narrow screens - Add sr-only accessible header for net worth amount columns - Use border-divider instead of border-primary in dashboard investment summary * Fix rounded corners on semantic table body containers Move rounded-lg, shadow-border-xs, and bg-container from tbody (where border-radius and box-shadow don't apply) to a wrapper div with overflow-hidden. Add bg-container-inset on thead to preserve the two-tone card design.
59 lines
2.6 KiB
Plaintext
59 lines
2.6 KiB
Plaintext
<%# Renders a breakdown table for income or expense groups %>
|
|
<%# Local variables: groups, total, type (:income or :expense), amount_sort_params, current_sort_by, current_sort_direction %>
|
|
|
|
<%
|
|
color_class = type == :income ? "text-success" : "text-destructive"
|
|
icon_name = type == :income ? "trending-up" : "trending-down"
|
|
title_key = type == :income ? "reports.transactions_breakdown.table.income" : "reports.transactions_breakdown.table.expense"
|
|
%>
|
|
|
|
<div>
|
|
<div class="text-large mb-4 flex items-center gap-2 text-lg">
|
|
<%= icon(icon_name, class: "w-5 h-5") %>
|
|
<span><%= t(title_key) %>:</span>
|
|
<span class="font-medium text-secondary <%= color_class %> privacy-sensitive"> <%= Money.new(total, Current.family.currency).format %></span>
|
|
</div>
|
|
|
|
<div class="bg-container-inset rounded-xl p-1 overflow-x-auto">
|
|
<div class="rounded-lg shadow-border-xs bg-container overflow-hidden">
|
|
<table class="w-full">
|
|
<thead class="bg-container-inset">
|
|
<tr class="uppercase text-xs font-medium text-secondary">
|
|
<th class="px-4 py-2 text-left font-medium" colspan="2"><%= t("reports.transactions_breakdown.table.category") %></th>
|
|
<th class="px-4 py-2 text-right font-medium">
|
|
<%= link_to reports_path(amount_sort_params), class: "inline-flex items-center gap-1 hover:text-primary" do %>
|
|
<%= t("reports.transactions_breakdown.table.amount") %>
|
|
<% if current_sort_by == "amount" %>
|
|
<%= icon(current_sort_direction == "desc" ? "chevron-down" : "chevron-up", class: "w-3 h-3") %>
|
|
<% end %>
|
|
<% end %>
|
|
</th>
|
|
<th class="px-4 py-2 text-right font-medium"><%= t("reports.transactions_breakdown.table.percentage") %></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% groups.each_with_index do |group, idx| %>
|
|
<%= render "reports/category_row",
|
|
item: group,
|
|
total: total,
|
|
color_class: color_class,
|
|
level: :category,
|
|
show_border: idx < groups.size - 1 || group[:subcategories].present? %>
|
|
<%# Render subcategories if present %>
|
|
<% if group[:subcategories].present? && group[:subcategories].any? %>
|
|
<% group[:subcategories].each_with_index do |subcategory, sub_idx| %>
|
|
<%= render "reports/category_row",
|
|
item: subcategory,
|
|
total: total,
|
|
color_class: color_class,
|
|
level: :subcategory,
|
|
show_border: sub_idx < group[:subcategories].size - 1 %>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|