Files
sure/app/views/budgets/show.html.erb
Zach Gollwitzer 90a9546f32 Pre-launch design sync with Figma spec (#2154)
* Add lookbook + viewcomponent, organize design system file

* Build menu component

* Button updates

* More button fixes

* Replace all menus with new ViewComponent

* Checkpoint: fix tests, all buttons and menus converted

* Split into Link and Button components for clarity

* Button cleanup

* Simplify custom confirmation configuration in views

* Finalize button, link component API

* Add toggle field to custom form builder + Component

* Basic tabs component

* Custom tabs, convert all menu / tab instances in app

* Gem updates

* Centralized icon helper

* Update all icon usage to central helper

* Lint fixes

* Centralize all disclosure instances

* Dialog replacements

* Consolidation of all dialog styles

* Test fixes

* Fix app layout issues, move to component with slots

* Layout simplification

* Flakey test fix

* Fix dashboard mobile issues

* Finalize homepage

* Lint fixes

* Fix shadows and borders in dark mode

* Fix tests

* Remove stale class

* Fix filled icon logic

* Move transparent? to public interface
2025-04-30 18:14:22 -04:00

72 lines
2.7 KiB
Plaintext

<div class="pb-12">
<%= render "budgets/budget_header",
budget: @budget,
previous_budget: @previous_budget,
next_budget: @next_budget,
latest_budget: @latest_budget %>
<div class="flex flex-col items-start gap-4 md:flex-row">
<div class="w-full md:max-w-[300px] space-y-4">
<div class="h-[300px] bg-container rounded-xl shadow-border-xs p-8">
<% if @budget.available_to_allocate.negative? %>
<%= render "budgets/over_allocation_warning", budget: @budget %>
<% else %>
<%= render "budgets/budget_donut", budget: @budget %>
<% end %>
</div>
<div>
<% if @budget.initialized? && @budget.available_to_allocate.positive? %>
<div class="flex gap-2 mb-2 rounded-lg bg-alpha-black-25 p-1">
<% base_classes = "rounded-md px-2 py-1 flex-1 text-center" %>
<% selected_tab = params[:tab].presence || "budgeted" %>
<%= link_to "Budgeted",
budget_path(@budget, tab: "budgeted"),
class: class_names(
base_classes,
"bg-container shadow-xs text-primary": selected_tab == "budgeted",
"text-secondary": selected_tab != "budgeted"
) %>
<%= link_to "Actual",
budget_path(@budget, tab: "actuals"),
class: class_names(
base_classes,
"bg-container shadow-xs text-primary": selected_tab == "actuals",
"text-secondary": selected_tab != "actuals"
) %>
</div>
<div class="bg-container rounded-xl shadow-border-xs">
<%= render selected_tab == "budgeted" ? "budgets/budgeted_summary" : "budgets/actuals_summary", budget: @budget %>
</div>
<% else %>
<div class="bg-container rounded-xl shadow-border-xs">
<%= render "budgets/actuals_summary", budget: @budget %>
</div>
<% end %>
</div>
</div>
<div class="w-full grow 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>
<% if @budget.initialized? %>
<%= render LinkComponent.new(
text: "Edit",
variant: "secondary",
icon: "settings-2",
href: budget_budget_categories_path(@budget)
) %>
<% end %>
</div>
<div class="bg-container-inset rounded-xl p-1">
<%= render "budgets/budget_categories", budget: @budget %>
</div>
</div>
</div>
</div>