mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-07 22:45:20 +02:00
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
This commit is contained in:
Zach Gollwitzer
GitHub
parent
46e129308f
commit
307a3687e8
78 changed files with 1161 additions and 682 deletions
7
app/views/transfers/_account_links.html.erb
Normal file
7
app/views/transfers/_account_links.html.erb
Normal file
|
|
@ -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>
|
||||
38
app/views/transfers/_form.html.erb
Normal file
38
app/views/transfers/_form.html.erb
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<%= styled_form_with model: transfer, class: "space-y-4", data: { turbo_frame: "_top", controller: "transfer-form" } do |f| %>
|
||||
<% if transfer.errors.present? %>
|
||||
<div class="text-red-600 flex items-center gap-2">
|
||||
<%= lucide_icon "circle-alert", class: "w-5 h-5" %>
|
||||
<p class="text-sm"><%= @transfer.errors.full_messages.to_sentence %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<section>
|
||||
<fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-2">
|
||||
<%= link_to new_account_transaction_path(nature: "expense"), data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400" do %>
|
||||
<%= lucide_icon "minus-circle", class: "w-5 h-5" %>
|
||||
<%= tag.span t(".expense") %>
|
||||
<% end %>
|
||||
|
||||
<%= link_to new_account_transaction_path(nature: "income"), data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400" do %>
|
||||
<%= lucide_icon "plus-circle", class: "w-5 h-5" %>
|
||||
<%= tag.span t(".income") %>
|
||||
<% end %>
|
||||
|
||||
<%= tag.div class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 bg-white text-gray-800 shadow-sm" do %>
|
||||
<%= lucide_icon "arrow-right-left", class: "w-5 h-5" %>
|
||||
<%= tag.span t(".transfer") %>
|
||||
<% end %>
|
||||
</fieldset>
|
||||
</section>
|
||||
|
||||
<section class="space-y-2">
|
||||
<%= 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.inflow_transaction&.entry&.date || Date.current, label: t(".date"), required: true, max: Date.current %>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<%= f.submit t(".submit") %>
|
||||
</section>
|
||||
<% end %>
|
||||
77
app/views/transfers/_transfer.html.erb
Normal file
77
app/views/transfers/_transfer.html.erb
Normal file
|
|
@ -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 %>
|
||||
3
app/views/transfers/new.html.erb
Normal file
3
app/views/transfers/new.html.erb
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<%= modal_form_wrapper title: t(".title") do %>
|
||||
<%= render "form", transfer: @transfer %>
|
||||
<% end %>
|
||||
101
app/views/transfers/show.html.erb
Normal file
101
app/views/transfers/show.html.erb
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<%= drawer do %>
|
||||
<header class="mb-4 space-y-1">
|
||||
<div class="flex items-center gap-4">
|
||||
<h3 class="font-medium">
|
||||
<span class="text-2xl">
|
||||
<%= format_money @transfer.amount_abs %>
|
||||
</span>
|
||||
|
||||
<span class="text-lg text-gray-500">
|
||||
<%= @transfer.amount_abs.currency.iso_code %>
|
||||
</span>
|
||||
</h3>
|
||||
|
||||
<%= lucide_icon "arrow-left-right", class: "text-gray-500 mt-1 w-5 h-5" %>
|
||||
</div>
|
||||
|
||||
<span class="text-sm text-gray-500">
|
||||
<%= @transfer.name %>
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div class="space-y-2">
|
||||
<!-- Overview Section -->
|
||||
<%= disclosure t(".overview") do %>
|
||||
<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">From</dt>
|
||||
<dd class="flex items-center gap-2 font-medium">
|
||||
<%= 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.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_abs %></dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="bg-alpha-black-100 h-px my-2"></div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<dl class="flex items-center gap-2 justify-between">
|
||||
<dt class="text-gray-500">To</dt>
|
||||
<dd class="flex items-center gap-2 font-medium">
|
||||
<%= 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.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_abs %></dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<!-- Details Section -->
|
||||
<%= disclosure t(".details") do %>
|
||||
<%= styled_form_with model: @transfer,
|
||||
data: { controller: "auto-submit-form" } do |f| %>
|
||||
<%= f.text_area :notes,
|
||||
label: t(".note_label"),
|
||||
placeholder: t(".note_placeholder"),
|
||||
rows: 5,
|
||||
"data-auto-submit-form-target": "auto" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<!-- Settings Section -->
|
||||
<%= disclosure t(".settings") do %>
|
||||
<div class="pb-4">
|
||||
<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>
|
||||
<p class="text-gray-500"><%= t(".delete_subtitle") %></p>
|
||||
</div>
|
||||
|
||||
<%= button_to t(".delete"),
|
||||
transfer_path(@transfer),
|
||||
method: :delete,
|
||||
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>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
17
app/views/transfers/update.turbo_stream.erb
Normal file
17
app/views/transfers/update.turbo_stream.erb
Normal file
|
|
@ -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 } %>
|
||||
Loading…
Add table
Add a link
Reference in a new issue