Budget page refactor: split into(All - Over Budget - On Track) (#1195)

* Optimize UI in budget

* update locales

* Optimize UI

* optimize suggested_daily_spending

* try over_budget and on_track

* update locale

* optimize

* add budgets_helper.rb

* fix

* hide no buget and no expense sub-catogory

* Optimize

* Optimize button on phone

* Fix Pipelock CI noise

* using section to render both overbudget and onTrack

* hide last ruler

* fix

* update test

---------

Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>
This commit is contained in:
Tao Chen
2026-04-14 02:03:55 +08:00
committed by GitHub
parent fdc2ce1feb
commit aacbb5ef3b
17 changed files with 626 additions and 63 deletions

View File

@@ -47,23 +47,66 @@
</div>
<%# Bottom Section: Categories full width %>
<div class="w-full bg-container rounded-xl shadow-border-xs p-4">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium">Categories</h2>
<% has_over_budget = budget_has_over_budget?(@budget) %>
<%= content_tag :div,
class: "w-full bg-container rounded-xl shadow-border-xs p-4",
data: (has_over_budget ? { controller: "budget-filter" } : {}) do %>
<div class="flex items-center mb-4 flex-nowrap">
<h2 class="text-lg font-medium shrink-0">
<%= t("budgets.show.categories.title") %>
</h2>
<% if @budget.initialized? %>
<%= render DS::Link.new(
text: "Edit",
variant: "secondary",
icon: "settings-2",
href: budget_budget_categories_path(@budget)
) %>
<% if has_over_budget %>
<div class="flex-1 min-w-0 px-1">
<div class="w-full flex justify-center">
<div class="max-w-full overflow-x-auto no-scrollbar">
<div class="inline-flex whitespace-nowrap bg-container-inset rounded-lg p-1 text-sm font-medium gap-0.5">
<button
data-action="click->budget-filter#setFilter"
data-budget-filter-filter-param="all"
data-budget-filter-target="tab"
class="px-3 py-1.5 rounded-md transition-colors bg-container text-primary shadow-sm">
<%= t("budgets.show.filter.all") %>
</button>
<button
data-action="click->budget-filter#setFilter"
data-budget-filter-filter-param="over_budget"
data-budget-filter-target="tab"
class="px-3 py-1.5 rounded-md transition-colors text-secondary">
<%= t("budgets.show.filter.over_budget") %>
</button>
<button
data-action="click->budget-filter#setFilter"
data-budget-filter-filter-param="on_track"
data-budget-filter-target="tab"
class="px-3 py-1.5 rounded-md transition-colors text-secondary">
<%= t("budgets.show.filter.on_track") %>
</button>
</div>
</div>
</div>
</div>
<% end %>
<div class="<%= has_over_budget ? "shrink-0 flex justify-end whitespace-nowrap" : "ml-auto" %>">
<% if @budget.initialized? %>
<%= render DS::Link.new(
text: t("budgets.show.categories.edit"),
variant: "secondary",
icon: "settings-2",
href: budget_budget_categories_path(@budget)
) %>
<% end %>
</div>
</div>
<div class="bg-container-inset rounded-xl p-1">
<%= render "budgets/budget_categories", budget: @budget %>
</div>
</div>
<% end %>
</div>
</div>