feat: align icon sizes and improve investments section

app/views/reports/_investment_performance.html.erb

@@ -2,14 +2,12 @@
 
 <% if investment_metrics[:has_investments] %>
   <div class="space-y-6">
-    <h3 class="text-lg font-medium text-primary"><%= t("reports.investment_performance.title") %></h3>
-
     <%# Investment Summary Cards %>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
       <%# Portfolio Value Card %>
       <div class="bg-container-inset rounded-lg p-4">
-        <div class="flex items-center gap-2 mb-2">
-          <%= icon("briefcase", class: "w-4 h-4 text-secondary") %>
+        <div class="flex items-center gap-2 mb-3">
+          <%= icon("briefcase", size: "sm") %>
           <span class="text-sm text-secondary"><%= t("reports.investment_performance.portfolio_value") %></span>
         </div>
         <p class="text-xl font-semibold text-primary">
@@ -19,8 +17,8 @@
 
       <%# Total Return Card %>
       <div class="bg-container-inset rounded-lg p-4">
-        <div class="flex items-center gap-2 mb-2">
-          <%= icon("trending-up", class: "w-4 h-4 text-secondary") %>
+        <div class="flex items-center gap-2 mb-3">
+          <%= icon("trending-up", size: "sm") %>
           <span class="text-sm text-secondary"><%= t("reports.investment_performance.total_return") %></span>
         </div>
         <% if investment_metrics[:unrealized_trend] %>
@@ -35,8 +33,8 @@
 
       <%# Period Contributions Card %>
       <div class="bg-container-inset rounded-lg p-4">
-        <div class="flex items-center gap-2 mb-2">
-          <%= icon("arrow-down-to-line", class: "w-4 h-4 text-secondary") %>
+        <div class="flex items-center gap-2 mb-3">
+          <%= icon("arrow-down-to-line", size: "sm") %>
           <span class="text-sm text-secondary"><%= t("reports.investment_performance.contributions") %></span>
         </div>
         <p class="text-xl font-semibold text-primary">
@@ -46,8 +44,8 @@
 
       <%# Period Withdrawals Card %>
       <div class="bg-container-inset rounded-lg p-4">
-        <div class="flex items-center gap-2 mb-2">
-          <%= icon("arrow-up-from-line", class: "w-4 h-4 text-secondary") %>
+        <div class="flex items-center gap-2 mb-3">
+          <%= icon("arrow-up-from-line", size: "sm") %>
           <span class="text-sm text-secondary"><%= t("reports.investment_performance.withdrawals") %></span>
         </div>
         <p class="text-xl font-semibold text-primary">
@@ -59,57 +57,50 @@
     <%# Top Holdings Table %>
     <% if investment_metrics[:top_holdings].any? %>
       <div class="space-y-3">
-        <h4 class="text-sm font-medium text-secondary uppercase"><%= t("reports.investment_performance.top_holdings") %></h4>
+        <h4 class="text-lg font-medium"><%= t("reports.investment_performance.top_holdings") %></h4>
 
-        <div class="bg-container-inset rounded-lg overflow-hidden">
-          <table class="w-full text-sm">
-            <thead class="bg-container">
-              <tr class="text-left text-secondary uppercase text-xs">
-                <th class="px-4 py-3 font-medium"><%= t("reports.investment_performance.holding") %></th>
-                <th class="px-4 py-3 font-medium text-right"><%= t("reports.investment_performance.weight") %></th>
-                <th class="px-4 py-3 font-medium text-right"><%= t("reports.investment_performance.value") %></th>
-                <th class="px-4 py-3 font-medium text-right"><%= t("reports.investment_performance.return") %></th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-primary">
-              <% investment_metrics[:top_holdings].each do |holding| %>
-                <tr>
-                  <td class="px-4 py-3">
-                    <div class="flex items-center gap-3">
-                      <% if holding.security.brandfetch_icon_url.present? %>
-                        <img src="<%= holding.security.brandfetch_icon_url %>" alt="<%= holding.ticker %>" class="w-6 h-6 rounded-full">
-                      <% elsif holding.security.logo_url.present? %>
-                        <img src="<%= Setting.transform_brand_fetch_url(holding.security.logo_url) %>" alt="<%= holding.ticker %>" class="w-6 h-6 rounded-full">
-                      <% else %>
-                        <div class="w-6 h-6 rounded-full bg-container flex items-center justify-center text-xs font-medium text-secondary">
-                          <%= holding.ticker[0..1] %>
-                        </div>
-                      <% end %>
-                      <div>
-                        <p class="font-medium text-primary"><%= holding.ticker %></p>
-                        <p class="text-xs text-secondary"><%= truncate(holding.name, length: 25) %></p>
-                      </div>
+        <div class="bg-container-inset rounded-xl p-1 overflow-x-auto">
+          <div class="grid grid-cols-4 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
+            <div class="col-span-1 font-medium text-secondary"><%= t("reports.investment_performance.holding") %></div>
+            <div class="col-span-1 text-right font-medium text-secondary"><%= t("reports.investment_performance.weight") %></div>
+            <div class="col-span-1 text-right font-medium text-secondary"><%= t("reports.investment_performance.value") %></div>
+            <div class="col-span-1 text-right font-medium text-secondary"><%= t("reports.investment_performance.return") %></div>
+          </div>
+          <div class="bg-container rounded-lg shadow-border-xs">
+            <% investment_metrics[:top_holdings].each_with_index do |holding, idx| %>
+              <div class="grid grid-cols-4 items-center text-secondary text-sm py-3 px-4 lg:px-6">
+                <div class="col-span-1 flex items-center gap-3">
+                  <% if holding.security.brandfetch_icon_url.present? %>
+                    <img src="<%= holding.security.brandfetch_icon_url %>" alt="<%= holding.ticker %>" class="w-6 h-6 rounded-full">
+                  <% elsif holding.security.logo_url.present? %>
+                    <img src="<%= Setting.transform_brand_fetch_url(holding.security.logo_url) %>" alt="<%= holding.ticker %>" class="w-6 h-6 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[0..1] %>
                     </div>
