mirror of
https://github.com/we-promise/sure.git
synced 2026-05-12 23:25:00 +00:00
943a4d007d
* feat: Add table-divider class and use it in investments summary section * fix: manage dark-theme variant * feat: apply table-divider to other tables * refactor: use rem instead of px for table-divider class
127 lines
5.7 KiB
Plaintext
127 lines
5.7 KiB
Plaintext
<%# locals: (investment_statement:, period:, **args) %>
|
|
|
|
<% if investment_statement.investment_accounts.any? %>
|
|
<div id="investment-summary" class="space-y-4">
|
|
<div class="flex justify-between gap-4 px-4">
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-2">
|
|
<h2 class="text-lg font-medium"><%= t(".title") %></h2>
|
|
</div>
|
|
|
|
<p class="text-primary text-3xl font-medium privacy-sensitive">
|
|
<%= format_money(investment_statement.portfolio_value_money) %>
|
|
</p>
|
|
|
|
<% trend = investment_statement.unrealized_gains_trend %>
|
|
<% if trend %>
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<span class="text-secondary"><%= t(".total_return") %>:</span>
|
|
<span class="font-medium privacy-sensitive" style="color: <%= trend.color %>">
|
|
<%= format_money(Money.new(trend.value, Current.family.currency)) %>
|
|
(<%= trend.percent_formatted %>)
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<% holdings = investment_statement.top_holdings(limit: 5) %>
|
|
<% if holdings.any? %>
|
|
<div class="bg-container-inset rounded-xl p-1 mx-4 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"><%= t(".holding") %></th>
|
|
<th class="px-4 py-2 text-right font-medium"><%= t(".weight") %></th>
|
|
<th class="px-4 py-2 text-right font-medium"><%= t(".value") %></th>
|
|
<th class="px-4 py-2 text-right font-medium"><%= t(".return") %></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="font-medium text-sm">
|
|
<% holdings.each_with_index do |holding, idx| %>
|
|
<tr class="<%= idx < holdings.size - 1 ? "table-divider" : "" %>">
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-3">
|
|
<% if holding.security.logo_url.present? %>
|
|
<img src="<%= holding.security.logo_url %>" alt="<%= holding.ticker %>" class="w-8 h-8 rounded-full">
|
|
<% else %>
|
|
<div class="w-8 h-8 rounded-full bg-container-inset flex items-center justify-center text-xs font-medium text-secondary">
|
|
<%= holding.ticker.to_s.first(2).presence || "—" %>
|
|
</div>
|
|
<% end %>
|
|
<div class="max-w-32">
|
|
<p class="font-medium truncate"><%= holding.ticker %></p>
|
|
<p class="text-xs text-secondary"><%= truncate(holding.name, length: 20) %></p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="p-4 text-right text-secondary privacy-sensitive">
|
|
<%= number_to_percentage(holding.weight || 0, precision: 1) %>
|
|
</td>
|
|
|
|
<td class="p-4 text-right privacy-sensitive">
|
|
<%= format_money(holding.amount_money) %>
|
|
</td>
|
|
|
|
<td class="p-4 text-right">
|
|
<% if holding.trend %>
|
|
<span class="privacy-sensitive" style="color: <%= holding.trend.color %>">
|
|
<%= holding.trend.percent_formatted %>
|
|
</span>
|
|
<% else %>
|
|
<span class="text-secondary">-</span>
|
|
<% end %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# Investment Activity Summary %>
|
|
<% totals = investment_statement.totals(period: period) %>
|
|
<% if totals.trades_count > 0 || totals.contributions.to_f > 0 || totals.withdrawals.to_f > 0 %>
|
|
<div class="bg-container-inset rounded-xl p-1 mx-4">
|
|
<div class="px-4 py-2 flex items-center uppercase text-xs font-medium text-secondary">
|
|
<%= t(".period_activity", period: period.label) %>
|
|
</div>
|
|
<div class="shadow-border-xs rounded-lg bg-container font-medium text-sm">
|
|
<div class="p-4 grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 p-1.5 rounded-full bg-green-500/10 flex items-center justify-center">
|
|
<%= icon "trending-up", size: "sm", color: "green" %>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-secondary"><%= t(".contributions") %></p>
|
|
<p class="font-medium text-green-600 privacy-sensitive"><%= format_money(totals.contributions) %></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 p-1.5 rounded-full bg-orange-500/10 flex items-center justify-center">
|
|
<%= icon "trending-down", size: "sm", color: "orange" %>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-secondary"><%= t(".withdrawals") %></p>
|
|
<p class="font-medium text-orange-600 privacy-sensitive"><%= format_money(totals.withdrawals) %></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 p-1.5 rounded-full bg-blue-500/10 flex items-center justify-center">
|
|
<%= icon "arrow-left-right", size: "sm", color: "blue" %>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-secondary"><%= t(".trades") %></p>
|
|
<p class="font-medium text-primary"><%= totals.trades_count %></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|