Basic trade and holdings view (#1271)

* Add trade view

* Lint fix

* Fix stale placeholder variable

* Add holding view

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

@@ -9,36 +9,103 @@
       <%= render "shared/circle_logo", name: @holding.name %>
     </header>
 
-    <details class="group 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>
-        <p class="pl-4 text-gray-500">Coming soon...</p>
+      <div class="pb-4">
+        <dl class="space-y-3 px-3 py-2">
+          <div class="flex items-center justify-between text-sm">
+            <dt class="text-gray-500"><%= t(".ticker_label") %></dt>
+            <dd class="text-gray-900"><%= @holding.ticker %></dd>
+          </div>
+
+          <div class="flex items-center justify-between text-sm">
+            <dt class="text-gray-500"><%= t(".current_market_price_label") %></dt>
+            <dd class="text-gray-900"><%= @holding.security.current_price ? format_money(@holding.security.current_price) : t(".unknown") %></dd>
+          </div>
+
+          <div class="flex items-center justify-between text-sm">
+            <dt class="text-gray-500"><%= t(".portfolio_weight_label") %></dt>
+            <dd class="text-gray-900"><%= @holding.weight ? number_to_percentage(@holding.weight, precision: 2) : t(".unknown") %></dd>
+          </div>
+
+          <div class="flex items-center justify-between text-sm">
+            <dt class="text-gray-500"><%= t(".avg_cost_label") %></dt>
+            <dd class="text-gray-900"><%= @holding.avg_cost ? format_money(@holding.avg_cost) : t(".unknown") %></dd>
+          </div>
+
+          <div class="flex items-center justify-between text-sm">
+            <dt class="text-gray-500"><%= t(".trend_label") %></dt>
+            <dd style="color: <%= @holding.trend&.color %>;">
+              <%= @holding.trend ? render("shared/trend_change", trend: @holding.trend) : t(".unknown") %>
+            </dd>
+          </div>
+        </dl>
       </div>
     </details>
 
-    <details class="group 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(".history") %></h4>
         <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
       </summary>
 
-      <div>
-        <p class="pl-4 text-gray-500">Coming soon...</p>
+      <div class="space-y-2">
+        <div class="px-3 py-4">
+          <% if @holding.trades.any? %>
+            <ul class="space-y-2">
+              <% @holding.trades.each_with_index do |trade_entry, index| %>
+                <li class="flex gap-4 text-sm space-y-1">
+                  <div class="flex flex-col items-center gap-1.5 pt-2">
+                    <div class="rounded-full h-1.5 w-1.5 bg-gray-300"></div>
+                    <% unless index == @holding.trades.length - 1 %>
+                      <div class="h-12 w-px bg-alpha-black-200"></div>
+                    <% end %>
+                  </div>
+
+                  <div>
+                    <p class="text-gray-500 text-xs uppercase"><%= l(trade_entry.date, format: :long) %></p>
+
+                    <p><%= t(
+                      ".trade_history_entry",
+                      qty: trade_entry.account_trade.qty,
+                      security: trade_entry.account_trade.security.ticker,
+                      price: format_money(trade_entry.account_trade.price)
+                    ) %></p>
+                  </div>
+                </li>
+              <% end %>
+            </ul>
+
+          <% else %>
+            <p class="text-gray-500">No trade history available for this holding.</p>
+          <% end %>
+        </div>
       </div>
     </details>
 
-    <details class="group 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(".settings") %></h4>
         <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
       </summary>
 
-      <div>
-        <p class="pl-4 text-gray-500">Coming soon...</p>
+      <div class="pb-4">
+        <div class="flex items-center justify-between gap-2 p-3">
+          <div class="text-sm space-y-1">
+            <h4 class="text-gray-900"><%= t(".delete_title") %></h4>
+            <p class="text-gray-500"><%= t(".delete_subtitle") %></p>
+          </div>
+
+          <%= button_to t(".delete"),
+                account_holding_path(@holding.account, @holding),
+                method: :delete,
+                class: "rounded-lg px-3 py-2 text-red-500 text-sm font-medium border border-alpha-black-200",
+                data: { turbo_confirm: true, turbo_frame: "_top" } %>
+        </div>
       </div>
     </details>
   </div>

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

@@ -13,7 +13,7 @@
       <%= form.date_field :date, label: true %>
 
       <div data-trade-form-target="amountInput" hidden>
-        <%= form.money_field :amount, :currency, label: t(".amount"), disable_currency: true %>
+        <%= form.money_field :amount, label: t(".amount"), disable_currency: true %>
       </div>
 
       <div data-trade-form-target="transferAccountInput" hidden>
@@ -25,7 +25,7 @@
       </div>
 
       <div data-trade-form-target="priceInput">
-        <%= form.money_field :price, :currency, label: t(".price"), disable_currency: true %>
+        <%= form.money_field :price, label: t(".price"), disable_currency: true %>
       </div>
     </div>
 

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

@@ -1,29 +1,146 @@
-<% entry = @entry %>
+<% entry, trade, account = @entry, @entry.account_trade, @entry.account %>
 
 <%= 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>
+  <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-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>
+        <span class="text-lg text-gray-500">
+          <%= entry.currency %>
+        </span>
+      </h3>
     </div>
+
+    <span class="text-sm text-gray-500">
+      <%= I18n.l(entry.date, format: :long) %>
+    </span>
+  </header>
+
+  <div class="space-y-2">
+    <!-- Overview Section -->
+    <%= disclosure t(".overview") do %>
+      <div class="pb-4">
+        <dl class="space-y-3 px-3 py-2">
+          <div class="flex items-center justify-between text-sm">
+            <dt class="text-gray-500"><%= t(".symbol_label") %></dt>
+            <dd class="text-gray-900"><%= trade.security.ticker %></dd>
+          </div>
+
+          <% if trade.buy? %>
+            <div class="flex items-center justify-between text-sm">
+              <dt class="text-gray-500"><%= t(".purchase_qty_label") %></dt>
+              <dd class="text-gray-900"><%= trade.qty.abs %></dd>
+            </div>
+
+            <div class="flex items-center justify-between text-sm">
+              <dt class="text-gray-500"><%= t(".purchase_price_label") %></dt>
+              <dd class="text-gray-900"><%= format_money trade.price_money %></dd>
+            </div>
+          <% end %>
+
+          <div class="flex items-center justify-between text-sm">
+            <dt class="text-gray-500"><%= t(".current_market_price_label") %></dt>
+            <dd class="text-gray-900"><%= format_money trade.security.current_price %></dd>
+          </div>
+
+          <% if trade.buy? %>
+            <div class="flex items-center justify-between text-sm">
+              <dt class="text-gray-500"><%= t(".total_return_label") %></dt>
+              <dd style="color: <%= trade.unrealized_gain_loss.color %>;">
+                <%= render "shared/trend_change", trend: trade.unrealized_gain_loss %>
+              </dd>
+            </div>
+          <% end %>
+        </dl>
+      </div>
+    <% end %>
+
+    <!-- Details Section -->
+    <%= disclosure t(".details") do %>
+      <div class="pb-4">
+        <%= styled_form_with model: [account, entry],
+              url: account_trade_path(account, entry),
+              class: "space-y-2",
+              data: { controller: "auto-submit-form" } do |f| %>
+          <%= f.date_field :date,
+                label: t(".date_label"),
+                max: Date.current,
+                "data-auto-submit-form-target": "auto" %>
+
+          <%= f.fields_for :entryable do |ef| %>
+            <%= ef.number_field :qty,
+                  label: t(".quantity_label"),
+                  step: "any",
+                  "data-auto-submit-form-target": "auto" %>
+
+            <%= ef.money_field :price,
+                  label: t(".cost_per_share_label"),
+                  disable_currency: true,
+                  auto_submit: true,
+                  min: 0 %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <!-- Additional Section -->
+    <%= disclosure t(".additional") do %>
+      <div class="pb-4">
+        <%= styled_form_with model: [account, entry],
+              url: account_trade_path(account, entry),
+              class: "space-y-2",
+              data: { controller: "auto-submit-form" } do |f| %>
+          <%= f.text_area :notes,
+                label: t(".note_label"),
+                placeholder: t(".note_placeholder"),
+                rows: 5,
+                "data-auto-submit-form-target": "auto" %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <!-- Settings Section -->
+    <%= disclosure t(".settings") do %>
+      <div class="pb-4">
+        <!-- Exclude Trade Form -->
+        <%= styled_form_with model: [account, entry],
+              url: account_trade_path(account, entry),
+              class: "p-3",
+              data: { controller: "auto-submit-form" } do |f| %>
+          <div class="flex cursor-pointer items-center gap-2 justify-between">
+            <div class="text-sm space-y-1">
+              <h4 class="text-gray-900"><%= t(".exclude_title") %></h4>
+              <p class="text-gray-500"><%= t(".exclude_subtitle") %></p>
+            </div>
+
+            <div class="relative inline-block select-none">
+              <%= f.check_box :excluded,
+                      class: "sr-only peer",
+                      "data-auto-submit-form-target": "auto" %>
+              <label for="account_entry_excluded"
+                         class="maybe-switch"></label>
+            </div>
+          </div>
+        <% end %>
+
+        <!-- Delete Trade Form -->
+        <div class="flex items-center justify-between gap-2 p-3">
+          <div class="text-sm space-y-1">
+            <h4 class="text-gray-900"><%= t(".delete_title") %></h4>
+            <p class="text-gray-500"><%= t(".delete_subtitle") %></p>
+          </div>
+
+          <%= button_to t(".delete"),
+                account_entry_path(account, entry),
+                method: :delete,
+                class:  "rounded-lg px-3 py-2 text-red-500 text-sm
+                         font-medium border border-alpha-black-200",
+                data:   { turbo_confirm: true, turbo_frame: "_top" } %>
+        </div>
+      </div>
+    <% end %>
   </div>
 <% end %>

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

@@ -47,7 +47,7 @@
                     { container_class: "w-1/3", label: t(".nature"), selected: entry.amount.negative? ? "income" : "expense" },
                     { data: { "auto-submit-form-target": "auto" } } %>
 
-              <%= f.money_field :amount, :currency, label: t(".amount"),
+              <%= f.money_field :amount, label: t(".amount"),
                     container_class: "w-2/3",
                     auto_submit: true,
                     min: 0,
@@ -104,7 +104,13 @@
                   },
                   { "data-auto-submit-form-target": "auto" } %>
 
