Allow user to add buy and sell trade transactions for investment accounts (#1066)

* Consolidate modal form structure into partial + helper

* Scaffold out trade transaction form

* Normalize translations

* Add buy and sell trade form with tests

* Move entryable lists to dedicated controllers

* Delegate entry group contents rendering

* More cleanup

* Extract transaction and valuation update logic from entries controller

* Delegate edit and show actions to entryables

* Trade builder

* Update paths for transaction updates

app/views/account/trades/_form.html.erb

@@ -0,0 +1,19 @@
+<%# locals: (entry:) %>
+
+<%= styled_form_with data: { turbo_frame: "_top" },
+                     scope: :account_entry,
+                     url: entry.new_record? ? account_trades_path(entry.account) : account_entry_path(entry.account, entry) do |form| %>
+  <div class="space-y-4">
+    <div class="space-y-2">
+      <%= form.select :type, options_for_select([%w[Buy buy], %w[Sell sell]], "buy"), label: t(".type") %>
+      <%= form.text_field :ticker, value: nil, label: t(".holding"), placeholder: t(".ticker_placeholder") %>
+      <%= form.date_field :date, label: true %>
+      <%= form.hidden_field :currency, value: entry.account.currency %>
+      <%= form.number_field :qty, label: t(".qty"), placeholder: "10", min: 0 %>
+      <%= money_with_currency_field form, :price_money, label: t(".price"), disable_currency: true %>
+      <%= form.hidden_field :currency, value: entry.account.currency %>
+    </div>
+
+    <%= form.submit t(".submit") %>
+  </div>
+<% end %>

app/views/account/trades/_selection_bar.html.erb

@@ -0,0 +1,15 @@
+<div class="fixed bottom-6 z-10 flex items-center justify-between rounded-xl bg-gray-900 px-4 text-sm text-white w-[420px] py-1.5">
+  <div class="flex items-center gap-2">
+    <%= check_box_tag "entry_selection", 1, true, class: "maybe-checkbox maybe-checkbox--dark", data: { action: "bulk-select#deselectAll" } %>
+
+    <p data-bulk-select-target="selectionBarText"></p>
+  </div>
+
+  <div class="flex items-center gap-1 text-gray-500">
+    <%= form_with url: bulk_delete_transactions_path, data: { turbo_confirm: true, turbo_frame: "_top" } do %>
+      <button type="button" data-bulk-select-scope-param="bulk_delete" data-action="bulk-select#submitBulkRequest" class="p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md" title="Delete">
+        <%= lucide_icon "trash-2", class: "w-5 group-hover:text-white" %>
+      </button>
+    <% end %>
+  </div>
+</div>

app/views/account/trades/_trade.html.erb

@@ -0,0 +1,50 @@
+<%# locals: (entry:, selectable: true, **opts) %>
+
+<% trade, account = entry.account_trade, entry.account %>
+
+<div class="grid grid-cols-12 items-center text-gray-900 text-sm font-medium p-4">
+  <div class="pr-10 flex items-center gap-4 col-span-6">
+    <% if selectable %>
+      <%= check_box_tag dom_id(entry, "selection"),
+                        class: "maybe-checkbox maybe-checkbox--light",
+                        data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
+    <% end %>
+
+    <div class="max-w-full">
+      <%= tag.div class: ["flex items-center gap-2"] do %>
+        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-600/5 text-gray-600">
+          <%= entry_name(entry).first.upcase %>
+        </div>
+
+        <div class="truncate text-gray-900">
+          <% if entry.new_record? %>
+            <%= content_tag :p, entry_name(entry) %>
+          <% else %>
+            <%= link_to entry_name(entry),
+                        account_entry_path(account, entry),
+                        data: { turbo_frame: "drawer", turbo_prefetch: false },
+                        class: "hover:underline hover:text-gray-800" %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="flex items-center justify-end gap-1 col-span-3">
+    <% if entry.account_transaction? && entry.marked_as_transfer? %>
+      <%= tag.p entry.inflow? ? t(".deposit") : t(".withdrawal") %>
+    <% elsif entry.account_transaction? %>
+      <%= tag.p entry.inflow? ? t(".inflow") : t(".outflow") %>
+    <% else %>
+      <%= tag.p trade.buy? ? t(".buy") : t(".sell") %>
+    <% end %>
+  </div>
+
+  <div class="col-span-3 flex items-center justify-end">
+    <% if entry.account_transaction? %>
+      <%= tag.p format_money(entry.amount_money), class: { "text-green-500": entry.inflow? } %>
+    <% else %>
+      <%= tag.p format_money(entry.amount_money * -1), class: { "text-green-500": trade.sell? } %>
+    <% end %>
+  </div>
+</div>

app/views/account/trades/index.html.erb

@@ -0,0 +1,42 @@
+<%= turbo_frame_tag dom_id(@account, "trades") do %>
+  <div id="trades" data-controller="bulk-select" data-bulk-select-resource-value="<%= t(".trade") %>" class="bg-white space-y-4 p-5 border border-alpha-black-25 rounded-xl shadow-xs">
+    <div class="flex justify-between items-center">
+      <h3 class="font-medium text-lg"><%= t(".trades") %></h3>
+      <%= link_to new_account_trade_path(@account),
+                  id:    dom_id(@account, "new_trade"),
+                  class: "flex gap-1 font-medium items-center bg-gray-50 text-gray-900 p-2 rounded-lg",
+                  data:  { turbo_frame: :modal } do %>
+        <%= lucide_icon("plus", class: "w-5 h-5 text-gray-900") %>
+        <span class="text-sm"><%= t(".new") %></span>
+      <% end %>
+    </div>
+
+    <div class="bg-gray-25 rounded-xl grid grid-cols-12 items-center uppercase text-xs font-medium text-gray-500 px-5 py-3">
+      <div class="pl-0.5 col-span-6 flex items-center gap-4">
+        <%= check_box_tag "selection_entry",
+                          class: "maybe-checkbox maybe-checkbox--light",
+                          data:  { action: "bulk-select#togglePageSelection" } %>
+        <%= tag.p t(".trade") %>
+      </div>
+
+      <%= tag.p t(".type"), class: "col-span-3 justify-self-end" %>
+      <%= tag.p t(".amount"), class: "col-span-3 justify-self-end" %>
+    </div>
+
+    <div>
+      <div hidden id="transaction-selection-bar" data-bulk-select-target="selectionBar">
+        <%= render "selection_bar" %>
+      </div>
+
+      <% if @entries.empty? %>
+        <p class="text-gray-500 py-4"><%= t(".no_trades") %></p>
+      <% else %>
+        <div class="space-y-6">
+          <%= entries_by_date(@entries) do |entries| %>
+            <%= render partial: "account/trades/trade", collection: entries, as: :entry %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

app/views/account/trades/new.html.erb

@@ -0,0 +1,3 @@
+<%= modal_form_wrapper title: t(".title") do %>
+  <%= render "account/trades/form", entry: @entry %>
+<% end %>

app/views/account/trades/show.html.erb

@@ -0,0 +1,29 @@
+<% entry = @entry %>
+
+<%= drawer do %>
+  <div>
+    <header class="mb-4 space-y-1">
+      <div class="flex items-center gap-4">
+        <h3 class="font-medium">
+          <span class="text-2xl"><%= format_money -entry.amount_money %></span>
+          <span class="text-lg text-gray-500"><%= entry.currency %></span>
+        </h3>
+      </div>
+
+      <span class="text-sm text-gray-500"><%= entry.date.strftime("%A %d %B") %></span>
+    </header>
+
+    <div class="space-y-2">
+      <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-gray-500 bg-gray-25 focus-visible:outline-none">
+          <h4><%= t(".overview") %></h4>
+          <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
+        </summary>
+
+        <div class="pb-6 pl-4 text-gray-500">
+          <p>Details coming soon...</p>
+        </div>
+      </details>
+    </div>
+  </div>
+<% end %>