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/entries/index.html.erb

@@ -84,7 +84,7 @@
           </div>
 
           <div class="p-4 bg-white rounded-bl-lg rounded-br-lg">
-            <%= render "pagination", pagy: @pagy, current_path: account_path(@account, page: params[:page]) %>
+            <%= render "pagination", pagy: @pagy, current_path: account_path(@account, page: params[:page], tab: params[:tab]) %>
           </div>
         </div>
       <% end %>

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

@@ -22,7 +22,7 @@
       { label: t(".type"), selected: type },
       { data: {
           action: "trade-form#changeType",
-          trade_form_url_param: new_account_trade_path(account_id: entry.account_id),
+          trade_form_url_param: new_account_trade_path(account_id: entry.account&.id || entry.account_id),
           trade_form_key_param: "type",
         }} %>
 

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

@@ -3,7 +3,7 @@
 <% trade, account = entry.account_trade, 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="col-span-8 flex items-center gap-4">
+  <div class="col-span-6 flex items-center gap-4">
     <% if selectable %>
       <%= check_box_tag dom_id(entry, "selection"),
                         class: "maybe-checkbox maybe-checkbox--light",
@@ -30,6 +30,10 @@
     </div>
   </div>
 
+  <div class="col-span-2 flex items-center">
+    <%= render "categories/badge", category: trade_category %>
+  </div>
+
   <div class="col-span-2 justify-self-end font-medium text-sm">
     <%= content_tag :p,
                     format_money(-entry.amount_money),

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">

app/views/account/transfer_matches/_matching_fields.html.erb

@@ -0,0 +1,44 @@
+<%# locals: (form:, entry:, candidates:, accounts:) %>
+
+<% if candidates.any? %>
+  <div data-controller="transfer-match" class="space-y-2">
+    <p class="text-sm text-gray-500">
+      Select a method for matching your transactions.
+    </p>
+
+    <%= form.select :method,
+              [
+                ["Match existing transaction (recommended)", "existing"],
+                ["Create new transaction", "new"]
+              ],
+              { selected: "existing", label: "Matching method" },
+              data: { action: "change->transfer-match#update" } %>
+
+    <div data-transfer-match-target="existingSelect">
+      <%= form.select :matched_entry_id,
+                candidates.map { |entry|
+                  [entry_name_detailed(entry), entry.id]
+                },
+                { label: "Matching transaction" } %>
+    </div>
+
+    <div data-transfer-match-target="newSelect" class="hidden">
+      <%= form.select :target_account_id,
+                accounts.map { |account| [account.name, account.id] },
+                { label: "Target account" } %>
+    </div>
+  </div>
+<% else %>
+  <p class="text-sm text-gray-500">
+    We couldn't find any transactions to match from your other accounts.
+    Please select an account and we will create a new inflow transaction for you.
+  </p>
+
+  <%= form.hidden_field :method, value: "new" %>
+
+  <div>
+    <%= form.select :target_account_id,
+                accounts.map { |account| [account.name, account.id] },
+                { label: "Target account" } %>
+  </div>
+<% end %>

app/views/account/transfer_matches/new.html.erb

