Maybe/app/views/accounts/_account_valuation_list.html.erb

<%# locals: (valuation_series:, classification:) %>
<% valuation_series.data.reverse_each.with_index do |valuation_item, index| %>
  <% valuation, trend = valuation_item.values_at(:raw, :trend) %>
  <% valuation_styles = trend_styles(valuation_item[:trend]) %>
  <%= turbo_frame_tag dom_id(valuation) do %>
    <div class="p-4 flex items-center">
      <div class="w-16">
        <div class="w-8 h-8 rounded-full p-1.5 flex items-center justify-center <%= valuation_styles[:bg_class] %>">
          <%= lucide_icon(valuation_styles[:icon], class: "w-4 h-4 #{valuation_styles[:text_class]}") %>
        </div>
      </div>
      <div class="flex items-center justify-between grow">
        <div class="text-sm">
          <p><%= valuation.date %></p>
          <%# TODO: Add descriptive name of valuation %>
          <p class="text-gray-500">Manually entered</p>
        </div>
        <div class="flex text-sm font-medium text-right"><%= format_currency(valuation.value) %></div>
      </div>
      <div class="flex w-56 justify-end text-right text-sm font-medium">
        <% if trend.amount == 0 %>
          <span class="text-gray-500">No change</span>
        <% else %>
          <span class="<%= valuation_styles[:text_class] %>"><%= valuation_styles[:symbol] %><%= format_currency(trend.amount.abs) %></span>
          <span class="<%= valuation_styles[:text_class] %>">(<%= lucide_icon(valuation_styles[:icon], class: "w-4 h-4 align-text-bottom inline") %> <%= trend.percent %>%)</span>
        <% end %>
      </div>
      <div class="relative w-[72px]" data-controller="dropdown">
        <button data-action="click->dropdown#toggleMenu" class="ml-auto flex items-center justify-center hover:bg-gray-50 w-8 h-8 rounded-lg">
          <%= lucide_icon("more-horizontal", class: "w-5 h-5 text-gray-500" ) %>
        </button>
        <div class="hidden absolute min-w-[200px] z-10 top-10 right-0 bg-white p-1 rounded-sm shadow-xs border border-alpha-black-25 w-fit" data-dropdown-target="menu">
          <%= link_to edit_valuation_path(valuation), class: "flex gap-1 items-center hover:bg-gray-50 rounded-md p-2" do %>
            <%= lucide_icon("pencil-line", class: "w-5 h-5 text-gray-500 shrink-0") %>
            <span class="text-gray-900 text-sm">Edit entry</span>
          <% end %>
          <%= link_to valuation_path(valuation),  data: { turbo_method: :delete, turbo_confirm: "Are you sure?" }, class: "text-red-600 flex gap-1 items-center hover:bg-gray-50 rounded-md p-2" do %>
            <%= lucide_icon("trash-2", class: "w-5 h-5 shrink-0") %>
            <span class="text-sm">Delete entry</span>
          <% end %>
        </div>
      </div>
    </div>
    <% unless index == valuation_series.data.size - 1 %>
      <div class="h-px bg-alpha-black-50 ml-20 mr-4"></div>
    <% end %>
  <% end %>
<% end %>