mirror of
https://github.com/we-promise/sure.git
synced 2026-04-17 19:14:11 +00:00
be21d2b4fd
This can be updated to redirect/pull from third party sources in future, with the option of always falling back to the placeholder if there are any failures.
77 lines
4.0 KiB
Plaintext
77 lines
4.0 KiB
Plaintext
<%= turbo_stream_from @account %>
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<%= image_tag account_logo_url(@account), class: "w-8 h-8" %>
|
|
<h2 class="font-medium text-xl"><%= @account.name %></h2>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<%= 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 %>
|
|
<div class="relative cursor-not-allowed">
|
|
<div class="flex items-center gap-2 px-3 py-2">
|
|
<span class="text-gray-900"><%= @account.balance_money.currency.iso_code %> <%= @account.balance_money.currency.symbol %></span>
|
|
<%= lucide_icon("chevron-down", class: "w-5 h-5 text-gray-500") %>
|
|
</div>
|
|
</div>
|
|
<div class="relative cursor-pointer" data-controller="menu">
|
|
<button data-menu-target="button" class="flex hover:bg-gray-100 p-2 rounded">
|
|
<%= lucide_icon("more-horizontal", class: "w-5 h-5 text-gray-500") %>
|
|
</button>
|
|
<div data-menu-target="content" class="absolute z-10 top-10 right-0 border border-alpha-black-25 bg-white rounded-lg shadow-xs hidden">
|
|
<div class="w-48 px-3 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
|
|
<%= button_to account_path(@account),
|
|
method: :delete,
|
|
class: "block w-full py-2 text-red-600 hover:text-red-800 flex items-center",
|
|
data: {
|
|
turbo_confirm: {
|
|
title: t("custom_turbo_confirm.account_destroy.title"),
|
|
body: t("custom_turbo_confirm.account_destroy.body_html"),
|
|
accept: t("custom_turbo_confirm.account_destroy.accept", name: @account.name)
|
|
}
|
|
} do %>
|
|
<%= lucide_icon("trash-2", class: "w-5 h-5 mr-2") %> Delete account
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%= turbo_frame_tag "sync_message" do %>
|
|
<%= render partial: "accounts/sync_message", locals: { is_syncing: @account.syncing? } %>
|
|
<% end %>
|
|
<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">
|
|
<%= render partial: "shared/value_heading", locals: {
|
|
label: "Total Value",
|
|
period: @period,
|
|
value: @account.balance_money,
|
|
trend: @balance_series.trend
|
|
} %>
|
|
</div>
|
|
<%= form_with url: account_path(@account), method: :get, class: "flex items-center gap-4", data: { controller: "auto-submit-form" } do %>
|
|
<%= render partial: "shared/period_select", locals: { value: @period.name } %>
|
|
<% end %>
|
|
</div>
|
|
<div class="h-96 flex items-center justify-center text-2xl font-bold">
|
|
<%= render partial: "shared/line_chart", locals: { series: @balance_series } %>
|
|
</div>
|
|
</div>
|
|
<div data-controller="tabs" data-tabs-active-class="bg-gray-100" data-tabs-default-tab-value="account-history-tab">
|
|
<div class="flex gap-1 text-sm text-gray-900 font-medium mb-4">
|
|
<button data-id="account-history-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">History</button>
|
|
<button data-id="account-transactions-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">Transactions</button>
|
|
</div>
|
|
<div class="min-h-[800px]">
|
|
<div data-tabs-target="tab" id="account-history-tab">
|
|
<%= render partial: "accounts/account_history", locals: { account: @account, valuations: @valuation_series } %>
|
|
</div>
|
|
<div data-tabs-target="tab" id="account-transactions-tab" class="hidden">
|
|
<%= render partial: "accounts/transactions", locals: { account: @account, transactions: @account.transactions.order(date: :desc) } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|