-            <%= ef.text_area :notes,
+          <% end %>
+
+          <%= styled_form_with model: [account, entry],
+              url: account_transaction_path(account, entry),
+              class: "space-y-2",
+              data: { controller: "auto-submit-form" } do |f| %>
+            <%= f.text_area :notes,
                   label: t(".note_label"),
                   placeholder: t(".note_placeholder"),
                   rows: 5,
@@ -122,22 +128,20 @@
               url: account_transaction_path(account, entry),
               class: "p-3",
               data: { controller: "auto-submit-form" } do |f| %>
-          <%= f.fields_for :entryable do |ef| %>
-            <div class="flex cursor-pointer items-center gap-2 justify-between">
-              <div class="text-sm space-y-1">
-                <h4 class="text-gray-900"><%= t(".exclude_title") %></h4>
-                <p class="text-gray-500"><%= t(".exclude_subtitle") %></p>
-              </div>
+          <div class="flex cursor-pointer items-center gap-2 justify-between">
+            <div class="text-sm space-y-1">
+              <h4 class="text-gray-900"><%= t(".exclude_title") %></h4>
+              <p class="text-gray-500"><%= t(".exclude_subtitle") %></p>
+            </div>
 
-              <div class="relative inline-block select-none">
-                <%= ef.check_box :excluded,
+            <div class="relative inline-block select-none">
+              <%= f.check_box :excluded,
                       class: "sr-only peer",
                       "data-auto-submit-form-target": "auto" %>
