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

Author: zachgoll

app/assets/tailwind/maybe-design-system.css

@@ -334,6 +334,19 @@
     }
   }
 
+  /* New form field structure components */
+  .form-field__header {
+    @apply flex items-center justify-between gap-2;
+  }
+
+  .form-field__body {
+    @apply flex flex-col gap-1;
+  }
+
+  .form-field__actions {
+    @apply flex items-center gap-1;
+  }
+
   .form-field__label {
     @apply block text-xs text-secondary peer-disabled:text-subdued;
   }
@@ -347,17 +360,21 @@
     @apply transition-opacity duration-300;
     @apply placeholder:text-subdued;
 
-    &select {
-      @apply pr-8;
-    }
-
     @variant theme-dark {
       &::-webkit-calendar-picker-indicator {
         filter: invert(1);
         cursor: pointer;
       }
     }
   }
+  
+  select.form-field__input {
+    @apply pr-10 appearance-none;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right -0.15rem center;
+    background-repeat: no-repeat;
+    background-size: 1.25rem 1.25rem;
+  }
 
   .form-field__radio {
     @apply text-primary;
@@ -425,7 +442,5 @@
     @variant theme-dark {
       fill: var(--color-white);
     }
-
   }
-}
-
+}

app/components/alert_component.html.erb

@@ -0,0 +1,7 @@
+<div class="<%= container_classes %>">
+  <%= helpers.icon icon_name, size: "sm", color: icon_color, class: "shrink-0" %>
+
+  <div class="flex-1 text-sm">
+    <%= message %>
+  </div>
+</div>

app/components/alert_component.rb

@@ -0,0 +1,52 @@
+class AlertComponent < ViewComponent::Base
+  def initialize(message:, variant: :info)
+    @message = message
+    @variant = variant
+  end
+
+  private
+    attr_reader :message, :variant
+
+    def container_classes
+      base_classes = "flex items-start gap-3 p-4 rounded-lg border"
+
+      variant_classes = case variant
+      when :info
+        "bg-blue-50 text-blue-700 border-blue-200 theme-dark:bg-blue-900/20 theme-dark:text-blue-400 theme-dark:border-blue-800"
+      when :success
+        "bg-green-50 text-green-700 border-green-200 theme-dark:bg-green-900/20 theme-dark:text-green-400 theme-dark:border-green-800"
+      when :warning
+        "bg-yellow-50 text-yellow-700 border-yellow-200 theme-dark:bg-yellow-900/20 theme-dark:text-yellow-400 theme-dark:border-yellow-800"
+      when :error, :destructive
+        "bg-red-50 text-red-700 border-red-200 theme-dark:bg-red-900/20 theme-dark:text-red-400 theme-dark:border-red-800"
+      end
+
+      "#{base_classes} #{variant_classes}"
+    end
+
+    def icon_name
+      case variant
+      when :info
+        "info"
+      when :success
+        "check-circle"
+      when :warning
+        "alert-triangle"
+      when :error, :destructive
+        "x-circle"
+      end
+    end
+
+    def icon_color
+      case variant
+      when :success
+        "success"
+      when :warning
+        "warning"
+      when :error, :destructive
+        "destructive"
+      else
+        "blue-600"
+      end
+    end
+end

app/components/link_component.html.erb

@@ -1,7 +1,6 @@
 <%= link_to href, **merged_opts do %>
   <% if icon && (icon_position != "right") %>
     <%= helpers.icon(icon, size: size, color: icon_color) %>
-
   <% end %>
 
   <% unless icon_only? %>
@@ -10,6 +9,5 @@
 
   <% if icon && icon_position == "right" %>
     <%= helpers.icon(icon, size: size, color: icon_color) %>
-
   <% end %>
 <% end %>

app/controllers/accountable_sparklines_controller.rb

@@ -32,7 +32,7 @@ def accountable
     end
 
     def account_ids
-      family.accounts.active.where(accountable_type: accountable.name).pluck(:id)
+      family.accounts.visible.where(accountable_type: accountable.name).pluck(:id)
     end
 
     def cache_key

app/controllers/accounts_controller.rb

@@ -1,5 +1,5 @@
 class AccountsController < ApplicationController
-  before_action :set_account, only: %i[sync chart sparkline]
+  before_action :set_account, only: %i[sync chart sparkline toggle_active]
   include Periodable
 
   def index
@@ -33,6 +33,15 @@ def sparkline
     end
   end
 
+  def toggle_active
+    if @account.active?
+      @account.disable!
+    elsif @account.disabled?
+      @account.enable!
+    end
+    redirect_to accounts_path
+  end
+
   private
     def family
       Current.family

app/controllers/api/v1/accounts_controller.rb

@@ -9,7 +9,7 @@ class Api::V1::AccountsController < Api::V1::BaseController
   def index
     # Test with Pagy pagination
     family = current_resource_owner.family
-    accounts_query = family.accounts.active.alphabetically
+    accounts_query = family.accounts.visible.alphabetically
 
     # Handle pagination with Pagy
     @pagy, @accounts = pagy(

app/controllers/api/v1/transactions_controller.rb

@@ -10,7 +10,7 @@ class Api::V1::TransactionsController < Api::V1::BaseController
 
   def index
     family = current_resource_owner.family
-    transactions_query = family.transactions.active
+    transactions_query = family.transactions.visible
 
     # Apply filters
     transactions_query = apply_filters(transactions_query)

app/controllers/concerns/accountable_resource.rb

@@ -43,9 +43,25 @@ def create
   end
 
   def update
-    @account.update_with_sync!(account_params.except(:return_to))
-    @account.lock_saved_attributes!
+    # Handle balance update if provided
+    if account_params[:balance].present?
+      result = @account.update_balance(balance: account_params[:balance], currency: account_params[:currency])
+      unless result.success?
+        @error_message = result.error_message
+        render :edit, status: :unprocessable_entity
+        return
+      end
+    end
 
+    # Update remaining account attributes
+    update_params = account_params.except(:return_to, :balance, :currency)
+    unless @account.update(update_params)
+      @error_message = @account.errors.full_messages.join(", ")
+      render :edit, status: :unprocessable_entity
+      return
+    end
+
+    @account.lock_saved_attributes!
     redirect_back_or_to @account, notice: t("accounts.update.success", type: accountable_type.name.underscore.humanize)
   end
 
@@ -74,7 +90,7 @@ def set_account
 
     def account_params
       params.require(:account).permit(
-        :name, :is_active, :balance, :subtype, :currency, :accountable_type, :return_to,
+        :name, :balance, :subtype, :currency, :accountable_type, :return_to,
         accountable_attributes: self.class.permitted_accountable_attributes
       )
     end

app/controllers/pages_controller.rb

@@ -5,7 +5,7 @@ class PagesController < ApplicationController
 
   def dashboard
     @balance_sheet = Current.family.balance_sheet
-    @accounts = Current.family.accounts.active.with_attached_logo
+    @accounts = Current.family.accounts.visible.with_attached_logo
 
     period_param = params[:cashflow_period]
     @cashflow_period = if period_param.present?