mirror of
https://github.com/we-promise/sure.git
synced 2026-06-08 20:29:05 +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).
96 lines
4.6 KiB
Plaintext
96 lines
4.6 KiB
Plaintext
<div class="space-y-6">
|
|
<%# Main Net Worth Stats %>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<%# Current Net Worth %>
|
|
<div class="p-4 bg-surface-inset rounded-lg">
|
|
<p class="text-sm text-secondary mb-2"><%= t("reports.net_worth.current_net_worth") %></p>
|
|
<p class="text-2xl font-semibold privacy-sensitive <%= net_worth_metrics[:current_net_worth] >= 0 ? "text-success" : "text-destructive" %>">
|
|
<%= net_worth_metrics[:current_net_worth].format %>
|
|
</p>
|
|
</div>
|
|
|
|
<%# Period Change %>
|
|
<div class="p-4 bg-surface-inset rounded-lg">
|
|
<p class="text-sm text-secondary mb-2"><%= t("reports.net_worth.period_change") %></p>
|
|
<% if net_worth_metrics[:trend] %>
|
|
<% trend = net_worth_metrics[:trend] %>
|
|
<p class="text-2xl font-semibold mb-1 privacy-sensitive" style="color: <%= trend.color %>">
|
|
<%= trend.value.format(signify_positive: true) %>
|
|
</p>
|
|
<p class="text-xs" style="color: <%= trend.color %>">
|
|
<%= trend.value >= 0 ? "+" : "" %><%= trend.percent_formatted %>
|
|
</p>
|
|
<% else %>
|
|
<p class="text-2xl font-semibold mb-1 text-subdued">--</p>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%# Assets vs Liabilities %>
|
|
<div class="p-4 bg-surface-inset rounded-lg">
|
|
<p class="text-sm text-secondary mb-2"><%= t("reports.net_worth.assets_vs_liabilities") %></p>
|
|
<div class="flex items-baseline gap-2 flex-wrap">
|
|
<span class="text-lg font-semibold text-primary break-words privacy-sensitive"><%= net_worth_metrics[:total_assets].format %></span>
|
|
<span class="text-xs text-subdued shrink-0">-</span>
|
|
<span class="text-lg font-semibold text-primary break-words privacy-sensitive"><%= net_worth_metrics[:total_liabilities].format %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%# Asset/Liability Breakdown %>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<%# Assets Summary %>
|
|
<div class="bg-container-inset rounded-xl p-1 overflow-x-auto w-full flex flex-col">
|
|
<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.net_worth.total_assets") %></th>
|
|
<th class="px-4 py-2 text-right font-medium"><span class="sr-only"><%= t("reports.transactions_breakdown.table.amount") %></span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% net_worth_metrics[:asset_groups].each_with_index do |group, idx| %>
|
|
<tr class="<%= idx < net_worth_metrics[:asset_groups].size - 1 ? "table-divider" : "" %>">
|
|
<td class="py-3 px-4 lg:px-6 text-sm font-medium text-secondary"><%= group[:name] %></td>
|
|
<td class="py-3 px-4 lg:px-6 text-sm font-medium text-right text-primary privacy-sensitive"><%= group[:total].format %></td>
|
|
</tr>
|
|
<% end %>
|
|
<% if net_worth_metrics[:asset_groups].empty? %>
|
|
<tr>
|
|
<td colspan="2" class="text-sm text-subdued py-3 px-4 lg:px-6"><%= t("reports.net_worth.no_assets") %></td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<%# Liabilities Summary %>
|
|
<div class="bg-container-inset rounded-xl p-1 overflow-x-auto w-full flex flex-col">
|
|
<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.net_worth.total_liabilities") %></th>
|
|
<th class="px-4 py-2 text-right font-medium"><span class="sr-only"><%= t("reports.transactions_breakdown.table.amount") %></span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% net_worth_metrics[:liability_groups].each_with_index do |group, idx| %>
|
|
<tr class="<%= idx < net_worth_metrics[:liability_groups].size - 1 ? "table-divider" : "" %>">
|
|
<td class="py-3 px-4 lg:px-6 text-sm font-medium text-secondary"><%= group[:name] %></td>
|
|
<td class="py-3 px-4 lg:px-6 text-sm font-medium text-right text-primary privacy-sensitive"><%= group[:total].format %></td>
|
|
</tr>
|
|
<% end %>
|
|
<% if net_worth_metrics[:liability_groups].empty? %>
|
|
<tr>
|
|
<td colspan="2" class="text-sm text-subdued py-3 px-4 lg:px-6"><%= t("reports.net_worth.no_liabilities") %></td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|