mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-07 14:35:23 +02:00
Balance sheet cache layer, non-blocking sync UI (#2356)
* Balance sheet cache layer with cache-busting * Update family cache timestamps during Sync * Less blocking sync loaders * Consolidate family data caching key logic * Fix turbo stream broadcasts * Remove dev delay * Add back account group sorting
This commit is contained in:
Zach Gollwitzer
GitHub
parent
dab693d74f
commit
10ce2c8e23
35 changed files with 529 additions and 466 deletions
|
|
@ -3,26 +3,24 @@
|
|||
<div class="space-y-4" id="balance-sheet">
|
||||
<% balance_sheet.classification_groups.each do |classification_group| %>
|
||||
<div class="bg-container shadow-border-xs rounded-xl space-y-4 p-4">
|
||||
<h2 class="text-lg font-medium inline-flex items-center gap-1.5">
|
||||
<span>
|
||||
<%= classification_group.display_name %>
|
||||
</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-lg font-medium inline-flex items-center gap-1.5">
|
||||
<span>
|
||||
<%= classification_group.name %>
|
||||
</span>
|
||||
|
||||
<% if classification_group.account_groups.any? %>
|
||||
<span class="text-secondary">·</span>
|
||||
|
||||
<% if classification_group.syncing? %>
|
||||
<div class="flex items-center w-8 h-4 ml-auto">
|
||||
<div class="bg-loader w-full h-full rounded-md"></div>
|
||||
</div>
|
||||
<% else %>
|
||||
<% if classification_group.account_groups.any? %>
|
||||
<span class="text-secondary">·</span>
|
||||
<span class="text-secondary font-medium text-lg"><%= classification_group.total_money.format(precision: 0) %></span>
|
||||
<% end %>
|
||||
</h2>
|
||||
|
||||
<% if classification_group.syncing? %>
|
||||
<%= render partial: "shared/sync_indicator", locals: { size: "sm" } %>
|
||||
<% end %>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<% if classification_group.account_groups.any? %>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex gap-1">
|
||||
<% classification_group.account_groups.each do |account_group| %>
|
||||
|
|
@ -30,19 +28,15 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if classification_group.syncing? %>
|
||||
<p class="text-xs text-subdued animate-pulse">Calculating latest balance data...</p>
|
||||
<% else %>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<% classification_group.account_groups.each do |account_group| %>
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<div class="h-2.5 w-2.5 rounded-full" style="background-color: <%= account_group.color %>;"></div>
|
||||
<p class="text-secondary"><%= account_group.name %></p>
|
||||
<p class="text-primary font-mono"><%= number_to_percentage(account_group.weight, precision: 0) %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<% classification_group.account_groups.each do |account_group| %>
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<div class="h-2.5 w-2.5 rounded-full" style="background-color: <%= account_group.color %>;"></div>
|
||||
<p class="text-secondary"><%= account_group.name %></p>
|
||||
<p class="text-primary font-mono"><%= number_to_percentage(account_group.weight, precision: 0) %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-surface rounded-xl p-1 space-y-1 overflow-x-auto">
|
||||
|
|
@ -71,27 +65,15 @@
|
|||
<p><%= account_group.name %></p>
|
||||
</div>
|
||||
|
||||
<% if account_group.syncing? %>
|
||||
<div class="flex items-center justify-between text-right gap-6">
|
||||
<div class="w-28 shrink-0 flex items-center justify-end gap-2">
|
||||
<div class="bg-loader rounded-md h-4 w-12"></div>
|
||||
</div>
|
||||
|
||||
<div class="w-40 shrink-0 flex justify-end">
|
||||
<div class="bg-loader rounded-md h-4 w-12"></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-right gap-6">
|
||||
<div class="w-28 shrink-0 flex items-center justify-end gap-2">
|
||||
<%= render "pages/dashboard/group_weight", weight: account_group.weight, color: account_group.color %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="flex items-center justify-between text-right gap-6">
|
||||
<div class="w-28 shrink-0 flex items-center justify-end gap-2">
|
||||
<%= render "pages/dashboard/group_weight", weight: account_group.weight, color: account_group.color %>
|
||||
</div>
|
||||
|
||||
<div class="w-40 shrink-0">
|
||||
<p><%= format_money(account_group.total_money) %></p>
|
||||
</div>
|
||||
<div class="w-40 shrink-0">
|
||||
<p><%= format_money(account_group.total_money) %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</summary>
|
||||
|
||||
<div>
|
||||
|
|
@ -103,32 +85,20 @@
|
|||
<%= link_to account.name, account_path(account) %>
|
||||
</div>
|
||||
|
||||
<% if account.syncing? %>
|
||||
<div class="ml-auto flex items-center text-right gap-6">
|
||||
<div class="w-28 shrink-0 flex items-center justify-end gap-2">
|
||||
<div class="bg-loader rounded-md h-4 w-12"></div>
|
||||
</div>
|
||||
|
||||
<div class="w-40 shrink-0 flex justify-end">
|
||||
<div class="bg-loader rounded-md h-4 w-12"></div>
|
||||
</div>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="ml-auto flex items-center text-right gap-6">
|
||||
<div class="w-28 shrink-0 flex items-center justify-end gap-2">
|
||||
<%
|
||||
<div class="ml-auto flex items-center text-right gap-6">
|
||||
<div class="w-28 shrink-0 flex items-center justify-end gap-2">
|
||||
<%
|
||||
# Calculate weight as percentage of classification total
|
||||
classification_total = classification_group.total_money.amount
|
||||
account_weight = classification_total.zero? ? 0 : account.converted_balance / classification_total * 100
|
||||
%>
|
||||
<%= render "pages/dashboard/group_weight", weight: account_weight, color: account_group.color %>
|
||||
</div>
|
||||
|
||||
<div class="w-40 shrink-0">
|
||||
<p><%= format_money(account.balance_money) %></p>
|
||||
</div>
|
||||
<%= render "pages/dashboard/group_weight", weight: account_weight, color: account_group.color %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="w-40 shrink-0">
|
||||
<p><%= format_money(account.balance_money) %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% if idx < account_group.accounts.size - 1 %>
|
||||
|
|
|
|||
|
|
@ -5,23 +5,22 @@
|
|||
<div class="flex justify-between gap-4 px-4">
|
||||
<div class="space-y-2">
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm text-secondary font-medium"><%= t(".title") %></p>
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-sm text-secondary font-medium"><%= t(".title") %></p>
|
||||
|
||||
<% if balance_sheet.syncing? %>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="bg-loader rounded-md h-7 w-20"></div>
|
||||
<div class="bg-loader rounded-md h-5 w-32"></div>
|
||||
</div>
|
||||
<% else %>
|
||||
<p class="text-primary -space-x-0.5 text-3xl font-medium">
|
||||
<%= series.trend.current.format %>
|
||||
</p>
|
||||
|
||||
<% if series.trend.nil? %>
|
||||
<p class="text-sm text-secondary"><%= t(".data_not_available") %></p>
|
||||
<% else %>
|
||||
<%= render partial: "shared/trend_change", locals: { trend: series.trend, comparison_label: period.comparison_label } %>
|
||||
<% if balance_sheet.syncing? %>
|
||||
<%= render partial: "shared/sync_indicator", locals: { size: "sm" } %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<p class="text-primary -space-x-0.5 text-3xl font-medium">
|
||||
<%= series.trend.current.format %>
|
||||
</p>
|
||||
|
||||
<% if series.trend.nil? %>
|
||||
<p class="text-sm text-secondary"><%= t(".data_not_available") %></p>
|
||||
<% else %>
|
||||
<%= render partial: "shared/trend_change", locals: { trend: series.trend, comparison_label: period.comparison_label } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,21 +34,16 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if balance_sheet.syncing? %>
|
||||
<div class="w-full flex items-center justify-center p-4 h-52">
|
||||
<div class="bg-loader rounded-md h-full w-full"></div>
|
||||
</div>
|
||||
<% else %>
|
||||
<% if series.any? %>
|
||||
<div
|
||||
<% if series.any? %>
|
||||
<div
|
||||
id="netWorthChart"
|
||||
class="w-full flex-1 min-h-52"
|
||||
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 %>
|
||||
<% 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue