Maybe/app/views/pages/dashboard/_balance_sheet.html.erb

<%# locals: (balance_sheet:, **args) %>

<div class="space-y-4" id="balance-sheet">
  <% balance_sheet.classification_groups.each do |classification_group| %>
    <div class="bg-container shadow-border-xs rounded-xl space-y-4 p-4">
      <div class="flex items-center gap-2">
        <h2 class="text-lg font-medium inline-flex items-center gap-1.5">
          <span>
            <%= classification_group.name %>
          </span>

          <% if classification_group.account_groups.any? %>
            <span class="text-secondary">&middot;</span>
            <span class="text-secondary font-medium text-lg"><%= classification_group.total_money.format(precision: 0) %></span>
          <% end %>
        </h2>

        <% if classification_group.syncing? %>
          <%= render partial: "shared/sync_indicator", locals: { size: "sm" } %>
        <% end %>
      </div>

      <% if classification_group.account_groups.any? %>
        <div class="space-y-4">
          <div class="flex gap-1">
            <% classification_group.account_groups.each do |account_group| %>
              <div class="h-1.5 rounded-sm" style="width: <%= account_group.weight %>%; background-color: <%= account_group.color %>;"></div>
            <% end %>
          </div>

          <div class="flex flex-wrap gap-4">
            <% classification_group.account_groups.each do |account_group| %>
              <div class="flex items-center gap-2 text-sm">
                <div class="h-2.5 w-2.5 rounded-full" style="background-color: <%= account_group.color %>;"></div>
                <p class="text-secondary"><%= account_group.name %></p>
                <p class="text-primary font-mono"><%= number_to_percentage(account_group.weight, precision: 0) %></p>
              </div>
            <% end %>
          </div>
        </div>

        <div class="bg-surface rounded-xl p-1 space-y-1 overflow-x-auto">
          <div class="px-4 py-2 flex items-center uppercase text-xs font-medium text-secondary">
            <div class="w-40">Name</div>
            <div class="ml-auto text-right flex items-center gap-6">
              <div class="w-24">
                <p>Weight</p>
              </div>
              <div class="w-40">
                <p>Value</p>
              </div>
            </div>
          </div>

          <div class="shadow-border-xs rounded-lg bg-container font-medium text-sm min-w-fit">
            <% classification_group.account_groups.each_with_index do |account_group, idx| %>
              <details class="group open:bg-surface
                <%= idx == 0 ? "rounded-t-lg" : "" %>
                <%= idx == classification_group.account_groups.size - 1 ? "rounded-b-lg" : "" %>
              ">
                <summary class="cursor-pointer p-4 group-open:bg-surface rounded-lg flex items-center justify-between">
                  <div class="w-40 shrink-0 flex items-center gap-4">
                    <%= icon("chevron-right", class: "group-open:rotate-90") %>

                    <p><%= account_group.name %></p>
                  </div>

                  <div class="flex items-center justify-between text-right gap-6">
                    <div class="w-28 shrink-0 flex items-center justify-end gap-2">
                      <%= render "pages/dashboard/group_weight", weight: account_group.weight, color: account_group.color %>
                    </div>

                    <div class="w-40 shrink-0">
                      <p><%= format_money(account_group.total_money) %></p>
                    </div>
                  </div>
                </summary>

                <div>
                  <% account_group.accounts.each_with_index do |account, idx| %>
                    <div class="pl-12 pr-4 py-3 flex items-center justify-between text-sm font-medium">
                      <div class="flex items-center gap-3">
                        <%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>

                        <%= link_to account.name, account_path(account) %>
                      </div>

                      <div class="ml-auto flex items-center text-right gap-6">
                        <div class="w-28 shrink-0 flex items-center justify-end gap-2">
                          <%
                              # Calculate weight as percentage of classification total
                              classification_total = classification_group.total_money.amount
                              account_weight = classification_total.zero? ? 0 : account.converted_balance / classification_total * 100
                          %>
                          <%= render "pages/dashboard/group_weight", weight: account_weight, color: account_group.color %>
                        </div>

                        <div class="w-40 shrink-0">
                          <p><%= format_money(account.balance_money) %></p>
                        </div>
                      </div>
                    </div>

                    <% if idx < account_group.accounts.size - 1 %>
                      <%= render "shared/ruler", classes: "ml-21 mr-4" %>
                    <% end %>
                  <% end %>
                </div>
              </details>
              <% unless idx == classification_group.account_groups.size - 1 %>
                <%= render "shared/ruler", classes: "mx-4 group-ruler" %>
              <% end %>
            <% end %>
          </div>
        </div>

      <% else %>
        <div class="py-10 flex flex-col items-center">
          <%= render FilledIconComponent.new(
            variant: :container,
            icon: classification_group.icon,
          ) %>

          <p class="text-primary text-sm font-medium mb-1 mt-4">No <%= classification_group.name %> yet</p>
          <p class="text-secondary text-sm text-center"><%= "Add your #{classification_group.name} accounts to see a full breakdown" %></p>
        </div>
      <% end %>
    </div>
  <% end %>
</div>

<%# Custom style for hiding ruler when details are open %>
<style>
  details[open] + .group-ruler {
    display: none;
  }
</style>