sure/app/views/reports/_net_worth.html.erb

<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>
        <% if trend.percent.finite? %>
          <p class="text-xs" style="color: <%= trend.color %>">
            <%= trend.value >= 0 ? "+" : "" %><%= trend.percent_formatted %>
          </p>
        <% end %>
      <% 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>

  <%# Net Worth Over Time chart %>
  <% breakdown_series = net_worth_metrics[:breakdown_series] %>
  <% if breakdown_series && breakdown_series[:values].size >= 2 %>
    <div
      id="reportsNetWorthChart"
      class="w-full h-72 privacy-sensitive"
      data-controller="net-worth-chart"
      data-net-worth-chart-data-value="<%= breakdown_series.to_json %>"
      data-net-worth-chart-assets-label-value="<%= t("reports.net_worth.total_assets") %>"
      data-net-worth-chart-liabilities-label-value="<%= t("reports.net_worth.total_liabilities") %>"></div>
  <% end %>

  <%# 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>