Finish remaining transaction filters (#1189)

* Add type filters to transaction search

* Add amount filter

app/views/transactions/searches/_menu.html.erb

@@ -1,3 +1,5 @@
+<%# locals: (form:) %>
+
 <div
   id="transaction-filters-menu"
   data-menu-target="content"
@@ -14,24 +16,33 @@
         data-tabs-target="btn"
         data-action="tabs#select">
         <%= lucide_icon(filter[:icon], class: "w-5 h-5") %>
-        <span class="text-sm font-medium"><%= filter[:name] %></span>
+        <span class="text-sm font-medium"><%= t(".#{filter[:key]}") %></span>
       </button>
     <% end %>
   </div>
 
   <div class="flex flex-col grow">
-    <div class="grow p-2 border-b border-b-alpha-black-100 overflow-y-auto">
+    <div class="grow p-3 border-b border-b-alpha-black-100 overflow-y-auto">
       <% transaction_search_filters.each do |filter| %>
         <div id="<%= filter[:key] %>" data-tabs-target="tab">
           <%= render partial: get_transaction_search_filter_partial_path(filter), locals: { form: form } %>
         </div>
       <% end %>
     </div>
-    <div class="flex justify-end items-center gap-2 bg-white p-3">
-      <%= button_tag type: "reset", data: { action: "menu#close" }, class: "py-2 px-3 bg-gray-50 rounded-lg text-sm text-gray-900 font-medium" do %>
-        Cancel
-      <% end %>
-      <%= form.submit "Apply", name: nil, class: "py-2 px-3 bg-gray-900 hover:bg-gray-700 rounded-lg text-sm text-white font-medium cursor-pointer" %>
+
+    <div class="flex justify-between items-center gap-2 bg-white p-3">
+      <div>
+        <% if @q.present? %>
+          <%= link_to t(".clear_filters"), transactions_path, class: "text-sm underline text-gray-500" %>
+        <% end %>
+      </div>
+
+      <div>
+        <%= button_tag type: "reset", data: { action: "menu#close" }, class: "py-2 px-3 bg-gray-50 rounded-lg text-sm text-gray-900 font-medium" do %>
+          <%= t(".cancel") %>
+        <% end %>
+        <%= form.submit t(".apply"), name: nil, class: "py-2 px-3 bg-gray-900 hover:bg-gray-700 rounded-lg text-sm text-white font-medium cursor-pointer" %>
+      </div>
     </div>
   </div>
 </div>

app/views/transactions/searches/_search.html.erb

@@ -1,10 +1,24 @@
 <%= render "transactions/searches/form" %>
 
 <ul id="transaction-search-filters" class="flex items-center flex-wrap gap-2 mb-4">
-  <% @q.each do |param_key, param_value| %>
+  <% @q.reject { |key| key == "amount_operator" }.each do |param_key, param_value| %>
     <% unless param_value.blank? %>
-      <% Array(param_value).each do |value| %>
-        <%= render partial: "transactions/searches/filters/badge", locals: { param_key: param_key, param_value: value } %>
+      <% if param_key == "amount" %>
+        <% amount_operator = case @q[:amount_operator]
+                             when "equal"
+                               t(".equal_to")
+                             when "greater"
+                               t(".greater_than")
+                             when "less"
+                               t(".less_than")
+                             else
+                               t(@q[:amount_operator])
+                             end %>
+        <%= render partial: "transactions/searches/filters/badge", locals: { param_key: "amount", param_value: "#{amount_operator} #{param_value}" } %>
+      <% else %>
+        <% Array(param_value).each do |value| %>
+          <%= render partial: "transactions/searches/filters/badge", locals: { param_key: param_key, param_value: value } %>
+        <% end %>
       <% end %>
     <% end %>
   <% end %>

app/views/transactions/searches/filters/_amount_filter.html.erb

@@ -1,4 +1,15 @@
 <%# locals: (form:) %>
-<div class="py-12 flex items-center justify-center">
-  <p class="text-gray-500 text-sm">Filter by amount coming soon...</p>
+
+<div class="space-y-2">
+  <div class="form-field">
+    <%= form.select :amount_operator, options_for_select([
+      [t(".equal_to"), "equal"],
+      [t(".greater_than"), "greater"],
+      [t(".less_than"), "less"]
+    ], @q[:amount_operator] || "equal"), {}, class: "form-field__input" %>
+  </div>
+
+  <div class="form-field">
+    <%= form.number_field :amount, step: 0.01, class: "form-field__input", placeholder: t(".placeholder"), value: @q[:amount] %>
+  </div>
 </div>

app/views/transactions/searches/filters/_badge.html.erb

@@ -1,14 +1,13 @@
 <%# locals: (param_key:, param_value:) %>
 <li class="flex items-center gap-1 text-sm border border-alpha-black-200 rounded-3xl p-1.5">
-
   <% if param_key == "start_date" || param_key == "end_date" %>
     <div class="flex items-center gap-2">
       <%= lucide_icon "calendar", class: "w-5 h-5 text-gray-500" %>
       <p>
         <% if param_key == "start_date" %>
-          on or after <%= param_value %>
+          <%= t(".on_or_after", date: param_value) %>
         <% else %>
-          on or before <%= param_value %>
+          <%= t(".on_or_before", date: param_value) %>
         <% end %>
       </p>
     </div>
@@ -22,6 +21,20 @@
       <div class="w-5 h-5 bg-blue-600/10 text-xs flex items-center justify-center rounded-full"><%= param_value[0].upcase %></div>
       <p><%= param_value %></p>
     </div>
+  <% elsif param_key == "amount" %>
+    <div class="flex items-center gap-2">
+      <%= lucide_icon "hash", class: "w-5 h-5 text-gray-500" %>
+      <p><%= param_value %></p>
+    </div>
+  <% elsif param_key == "types" %>
+    <div class="flex items-center gap-2 px-1">
+      <div class="w-1 h-3 rounded-full <%= case param_value.downcase
+                                          when "income" then "bg-green-500"
+                                          when "expense" then "bg-red-500"
+                                          when "transfer" then "bg-blue-500"
+                                          end %>"></div>
+      <p><%= t(".#{param_value.downcase}") %></p>
+    </div>
   <% else %>
     <div class="flex items-center gap-2">
       <p><%= param_value %></p>

app/views/transactions/searches/filters/_type_filter.html.erb

@@ -1,4 +1,37 @@
 <%# locals: (form:) %>
-<div class="py-12 flex items-center justify-center">
-  <p class="text-gray-500 text-sm">Filter by type coming soon...</p>
+
+<div class="p-2 space-y-3">
+  <div class="flex items-center gap-3" data-filter-name="income">
+    <%= form.check_box :types,
+                           {
+                             multiple: true,
+                             checked: @q[:types]&.include?("income"),
+                             class: "maybe-checkbox maybe-checkbox--light"
+                           },
+                           "income",
+                           nil %>
+    <%= form.label :types, t(".income"), value: "income", class: "text-sm text-gray-900" %>
+  </div>
+  <div class="flex items-center gap-3" data-filter-name="expense">
+    <%= form.check_box :types,
+                           {
+                             multiple: true,
+                             checked: @q[:types]&.include?("expense"),
+                             class: "maybe-checkbox maybe-checkbox--light"
+                           },
+                           "expense",
+                           nil %>
+    <%= form.label :types, t(".expense"), value: "expense", class: "text-sm text-gray-900" %>
+  </div>
+  <div class="flex items-center gap-3" data-filter-name="transfer">
+    <%= form.check_box :types,
+                           {
+                             multiple: true,
+                             checked: @q[:types]&.include?("transfer"),
+                             class: "maybe-checkbox maybe-checkbox--light"
+                           },
+                           "transfer",
+                           nil %>
+    <%= form.label :types, t(".transfer"), value: "transfer", class: "text-sm text-gray-900" %>
+  </div>
 </div>