@@ -0,0 +1,60 @@
+<%= modal_form_wrapper title: "Match transfer or payment" do %>
+  <%= styled_form_with(
+        url: account_transaction_transfer_match_path(@entry),
+        scope: :transfer_match,
+        class: "space-y-8",
+        data: { turbo_frame: :_top }
+      ) do |f| %>
+    <section class="space-y-4">
+      <div class="space-y-2">
+        <h2 class="text-sm font-medium text-gray-700">
+          <%= @entry.amount.positive? ? "From account: #{@entry.account.name}" : "From account" %>
+        </h2>
+
+        <% if @entry.amount.positive? %>
+          <%= f.select(
+                :entry_id,
+                [[entry_name_detailed(@entry), @entry.id]],
+                {
+                  label: "Outflow transaction",
+                  selected: @entry.id,
+                },
+                disabled: true
+              ) %>
+        <% else %>
+          <%= render "account/transfer_matches/matching_fields",
+                      form: f, entry: @entry, candidates: @transfer_match_candidates, accounts: @accounts %>
+        <% end %>
+      </div>
+    </section>
+
+    <div class="flex justify-center py-2">
+      <%= lucide_icon "arrow-down", class: "w-5 h-5" %>
+    </div>
+
+    <section class="space-y-4">
+      <div class="space-y-2">
+        <h2 class="text-sm font-medium text-gray-700">
+          <%= @entry.amount.negative? ? "To account: #{@entry.account.name}" : "To account" %>
+        </h2>
+
+        <% if @entry.amount.negative? %>
+          <%= f.select(
+                :entry_id,
+                [[entry_name_detailed(@entry), @entry.id]],
+                {
+                  label: "Inflow transaction",
+                  selected: @entry.id,
+                },
+                disabled: true
+              ) %>
+        <% else %>
+          <%= render "account/transfer_matches/matching_fields",
+                      form: f, entry: @entry, candidates: @transfer_match_candidates, accounts: @accounts %>
+        <% end %>
+      </div>
+    </section>
+
+    <%= f.submit "Create transfer match", data: { turbo_submits_with: "Saving..."} %>
+  <% end %>
+<% end %>

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

@@ -1,25 +0,0 @@
-<%# locals: (transfer:, outflow: false) %>
-
-<div class="flex items-center gap-2">
-  <% if outflow %>
-    <%= link_to transfer.from_account, data: { turbo_frame: :_top }, class: "hover:opacity-90" do %>
-      <%= circle_logo(transfer.from_name[0].upcase, size: "sm") %>
-    <% end %>
-
-    <%= lucide_icon "arrow-right", class: "text-gray-500 w-4 h-4" %>
-
-    <%= link_to transfer.to_account, data: { turbo_frame: :_top }, class: "hover:opacity-90" do %>
-      <%= circle_logo(transfer.to_name[0].upcase, size: "sm") %>
-    <% end %>
-  <% else %>
-    <%= link_to transfer.to_account, data: { turbo_frame: :_top }, class: "hover:opacity-90" do %>
-      <%= circle_logo(transfer.to_name[0].upcase, size: "sm") %>
-    <% end %>
-
-    <%= lucide_icon "arrow-left", class: "text-gray-500 w-4 h-4" %>
-
-    <%= link_to transfer.from_account, data: { turbo_frame: :_top }, class: "hover:opacity-90" do %>
-      <%= circle_logo(transfer.from_name[0].upcase, size: "sm") %>
-    <% end %>
-  <% end %>
-</div>

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

@@ -1,16 +0,0 @@
-<%# locals: (entry:) %>
-
-<%= form_with url: unmark_transfers_account_transactions_path, class: "flex items-center", data: {
-          turbo_confirm: {
-            title: t(".remove_transfer"),
-            body: t(".remove_transfer_body"),
-            accept: t(".remove_transfer_confirm"),
-          },
-          turbo_frame: "_top"
-        } do |f| %>
-  <%= f.hidden_field "bulk_update[entry_ids][]", value: entry.id %>
-  <%= f.button class: "flex items-center justify-center group", title: "Remove transfer" do %>
-    <%= lucide_icon "arrow-left-right", class: "group-hover:hidden text-gray-500 w-4 h-4" %>
-    <%= lucide_icon "unlink", class: "hidden group-hover:inline-block text-gray-900 w-4 h-4" %>
-  <% end %>
-<% end %>

app/views/account/valuations/_valuation.html.erb

@@ -12,7 +12,7 @@
     <% end %>
 
     <div class="flex items-center gap-3">
-      <%= tag.div class: "w-8 h-8 rounded-full p-1.5 flex items-center justify-center", style: mixed_hex_styles(color) do %>
+      <%= tag.div class: "w-6 h-6 rounded-full p-1.5 flex items-center justify-center", style: mixed_hex_styles(color) do %>
         <%= lucide_icon icon, class: "w-4 h-4" %>
       <% end %>
 

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

@@ -1,5 +1,5 @@
 <%# locals: (account:) %>
 