-                <label for="account_entry_entryable_attributes_excluded"
+              <label for="account_entry_entryable_attributes_excluded"
                          class="maybe-switch"></label>
-              </div>
             </div>
-          <% end %>
+          </div>
         <% end %>
 
         <!-- Delete Transaction Form -->

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

@@ -29,7 +29,7 @@
     <%= f.text_field :name, value: transfer.name, label: t(".description"), placeholder: t(".description_placeholder"), required: true %>
     <%= f.collection_select :from_account_id, Current.family.accounts.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".from") }, required: true %>
     <%= f.collection_select :to_account_id, Current.family.accounts.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".to") }, required: true %>
-    <%= f.money_field :amount, :currency, label: t(".amount"), required: true, hide_currency: true %>
+    <%= f.money_field :amount, label: t(".amount"), required: true, hide_currency: true %>
     <%= f.date_field :date, value: transfer.date, label: t(".date"), required: true, max: Date.current %>
   </section>
 

app/views/accounts/_form.html.erb

@@ -5,7 +5,7 @@
     <%= f.hidden_field :accountable_type %>
     <%= f.text_field :name, placeholder: t(".name_placeholder"), required: "required", label: t(".name_label"), autofocus: true %>
     <%= f.collection_select :institution_id, Current.family.institutions.alphabetically, :id, :name, { include_blank: t(".ungrouped"), label: t(".institution") } %>
-    <%= f.money_field :balance, :currency, label: t(".balance"), required: true, default_currency: Current.family.currency %>
+    <%= f.money_field :balance, label: t(".balance"), required: true, default_currency: Current.family.currency %>
 
     <% if account.new_record? %>
       <div class="flex items-center gap-2 mt-3 mb-6">

app/views/transactions/_form.html.erb

@@ -13,7 +13,7 @@
   <section class="space-y-2">
     <%= f.text_field :name, label: t(".description"), placeholder: t(".description_placeholder"), required: true %>
     <%= f.collection_select :account_id, Current.family.accounts.alphabetically, :id, :name, { prompt: t(".account_prompt"), label: t(".account") }, required: true %>
-    <%= f.money_field :amount, :currency, label: t(".amount"), required: true %>
+    <%= f.money_field :amount, label: t(".amount"), required: true %>
     <%= f.hidden_field :entryable_type, value: "Account::Transaction" %>
     <%= f.fields_for :entryable do |ef| %>
       <%= ef.collection_select :category_id, Current.family.categories.alphabetically, :id, :name, { prompt: t(".category_prompt"), label: t(".category") } %>