Maybe/app/views/budget_categories/show.html.erb

<%= drawer do %>
  <div class="space-y-4">
    <header class="flex justify-between">
      <div>
        <p class="text-sm text-secondary">Category</p>
        <h3 class="text-2xl font-medium text-primary">
          <%= @budget_category.category.name %>
        </h3>

        <% if @budget_category.budget.initialized? %>
          <p class="text-sm text-secondary">
            <span class="text-primary">
              <%= format_money(@budget_category.actual_spending_money) %>
            </span>
            <span>/</span>
            <span><%= format_money(@budget_category.budgeted_spending_money) %></span>
          </p>
        <% end %>
      </div>

      <% if @budget_category.budget.initialized? %>
        <div class="ml-auto w-10 h-10">
          <%= render "budget_categories/budget_category_donut",
                    budget_category: @budget_category %>
        </div>
      <% end %>
    </header>

    <details class="group space-y-2" open>
      <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2
                     text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
        <h4>Overview</h4>
        <%= lucide_icon "chevron-down",
            class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
      </summary>

      <div class="pb-4">
        <dl class="space-y-3 px-3 py-2">
          <div class="flex items-center justify-between text-sm">
            <dt class="text-secondary">
              <%= @budget_category.budget.start_date.strftime("%b %Y") %> spending
            </dt>
            <dd class="text-primary font-medium">
              <%= format_money @budget_category.actual_spending_money %>
            </dd>
          </div>

          <% if @budget_category.budget.initialized? %>
            <div class="flex items-center justify-between text-sm">
              <dt class="text-secondary">Status</dt>
              <% if @budget_category.available_to_spend.negative? %>
                <dd class="text-red-500 flex items-center gap-1 text-red-500 font-medium">
                  <%= lucide_icon "alert-circle", class: "shrink-0 w-4 h-4 text-red-500" %>
                  <%= format_money @budget_category.available_to_spend_money.abs %>
                  <span>overspent</span>
                </dd>
              <% elsif @budget_category.available_to_spend.zero? %>
                <dd class="text-orange-500 flex items-center gap-1 text-orange-500 font-medium">
                  <%= lucide_icon "x-circle", class: "shrink-0 w-4 h-4 text-orange-500" %>
                  <%= format_money @budget_category.available_to_spend_money %>
                  <span>left</span>
                </dd>
              <% else %>
                <dd class="text-primary flex items-center gap-1 text-green-500 font-medium">
                  <%= lucide_icon "check-circle-2", class: "shrink-0 w-4 h-4 text-green-500" %>
                  <%= format_money @budget_category.available_to_spend_money %>
                  <span>left</span>
                </dd>
              <% end %>
            </div>

            <div class="flex items-center justify-between text-sm">
              <dt class="text-secondary">Budgeted</dt>
              <dd class="text-primary font-medium">
                <%= format_money @budget_category.budgeted_spending_money %>
              </dd>
            </div>
          <% end %>

          <div class="flex items-center justify-between text-sm">
            <dt class="text-secondary">Monthly average spending</dt>
            <dd class="text-primary font-medium">
              <%= format_money @budget_category.category.avg_monthly_total_money, precision: 0 %>
            </dd>
          </div>

          <div class="flex items-center justify-between text-sm">
            <dt class="text-secondary">Monthly median spending</dt>
            <dd class="text-primary font-medium">
              <%= format_money @budget_category.category.median_monthly_total_money, precision: 0 %>
            </dd>
          </div>
        </dl>
      </div>
    </details>

    <details class="group space-y-2" open>
      <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2
                     text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
        <h4>Recent Transactions</h4>
        <%= lucide_icon "chevron-down",
            class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
      </summary>

      <div class="space-y-2">
        <div class="px-3 py-4 space-y-2">
          <% if @recent_transactions.any? %>
            <ul class="space-y-2 mb-4">
              <% @recent_transactions.each_with_index do |entry, index| %>
                <li class="flex gap-4 text-sm space-y-1">
                  <div class="flex flex-col items-center gap-1.5 pt-2">
                    <div class="rounded-full h-1.5 w-1.5 bg-gray-300"></div>
                    <% unless index == @recent_transactions.length - 1 %>
                      <div class="h-12 w-px bg-alpha-black-200"></div>
                    <% end %>
                  </div>

                  <div class="flex justify-between w-full">
                    <div>
                      <p class="text-secondary text-xs uppercase">
                        <%= entry.date.strftime("%b %d") %>
                      </p>
                      <p class="text-primary"><%= entry.name %></p>
                    </div>
                    <p class="text-primary font-medium">
                      <%= format_money entry.amount_money %>
                    </p>
                  </div>
                </li>
              <% end %>
            </ul>

            <%= link_to "View all category transactions",
                  transactions_path(q: {
                    categories: [@budget_category.category.name],
                    start_date: @budget.start_date,
                    end_date: @budget.end_date
                  }),
                  data: { turbo_frame: :_top },
                  class: "block text-center btn btn--outline w-full" %>
          <% else %>
            <p class="text-secondary text-sm mb-4">
              No transactions found for this budget period.
            </p>
          <% end %>
        </div>
      </div>
    </details>
  </div>
<% end %>