-<%= turbo_frame_tag dom_id(account, :entries), src: account_entries_path(account_id: account.id, page: params[:page]) do %>
+<%= turbo_frame_tag dom_id(account, :entries), src: account_entries_path(account_id: account.id, page: params[:page], tab: params[:tab]) do %>
   <%= render "account/entries/loading" %>
 <% end %>

app/views/application/_pagination.html.erb

@@ -3,7 +3,7 @@
   <div class="flex items-center gap-1">
     <div>
       <% if pagy.prev %>
-        <%= link_to custom_pagy_url_for(pagy, pagy.prev, current_path: current_path), 
+        <%= link_to custom_pagy_url_for(pagy, pagy.prev, current_path: current_path),
               class: "inline-flex items-center p-2 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700",
               data: (current_path ? { turbo_frame: "_top" } : {}) do %>
           <%= lucide_icon("chevron-left", class: "w-5 h-5 text-gray-500") %>
@@ -17,13 +17,13 @@
     <div class="rounded-xl p-1 bg-gray-25">
       <% pagy.series.each do |series_item| %>
         <% if series_item.is_a?(Integer) %>
-          <%= link_to custom_pagy_url_for(pagy, series_item, current_path: current_path), 
+          <%= link_to custom_pagy_url_for(pagy, series_item, current_path: current_path),
                 class: "rounded-md px-2 py-1 inline-flex items-center text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700",
                 data: (current_path ? { turbo_frame: "_top" } : {}) do %>
             <%= series_item %>
           <% end %>
         <% elsif series_item.is_a?(String) %>
-          <%= link_to custom_pagy_url_for(pagy, series_item, current_path: current_path), 
+          <%= link_to custom_pagy_url_for(pagy, series_item, current_path: current_path),
                 class: "rounded-md px-2 py-1 bg-white border border-alpha-black-25 shadow-xs inline-flex items-center text-sm font-medium text-gray-900",
                 data: (current_path ? { turbo_frame: "_top" } : {}) do %>
             <%= series_item %>
@@ -35,7 +35,7 @@
     </div>
     <div>
       <% if pagy.next %>
-        <%= link_to custom_pagy_url_for(pagy, pagy.next, current_path: current_path), 
+        <%= link_to custom_pagy_url_for(pagy, pagy.next, current_path: current_path),
               class: "inline-flex items-center p-2 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700",
               data: (current_path ? { turbo_frame: "_top" } : {}) do %>
           <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>

app/views/categories/_badge.html.erb

@@ -9,4 +9,5 @@
           color: <%= category.color %>;">
     <%= category.name %>
   </span>
+
 </div>

app/views/category/dropdowns/show.html.erb

@@ -29,16 +29,8 @@
     </div>
     <hr>
     <div class="relative p-1.5 w-full">
-      <%= link_to new_category_path(transaction_id: @transaction),
-                  class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100",
-                  data: { turbo_frame: "modal" } do %>
-        <%= lucide_icon "plus", class: "w-5 h-5" %>
-
-        <%= t(".add_new") %>
-      <% end %>
-
       <% if @transaction.category %>
-        <%= button_to account_transaction_path(@transaction.entry.account, @transaction.entry),
+        <%= button_to account_transaction_path(@transaction.entry),
                       method: :patch,
                       data: { turbo_frame: dom_id(@transaction.entry) },
                       params: { account_entry: { entryable_type: "Account::Transaction", entryable_attributes: { id: @transaction.id, category_id: nil } } },
@@ -48,6 +40,32 @@
           <%= t(".clear") %>
         <% end %>
       <% end %>
