sure/app/views/pages/dashboard/_investment_summary.html.erb

<%# 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="w-max sm:w-full">
          <div class="px-4 py-2 grid grid-cols-4 items-center uppercase text-xs font-medium text-secondary">
            <div class="flex-1"><%= t(".holding") %></div>
            <div class="text-right"><%= t(".weight") %></div>
            <div class="text-right"><%= t(".value") %></div>
            <div class="text-right"><%= t(".return") %></div>
          </div>

          <div class="shadow-border-xs rounded-lg bg-container font-medium text-sm">
            <% holdings.each_with_index do |holding, idx| %>
              <div class="p-4 grid grid-cols-4 items-center <%= idx < holdings.size - 1 ? "border-b border-primary" : "" %>">
                <div class="flex-1 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>

                <div class="text-right text-secondary privacy-sensitive">
                  <%= number_to_percentage(holding.weight || 0, precision: 1) %>
                </div>

                <div class="text-right privacy-sensitive">
                  <%= format_money(holding.amount_money) %>
                </div>

                <div class="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 %>
                </div>
              </div>
            <% end %>
          </div>
        </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 %>