sure/app/components/UI/account/activity_feed.html.erb

<%= turbo_frame_tag dom_id(account, "entries") do %>
  <div class="bg-container px-3 py-4 lg:p-4 shadow-border-xs rounded-xl" data-controller="checkbox-toggle">
    <div class="flex items-center justify-between mb-4" data-testid="activity-menu">
      <%= tag.h2 t("accounts.show.activity.title"), class: "font-medium text-lg" %>

      <%= render DS::Menu.new(variant: "button") do |menu| %>
        <% menu.with_button(text: t("accounts.show.activity.new"), variant: "secondary", icon: "plus") %>

        <% unless account.linked? %>
          <% menu.with_item(
              variant: "link",
              text: t("accounts.show.activity.new_balance"),
              icon: "circle-dollar-sign",
              href: new_valuation_path(account_id: account.id),
              data: { turbo_frame: :modal }) %>
        <% end %>

        <% unless account.crypto? %>
          <% if account.investment? %>
            <% menu.with_item(
                variant: "link",
                text: t("accounts.show.activity.new_activity"),
                icon: "arrow-left-right",
                href: new_trade_path(account_id: account.id),
                data: { turbo_frame: :modal }) %>
          <% else %>
            <% menu.with_item(
                variant: "link",
                text: t("accounts.show.activity.new_transaction"),
                icon: "credit-card",
                href: new_transaction_path(account_id: account.id),
                data: { turbo_frame: :modal }) %>
          <% end %>
        <% end %>

        <% menu.with_item(
            variant: "link",
            text: t("accounts.show.activity.new_transfer"),
            icon: "arrow-right-left",
            href: new_transfer_path(from_account_id: account.id),
            data: { turbo_frame: :modal }) %>
      <% 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-secondary rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
              <%= helpers.icon("search") %>

              <%= hidden_field_tag :account_id, account.id %>

              <%= form.search_field :search,
                            placeholder: t("accounts.show.activity.search.placeholder"),
                            value: search,
                            class: "form-field__input placeholder:text-sm placeholder:text-secondary",
                            "data-auto-submit-form-target": "auto" %>
            </div>
          </div>

          <%= render DS::Menu.new(variant: "button", no_padding: true) do |menu| %>
            <% menu.with_button(
              id: "activity-status-filter-button",
              type: "button",
              text: t("accounts.show.activity.filter"),
              variant: "outline",
              icon: "list-filter"
            ) %>

            <% menu.with_custom_content do %>
              <div class="p-3 space-y-3 min-w-[160px]">
                <p class="text-xs font-medium text-secondary uppercase"><%= t("accounts.show.activity.status") %></p>
                <div class="flex items-center gap-3">
                  <%= check_box_tag "q[status][]",
                                    "confirmed",
                                    params.dig(:q, :status)&.include?("confirmed"),
                                    id: "q_status_confirmed",
                                    class: "checkbox checkbox--light",
                                    form: "entries-search",
                                    onchange: "document.getElementById('entries-search').requestSubmit()" %>
                  <%= label_tag "q_status_confirmed", t("accounts.show.activity.confirmed"), class: "text-sm text-primary" %>
                </div>
                <div class="flex items-center gap-3">
                  <%= check_box_tag "q[status][]",
                                    "pending",
                                    params.dig(:q, :status)&.include?("pending"),
                                    id: "q_status_pending",
                                    class: "checkbox checkbox--light",
                                    form: "entries-search",
                                    onchange: "document.getElementById('entries-search').requestSubmit()" %>
                  <%= label_tag "q_status_pending", t("accounts.show.activity.pending"), class: "text-sm text-primary" %>
                </div>
              </div>
            <% end %>
          <% end %>
      <% end %>
      <%= button_tag type: "button",
            id: "toggle-checkboxes-button",
            aria: { label: t(".toggle_selection_checkboxes") },
            class: "lg:hidden font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary border border-secondary hover:bg-surface-hover",
            data: {
              action: "click->checkbox-toggle#toggle",
              checkbox_toggle_target: "toggleButton"
            } do %>
            <%= helpers.icon("list-todo") %>
        <% end %>
      </div>
    </div>

    <% if activity_dates.empty? %>
      <%= tag.p t("accounts.show.activity.no_entries"), class: "text-secondary text-sm p-4" %>
    <% else %>
      <%= tag.div id: dom_id(account, "entries_bulk_select"),
                data: {
                  controller: "bulk-select",
                  bulk_select_singular_label_value: "entry",
                  bulk_select_plural_label_value: "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 hidden lg:block",
                              data: {
                                action: "bulk-select#togglePageSelection",
                                checkbox_toggle_target: "selectionEntry"
                              } %>
            <%= tag.p t("accounts.show.activity.date") %>
          </div>

          <%= tag.p t("accounts.show.activity.amount"), class: "col-span-4 justify-self-end" %>
        </div>

        <div>
          <div class="space-y-4">
            <% activity_dates.each do |activity_date_data| %>
              <%= render UI::Account::ActivityDate.new(
                    account: account,
                    data: activity_date_data
                  ) %>
            <% end %>
          </div>

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