+
+      <%= link_to new_account_transaction_transfer_match_path(@transaction.entry),
+                  class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100",
+                  data: { turbo_frame: "modal" } do %>
+        <%= lucide_icon "refresh-cw", class: "w-5 h-5" %>
+
+        <p>Match transfer/payment</p>
+      <% end %>
+
+      <div class="flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2">
+        <div class="flex items-center gap-2">
+          <%= form_with url: account_transaction_path(@transaction.entry),
+                        method: :patch,
+                        data: { controller: "auto-submit-form" } do |f| %>
+            <%= f.hidden_field "account_entry[excluded]", value: !@transaction.entry.excluded %>
+            <%= f.check_box "account_entry[excluded]",
+                          checked: @transaction.entry.excluded,
+                          class: "maybe-checkbox maybe-checkbox--light",
+                          data: { auto_submit_form_target: "auto", autosubmit_trigger_event: "change" } %>
+          <% end %>
+        </div>
+
+        <p>One-time <%= @transaction.entry.amount.negative? ? "income" : "expense" %></p>
+
+        <%= lucide_icon "asterisk", class: "w-5 h-5 shrink-0 text-orange-500 ml-auto" %>
+      </div>
     </div>
   </div>
 <% end %>

app/views/pages/early_access.html.erb

@@ -10,7 +10,6 @@
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
 
     <%= javascript_importmap_tags %>
-    <%= hotwire_livereload_tags if Rails.env.development? %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
 
     <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

app/views/shared/_modal_form.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (title:, content:, subtitle: nil) %>
 
 <%= modal do %>
-  <article class="mx-auto w-full p-4 space-y-4 min-w-[450px] max-w-xl">
+  <article class="mx-auto w-full p-4 space-y-4 min-w-[450px]">
     <div class="space-y-2">
       <header class="flex justify-between items-center">
         <h2 class="font-medium"><%= title %></h2>

app/views/transactions/index.html.erb

@@ -17,20 +17,24 @@
     <% if @transaction_entries.present? %>
       <div class="grow overflow-y-auto">
         <div class="grid grid-cols-12 bg-gray-25 rounded-xl px-5 py-3 text-xs uppercase font-medium text-gray-500 items-center mb-4">
-          <div class="pl-0.5 col-span-6 flex items-center gap-4">
+          <div class="pl-0.5 col-span-8 flex items-center gap-4">
             <%= check_box_tag "selection_entry",
                               class: "maybe-checkbox maybe-checkbox--light",
                               data: { action: "bulk-select#togglePageSelection" } %>
-            <p class="col-span-4">transaction</p>
+            <p>transaction</p>
           </div>
 
           <p class="col-span-2">category</p>
-          <p class="col-span-2">account</p>
           <p class="col-span-2 justify-self-end">amount</p>
         </div>
         <div class="space-y-6">
           <%= entries_by_date(@transaction_entries, totals: true) do |entries| %>
-            <%= render entries %>
+            <%# Render transfers by selecting one side of the transfer (to prevent double-rendering the same transfer across date groups) %>
+            <%= render partial: "transfers/transfer",
+                       collection: entries.select { |e| e.account_transaction.transfer? && e.account_transaction.transfer_as_outflow.present? }.map { |e| e.account_transaction.transfer_as_outflow } %>
+
+            <%# Render regular entries %>
+            <%= render partial: "account/entries/entry", collection: entries.reject { |e| e.account_transaction.transfer? } %>
           <% end %>
         </div>
       </div>

app/views/transfers/_account_links.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (transfer:, is_inflow: false) %>
+<div class="flex items-center gap-1">
+  <% first_account, second_account = is_inflow ? [transfer.to_account, transfer.from_account] : [transfer.from_account, transfer.to_account] %>
+  <%= link_to first_account.name, account_path(first_account, tab: "activity"), class: "hover:underline", data: { turbo_frame: "_top" } %>
+  <%= lucide_icon is_inflow ? "arrow-left" : "arrow-right", class: "w-4 h-4 shrink-0" %>
+  <%= link_to second_account.name, account_path(second_account, tab: "activity"), class: "hover:underline", data: { turbo_frame: "_top" } %>
+</div>

app/views/transfers/_form.html.erb

@@ -29,7 +29,7 @@
     <%= f.collection_select :from_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".from") }, required: true %>
     <%= f.collection_select :to_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".to") }, required: true %>
     <%= f.number_field :amount, label: t(".amount"), required: true, min: 0, placeholder: "100", step: 0.00000001 %>
