mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-08 23:15:24 +02:00
Rework account views and addition flow (#1324)
* Move accountable partials * Split accountables into separate view partials * Fix test * Add form to permitted partials * Fix failing system tests * Update new account modal views * New sync algorithm implementation * Update account system test assertions to match new behavior * Fix off by 1 date error * Revert new balance sync algorithm * Add missing account overviews
This commit is contained in:
parent
c7c281073f
commit
e8e100e1d8
88 changed files with 763 additions and 526 deletions
|
@ -1,56 +1,25 @@
|
|||
<%= turbo_stream_from @account %>
|
||||
|
||||
<%= tag.div id: dom_id(@account), class: "space-y-4" do %>
|
||||
<header class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-3">
|
||||
<%= image_tag account_logo_url(@account), class: "w-8 h-8" %>
|
||||
<div>
|
||||
<h2 class="font-medium text-xl"><%= @account.name %></h2>
|
||||
<% series = @account.series(period: @period) %>
|
||||
<% trend = series.trend %>
|
||||
|
||||
<% if @account.property? && @account.property.address&.line1.present? %>
|
||||
<p class="text-gray-500"><%= @account.property.address %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<%= tag.div id: dom_id(@account), class: "space-y-4" do %>
|
||||
<header class="flex items-center gap-4">
|
||||
<%= render permitted_accountable_partial(@account, "header"), account: @account %>
|
||||
|
||||
<div class="flex items-center gap-3 ml-auto">
|
||||
<%= button_to sync_account_path(@account), method: :post, class: "flex items-center gap-2", title: "Sync Account" do %>
|
||||
<%= lucide_icon "refresh-cw", class: "w-4 h-4 text-gray-500 hover:text-gray-400" %>
|
||||
<% end %>
|
||||
|
||||
<%= contextual_menu do %>
|
||||
<div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
|
||||
<%= link_to edit_account_path(@account),
|
||||
data: { turbo_frame: :modal },
|
||||
class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg" do %>
|
||||
<%= lucide_icon "pencil-line", class: "w-5 h-5 text-gray-500" %>
|
||||
|
||||
<span><%= t(".edit") %></span>
|
||||
<% end %>
|
||||
|
||||
<%= link_to new_import_path,
|
||||
class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg" do %>
|
||||
<%= lucide_icon "download", class: "w-5 h-5 text-gray-500" %>
|
||||
|
||||
<span><%= t(".import") %></span>
|
||||
<% end %>
|
||||
|
||||
<%= button_to account_path(@account),
|
||||
method: :delete,
|
||||
class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
|
||||
data: {
|
||||
turbo_confirm: {
|
||||
title: t(".confirm_title"),
|
||||
body: t(".confirm_body_html"),
|
||||
accept: t(".confirm_accept", name: @account.name)
|
||||
}
|
||||
} do %>
|
||||
<%= lucide_icon("trash-2", class: "w-5 h-5 mr-2") %> Delete account
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= render "menu", account: @account %>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<% if @account.entries.empty? && @account.depository? %>
|
||||
<%= render "accounts/new_account_setup_bar", account: @account %>
|
||||
<% end %>
|
||||
|
||||
<% if @account.highest_priority_issue %>
|
||||
<%= render partial: "issues/issue", locals: { issue: @account.highest_priority_issue } %>
|
||||
<% end %>
|
||||
|
@ -66,47 +35,35 @@
|
|||
<%= tag.p t(".total_owed"), class: "text-sm font-medium text-gray-500" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= render "tooltip", account: @account if @account.investment? %>
|
||||
|
||||
<%= render permitted_accountable_partial(@account, "tooltip"), account: @account if @account.investment? %>
|
||||
</div>
|
||||
|
||||
<%= tag.p format_money(@account.value), class: "text-gray-900 text-3xl font-medium" %>
|
||||
|
||||
<div>
|
||||
<% if @series.trend.direction.flat? %>
|
||||
<% if trend.direction.flat? %>
|
||||
<%= tag.span t(".no_change"), class: "text-gray-500" %>
|
||||
<% else %>
|
||||
<%= tag.span format_money(@series.trend.value), style: "color: #{@trend.color}" %>
|
||||
<%= tag.span "(#{@trend.percent}%)", style: "color: #{@trend.color}" %>
|
||||
<%= tag.span format_money(trend.value), style: "color: #{trend.color}" %>
|
||||
<%= tag.span "(#{trend.percent}%)", style: "color: #{trend.color}" %>
|
||||
<% end %>
|
||||
|
||||
<%= tag.span period_label(@period), class: "text-gray-500" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= form_with url: account_path(@account), method: :get, data: { controller: "auto-submit-form" } do |form| %>
|
||||
<%= period_select form: form, selected: @period.name %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="h-96 flex items-center justify-center text-2xl font-bold">
|
||||
<%= render partial: "shared/line_chart", locals: { series: @series } %>
|
||||
<%= render "shared/line_chart", series: @account.series(period: @period) %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% selected_tab = selected_account_tab(@account) %>
|
||||
<% selected_tab_key = selected_tab[:key] %>
|
||||
<% selected_tab_partial_path = selected_tab[:partial_path] %>
|
||||
<% selected_tab_route = selected_tab[:route] %>
|
||||
|
||||
<div class="flex gap-2 text-sm text-gray-900 font-medium mb-4">
|
||||
<% account_tabs(@account).each do |tab| %>
|
||||
<%= link_to tab[:label], tab[:path], class: ["px-2 py-1.5 rounded-md border border-transparent", "bg-white shadow-xs border-alpha-black-50": selected_tab_key == tab[:key]] %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="min-h-[800px]">
|
||||
<% if selected_tab_route.present? %>
|
||||
<%= turbo_frame_tag dom_id(@account, selected_tab_key), src: selected_tab_route do %>
|
||||
<%= render "account/entries/loading" %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= render selected_tab_partial_path, account: @account %>
|
||||
<% end %>
|
||||
<%= render permitted_accountable_partial(@account, "tabs"), account: @account, selected_tab: params[:tab] %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue