Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-03 12:35:21 +02:00
Code Issues Releases Activity Actions

Implement transaction filtering UI (#578)

Browse source 
* Rough sketch of implementation

* Consolidate auto submit controller

* Store ransack params in session

* Improve how summary is calculated for txns

* Implement filters UI
This commit is contained in:
Zach Gollwitzer 2024-03-28 13:23:54 -04:00 • committed by GitHub
parent 7ae25dd6df
commit f0c2d4ead0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 296 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

84
app/views/transactions/index.html.erb
View file

@ -2,90 +2,20 @@
<div class="flex justify-between items-center text-gray-900 font-medium">
<h1 class="text-xl">Transactions</h1>
<div class="flex items-center gap-5">
<div class="flex items-center gap-1 cursor-not-allowed">
<span class="text-sm">USD $</span>
<%= lucide_icon("chevron-down", class: "w-5 h-5 text-gray-500") %>
</div>
<div class="border-r border-alpha-black-200 h-5"></div>
<div class="flex items-center gap-2">
<%= lucide_icon("settings-2", class: "cursor-not-allowed w-5 h-5 text-gray-500") %>
<%= link_to new_transaction_path, class: "rounded-full w-9 h-9 bg-gray-900 text-white flex items-center justify-center hover:bg-gray-700" do %>
<%= link_to new_transaction_path, class: "rounded-lg bg-gray-900 text-white flex items-center gap-1 justify-center hover:bg-gray-700 px-3 py-2" do %>
<%= lucide_icon("plus", class: "w-5 h-5") %>
<p>New transaction</p>
<% end %>
</div>
</div>
</div>
<div class="grid grid-cols-3 bg-white rounded-xl border border-alpha-black-25 shadow-xs px-4 divide-x divide-alpha-black-100">
<div class="p-4 space-y-2">
<p class="text-sm text-gray-500">Total transactions</p>
<p class="text-gray-900 font-medium text-xl"><%= @transactions.size %></p>
</div>
<div class="p-4 space-y-2">
<p class="text-sm text-gray-500">Income</p>
<p class="text-gray-900 font-medium text-xl">
<%= format_money @transactions.inflows.sum(&:amount_money).abs %>
</p>
</div>
<div class="p-4 space-y-2">
<p class="text-sm text-gray-500">Expenses</p>
<p class="text-gray-900 font-medium text-xl">
<%= format_money @transactions.outflows.sum(&:amount_money) %>
</p>
</div>
<div>
<%= render partial: "transactions/summary", locals: { totals: @totals } %>
</div>
<div id="transactions" class="bg-white rounded-xl border border-alpha-black-25 shadow-xs p-4 space-y-4">
<%= search_form_for @q, url: transactions_path, method: :get, remote: true, html: { class: "search-form", "data-controller": "transactions-search", "data-action": "keyup->transactions-search#search change->transactions-search#search", "data-turbo-frame": "transactions_list" } do |form| %>
<div class="flex gap-2 mb-4">
<div class="grow">
<div class="relative flex items-center bg-white border border-gray-200 rounded-lg">
<%= form.search_field :category_name_or_account_name_or_name_cont, placeholder: "Search transaction by name, category or amount", class: "placeholder:text-sm placeholder:text-gray-500 relative pl-10 w-full border-none rounded-lg", "data-transactions-search-target": "search", 'data-action': "input->transactions-search#search" %>
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500 ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
</div>
</div>
<div>
<button class="cursor-not-allowed border border-gray-200 block h-full rounded-lg flex items-center gap-2 px-4">
<%= lucide_icon("list-filter", class: "w-5 h-5 text-gray-500") %>
<p class="text-sm font-medium text-gray-900">Filter</p>
</button>
</div>
<div>
<%= form.select :date, options_for_select([['All', 'all'], ['7D', 'last_7_days'], ['1M', 'last_30_days'], ["1Y", "last_365_days"]], selected: params.dig(:q, :date)), {}, { class: "block h-full w-full border border-gray-200 rounded-lg text-sm py-2 pr-8 pl-2", "data-transactions-search-target": "date" } %>
<!-- Hidden fields for date range -->
<%= form.hidden_field :date_gteq, value: '', "data-transactions-search-target": "dateGteq" %>
<%= form.hidden_field :date_lteq, value: '', "data-transactions-search-target": "dateLteq" %>
</div>
</div>
<% end %>
<%= turbo_frame_tag "transactions_list" do %>
<% if @transactions.empty? %>
<div class="flex flex-col items-center justify-center py-40">
<p class="text-gray-500 mb-2">No transactions found</p>
<p class="text-gray-400 max-w-xs text-center">Try adding a transaction, editing filters or refining your search</p>
</div>
<% else %>
<div class="bg-gray-25 rounded-xl px-5 py-3 text-xs font-medium text-gray-500 flex items-center gap-6 mb-4">
<div class="w-96">
<p class="uppercase">transaction</p>
</div>
<div class="w-48">
<p class="uppercase">category</p>
</div>
<div class="grow uppercase flex justify-between items-center gap-5 text-xs font-medium text-gray-500">
<p>account</p>
<p>amount</p>
</div>
</div>
<div class="space-y-6">
<% @transactions.group_by { |transaction| transaction.date }.each do |date, grouped_transactions| %>
<%= render partial: "transactions/transaction_group", locals: { date: date, transactions: grouped_transactions } %>
<% end %>
</div>
<% end %>
<% if @pagy.pages > 1 %>
<nav class="flex items-center justify-center px-4 mt-4 sm:px-0">
<%= render partial: "transactions/pagination", locals: { pagy: @pagy } %>
</nav>
<% end %>
<% end %>
<%= render partial: "transactions/search_form", locals: { q: @q } %>
<%= render partial: "transactions/filters", locals: { filters: @filter_list } %>
<%= render partial: "transactions/list", locals: { transactions: @transactions, pagy: @pagy } %>
</div>
</div>