-    <%= f.date_field :date, value: transfer.date || Date.current, label: t(".date"), required: true, max: Date.current %>
+    <%= f.date_field :date, value: transfer.inflow_transaction&.entry&.date || Date.current, label: t(".date"), required: true, max: Date.current %>
   </section>
 
   <section>

app/views/transfers/_transfer.html.erb

@@ -0,0 +1,77 @@
+<%# locals: (transfer:) %>
+
+<%= turbo_frame_tag dom_id(transfer) do %>
+  <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 col-span-8">
+      <%= check_box_tag dom_id(transfer),
+                        disabled: true,
+                        class: "maybe-checkbox maybe-checkbox--light" %>
+
+      <div class="max-w-full">
+        <%= content_tag :div, class: ["flex items-center gap-2"] do %>
+          <%= render "shared/circle_logo", name: transfer.name, size: "sm" %>
+
+          <div class="truncate">
+            <div class="space-y-0.5">
+
+              <div class="flex items-center gap-2">
+                <%= link_to transfer.name,
+                        transfer_path(transfer),
+                        data: { turbo_frame: "drawer", turbo_prefetch: false },
+                        class: "hover:underline hover:text-gray-800" %>
+
+                <% if transfer.status == "confirmed" %>
+                  <span title="<%= transfer.payment? ? "Payment" : "Transfer" %> is confirmed">
+                    <%= lucide_icon "link-2", class: "w-4 h-4 text-indigo-600" %>
+                  </span>
+                <% elsif transfer.status == "rejected" %>
+                  <span class="inline-flex items-center rounded-full bg-red-50 px-2 py-0.5 text-xs font-medium text-red-700">
+                    Rejected
+                  </span>
+                <% else %>
+                  <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(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(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>
+
+              <div class="text-gray-500 text-xs font-normal">
+                <div class="flex items-center gap-1">
+                  <%= link_to transfer.from_account.name, transfer.from_account, class: "hover:underline", data: { turbo_frame: "_top" } %>
+                  <%= lucide_icon "arrow-left-right", class: "w-4 h-4" %>
+                  <%= link_to transfer.to_account.name, transfer.to_account, class: "hover:underline", data: { turbo_frame: "_top" } %>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-1 col-span-2">
+      <%= render "categories/badge", category: transfer.payment? ? payment_category : transfer_category %>
+    </div>
+
+    <div class="col-span-2 ml-auto">
+      <p class="flex items-center gap-1">
+        <span>
+          +/- <%= format_money(transfer.amount_abs) %>
+        </span>
+      </p>
+    </div>
+  </div>
+<% end %>

app/views/transfers/show.html.erb

@@ -3,11 +3,11 @@
     <div class="flex items-center gap-4">
       <h3 class="font-medium">
         <span class="text-2xl">
-          <%= format_money @transfer.amount_money %>
+          <%= format_money @transfer.amount_abs %>
         </span>
 
         <span class="text-lg text-gray-500">
-          <%= @transfer.amount_money.currency.iso_code %>
+          <%= @transfer.amount_abs.currency.iso_code %>
         </span>
       </h3>
 
@@ -25,21 +25,21 @@
       <div class="pb-4 px-3 pt-2 text-sm space-y-3 text-gray-900">
         <div class="space-y-3">
           <dl class="flex items-center gap-2 justify-between">
-            <dt class="text-gray-500">To</dt>
+            <dt class="text-gray-500">From</dt>
             <dd class="flex items-center gap-2 font-medium">
-              <%= render "accounts/logo", account: @transfer.inflow_transaction.account, size: "sm" %>
-              <%= @transfer.to_name %>
+              <%= render "accounts/logo", account: @transfer.from_account, size: "sm" %>
+              <%= link_to @transfer.from_account.name, account_path(@transfer.from_account), data: { turbo_frame: "_top" } %>
             </dd>
           </dl>
 
           <dl class="flex items-center gap-2 justify-between">
             <dt class="text-gray-500">Date</dt>
-            <dd class="font-medium"><%= l(@transfer.date, format: :long) %></dd>
+            <dd class="font-medium"><%= l(@transfer.outflow_transaction.entry.date, format: :long) %></dd>
           </dl>
 
           <dl class="flex items-center gap-2 justify-between">
             <dt class="text-gray-500">Amount</dt>
-            <dd class="font-medium text-red-500"><%= format_money -@transfer.amount_money %></dd>
+            <dd class="font-medium text-red-500"><%= format_money -@transfer.amount_abs %></dd>
           </dl>
         </div>
 
@@ -47,21 +47,21 @@
 
         <div class="space-y-3">
           <dl class="flex items-center gap-2 justify-between">
-            <dt class="text-gray-500">From</dt>
+            <dt class="text-gray-500">To</dt>
             <dd class="flex items-center gap-2 font-medium">
-              <%= render "accounts/logo", account: @transfer.outflow_transaction.account, size: "sm" %>
-              <%= @transfer.from_name %>
+              <%= render "accounts/logo", account: @transfer.to_account, size: "sm" %>
+              <%= link_to @transfer.to_account.name, account_path(@transfer.to_account), data: { turbo_frame: "_top" } %>
             </dd>
           </dl>
 
           <dl class="flex items-center gap-2 justify-between">
             <dt class="text-gray-500">Date</dt>
-            <dd class="font-medium"><%= l(@transfer.date, format: :long) %></dd>
+            <dd class="font-medium"><%= l(@transfer.inflow_transaction.entry.date, format: :long) %></dd>
           </dl>
 
           <dl class="flex items-center gap-2 justify-between">
             <dt class="text-gray-500">Amount</dt>
-            <dd class="font-medium text-green-500">+<%= format_money @transfer.amount_money %></dd>
+            <dd class="font-medium text-green-500">+<%= format_money @transfer.amount_abs %></dd>
           </dl>
         </div>
       </div>
@@ -74,7 +74,6 @@
         <%= f.text_area :notes,
                   label: t(".note_label"),
                   placeholder: t(".note_placeholder"),
-                  value: @transfer.outflow_transaction.notes,
                   rows: 5,
                   "data-auto-submit-form-target": "auto" %>
       <% end %>
@@ -83,25 +82,6 @@
     <!-- Settings Section -->
     <%= disclosure t(".settings") do %>
       <div class="pb-4">
-        <%= styled_form_with model: @transfer,
-              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,
-                      checked: @transfer.inflow_transaction.excluded,
-                      class: "sr-only peer",
-                      "data-auto-submit-form-target": "auto" %>
-              <label for="account_transfer_excluded"
-                         class="maybe-switch"></label>
-            </div>
-          </div>
-        <% end %>
-
         <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>
@@ -109,9 +89,9 @@
           </div>
 
           <%= button_to t(".delete"),
-                account_transfer_path(@transfer),
+                transfer_path(@transfer),
                 method: :delete,
-                class:  "rounded-lg px-3 py-2 text-red-500 text-sm
+                class:  "rounded-lg px-3 py-2 whitespace-nowrap text-red-500 text-sm
                           font-medium border border-alpha-black-200",
                 data:   { turbo_confirm: true, turbo_frame: "_top" } %>
         </div>

app/views/transfers/update.turbo_stream.erb

@@ -0,0 +1,17 @@
+<%= turbo_stream.replace @transfer %>
+
+<%= turbo_stream.replace "category_menu_account_entry_#{@transfer.inflow_transaction.entry.id}",
+  partial: "account/transactions/transaction_category",
+  locals: { entry: @transfer.inflow_transaction.entry } %>
+
+<%= turbo_stream.replace "category_menu_account_entry_#{@transfer.outflow_transaction.entry.id}",
+  partial: "account/transactions/transaction_category",
+  locals: { entry: @transfer.outflow_transaction.entry } %>
+
+<%= turbo_stream.replace "transfer_match_account_entry_#{@transfer.inflow_transaction.entry.id}",
+  partial: "account/transactions/transfer_match",
+  locals: { entry: @transfer.inflow_transaction.entry } %>
+
+<%= turbo_stream.replace "transfer_match_account_entry_#{@transfer.outflow_transaction.entry.id}",
+  partial: "account/transactions/transfer_match",
+  locals: { entry: @transfer.outflow_transaction.entry } %>