QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-19 12:04:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Move upcoming recurring transactions in a dedicated tab (#771)

Browse Source 
* feat: Move upcoming transactions in a dedicated tab

* Adjust formatting

* feat: adjust visibility on mobile

* feat: change translation label

* feat: show only upcoming transactions expected in the next 10 days

* feat: show upcoming transactions tab only when option enabled

* feat: render empty partial when there are no recurring transactions

* feat: align icon sizing and spacing between transactions and upcoming sections

* feat: add missing localitazion labels

* fix: move filter on upcoming transactions in controller

* fix: add missing localitazion labels
This commit is contained in:
Alessio Cappa
2026-01-27 12:32:35 +01:00
committed by GitHub
parent 33df3b781e
commit aef582f553
8 changed files with 129 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/views/recurring_transactions/_empty.html.erb Normal file
View File

@@ -0,0 +1,4 @@
<div class="flex flex-col items-center justify-center py-40">
<p class="text-secondary mb-2"><%= t(".title") %></p>
<p class="text-subdued max-w-xs text-center"><%= t(".description") %></p>
</div>

21
app/views/recurring_transactions/_projected_transaction.html.erb
View File

@@ -1,19 +1,19 @@
<%# locals: (recurring_transaction:) %>
<div class="grid grid-cols-12 items-center text-subdued text-sm font-medium p-4 lg:p-4 bg-container-inset rounded">
<div class="pr-4 lg:pr-10 flex items-center gap-3 lg:gap-4 col-span-8">
<div class="group flex lg:grid lg:grid-cols-12 items-center text-primary text-sm font-medium p-3 lg:p-4">
<div class="pr-4 lg:pr-10 flex items-center gap-3 lg:gap-4 col-span-8 min-w-0">
<div class="max-w-full">
<%= content_tag :div, class: ["flex items-center gap-2"] do %>
<%= content_tag :div, class: ["flex items-center gap-3 lg:gap-4"] do %>
<% if recurring_transaction.merchant.present? %>
<% if recurring_transaction.merchant.logo_url.present? %>
<%= image_tag Setting.transform_brand_fetch_url(recurring_transaction.merchant.logo_url),
class: "w-6 h-6 rounded-full",
class: "w-9 h-9 rounded-full",
loading: "lazy" %>
<% else %>
<%= render DS::FilledIcon.new(
variant: :text,
text: recurring_transaction.merchant.name,
size: "sm",
size: "lg",
rounded: true
) %>
<% end %>
@@ -21,27 +21,28 @@
<%= render DS::FilledIcon.new(
variant: :text,
text: recurring_transaction.name,
size: "sm",
size: "lg",
rounded: true
) %>
<% end %>
<div class="truncate">
<div class="space-y-0.5">
<div class="flex items-center gap-2 min-w-0">
<div class="flex items-center gap-1 min-w-0">
<div class="truncate flex-shrink">
<%= recurring_transaction.merchant.present? ? recurring_transaction.merchant.name : recurring_transaction.name %>
</div>
<div class="flex items-center gap-1 flex-shrink-0">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-tint-10 text-link">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-tint-10 text-link">
<%= t("recurring_transactions.projected") %>
</span>
</div>
</div>
<div class="text-secondary text-xs font-normal">
<%= t("recurring_transactions.expected_on", date: l(recurring_transaction.next_expected_date, format: :short)) %>
<%= days_left = (recurring_transaction.next_expected_date.to_date - Time.zone.today).to_i
days_left.zero? ? t("recurring_transactions.expected_today") : t("recurring_transactions.expected_in", count: days_left) %>
</div>
</div>
</div>
@@ -53,7 +54,7 @@
<span class="text-xs text-secondary"><%= t("recurring_transactions.recurring") %></span>
</div>
<div class="col-span-2 ml-auto text-right">
<div class="col-span-2 ml-auto text-right shrink-0">
<% display_amount = recurring_transaction.manual? && recurring_transaction.expected_amount_avg.present? ? recurring_transaction.expected_amount_avg : recurring_transaction.amount %>
<%= content_tag :p, format_money(-Money.new(display_amount, recurring_transaction.currency)), class: ["font-medium", display_amount.negative? ? "text-success" : "text-subdued"] %>
</div>