mirror of
https://github.com/we-promise/sure.git
synced 2026-05-31 16:29:03 +00:00
f51e38f4fc
The Accounts grid duplicated the sidebar account list. Removing it gives the Goals section more breathing room and the page a tighter narrative: header → KPIs → Goals. Delete Savings::AccountCardComponent, Family#savings_subtype_accounts, the @savings_accounts / @account_goal_counts controller refs, and the related locale keys. Sidebar still shows the savings-subtype Depository accounts under "Cash" — no information is lost.
173 lines
8.6 KiB
Plaintext
173 lines
8.6 KiB
Plaintext
<div class="space-y-8 pb-6 lg:pb-12">
|
|
<header>
|
|
<h1 class="text-2xl font-semibold text-primary"><%= t(".title") %></h1>
|
|
<p class="text-sm text-secondary mt-1"><%= t(".subtitle") %></p>
|
|
</header>
|
|
|
|
<% if @counts["all"].zero? %>
|
|
<%= render "empty_state", linkable_account_count: @linkable_account_count %>
|
|
<% else %>
|
|
<%# KPI strip %>
|
|
<section class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<%# Velocity %>
|
|
<div class="bg-container rounded-xl shadow-border-xs px-5 py-5">
|
|
<p class="text-[11px] font-medium uppercase tracking-wide text-secondary"><%= t(".kpi.velocity_label") %></p>
|
|
<p class="text-3xl font-medium text-primary tabular-nums mt-2 privacy-sensitive">
|
|
<%= @kpi[:velocity_30d_sign] %><%= @kpi[:velocity_30d_money].format %>
|
|
</p>
|
|
<% if @kpi[:velocity_direction] == :flat %>
|
|
<p class="text-xs text-secondary mt-1 tabular-nums">
|
|
<% if @kpi[:velocity_prior_30d_money].zero? && @kpi[:velocity_30d_money].zero? %>
|
|
<%= t(".kpi.velocity_delta_zero_base") %>
|
|
<% else %>
|
|
<%= t(".kpi.velocity_delta_flat") %>
|
|
<% end %>
|
|
</p>
|
|
<% elsif @kpi[:velocity_delta_percent].nil? %>
|
|
<p class="text-xs text-success mt-1 tabular-nums"><%= t(".kpi.velocity_delta_zero_base") %></p>
|
|
<% else %>
|
|
<p class="text-xs <%= @kpi[:velocity_direction] == :up ? "text-success" : "text-destructive" %> mt-1 tabular-nums">
|
|
<%= t(".kpi.velocity_delta_#{@kpi[:velocity_direction]}", percent: @kpi[:velocity_delta_percent].abs) %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%# Needs this month %>
|
|
<div class="bg-container rounded-xl shadow-border-xs px-5 py-5">
|
|
<p class="text-[11px] font-medium uppercase tracking-wide text-secondary"><%= t(".kpi.needs_this_month_label") %></p>
|
|
<p class="text-3xl font-medium text-primary tabular-nums mt-2 privacy-sensitive"><%= @kpi[:needs_this_month_money].format %></p>
|
|
<p class="text-xs text-secondary mt-1">
|
|
<% if @kpi[:behind_count].zero? %>
|
|
<%= t(".kpi.needs_this_month_zero_sub") %>
|
|
<% else %>
|
|
<%= t(".kpi.needs_this_month_sub", count: @kpi[:behind_count]) %>
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
|
|
<%# On-track count %>
|
|
<div class="bg-container rounded-xl shadow-border-xs px-5 py-5">
|
|
<p class="text-[11px] font-medium uppercase tracking-wide text-secondary"><%= t(".kpi.on_track_label") %></p>
|
|
<p class="text-3xl font-medium text-primary tabular-nums mt-2">
|
|
<%= t(".kpi.on_track_value", on_track: @kpi[:on_track_count], total: @kpi[:active_total]) %>
|
|
</p>
|
|
<p class="text-xs text-secondary mt-1">
|
|
<%
|
|
parts = []
|
|
parts << t(".kpi.on_track_sub_parts.behind", count: @kpi[:behind_count]) if @kpi[:behind_count].positive?
|
|
parts << t(".kpi.on_track_sub_parts.no_date", count: @kpi[:no_date_count]) if @kpi[:no_date_count].positive?
|
|
parts << t(".kpi.on_track_sub_parts.paused", count: @kpi[:paused_count]) if @kpi[:paused_count].positive?
|
|
%>
|
|
<% if parts.any? %>
|
|
<%= parts.join(" · ") %>
|
|
<% else %>
|
|
<%= t(".kpi.on_track_sub_all_good") %>
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<%# Goals section %>
|
|
<section data-controller="savings-goals-filter"
|
|
data-savings-goals-filter-empty-query-value="<%= t(".search.empty_with_query", query: "__QUERY__") %>"
|
|
data-savings-goals-filter-empty-filter-value="<%= t(".search.empty_with_filter") %>"
|
|
data-savings-goals-filter-empty-both-value="<%= t(".search.empty_with_both", query: "__QUERY__") %>"
|
|
data-savings-goals-filter-empty-default-value="<%= t(".search.empty") %>">
|
|
<div class="flex items-start justify-between mb-3 gap-3">
|
|
<div>
|
|
<h2 class="text-base font-semibold text-primary"><%= t(".goals_section.heading") %></h2>
|
|
<p class="text-sm text-secondary"><%= t(".goals_section.subtitle") %></p>
|
|
</div>
|
|
<% if @linkable_account_count > 0 %>
|
|
<%= render DS::Link.new(
|
|
text: t(".new_goal"),
|
|
variant: "primary",
|
|
href: new_savings_goal_path,
|
|
icon: "plus",
|
|
frame: :modal
|
|
) %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% if @show_search %>
|
|
<div class="flex flex-wrap items-center gap-2.5 mb-4">
|
|
<div class="relative flex-1 min-w-[200px]">
|
|
<input type="search"
|
|
autocomplete="off"
|
|
data-savings-goals-filter-target="input"
|
|
data-action="input->savings-goals-filter#filter"
|
|
aria-label="<%= t(".search.aria_label") %>"
|
|
placeholder="<%= t(".search.placeholder") %>"
|
|
class="block w-full border border-secondary rounded-md py-2.5 pl-10 pr-3 bg-container focus:ring-gray-500 sm:text-sm">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
|
<%= icon "search", class: "text-secondary" %>
|
|
</div>
|
|
</div>
|
|
<div class="inline-flex items-center gap-1 p-1 bg-surface-inset rounded-xl">
|
|
<% %w[all on_track behind no_target_date paused].each do |status| %>
|
|
<% active = status == "all" %>
|
|
<button type="button"
|
|
data-savings-goals-filter-target="chip"
|
|
data-action="click->savings-goals-filter#selectChip"
|
|
data-status="<%= status %>"
|
|
aria-pressed="<%= active %>"
|
|
class="px-2.5 py-1 text-xs font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-100 <%= active ? "bg-container shadow-border-xs text-primary" : "text-secondary" %>">
|
|
<%= t(".chips.#{status}") %>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if @active_goals.any? %>
|
|
<div class="flex items-center gap-1.5 mb-4 text-[11px] font-medium uppercase tracking-wide text-secondary">
|
|
<span><%= t(".ongoing_section.heading") %></span>
|
|
<span class="text-subdued">·</span>
|
|
<span class="tabular-nums" data-savings-goals-filter-target="count"><%= @active_goals.size %></span>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5" data-savings-goals-filter-target="grid">
|
|
<% @active_goals.each do |goal| %>
|
|
<%= render Savings::GoalCardComponent.new(goal: goal) %>
|
|
<% end %>
|
|
</div>
|
|
<div class="hidden bg-container rounded-xl shadow-border-xs py-10 text-center" data-savings-goals-filter-target="empty">
|
|
<p class="text-sm text-secondary" data-savings-goals-filter-target="emptyCopy"><%= t(".search.empty") %></p>
|
|
<div class="mt-3 flex items-center justify-center gap-2">
|
|
<button type="button"
|
|
class="hidden text-xs font-medium text-secondary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-100"
|
|
data-savings-goals-filter-target="emptyClearSearch"
|
|
data-action="click->savings-goals-filter#clearSearch">
|
|
<%= t(".search.clear_search") %>
|
|
</button>
|
|
<button type="button"
|
|
class="hidden text-xs font-medium text-secondary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-100"
|
|
data-savings-goals-filter-target="emptyClearFilter"
|
|
data-action="click->savings-goals-filter#clearFilter">
|
|
<%= t(".search.show_all") %>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class="bg-container rounded-xl shadow-border-xs py-12 text-center">
|
|
<p class="text-sm text-secondary"><%= t(".empty_filtered") %></p>
|
|
</div>
|
|
<% end %>
|
|
</section>
|
|
|
|
<% if @completed_goals.any? %>
|
|
<section>
|
|
<div class="flex items-center gap-1.5 mb-4 text-[11px] font-medium uppercase tracking-wide text-secondary">
|
|
<span><%= t(".completed_section.heading") %></span>
|
|
<span class="text-subdued">·</span>
|
|
<span class="tabular-nums"><%= @completed_goals.size %></span>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
|
|
<% @completed_goals.each do |goal| %>
|
|
<%= render Savings::GoalCardComponent.new(goal: goal) %>
|
|
<% end %>
|
|
</div>
|
|
</section>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|