mirror of
https://github.com/we-promise/sure.git
synced 2026-05-12 15:15:01 +00:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user