-                  </td>
-                  <td class="px-4 py-3 text-right text-secondary">
-                    <%= number_to_percentage(holding.weight || 0, precision: 1) %>
-                  </td>
-                  <td class="px-4 py-3 text-right font-medium text-primary">
-                    <%= format_money(holding.amount_money) %>
-                  </td>
-                  <td class="px-4 py-3 text-right">
-                    <% if holding.trend %>
-                      <span style="color: <%= holding.trend.color %>">
-                        <%= holding.trend.percent_formatted %>
-                      </span>
-                    <% else %>
-                      <span class="text-secondary"><%= t("reports.investment_performance.no_data") %></span>
-                    <% end %>
-                  </td>
-                </tr>
+                  <% end %>
+                  <div>
+                    <p class="font-medium text-primary"><%= holding.ticker %></p>
+                    <p class="text-xs text-secondary"><%= truncate(holding.name, length: 25) %></p>
+                  </div>
+                </div>
+                <div class="col-span-1 text-right text-secondary"><%= number_to_percentage(holding.weight || 0, precision: 1) %></div>
+                <div class="col-span-1 text-right font-medium text-primary"><%= format_money(holding.amount_money) %></div>
+                <div class="col-span-1 text-right">
+                  <% if holding.trend %>
+                    <span style="color: <%= holding.trend.color %>">
+                      <%= holding.trend.percent_formatted %>
+                    </span>
+                  <% else %>
+                    <span class="text-secondary"><%= t("reports.investment_performance.no_data") %></span>
+                  <% end %>
+                </div>
+              </div>
+              <% if idx < investment_metrics[:top_holdings].size - 1 %>
+                <%= render "shared/ruler", classes: "mx-3 lg:mx-4" %>
               <% end %>
-            </tbody>
-          </table>
+            <% end %>
+          </div>
         </div>
       </div>
     <% end %>
@@ -117,7 +108,7 @@
     <%# Gains by Tax Treatment %>
     <% if investment_metrics[:gains_by_tax_treatment].present? %>
       <div class="space-y-3">
-        <h4 class="text-sm font-medium text-secondary uppercase"><%= t("reports.investment_performance.gains_by_tax_treatment") %></h4>
+        <h4 class="text-lg font-medium"><%= t("reports.investment_performance.gains_by_tax_treatment") %></h4>
 
         <div class="flex flex-wrap gap-4">
           <% investment_metrics[:gains_by_tax_treatment].each do |treatment, data| %>
@@ -202,7 +193,7 @@
     <%# Investment Accounts Summary %>
     <% if investment_metrics[:accounts].any? %>
       <div class="space-y-3">
-        <h4 class="text-sm font-medium text-secondary uppercase"><%= t("reports.investment_performance.accounts") %></h4>
+        <h4 class="text-lg font-medium"><%= t("reports.investment_performance.accounts") %></h4>
 
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
           <% investment_metrics[:accounts].each do |account| %>

app/views/reports/_summary_dashboard.html.erb

@@ -3,7 +3,7 @@
   <div class="bg-container rounded-xl shadow-border-xs p-6">
     <div class="flex items-start justify-between mb-3">
       <div class="flex items-center gap-2">
-        <%= icon("trending-up", class: "w-5 h-5") %>
+        <%= icon("trending-up", size: "sm") %>
         <h3 class="text-sm font-medium text-secondary">
           <%= t("reports.summary.total_income") %>
         </h3>
@@ -18,12 +18,12 @@
       <% if metrics[:income_change] %>
         <div class="flex items-center gap-1.5">
           <% if metrics[:income_change] >= 0 %>
-            <%= icon("arrow-up", class: "w-4 h-4 text-success") %>
+            <%= icon("arrow-up", size: "sm") %>
             <span class="text-sm font-medium text-success">
               +<%= metrics[:income_change] %>%
             </span>
           <% else %>
-            <%= icon("arrow-down", class: "w-4 h-4 text-destructive") %>
+            <%= icon("arrow-down", size: "sm") %>
             <span class="text-sm font-medium text-destructive">
               <%= metrics[:income_change] %>%
             </span>