Add confirmation dialog for balance reconciliation creates and updates (#2457)

app/views/entries/_selection_bar.html.erb

@@ -6,7 +6,7 @@
   </div>
 
   <div class="flex items-center gap-1 text-secondary">
-    <%= form_with url: transactions_bulk_deletion_path, data: { turbo_confirm: true, turbo_frame: "_top" } do %>
+    <%= form_with url: transactions_bulk_deletion_path, data: { turbo_confirm: CustomConfirm.for_resource_deletion("entry").to_data_attribute, 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-inverse flex items-center justify-center rounded-md" title="Delete">
         <%= icon "trash-2", class: "group-hover:text-inverse" %>
       </button>

app/views/valuations/_confirmation_contents.html.erb

@@ -0,0 +1,49 @@
+<div class="space-y-4 text-sm text-secondary">
+  <% if account.investment? %>
+    <% holdings_value = account.investment.holdings_value_for_date(entry.date) %>
+    <% brokerage_cash = entry.amount - holdings_value %>
+
+    <p>This will <%= action_verb %> the account value on <span class="font-medium text-primary"><%= entry.date.strftime("%B %d, %Y") %></span> to:</p>
+
+    <div class="bg-container rounded-lg p-4 space-y-2 border border-primary">
+      <div class="flex justify-between">
+        <span>Total account value</span>
+        <span class="font-medium text-primary"><%= entry.amount_money.format %></span>
+      </div>
+      <div class="flex justify-between text-xs">
+        <span>Holdings value</span>
+        <span><%= Money.new(holdings_value, account.currency).format %></span>
+      </div>
+      <div class="flex justify-between text-xs">
+        <span>Brokerage cash</span>
+        <span class="<%= brokerage_cash.negative? ? "text-red-500" : "text-green-500" %>"><%= Money.new(brokerage_cash, account.currency).format %></span>
+      </div>
+    </div>
+  <% else %>
+    <p><%= action_verb.capitalize %> 
+      <% if account.depository? %>
+        account balance
+      <% elsif account.credit_card? %>
+        credit card balance
+      <% elsif account.loan? %>
+        loan balance
+      <% elsif account.property? %>
+        property value
+      <% elsif account.vehicle? %>
+        vehicle value
+      <% elsif account.crypto? %>
+        crypto balance
+      <% elsif account.other_asset? %>
+        asset value
+      <% elsif account.other_liability? %>
+        liability balance
+      <% else %>
+        balance
+      <% end %>
+      on <span class="font-medium text-primary"><%= entry.date.strftime("%B %d, %Y") %></span> to 
+      <span class="font-medium text-primary"><%= entry.amount_money.format %></span>.
+    </p>
+  <% end %>
+
+  <p>All future transactions and balances will be recalculated based on this <%= is_update ? "change" : "update" %>.</p>
+</div>

app/views/valuations/_form.html.erb

@@ -1,17 +0,0 @@
-<%# locals: (entry:, error_message:) %>
-
-<%= styled_form_with model: entry, url: valuations_path, class: "space-y-4" do |form| %>
-  <%= form.hidden_field :account_id %>
-
-  <% if error_message.present? %>
-    <%= render AlertComponent.new(message: error_message, variant: :error) %>
-  <% end %>
-
-  <div class="space-y-3">
-    <%= form.hidden_field :name, value: "Balance update" %>
-    <%= form.date_field :date, label: true, required: true, value: Date.current, min: Entry.min_supported_date, max: Date.current %>
-    <%= form.money_field :amount, label: t(".amount"), required: true %>
-  </div>
-
-  <%= form.submit t(".submit") %>
-<% end %>

app/views/valuations/confirm_create.html.erb

@@ -0,0 +1,20 @@
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: "Confirm new balance") %>
+  <% dialog.with_body do %>
+    <%= styled_form_with model: @entry, url: valuations_path, class: "space-y-4", data: { turbo: false } do |form| %>
+      <%= form.hidden_field :account_id %>
+      <%= form.hidden_field :date %>
+      <%= form.hidden_field :amount %>
+      <%= form.hidden_field :currency %>
+      <%= form.hidden_field :notes %>
+
+      <%= render "confirmation_contents", 
+          account: @account, 
+          entry: @entry, 
+          action_verb: "set", 
+          is_update: false %>
+
+      <%= form.submit "Confirm" %>
+    <% end %>
+  <% end %>
+<% end %>

app/views/valuations/confirm_update.html.erb

@@ -0,0 +1,19 @@
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: "Update balance") %>
+  <% dialog.with_body do %>
+    <%= styled_form_with model: @entry, url: valuation_path(@entry), method: :patch, class: "space-y-4", data: { turbo: false } do |form| %>
+      <%= form.hidden_field :date %>
+      <%= form.hidden_field :amount %>
+      <%= form.hidden_field :currency %>
+      <%= form.hidden_field :notes %>
+
+      <%= render "confirmation_contents", 
+          account: @account, 
+          entry: @entry, 
+          action_verb: "update", 
+          is_update: true %>
+
+      <%= form.submit "Update" %>
+    <% end %>
+  <% end %>
+<% end %>

