2024-02-14 13:02:11 -05:00
|
|
|
<div class="space-y-4">
|
|
|
|
<div class="flex justify-between items-center">
|
|
|
|
<div class="flex items-center gap-3">
|
2024-04-25 15:32:45 +01:00
|
|
|
<%= image_tag account_logo_url(@account), class: "w-8 h-8" %>
|
2024-02-14 13:02:11 -05:00
|
|
|
<h2 class="font-medium text-xl"><%= @account.name %></h2>
|
|
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
2024-03-21 13:39:10 -04:00
|
|
|
<%= 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-900 hover:text-gray-500" %>
|
|
|
|
<% end %>
|
2024-06-11 18:47:38 -04:00
|
|
|
|
|
|
|
<%= 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">
|
2024-06-13 14:37:27 -04:00
|
|
|
<%= 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 %>
|
|
|
|
|
2024-06-11 18:47:38 -04:00
|
|
|
<%= link_to new_import_path(account_id: @account.id),
|
|
|
|
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 %>
|
2024-03-31 23:36:54 +02:00
|
|
|
</div>
|
2024-06-11 18:47:38 -04:00
|
|
|
<% end %>
|
2024-02-14 13:02:11 -05:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-07-12 13:47:39 -04:00
|
|
|
|
2024-07-10 11:22:59 -04:00
|
|
|
<% if @account.alert %>
|
2024-07-18 14:39:38 -04:00
|
|
|
<%= render "alert", message: @account.alert, help_path: help_article_path("troubleshooting") %>
|
2024-05-27 18:10:28 +02:00
|
|
|
<% end %>
|
2024-07-10 11:22:59 -04:00
|
|
|
|
2024-02-14 13:02:11 -05:00
|
|
|
<div class="bg-white shadow-xs rounded-xl border border-alpha-black-25 rounded-lg">
|
|
|
|
<div class="p-4 flex justify-between">
|
|
|
|
<div class="space-y-2">
|
2024-07-12 13:47:39 -04:00
|
|
|
<%= tag.p t(".total_value"), class: "text-sm font-medium text-gray-500" %>
|
|
|
|
<%= tag.p format_money(@account.balance_money, precision: 0), class: "text-gray-900 text-3xl font-medium" %>
|
|
|
|
<div>
|
|
|
|
<% if @balance_series.trend.direction.flat? %>
|
|
|
|
<%= tag.span t(".no_change"), class: "text-gray-500" %>
|
|
|
|
<% else %>
|
|
|
|
<%= tag.span format_money(@balance_series.trend.value), style: "color: #{@balance_series.trend.color}" %>
|
|
|
|
<%= tag.span "(#{@balance_series.trend.percent}%)", style: "color: #{@balance_series.trend.color}" %>
|
|
|
|
<% end %>
|
|
|
|
|
|
|
|
<%= tag.span period_label(@period), class: "text-gray-500" %>
|
|
|
|
</div>
|
2024-02-14 13:02:11 -05:00
|
|
|
</div>
|
2024-07-16 14:08:24 -04:00
|
|
|
<%= form_with url: account_path(@account), method: :get, data: { controller: "auto-submit-form" } do |form| %>
|
|
|
|
<%= period_select form: form, selected: @period.name %>
|
2024-04-03 17:32:27 -04:00
|
|
|
<% end %>
|
2024-02-14 13:02:11 -05:00
|
|
|
</div>
|
|
|
|
<div class="h-96 flex items-center justify-center text-2xl font-bold">
|
2024-03-06 09:56:59 -05:00
|
|
|
<%= render partial: "shared/line_chart", locals: { series: @balance_series } %>
|
2024-02-14 13:02:11 -05:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-06-21 16:23:28 -04:00
|
|
|
|
2024-07-12 13:47:39 -04:00
|
|
|
<% selected_tab = params[:tab] || "value" %>
|
2024-06-24 11:58:39 -04:00
|
|
|
|
2024-07-12 13:47:39 -04:00
|
|
|
<div class="flex gap-2 text-sm text-gray-900 font-medium mb-4">
|
|
|
|
<%= link_to t(".value"), account_path(tab: "value"), class: ["px-2 py-1.5 rounded-md border border-transparent", "bg-white shadow-xs border-alpha-black-50": selected_tab == "value"] %>
|
|
|
|
<%= link_to t(".transactions"), account_path(tab: "transactions"), class: ["px-2 py-1.5 rounded-md border border-transparent", "bg-white shadow-xs border-alpha-black-50": selected_tab == "transactions"] %>
|
2024-06-24 11:58:39 -04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="min-h-[800px]">
|
|
|
|
<% if selected_tab == "transactions" %>
|
2024-07-01 10:49:43 -04:00
|
|
|
<%= turbo_frame_tag dom_id(@account, "transactions"), src: transaction_account_entries_path(@account) do %>
|
|
|
|
<%= render "account/entries/loading" %>
|
2024-06-24 11:58:39 -04:00
|
|
|
<% end %>
|
|
|
|
<% else %>
|
2024-07-01 10:49:43 -04:00
|
|
|
<%= turbo_frame_tag dom_id(@account, "valuations"), src: valuation_account_entries_path(@account) do %>
|
|
|
|
<%= render "account/entries/loading" %>
|
2024-06-24 11:58:39 -04:00
|
|
|
<% end %>
|
|
|
|
<% end %>
|
2024-02-14 13:02:11 -05:00
|
|
|
</div>
|
|
|
|
</div>
|