mirror of
https://github.com/we-promise/sure.git
synced 2026-04-08 06:44:52 +00:00
bd34165426
* fix: prevent value overflow in Assets vs Liabilities card Fixes issue where large asset/liability values overflow the container when AI side panel is open and reduces horizontal space. Changes: - Added flex-wrap to allow values to wrap to next line if needed - Added break-all to both asset and liability values for long numbers - Added shrink-0 to minus sign to prevent it from shrinking Fixes #976 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * refactor: use break-words instead of break-all per code review Changed from break-all to break-words for currency values to prevent awkward mid-number breaks (e.g., $1,234,5 / 67.89). break-words only breaks when content overflows and keeps values intact when possible, providing cleaner line breaks while still preventing overflow. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
84 lines
4.2 KiB
Plaintext
84 lines
4.2 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 <%= 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" 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-tertiary">--</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-success break-words"><%= net_worth_metrics[:total_assets].format %></span>
|
|
<span class="text-xs text-tertiary shrink-0">-</span>
|
|
<span class="text-lg font-semibold text-destructive break-words"><%= 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="grid grid-cols-2 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
|
|
<div class="col-span-1 font-medium text-secondary"><%= t("reports.net_worth.total_assets") %></div>
|
|
</div>
|
|
<div class="bg-container rounded-lg shadow-border-xs flex-1 flex flex-col">
|
|
<% net_worth_metrics[:asset_groups].each_with_index do |group, idx| %>
|
|
<div class="grid grid-cols-2 items-center text-secondary text-sm py-3 px-4 lg:px-6">
|
|
<div class="col-span-1 font-medium text-secondary"><%= group[:name] %></div>
|
|
<div class="col-span-1 font-medium text-secondary justify-self-end text-success"><%= group[:total].format %></div>
|
|
</div>
|
|
<% if idx < net_worth_metrics[:asset_groups].size - 1 %>
|
|
<%= render "shared/ruler", classes: "mx-3 lg:mx-4" %>
|
|
<% end %>
|
|
<% end %>
|
|
<% if net_worth_metrics[:asset_groups].empty? %>
|
|
<p class="text-sm text-secondary p-2 text-center"><%= t("reports.net_worth.no_assets") %></p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<%# Liabilities Summary %>
|
|
<div class="bg-container-inset rounded-xl p-1 overflow-x-auto w-full flex flex-col">
|
|
<div class="grid grid-cols-2 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
|
|
<div class="col-span-1 font-medium text-secondary"><%= t("reports.net_worth.total_liabilities") %></div>
|
|
</div>
|
|
<div class="bg-container rounded-lg shadow-border-xs flex-1 flex flex-col">
|
|
<% net_worth_metrics[:liability_groups].each_with_index do |group, idx| %>
|
|
<div class="grid grid-cols-2 items-center text-secondary text-sm py-3 px-4 lg:px-6">
|
|
<div class="col-span-1 font-medium text-secondary"><%= group[:name] %></div>
|
|
<div class="col-span-1 font-medium text-secondary justify-self-end text-destructive"><%= group[:total].format %></div>
|
|
</div>
|
|
<% if idx < net_worth_metrics[:liability_groups].size - 1 %>
|
|
<%= render "shared/ruler", classes: "mx-3 lg:mx-4" %>
|
|
<% end %>
|
|
<% end %>
|
|
<% if net_worth_metrics[:liability_groups].empty? %>
|
|
<p class="text-sm text-tertiary py-2"><%= t("reports.net_worth.no_liabilities") %></p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|