1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-18 12:49:38 +02:00

Consolidate and simplify account pages (#2462)
Some checks are pending
Publish Docker image / ci (push) Waiting to run
Publish Docker image / Build docker image (push) Blocked by required conditions

* Remove ScrollFocusable

* Consolidate and simplify account pages

* Lint fixes

* Fix tab param initialization

* Remove stale files

* Remove stale route, make accountable routes clearer
This commit is contained in:
Zach Gollwitzer 2025-07-18 05:52:18 -04:00 committed by GitHub
parent 3eea5a9891
commit 8c97c9d31a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
41 changed files with 252 additions and 269 deletions

View file

@ -1,32 +1,28 @@
<%# locals: (account:, tooltip: nil, chart_view: nil, **args) %>
<% period = @period || Period.last_30_days %>
<% default_value_title = account.asset? ? t(".balance") : t(".owed") %>
<div id="<%= dom_id(account, :chart) %>" class="bg-container shadow-border-xs rounded-xl space-y-2">
<div class="flex justify-between flex-col-reverse lg:flex-row gap-2 px-4 pt-4 mb-2">
<div class="space-y-2 w-full">
<div class="flex items-center gap-1">
<%= tag.p account.investment? ? "Total value" : default_value_title, class: "text-sm font-medium text-secondary" %>
<%= tag.p title, class: "text-sm font-medium text-secondary" %>
<% if account.investment? %>
<%= render "investments/value_tooltip", balance: account.balance_money, holdings: account.balance_money - account.cash_balance_money, cash: account.cash_balance_money %>
<%= render "investments/value_tooltip", balance: account.balance_money, holdings: holdings_value_money, cash: account.cash_balance_money %>
<% end %>
</div>
<div class="flex flex-row gap-2 items-baseline">
<%= tag.p format_money(account.balance_money), class: "text-primary text-3xl font-medium truncate" %>
<% if account.currency != Current.family.currency %>
<%= tag.p format_money(account.balance_money.exchange_to(Current.family.currency, fallback_rate: 1)), class: "text-sm font-medium text-secondary" %>
<%= tag.p view_balance_money.format, class: "text-primary text-3xl font-medium truncate" %>
<% if converted_balance_money %>
<%= tag.p converted_balance_money.format, class: "text-sm font-medium text-secondary" %>
<% end %>
</div>
</div>
<%= form_with url: request.path, method: :get, data: { controller: "auto-submit-form" } do |form| %>
<%= form_with url: account_path(account), method: :get, data: { controller: "auto-submit-form" } do |form| %>
<div class="flex items-center gap-2">
<% if chart_view.present? %>
<% if account.investment? %>
<%= form.select :chart_view,
[["Total value", "balance"], ["Holdings", "holdings_balance"], ["Cash", "cash_balance"]],
{ selected: chart_view },
{ selected: view },
class: "bg-container border border-secondary rounded-lg text-sm pr-7 cursor-pointer text-primary focus:outline-hidden focus:ring-0",
data: { "auto-submit-form-target": "auto" } %>
<% end %>
@ -40,7 +36,23 @@
<% end %>
</div>
<%= turbo_frame_tag dom_id(account, :chart_details), src: chart_account_path(account, period: period.key, chart_view: chart_view) do %>
<%= render "accounts/chart_loader" %>
<%= turbo_frame_tag dom_id(@account, :chart_details) do %>
<div class="px-4">
<%= render partial: "shared/trend_change", locals: { trend: trend, comparison_label: period.comparison_label } %>
</div>
<div class="h-64 pb-4">
<% if series.any? %>
<div
id="lineChart"
class="w-full h-full"
data-controller="time-series-chart"
data-time-series-chart-data-value="<%= series.to_json %>"></div>
<% else %>
<div class="w-full h-full flex items-center justify-center">
<p class="text-secondary text-sm">No data available</p>
</div>
<% end %>
</div>
<% end %>
</div>

View file

@ -0,0 +1,72 @@
class UI::Account::Chart < ApplicationComponent
attr_reader :account
def initialize(account:, period: nil, view: nil)
@account = account
@period = period
@view = view
end
def period
@period ||= Period.last_30_days
end
def holdings_value_money
account.balance_money - account.cash_balance_money
end
def view_balance_money
case view
when "balance"
account.balance_money
when "holdings_balance"
holdings_value_money
when "cash_balance"
account.cash_balance_money
end
end
def title
case account.accountable_type
when "Investment", "Crypto"
case view
when "balance"
"Total account value"
when "holdings_balance"
"Holdings value"
when "cash_balance"
"Cash value"
end
when "Property", "Vehicle"
"Estimated #{account.accountable_type.humanize.downcase} value"
when "CreditCard", "OtherLiability"
"Debt balance"
when "Loan"
"Remaining principal balance"
else
"Balance"
end
end
def foreign_currency?
account.currency != account.family.currency
end
def converted_balance_money
return nil unless foreign_currency?
account.balance_money.exchange_to(account.family.currency, fallback_rate: 1)
end
def view
@view ||= "balance"
end
def series
account.balance_series(period: period, view: view)
end
def trend
series.trend
end
end

View file

@ -0,0 +1,29 @@
<%= turbo_stream_from account %>
<%= turbo_frame_tag dom_id(account, :container) do %>
<%= tag.div class: "space-y-4 pb-32" do %>
<%= render "accounts/show/header", account: account, title: title, subtitle: subtitle %>
<%= render UI::Account::Chart.new(account: account, period: chart_period, view: chart_view) %>
<div class="min-h-[800px]" data-testid="account-details">
<% if tabs.count > 1 %>
<%= render TabsComponent.new(active_tab: active_tab, url_param_key: "tab") do |tabs_container| %>
<% tabs_container.with_nav(classes: "max-w-fit") do |nav| %>
<% tabs.each do |tab| %>
<% nav.with_btn(id: tab, label: tab.to_s.humanize, classes: "px-6") %>
<% end %>
<% end %>
<% tabs.each do |tab| %>
<% tabs_container.with_panel(tab_id: tab) do %>
<%= render tab_partial_name(tab), account: account %>
<% end %>
<% end %>
<% end %>
<% else %>
<%= render tab_partial_name(tabs.first), account: account %>
<% end %>
</div>
<% end %>
<% end %>

View file

@ -0,0 +1,45 @@
class UI::AccountPage < ApplicationComponent
attr_reader :account, :chart_view, :chart_period
def initialize(account:, chart_view: nil, chart_period: nil, active_tab: nil)
@account = account
@chart_view = chart_view
@chart_period = chart_period
@active_tab = active_tab
end
def title
account.name
end
def subtitle
return nil unless account.property?
account.property.address
end
def active_tab
tabs.find { |tab| tab == @active_tab&.to_sym } || tabs.first
end
def tabs
case account.accountable_type
when "Investment"
[ :activity, :holdings ]
when "Property", "Vehicle", "Loan"
[ :activity, :overview ]
else
[ :activity ]
end
end
def tab_partial_name(tab)
case tab
when :activity
"accounts/show/activity"
when :holdings, :overview
# Accountable is responsible for implementing the partial in the correct folder
"#{account.accountable_type.downcase.pluralize}/tabs/#{tab}"
end
end
end

View file

@ -0,0 +1,4 @@
class ApplicationComponent < ViewComponent::Base
# These don't work as expected with helpers.turbo_frame_tag, etc., so we include them here
include Turbo::FramesHelper, Turbo::StreamsHelper
end

View file

@ -1,5 +1,5 @@
class AccountsController < ApplicationController
before_action :set_account, only: %i[sync chart sparkline toggle_active]
before_action :set_account, only: %i[sync sparkline toggle_active show destroy]
include Periodable
def index
@ -9,6 +9,15 @@ class AccountsController < ApplicationController
render layout: "settings"
end
def show
@chart_view = params[:chart_view] || "balance"
@tab = params[:tab]
@q = params.fetch(:q, {}).permit(:search)
entries = @account.entries.search(@q).reverse_chronological
@pagy, @entries = pagy(entries, limit: params[:per_page] || "10")
end
def sync
unless @account.syncing?
@account.sync_later
@ -17,11 +26,6 @@ class AccountsController < ApplicationController
redirect_to account_path(@account)
end
def chart
@chart_view = params[:chart_view] || "balance"
render layout: "application"
end
def sparkline
etag_key = @account.family.build_cache_key("#{@account.id}_sparkline", invalidate_on_data_updates: true)
@ -42,6 +46,15 @@ class AccountsController < ApplicationController
redirect_to accounts_path
end
def destroy
if @account.linked?
redirect_to account_path(@account), alert: "Cannot delete a linked account"
else
@account.destroy_later
redirect_to accounts_path, notice: "Account scheduled for deletion"
end
end
private
def family
Current.family

View file

@ -2,9 +2,9 @@ module AccountableResource
extend ActiveSupport::Concern
included do
include ScrollFocusable, Periodable
include Periodable
before_action :set_account, only: [ :show, :edit, :update, :destroy ]
before_action :set_account, only: [ :show, :edit, :update ]
before_action :set_link_options, only: :new
end
@ -27,9 +27,7 @@ module AccountableResource
@q = params.fetch(:q, {}).permit(:search)
entries = @account.entries.search(@q).reverse_chronological
set_focused_record(entries, params[:focused_record_id])
@pagy, @entries = pagy(entries, limit: params[:per_page] || "10", params: ->(params) { params.except(:focused_record_id) })
@pagy, @entries = pagy(entries, limit: params[:per_page] || "10")
end
def edit
@ -63,16 +61,7 @@ module AccountableResource
end
@account.lock_saved_attributes!
redirect_back_or_to @account, notice: t("accounts.update.success", type: accountable_type.name.underscore.humanize)
end
def destroy
if @account.linked?
redirect_to account_path(@account), alert: "Cannot delete a linked account"
else
@account.destroy_later
redirect_to accounts_path, notice: t("accounts.destroy.success", type: accountable_type.name.underscore.humanize)
end
redirect_back_or_to account_path(@account), notice: t("accounts.update.success", type: accountable_type.name.underscore.humanize)
end
private

View file

@ -1,21 +0,0 @@
module ScrollFocusable
extend ActiveSupport::Concern
def set_focused_record(record_scope, record_id, default_per_page: 10)
return unless record_id.present?
@focused_record = record_scope.find_by(id: record_id)
record_index = record_scope.pluck(:id).index(record_id)
return unless record_index
page_of_focused_record = (record_index / (params[:per_page]&.to_i || default_per_page)) + 1
if params[:page]&.to_i != page_of_focused_record
(
redirect_to(url_for(page: page_of_focused_record, focused_record_id: record_id))
)
end
end
end

View file

@ -1,5 +1,5 @@
class TransactionsController < ApplicationController
include ScrollFocusable, EntryableResource
include EntryableResource
before_action :store_params!, only: :index
@ -21,12 +21,7 @@ class TransactionsController < ApplicationController
:transfer_as_inflow, :transfer_as_outflow
)
@pagy, @transactions = pagy(base_scope, limit: per_page, params: ->(p) { p.except(:focused_record_id) })
# No performance penalty by default. Only runs queries if the record is set.
if params[:focused_record_id].present?
set_focused_record(base_scope, params[:focused_record_id], default_per_page: per_page)
end
@pagy, @transactions = pagy(base_scope, limit: per_page)
end
def clear_filter

