Maybe/app/views/accounts/show/_activity.html.erb

<%# locals: (account:) %>

<%= turbo_frame_tag dom_id(account, "entries") do %>
  <div class="bg-container p-5 shadow-border-xs rounded-xl" data-controller="focus-record" data-focus-record-id-value="<%= @focused_record ? dom_id(@focused_record) : nil %>">
    <div class="flex items-center justify-between mb-4">
      <%= tag.h2 t(".title"), class: "font-medium text-lg" %>
      <% unless @account.plaid_account_id.present? %>
        <div data-controller="menu" data-testid="activity-menu">
          <button class="btn btn--secondary flex items-center gap-2" data-menu-target="button">
            <%= lucide_icon("plus", class: "w-4 h-4") %>
            <%= tag.span t(".new") %>
          </button>
          <div data-menu-target="content" class="z-10 hidden bg-container rounded-lg border border-alpha-black-25 shadow-xs p-1">
            <%= link_to new_valuation_path(account_id: @account.id), data: { turbo_frame: :modal }, class: "block p-2 rounded-lg hover:bg-gray-50 flex items-center gap-2" do %>
              <%= lucide_icon("circle-dollar-sign", class: "text-secondary w-5 h-5") %>
              <%= tag.span t(".new_balance"), class: "text-sm" %>
            <% end %>

            <% unless @account.crypto? %>
              <%= link_to @account.investment? ? new_trade_path(account_id: @account.id) : new_transaction_path(account_id: @account.id), data: { turbo_frame: :modal }, class: "btn btn--primary flex items-center justify-center gap-2 rounded-full md:rounded-lg w-9 h-9 md:w-auto md:h-auto" do %>
              <span class="flex items-center justify-center">
                <%= lucide_icon("credit-card", class: "text-secondary w-5 h-5") %>
              </span>
                <%= tag.span t(".new_transaction"), class: "text-sm md:block" %>
              <% end %>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>

    <div>
      <%= form_with url: account_path(account),
              id: "entries-search",
              scope: :q,
              method: :get,
              data: { controller: "auto-submit-form" } do |form| %>
        <div class="flex gap-2 mb-4">
          <div class="grow">
            <div class="flex items-center px-3 py-2 gap-2 border border-gray-200 rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
              <%= lucide_icon("search", class: "w-5 h-5 text-secondary") %>
              <%= hidden_field_tag :account_id, @account.id %>
              <%= form.search_field :search,
                            placeholder: "Search entries by name",
                            value: @q[:search],
                            class: "form-field__input placeholder:text-sm placeholder:text-secondary",
                            "data-auto-submit-form-target": "auto" %>
            </div>
          </div>
        </div>
      <% end %>
    </div>

    <% if @entries.empty? %>
      <p class="text-secondary text-sm p-4"><%= t(".no_entries") %></p>
    <% else %>
      <%= tag.div id: dom_id(@account, "entries_bulk_select"),
                data: {
                  controller: "bulk-select",
                  bulk_select_singular_label_value: t(".entry"),
                  bulk_select_plural_label_value: t(".entries")
                } do %>
        <div id="entry-selection-bar" data-bulk-select-target="selectionBar" class="flex justify-center hidden">
          <%= render "entries/selection_bar" %>
        </div>

        <div class="grid bg-container-inset rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3 mb-4">
          <div class="pl-0.5 col-span-8 flex items-center gap-4">
            <%= check_box_tag "selection_entry",
                              class: "checkbox checkbox--light",
                              data: { action: "bulk-select#togglePageSelection" } %>
            <p><%= t(".date") %></p>
          </div>
          <%= tag.p t(".amount"), class: "col-span-2 justify-self-end" %>
          <%= tag.p t(".balance"), class: "col-span-2 justify-self-end" %>
        </div>

        <div>
          <div class="rounded-tl-lg rounded-tr-lg bg-container border-alpha-black-25 shadow-xs">
            <div class="space-y-4">
              <% calculator = Balance::TrendCalculator.for(@entries) %>
              <%= entries_by_date(@entries) do |entries| %>
                <% entries.each do |entry| %>
                  <%= render entry, balance_trend: calculator&.trend_for(entry), view_ctx: "account" %>
                <% end %>
              <% end %>
            </div>
          </div>

          <div class="p-4 bg-container rounded-bl-lg rounded-br-lg">
            <%= render "shared/pagination", pagy: @pagy %>
          </div>
        </div>
      <% end %>
    <% end %>
  </div>
<% end %>