sure/app/views/holdings/_cost_basis_cell.html.erb

<%# locals: (holding:, editable: true) %>

<%
  # Pre-calculate values for the form
  # Note: cost_basis field stores per-share cost, so calculate total for display
  current_per_share = holding.cost_basis.present? && holding.cost_basis.positive? ? holding.cost_basis : nil
  current_total = current_per_share && holding.qty.positive? ? (current_per_share * holding.qty).round(2) : nil
  currency = Money::Currency.new(holding.currency)
%>

<%= turbo_frame_tag dom_id(holding, :cost_basis) do %>
  <% if holding.cost_basis_locked? && !editable %>
    <%# Locked and not editable (from holdings list) - just show value, right-aligned %>
    <div class="flex items-center justify-end gap-1">
      <%= tag.span format_money(holding.avg_cost), class: "privacy-sensitive" %>
      <%= icon "lock", size: "xs", class: "text-secondary" %>
    </div>
  <% else %>
    <%# Unlocked OR editable context (drawer) - show clickable menu %>
    <%= render DS::Popover.new(variant: :button, placement: "bottom-end") do |popover| %>
      <% popover.with_button(class: "hover:text-primary cursor-pointer group") do %>
        <% if holding.avg_cost %>
          <div class="flex items-center gap-1">
            <%= tag.span format_money(holding.avg_cost), class: "privacy-sensitive" %>
            <% if holding.cost_basis_locked? %>
              <%= icon "lock", size: "xs", class: "text-secondary" %>
            <% end %>
            <%= icon "pencil", size: "xs", class: "text-secondary opacity-0 group-hover:opacity-100 transition-opacity" %>
          </div>
        <% else %>
          <div class="flex items-center gap-1 px-2 py-0.5 rounded text-secondary hover:text-primary hover:bg-container-inset-hover transition-colors">
            <%= icon "pencil", size: "xs" %>
            <span class="text-xs"><%= t(".set") %></span>
          </div>
        <% end %>
      <% end %>
      <% popover.with_custom_content do %>
        <div class="p-4 min-w-[280px]"
             data-controller="cost-basis-form"
             data-cost-basis-form-qty-value="<%= holding.qty %>">
          <h4 class="font-medium text-sm mb-3">
            <%= t(".set_cost_basis_header", ticker: holding.ticker, qty: format_quantity(holding.qty)) %>
          </h4>
          <%
            form_data = { turbo: false }
            if holding.avg_cost
              form_data[:turbo_confirm] = {
                title: t(".overwrite_confirm_title"),
                body: t(".overwrite_confirm_body", current: format_money(holding.avg_cost))
              }
            end
          %>
          <%= styled_form_with model: holding,
                url: holding_path(holding),
                method: :patch,
                class: "space-y-3",
                data: form_data do |f| %>
            <!-- Primary: Total cost basis (custom input, no spinners) -->
            <div class="form-field">
              <div class="form-field__body">
                <label class="form-field__label"><%= t(".total_cost_basis_label") %></label>
                <div class="flex items-center gap-1">
                  <span class="text-secondary text-sm font-medium"><%= currency.symbol %></span>
                  <input type="number" step="any"
                         name="holding[cost_basis]"
                         class="form-field__input grow"
                         placeholder="0.00"
                         autocomplete="off"
                         value="<%= sprintf("%.2f", current_total) if current_total %>"
                         data-action="input->cost-basis-form#updatePerShare"
                         data-cost-basis-form-target="total">
                  <span class="text-secondary text-sm"><%= currency.iso_code %></span>
                </div>
              </div>
            </div>
            <p class="text-xs text-secondary -mt-2" data-cost-basis-form-target="perShareDisplay">
              = <%= currency.symbol %><span data-cost-basis-form-target="perShareValue"><%= number_with_precision(current_per_share, precision: 2) || "0.00" %></span> <%= t(".per_share") %>
            </p>

            <!-- Alternative: Per-share input -->
            <div class="pt-2 border-t border-tertiary">
              <label class="text-xs text-secondary block mb-1"><%= t(".or_per_share_label") %></label>
              <div class="flex items-center gap-1">
                <span class="text-secondary text-sm font-medium"><%= currency.symbol %></span>
                <input type="number" step="any"
                       class="form-field__input grow"
                       placeholder="0.00"
                       autocomplete="off"
                       value="<%= sprintf("%.2f", current_per_share) if current_per_share %>"
                       data-action="input->cost-basis-form#updateTotal"
                       data-cost-basis-form-target="perShare">
                <span class="text-secondary text-sm"><%= currency.iso_code %></span>
              </div>
            </div>

            <div class="flex justify-end gap-2 pt-2">
              <button type="button"
                      class="inline-flex items-center gap-1 px-2 py-1 rounded-md text-sm font-medium text-primary button-bg-secondary-strong hover:button-bg-secondary-strong-hover"
                      data-action="click->DS--popover#close">
                <%= t(".cancel") %>
              </button>
              <%= f.submit t(".save"), class: "inline-flex items-center gap-1 px-2 py-1 rounded-md text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover" %>
            </div>
          <% end %>
        </div>
      <% end %>
    <% end %>
  <% end %>
<% end %>