app/views/valuations/new.html.erb

@@ -1,6 +1,19 @@
 <%= render DialogComponent.new do |dialog| %>
   <% dialog.with_header(title: t(".title")) %>
   <% dialog.with_body do %>
-    <%= render "form", entry: @entry, error_message: @error_message %>
+    <%= styled_form_with model: @entry, url: confirm_create_valuations_path, class: "space-y-4" do |form| %>
+      <%= form.hidden_field :account_id %>
+
+      <% if @error_message.present? %>
+        <%= render AlertComponent.new(message: @error_message, variant: :error) %>
+      <% end %>
+
+      <div class="space-y-3">
+        <%= form.date_field :date, label: true, required: true, value: Date.current, min: Entry.min_supported_date, max: Date.current %>
+        <%= form.money_field :amount, label: t(".amount"), required: true, disable_currency: true %>
+      </div>
+
+      <%= form.submit t(".submit") %>
+    <% end %>
   <% end %>
 <% end %>

app/views/valuations/show.html.erb

@@ -15,18 +15,25 @@
     <% dialog.with_section(title: t(".overview"), open: true) do %>
       <div class="pb-4">
         <%= styled_form_with model: entry,
-              url: entry_path(entry),
-              class: "space-y-2",
-              data: { controller: "auto-submit-form" } do |f| %>
+              url: confirm_update_valuation_path(entry),
+              method: :post,
+              data: { turbo_frame: :modal },
+              class: "space-y-4" do |f| %>
           <%= f.date_field :date,
                 label: t(".date_label"),
-                max: Date.current,
-                "data-auto-submit-form-target": "auto" %>
+                max: Date.current %>
 
           <%= f.money_field :amount,
                 label: t(".amount"),
-                auto_submit: true,
                 disable_currency: true %>
+
+          <div class="flex justify-end">
+            <%= render ButtonComponent.new(
+              text: "Update value",
+              variant: :primary,
+              type: "submit"
+            ) %>
+          </div>
         <% end %>
       </div>
     <% end %>
@@ -34,9 +41,13 @@
     <% dialog.with_section(title: t(".details")) do %>
       <div class="pb-4">
         <%= styled_form_with model: entry,
-              url: entry_path(entry),
+              url: valuation_path(entry),
+              method: :patch,
               class: "space-y-2",
               data: { controller: "auto-submit-form" } do |f| %>
+          <%= f.hidden_field :date, value: entry.date %>
+          <%= f.hidden_field :amount, value: entry.amount %>
+          <%= f.hidden_field :currency, value: entry.currency %>
           <%= f.text_area :notes,
                 label: t(".note_label"),
                 placeholder: t(".note_placeholder"),
@@ -59,7 +70,7 @@
                 entry_path(entry),
                 method: :delete,
                 class: "rounded-lg px-3 py-2 text-red-500 text-sm font-medium border border-secondary",
-                data: { turbo_confirm: true, turbo_frame: "_top" } %>
+                data: { turbo_confirm: CustomConfirm.for_resource_deletion("value update").to_data_attribute, turbo_frame: "_top" } %>
         </div>
       </div>
     <% end %>