mirror of
https://github.com/we-promise/sure.git
synced 2026-06-06 03:09:02 +00:00
52b9b47f8c
Color should signal good/bad, not decorate. The always-on decorative coloring
diluted that: report assets were always green, liabilities always red (and that
red == destructive, so a mortgage read like "danger"), expense totals always
red, and investment contributions/withdrawals always green/orange.
Neutralize those to text-primary:
- _net_worth: assets-vs-liabilities headline + per-group asset/liability rows.
- _breakdown_table: expense totals (income stays green).
- _trends_insights: avg monthly expenses (income + net-savings stay semantic).
- _investment_summary: contributions + withdrawals.
KEEP genuine signal: transaction income->green, net-worth total by sign,
Trend#color gains/losses/changes, budget over/near/on-track status, period
net-savings/income/expense *deltas*. ("Balanced" per design discussion.)
Separate follow-up: category icons using a user-chosen hex equal to destructive
red (color-picker concern, not amount coloring).
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-primary"
|
|
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>
|