Transfer and Payment auto-matching, model and UI improvements (#1585)

* Transfer data model migration

* Transfers and payment modeling and UI improvements

* Fix CI

* Transfer matching flow

* Better UI for transfers

* Auto transfer matching, approve, reject flow

* Mark transfers created from form as confirmed

* Account filtering

* Excluded rejected transfers from calculations

* Calculation tweaks with transfer exclusions

* Clean up migration

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

@@ -8,7 +8,7 @@
     <fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-2">
       <%= radio_tab_tag form: f, name: :nature, value: :outflow, label: t(".expense"), icon: "minus-circle", checked: params[:nature] == "outflow" || params[:nature].nil? %>
       <%= radio_tab_tag form: f, name: :nature, value: :inflow, label: t(".income"), icon: "plus-circle", checked: params[:nature] == "inflow" %>
-      <%= link_to new_account_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 group-has-[:checked]:bg-white group-has-[:checked]:text-gray-800 group-has-[:checked]:shadow-sm" do %>
+      <%= link_to new_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 group-has-[:checked]:bg-white group-has-[:checked]:text-gray-800 group-has-[:checked]:shadow-sm" do %>
         <%= lucide_icon "arrow-right-left", class: "w-5 h-5" %>
         <%= tag.span t(".transfer") %>
       <% end %>

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

@@ -12,7 +12,7 @@
       </span>
     </h3>
 
-    <% if entry.marked_as_transfer? %>
+    <% if entry.account_transaction.transfer? %>
       <%= lucide_icon "arrow-left-right", class: "text-gray-500 mt-1 w-5 h-5" %>
     <% end %>
   </div>

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

@@ -8,26 +8,6 @@
   <div class="flex items-center gap-1 text-gray-500">
     <%= turbo_frame_tag "bulk_transaction_edit_drawer" %>
 
-    <%= form_with url: mark_transfers_account_transactions_path,
-                  scope: "bulk_update",
-                  data: {
-                    turbo_frame: "_top",
-                    turbo_confirm: {
-                      title: t(".mark_transfers"),
-                      body: t(".mark_transfers_message"),
-                      accept: t(".mark_transfers_confirm"),
-                    }
-                  } do |f| %>
-      <button id="bulk-transfer-btn"
-              type="button"
-              data-bulk-select-scope-param="bulk_update"
-              data-action="bulk-select#submitBulkRequest"
-              class="p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md"
-              title="Mark as transfer">
-        <%= lucide_icon "arrow-right-left", class: "w-5 group-hover:text-white" %>
-      </button>
-    <% end %>
-
     <%= link_to bulk_edit_account_transactions_path,
                 class: "p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md",
                 title: "Edit",

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

@@ -1,10 +1,11 @@
 <%# locals: (entry:, selectable: true, balance_trend: nil) %>
 <% transaction, account = entry.account_transaction, entry.account %>
 
-<div class="grid grid-cols-12 items-center <%= entry.excluded ? "text-gray-400 bg-gray-25" : "text-gray-900" %> text-sm font-medium p-4">
-  <div class="pr-10 flex items-center gap-4 col-span-6">
+<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 <%= balance_trend ? "col-span-6" : "col-span-8" %>">
     <% if selectable %>
       <%= check_box_tag dom_id(entry, "selection"),
+                        disabled: entry.account_transaction.transfer?,
                         class: "maybe-checkbox maybe-checkbox--light",
                         data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
     <% end %>
@@ -18,49 +19,44 @@
         <% end %>
 
         <div class="truncate">
-          <% if entry.new_record? %>
-            <%= content_tag :p, entry.display_name %>
-          <% else %>
-            <%= link_to entry.display_name,
-                        entry.transfer.present? ? account_transfer_path(entry.transfer) : account_entry_path(entry),
+          <div class="space-y-0.5">
+            <div class="flex items-center gap-1">
+              <% if entry.new_record? %>
+                <%= content_tag :p, entry.display_name %>
+              <% else %>
+                <%= link_to entry.display_name,
+                        entry.account_transaction.transfer? ? transfer_path(entry.account_transaction.transfer) : account_entry_path(entry),
                         data: { turbo_frame: "drawer", turbo_prefetch: false },
                         class: "hover:underline hover:text-gray-800" %>
-          <% end %>
+              <% end %>
+
+              <% if entry.excluded %>
+                <span title="One-time <%= entry.amount.negative? ? "income" : "expense" %> (excluded from averages)">
+                  <%= lucide_icon "asterisk", class: "w-4 h-4 shrink-0 text-orange-500" %>
+                </span>
+              <% end %>
+
+              <% if entry.account_transaction.transfer? %>
+                <%= render "account/transactions/transfer_match", entry: entry %>
+              <% end %>
+            </div>
+
+            <div class="text-gray-500 text-xs font-normal">
+              <% if entry.account_transaction.transfer? %>
+                <%= render "transfers/account_links", transfer: entry.account_transaction.transfer, is_inflow: entry.account_transaction.transfer_as_inflow.present? %>
+              <% else %>
+                <%= link_to entry.account.name, account_path(entry.account, tab: "transactions"), data: { turbo_frame: "_top" }, class: "hover:underline" %>
+              <% end %>
+            </div>
+          </div>
         </div>
       <% end %>
     </div>
-
-    <% if unconfirmed_transfer?(entry) %>
-      <%= render "account/transfers/transfer_toggle", entry: entry %>
-    <% end %>
   </div>
 
-  <% if entry.transfer.present? %>
-    <% unless balance_trend %>
-      <div class="col-span-2"></div>
-    <% end %>
-
-    <div class="col-span-2">
-      <%= render "account/transfers/account_logos", transfer: entry.transfer, outflow: entry.amount.positive? %>
-    </div>
-  <% else %>
-    <div class="flex items-center gap-1 col-span-2">
-      <%= render "categories/menu", transaction: transaction %>
-    </div>
-
-    <% unless balance_trend %>
-      <%= tag.div class: "col-span-2 overflow-hidden truncate" do %>
-        <% if entry.new_record? %>
-          <%= tag.p account.name %>
-        <% else %>
-          <%= link_to account.name,
-                      account_path(account, tab: "transactions"),
-                      data: { turbo_frame: "_top" },
-                      class: "hover:underline" %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
+  <div class="flex items-center gap-1 col-span-2">
+    <%= render "account/transactions/transaction_category", entry: entry %>
+  </div>
 
   <div class="col-span-2 ml-auto">
     <%= content_tag :p,

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

@@ -0,0 +1,9 @@
+<%# locals: (entry:) %>
+
+<div id="<%= dom_id(entry, "category_menu") %>">
+  <% if entry.account_transaction.transfer? %>
+    <%= render "categories/badge", category: entry.account_transaction.transfer.payment? ? payment_category : transfer_category %>
+  <% else %>
+    <%= render "categories/menu", transaction: entry.account_transaction %>
+  <% end %>
+</div>

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

@@ -0,0 +1,27 @@
+<%# locals: (entry:) %>
+
+<div id="<%= dom_id(entry, "transfer_match") %>" class="flex items-center gap-1">
+  <% if entry.account_transaction.transfer.confirmed? %>
+    <span title="<%= entry.account_transaction.transfer.payment? ? "Payment" : "Transfer" %> is confirmed">
+      <%= lucide_icon "link-2", class: "w-4 h-4 text-indigo-600" %>
+    </span>
+  <% elsif entry.account_transaction.transfer.pending? %>
+    <span class="inline-flex items-center rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700">
+      Auto-matched
+    </span>
+
+    <%= button_to transfer_path(entry.account_transaction.transfer, transfer: { status: "confirmed" }),
+                    method: :patch,
+                    class: "text-gray-500 hover:text-gray-800 flex items-center justify-center",
+                    title: "Confirm match" do %>
+      <%= lucide_icon "check", class: "w-4 h-4 text-indigo-400 hover:text-indigo-600" %>
+    <% end %>
+
+    <%= button_to transfer_path(entry.account_transaction.transfer, transfer: { status: "rejected" }),
+                    method: :patch,
+                    class: "text-gray-500 hover:text-gray-800 flex items-center justify-center",
+                    title: "Reject match" do %>
+      <%= lucide_icon "x", class: "w-4 h-4 text-gray-400 hover:text-gray-600" %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -19,7 +19,7 @@
                 max: Date.current,
                 "data-auto-submit-form-target": "auto" %>
 
-          <% unless @entry.marked_as_transfer? %>
+          <% unless @entry.account_transaction.transfer? %>
             <div class="flex items-center gap-2">
               <%= f.select :nature,
                     [["Expense", "outflow"], ["Income", "inflow"]],
@@ -32,27 +32,7 @@
                     min: 0,
                     value: @entry.amount.abs %>
             </div>
-          <% end %>
 
-          <%= f.select :account,
-                options_for_select(
-                  Current.family.accounts.alphabetically.pluck(:name, :id),
-                  @entry.account_id
-                ),
-                { label: t(".account_label") },
-                { disabled: true } %>
-        <% end %>
-      </div>
-    <% end %>
-
-    <!-- Details Section -->
-    <%= disclosure t(".details") do %>
-      <div class="pb-4">
-        <%= styled_form_with model: @entry,
-              url: account_transaction_path(@entry),
-              class: "space-y-2",
-              data: { controller: "auto-submit-form" } do |f| %>
-          <% unless @entry.marked_as_transfer? %>
             <%= f.fields_for :entryable do |ef| %>
               <%= ef.collection_select :category_id,
                       Current.family.categories.alphabetically,
@@ -60,6 +40,30 @@
                     { label: t(".category_label"),
                       class: "text-gray-400", include_blank: t(".uncategorized") },
                     "data-auto-submit-form-target": "auto" %>
+            <% end %>
+          <% end %>
+
+        <% end %>
+      </div>
+    <% end %>
+
+    <!-- Details Section -->
+    <%= disclosure t(".details"), default_open: false do %>
+      <div class="pb-4">
+        <%= styled_form_with model: @entry,
+              url: account_transaction_path(@entry),
+              class: "space-y-2",
+              data: { controller: "auto-submit-form" } do |f| %>
+          <% unless @entry.account_transaction.transfer? %>
+            <%= f.select :account,
+                options_for_select(
+                  Current.family.accounts.alphabetically.pluck(:name, :id),
+                  @entry.account_id
+                ),
+                { label: t(".account_label") },
+                { disabled: true } %>
+
+            <%= f.fields_for :entryable do |ef| %>
 
               <%= ef.collection_select :merchant_id,
                       Current.family.merchants.alphabetically,
@@ -94,15 +98,15 @@
     <!-- Settings Section -->
     <%= disclosure t(".settings") do %>
       <div class="pb-4">
-        <!-- Exclude Transaction Form -->
+
         <%= styled_form_with model: @entry,
               url: account_transaction_path(@entry),
               class: "p-3",
               data: { controller: "auto-submit-form" } do |f| %>
-          <div class="flex cursor-pointer items-center gap-2 justify-between">
+          <div class="flex cursor-pointer items-center gap-4 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>
+              <h4 class="text-gray-900">One-time <%= @entry.amount.negative? ? "Income" : "Expense" %></h4>
+              <p class="text-gray-500">One-time transactions will be excluded from certain budgeting calculations and reports to help you see what's really important.</p>
             </div>
 
             <div class="relative inline-block select-none">
@@ -115,6 +119,18 @@
           </div>
         <% end %>
 
+        <div class="flex items-center justify-between gap-4 p-3">
+          <div class="text-sm space-y-1">
+            <h4 class="text-gray-900">Transfer or Debt Payment?</h4>
+            <p class="text-gray-500">Transfers and payments are special types of transactions that indicate money movement between 2 accounts.</p>
+          </div>
+
+          <%= link_to new_account_transaction_transfer_match_path(@entry), class: "btn btn--outline flex items-center gap-2", data: { turbo_frame: :modal } do %>
+            <%= lucide_icon "arrow-left-right", class: "w-4 h-4 shrink-0" %>
+            <span class="whitespace-nowrap">Open matcher</span>
+          <% end %>
+        </div>
+
         <!-- Delete Transaction Form -->
         <div class="flex items-center justify-between gap-2 p-3">
           <div class="text-sm space-y-1">