Multi-step account forms + clearer balance editing (#2427)

* Initial multi-step property form

* Improve form structure, add optional tooltip help icons to form fields

* Add basic inline alert component

* Clean up and improve property form lifecycle

* Implement Account status concept

* Lint fixes

* Remove whitespace

* Balance editing, scope updates for account

* Passing tests

* Fix brakeman warning

* Remove stale columns

* data constraint tweaks

* Redundant property

app/views/accounts/_account.html.erb

@@ -6,7 +6,7 @@
       <%= render "accounts/logo", account: account, size: "md" %>
 
       <div>
-        <% if account.scheduled_for_deletion? %>
+        <% if account.pending_deletion? %>
           <p class="text-sm font-medium text-primary">
             <span>
               <%= account.name %>
@@ -16,31 +16,45 @@
             </span>
           </p>
         <% else %>
-          <%= link_to account.name, account, class: [(account.is_active ? "text-primary" : "text-subdued"), "text-sm font-medium hover:underline"], data: { turbo_frame: "_top" } %>
+          <%= link_to account.name, account, class: [(account.active? ? "text-primary" : "text-subdued"), "text-sm font-medium hover:underline"], data: { turbo_frame: "_top" } %>
           <% if account.long_subtype_label %>
             <p class="text-sm text-secondary truncate"><%= account.long_subtype_label %></p>
           <% end %>
         <% end %>
       </div>
 
-      <% unless account.scheduled_for_deletion? %>
+      <% unless account.pending_deletion? %>
         <%= link_to edit_account_path(account, return_to: return_to), data: { turbo_frame: :modal }, class: "group-hover/account:flex hidden hover:opacity-80 items-center justify-center" do %>
           <%= icon("pencil-line", size: "sm") %>
         <% end %>
       <% end %>
     </div>
     <div class="flex items-center gap-8">
-      <% if account.syncing? %>
+      <% if account.draft? %>
+        <!-- Balance hidden for draft accounts -->
+      <% elsif account.syncing? %>
         <div class="w-16 h-6 bg-loader rounded-full animate-pulse"></div>
       <% else %>
-        <p class="text-sm font-medium <%= account.is_active ? "text-primary" : "text-subdued" %>">
+        <p class="text-sm font-medium <%= account.active? ? "text-primary" : "text-subdued" %>">
           <%= format_money account.balance_money %>
         </p>
       <% end %>
 
-      <% unless account.scheduled_for_deletion? %>
-        <%= styled_form_with model: account, data: { turbo_frame: "_top", controller: "auto-submit-form" } do |f| %>
-          <%= f.toggle :is_active, { data: { auto_submit_form_target: "auto" } } %>
+      <% if account.draft? %>
+        <%= render LinkComponent.new(
+          text: "Complete setup",
+          href: edit_account_path(account, return_to: return_to),
+          variant: :outline,
+          frame: :modal
+        ) %>
+      <% elsif account.active? || account.disabled? %>
+        <%= form_with model: account, url: toggle_active_account_path(account), method: :patch, data: { turbo_frame: "_top", controller: "auto-submit-form" } do |f| %>
+          <%= render ToggleComponent.new(
+            id: "account_#{account.id}_active",
+            name: "active",
+            checked: account.active?,
+            data: { auto_submit_form_target: "auto" }
+          ) %>
         <% end %>
       <% end %>
     </div>

app/views/accounts/_form.html.erb

@@ -1,5 +1,9 @@
 <%# locals: (account:, url:) %>
 
+<% if @error_message.present? %>
+  <%= render AlertComponent.new(message: @error_message, variant: :error) %>
+<% end %>
+
 <%= styled_form_with model: account, url: url, scope: :account, data: { turbo: false }, class: "flex flex-col gap-4 justify-between grow text-primary" do |form| %>
   <div class="grow space-y-2">
     <%= form.hidden_field :accountable_type %>

app/views/accounts/show/_header.html.erb

@@ -12,7 +12,18 @@
 
         <div class="flex items-center gap-2">
           <div class="truncate">
-            <h2 class="font-medium text-xl truncate <%= "animate-pulse" if account.syncing? %>"><%= title || account.name %></h2>
+            <div class="flex items-center gap-3">
+              <h2 class="font-medium text-xl truncate <%= "animate-pulse" if account.syncing? %>"><%= title || account.name %></h2>
+              <% if account.draft? %>
+                <%= render LinkComponent.new(
+                  text: "Complete setup",
+                  href: edit_account_path(account),
+                  variant: :outline,
+                  size: :sm,
+                  frame: :modal
+                ) %>
+              <% end %>
+            </div>
             <% if subtitle.present? %>
               <p class="text-sm text-secondary"><%= subtitle %></p>
             <% end %>