mirror of
https://github.com/we-promise/sure.git
synced 2026-08-05 08:32:15 +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).
88 lines
4.3 KiB
Plaintext
88 lines
4.3 KiB
Plaintext
<div class="space-y-8">
|
|
<%# Month-over-Month Trends %>
|
|
<div>
|
|
<h3 class="text-lg font-medium mb-4">
|
|
<%= t("reports.trends.monthly_breakdown") %>
|
|
</h3>
|
|
|
|
<% if trends_data.any? %>
|
|
<div class="bg-container-inset rounded-xl p-1 overflow-x-auto">
|
|
<div class="w-max sm:w-full">
|
|
<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"><%= t("reports.trends.month") %></th>
|
|
<th class="px-4 py-2 text-right font-medium"><%= t("reports.trends.income") %></th>
|
|
<th class="px-4 py-2 text-right font-medium"><%= t("reports.trends.expenses") %></th>
|
|
<th class="px-4 py-2 text-right font-medium"><%= t("reports.trends.net") %></th>
|
|
<th class="px-4 py-2 text-right font-medium"><%= t("reports.trends.savings_rate") %></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-secondary text-sm">
|
|
<% trends_data.each_with_index do |trend, idx| %>
|
|
<tr class="<%= idx < trends_data.size - 1 ? "table-divider" : "" %>">
|
|
<td class="py-3 px-4 lg:px-6">
|
|
<span class="flex items-center gap-2 <%= trend[:is_current_month] ? "font-medium" : "" %>">
|
|
<%= trend[:month] %>
|
|
<% if trend[:is_current_month] %>
|
|
<span class="text-xs text-subdued">(<%= t("reports.trends.current") %>)</span>
|
|
<% end %>
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4 lg:px-6 text-right privacy-sensitive">
|
|
<%= Money.new(trend[:income], Current.family.currency).format %>
|
|
</td>
|
|
<td class="py-3 px-4 lg:px-6 text-right privacy-sensitive">
|
|
<%= Money.new(trend[:expenses], Current.family.currency).format %>
|
|
</td>
|
|
<td class="py-3 px-4 lg:px-6 text-right privacy-sensitive <%= trend[:net] >= 0 ? "text-success" : "text-destructive" %>">
|
|
<%= Money.new(trend[:net], Current.family.currency).format %>
|
|
</td>
|
|
<td class="py-3 px-4 lg:px-6 text-right <%= trend[:net] >= 0 ? "text-success" : "text-destructive" %>">
|
|
<% savings_rate = trend[:income] > 0 ? ((trend[:net].to_f / trend[:income].to_f) * 100).round(1) : 0 %>
|
|
<%= savings_rate %>%
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%# Trend Insights %>
|
|
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<% avg_income = trends_data.sum { |t| t[:income] } / trends_data.length %>
|
|
<% avg_expenses = trends_data.sum { |t| t[:expenses] } / trends_data.length %>
|
|
<% avg_net = trends_data.sum { |t| t[:net] } / trends_data.length %>
|
|
|
|
<div class="p-4 bg-surface-inset rounded-lg">
|
|
<p class="text-sm text-secondary mb-1"><%= t("reports.trends.avg_monthly_income") %></p>
|
|
<p class="text-lg font-semibold text-success privacy-sensitive">
|
|
<%= Money.new(avg_income, Current.family.currency).format %>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="p-4 bg-surface-inset rounded-lg">
|
|
<p class="text-sm text-secondary mb-1"><%= t("reports.trends.avg_monthly_expenses") %></p>
|
|
<p class="text-lg font-semibold text-primary privacy-sensitive">
|
|
<%= Money.new(avg_expenses, Current.family.currency).format %>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="p-4 bg-surface-inset rounded-lg">
|
|
<p class="text-sm text-secondary mb-1"><%= t("reports.trends.avg_monthly_savings") %></p>
|
|
<p class="text-lg font-semibold privacy-sensitive <%= avg_net >= 0 ? "text-success" : "text-destructive" %>">
|
|
<%= Money.new(avg_net, Current.family.currency).format %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class="text-center py-8 text-subdued">
|
|
<%= t("reports.trends.no_data") %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|