View file

@ -1,21 +0,0 @@
import { Controller } from "@hotwired/stimulus";
// Connects to data-controller="focus-record"
export default class extends Controller {
static values = {
id: String,
};
connect() {
const element = document.getElementById(this.idValue);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
// Remove the focused_record_id parameter from URL
const url = new URL(window.location);
url.searchParams.delete("focused_record_id");
window.history.replaceState({}, "", url);
}
}
}

View file

@ -1,7 +0,0 @@
<div class="px-4">
<div class="bg-loader rounded-md h-5 w-32"></div>
</div>
<div class="p-4 h-60 flex items-center justify-center">
<div class="bg-loader rounded-md h-full w-full"></div>
</div>

View file

@ -1,22 +0,0 @@
<% series = @account.balance_series(period: @period, view: @chart_view) %>
<% trend = series.trend %>
<%= turbo_frame_tag dom_id(@account, :chart_details) do %>
<div class="px-4">
<%= render partial: "shared/trend_change", locals: { trend: trend, comparison_label: @period.comparison_label } %>
</div>
<div class="h-64 pb-4">
<% if series.any? %>
<div
id="lineChart"
class="w-full h-full"
data-controller="time-series-chart"
data-time-series-chart-data-value="<%= series.to_json %>"></div>
<% else %>
<div class="w-full h-full flex items-center justify-center">
<p class="text-secondary text-sm"><%= t(".data_not_available") %></p>
</div>
<% end %>
</div>
<% end %>

View file

@ -0,0 +1,6 @@
<%= render UI::AccountPage.new(
account: @account,
chart_view: @chart_view,
chart_period: @period,
active_tab: @tab
) %>

View file

@ -1,7 +1,7 @@
<%# locals: (account:) %>
<%= turbo_frame_tag dom_id(account, "entries") do %>
<div class="bg-container p-5 shadow-border-xs rounded-xl" data-controller="focus-record" data-focus-record-id-value="<%= @focused_record ? dom_id(@focused_record) : nil %>">
<div class="bg-container p-5 shadow-border-xs rounded-xl">
<div class="flex items-center justify-between mb-4" data-testid="activity-menu">
<%= tag.h2 t(".title"), class: "font-medium text-lg" %>
<% unless @account.plaid_account_id.present? %>

View file

@ -1,36 +1,30 @@
<%# locals: (account:, title: nil, subtitle: nil) %>
<%# locals: (account:, title:, subtitle: nil) %>
<header class="space-y-4">
<div class="flex items-center gap-4">
<% content = yield %>
<div class="flex items-center gap-3 overflow-hidden">
<%= render "accounts/logo", account: account %>
<% if content.present? %>
<%= content %>
<% else %>
<div class="flex items-center gap-3 overflow-hidden">
<%= render "accounts/logo", account: account %>
<div class="flex items-center gap-2">
<div class="truncate">
<div class="flex items-center gap-3">
<h2 class="font-medium text-xl truncate <%= "animate-pulse" if account.syncing? %>"><%= title || account.name %></h2>
<% if account.draft? %>
<%= render LinkComponent.new(
<div class="flex items-center gap-2">
<div class="truncate">
<div class="flex items-center gap-3">
<h2 class="font-medium text-xl truncate <%= "animate-pulse" if account.syncing? %>"><%= title %></h2>
<% if account.draft? %>
<%= render LinkComponent.new(
text: "Complete setup",
href: edit_account_path(account),
variant: :outline,
size: :sm,
frame: :modal
) %>
<% end %>
</div>
<% if subtitle.present? %>
<p class="text-sm text-secondary"><%= subtitle %></p>
<% end %>
</div>
<% if subtitle.present? %>
<p class="text-sm text-secondary"><%= subtitle %></p>
<% end %>
</div>
</div>
<% end %>
</div>
<div class="flex items-center gap-1 ml-auto">
<% if Rails.env.development? || self_hosted? %>

View file

@ -1,3 +0,0 @@
<div class="p-5">
<p class="text-secondary animate-pulse">Loading account...</p>
</div>

View file

@ -1,9 +0,0 @@
<%# locals: (account:, key:, is_selected:) %>
<%= link_to key.titleize,
account_path(account, tab: key),
data: { turbo: false },
class: [
"px-2 py-1.5 rounded-md border border-transparent",
"bg-container shadow-xs border-alpha-black-50": is_selected
] %>

View file

@ -1,17 +0,0 @@
<%# locals: (account:, tabs:) %>
<% active_tab = tabs.find { |tab| tab[:key] == params[:tab] } || tabs.first %>
<%= render TabsComponent.new(active_tab: active_tab[:key], url_param_key: "tab") do |tabs_container| %>
<% tabs_container.with_nav(classes: "max-w-fit") do |nav| %>
<% tabs.each do |tab| %>
<% nav.with_btn(id: tab[:key], label: tab[:key].humanize, classes: "px-6") %>
<% end %>
<% end %>
<% tabs.each do |tab| %>
<% tabs_container.with_panel(tab_id: tab[:key]) do %>
<%= tab[:contents] %>
<% end %>
<% end %>
<% end %>

View file

@ -1,27 +0,0 @@
<%# locals: (account:, header: nil, chart: nil, chart_view: nil, tabs: nil) %>
<%= turbo_stream_from account %>
<%= turbo_frame_tag dom_id(account, :container) do %>
<%= tag.div class: "space-y-4 pb-32" do %>
<% if header.present? %>
<%= header %>
<% else %>
<%= render "accounts/show/header", account: account %>
<% end %>
<% if chart.present? %>
<%= chart %>
<% else %>
<%= render "accounts/show/chart", account: account, chart_view: chart_view %>
<% end %>
<div class="min-h-[800px]" data-testid="account-details">
<% if tabs.present? %>
<%= tabs %>
<% else %>
<%= render "accounts/show/activity", account: account %>
<% end %>
</div>
<% end %>
<% end %>

View file

@ -107,7 +107,7 @@
<%= transaction.entry.date.strftime("%b %d") %>
</p>
<%= link_to transaction.entry.name,
transactions_path(focused_record_id: transaction.id),
transactions_path,
class: "text-primary hover:underline",
data: { turbo_frame: :_top } %>
</div>

View file

@ -1,6 +0,0 @@
<%= render "accounts/show/template",
account: @account,
tabs: render("accounts/show/tabs", account: @account, tabs: [
{ key: "activity", contents: render("accounts/show/activity", account: @account) },
{ key: "overview", contents: render("credit_cards/overview", account: @account) },
]) %>

View file

@ -1 +0,0 @@
<%= render "accounts/show/template", account: @account %>

View file

@ -1 +0,0 @@
<%= render "accounts/show/template", account: @account %>

View file

@ -1,7 +0,0 @@
<%= render "accounts/show/template",
account: @account,
chart_view: @chart_view,
tabs: render("accounts/show/tabs", account: @account, tabs: [
{ key: "activity", contents: render("accounts/show/activity", account: @account) },
{ key: "holdings", contents: render("investments/holdings_tab", account: @account) },
]) %>

View file

@ -1,6 +0,0 @@
<%= render "accounts/show/template",
account: @account,
tabs: render("accounts/show/tabs", account: @account, tabs: [
{ key: "activity", contents: render("accounts/show/activity", account: @account) },
{ key: "overview", contents: render("loans/overview", account: @account) },
]) %>

View file

@ -1 +0,0 @@
<%= render "accounts/show/template", account: @account %>

View file

@ -1 +0,0 @@
<%= render "accounts/show/template", account: @account %>

View file

@ -1,7 +0,0 @@
<%= render "accounts/show/template",
account: @account,
header: render("accounts/show/header", account: @account, subtitle: @account.property.address),
tabs: render("accounts/show/tabs", account: @account, tabs: [
{ key: "activity", contents: render("accounts/show/activity", account: @account) },
{ key: "overview", contents: render("properties/overview", account: @account) },
]) %>

View file

@ -4,10 +4,7 @@
<%= turbo_frame_tag dom_id(entry) do %>
<%= turbo_frame_tag dom_id(transaction) do %>
<div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4 lg:p-4
<%= @focused_record == entry || @focused_record == transaction ?
"border border-gray-900 rounded-lg" : "" %>
<%= entry.excluded ? "opacity-50 text-gray-400" : "" %>">
<div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4 lg:p-4 <%= entry.excluded ? "opacity-50 text-gray-400" : "" %>">
<div class="pr-4 lg:pr-10 flex items-center gap-3 lg:gap-4 col-span-8 <%= view_ctx == "global" ? "lg:col-span-8" : "lg:col-span-6" %>">
<%= check_box_tag dom_id(entry, "selection"),
@ -81,7 +78,7 @@
</span>
<% else %>
<%= link_to entry.account.name,
account_path(entry.account, tab: "transactions", focused_record_id: entry.id),
account_path(entry.account, tab: "transactions"),
data: { turbo_frame: "_top" },
class: "hover:underline" %>
<% end %>

View file

@ -1,4 +1,4 @@
<div class="space-y-4 pb-20 flex flex-col" data-controller="focus-record" data-focus-record-id-value="<%= @focused_record ? dom_id(@focused_record) : nil %>">
<div class="space-y-4 pb-20 flex flex-col">
<header class="flex justify-between items-center text-primary font-medium">
<h1 class="text-xl">Transactions</h1>
<div class="flex items-center gap-5">

View file

@ -1,6 +0,0 @@
<%= render "accounts/show/template",
account: @account,
tabs: render("accounts/show/tabs", account: @account, tabs: [
{ key: "activity", contents: render("accounts/show/activity", account: @account) },
{ key: "overview", contents: render("vehicles/overview", account: @account) },
]) %>

View file

@ -150,10 +150,9 @@ Rails.application.routes.draw do
end
end
resources :accounts, only: %i[index new], shallow: true do
resources :accounts, only: %i[index new show destroy], shallow: true do
member do
post :sync
get :chart
get :sparkline
patch :toggle_active
end
@ -161,17 +160,13 @@ Rails.application.routes.draw do
# Convenience routes for polymorphic paths
# Example: account_path(Account.new(accountable: Depository.new)) => /depositories/123
direct :account do |model, options|
route_for model.accountable_name, model, options
end
direct :edit_account do |model, options|
route_for "edit_#{model.accountable_name}", model, options
end
resources :depositories, except: :index
resources :investments, except: :index
resources :properties, except: :index do
resources :depositories, only: %i[new create edit update]
resources :investments, only: %i[new create edit update]
resources :properties, only: %i[new create edit update] do
member do
get :balances
patch :update_balances
@ -180,12 +175,12 @@ Rails.application.routes.draw do
patch :update_address
end
end
resources :vehicles, except: :index
resources :credit_cards, except: :index
resources :loans, except: :index
resources :cryptos, except: :index
resources :other_assets, except: :index
resources :other_liabilities, except: :index
resources :vehicles, only: %i[new create edit update]
resources :credit_cards, only: %i[new create edit update]
resources :loans, only: %i[new create edit update]
resources :cryptos, only: %i[new create edit update]
resources :other_assets, only: %i[new create edit update]
resources :other_liabilities, only: %i[new create edit update]
resources :securities, only: :index

View file

@ -11,18 +11,25 @@ class AccountsControllerTest < ActionDispatch::IntegrationTest
assert_response :success
end
test "should get show" do
get account_url(@account)
assert_response :success
end
test "should sync account" do
post sync_account_url(@account)
assert_redirected_to account_url(@account)
end
test "should get chart" do
get chart_account_url(@account)
assert_response :success
end
test "should get sparkline" do
get sparkline_account_url(@account)
assert_response :success
end
test "destroys account" do
delete account_url(@account)
assert_redirected_to accounts_path
assert_enqueued_with job: DestroyJob
assert_equal "Account scheduled for deletion", flash[:notice]
end
end

View file

@ -48,7 +48,7 @@ class CreditCardsControllerTest < ActionDispatch::IntegrationTest
test "updates with credit card details" do
assert_no_difference [ "Account.count", "CreditCard.count" ] do
patch account_path(@account), params: {
patch credit_card_path(@account), params: {
account: {
name: "Updated Credit Card",
balance: 2000,

View file

@ -46,7 +46,7 @@ class LoansControllerTest < ActionDispatch::IntegrationTest
test "updates with loan details" do
assert_no_difference [ "Account.count", "Loan.count" ] do
patch account_path(@account), params: {
patch loan_path(@account), params: {
account: {
name: "Updated Loan",
balance: 45000,

View file

@ -45,7 +45,7 @@ class VehiclesControllerTest < ActionDispatch::IntegrationTest
test "updates with vehicle details" do
assert_no_difference [ "Account.count", "Vehicle.count" ] do
patch account_path(@account), params: {
patch vehicle_path(@account), params: {
account: {
name: "Updated Vehicle",
balance: 28000,
@ -64,7 +64,7 @@ class VehiclesControllerTest < ActionDispatch::IntegrationTest
}
end
assert_redirected_to @account
assert_redirected_to account_path(@account)
assert_equal "Vehicle account updated", flash[:notice]
assert_enqueued_with(job: SyncJob)
end

View file

@ -14,16 +14,4 @@ module AccountableResourceInterfaceTest
get edit_account_url(@account)
assert_response :success
end
test "renders accountable page" do
get account_url(@account)
assert_response :success
end
test "destroys account" do
delete account_url(@account)
assert_redirected_to accounts_path
assert_enqueued_with job: DestroyJob
assert_equal "#{@account.accountable_name.underscore.humanize} account scheduled for deletion", flash[:notice]
end
end