mirror of
https://github.com/we-promise/sure.git
synced 2026-08-05 16:42:18 +00:00
7ebe5154cb
- Dashboard balance-sheet weight cell wrapped its percentage ("64 %" -> two
lines) for 2-digit values: the account-row cell is w-14 (56px), too narrow
for the 5-bar gauge plus a spaced locale percentage (ca/es format "NN %").
Widen the account-row weight cell to w-20 to match the header/group columns
(also fixing the column misalignment) and add whitespace-nowrap to the value.
- Bump DS::Pill :md vertical padding py-0.5 -> py-1 so category pills (and the
other :md pills) are not vertically cramped.
138 lines
6.1 KiB
Plaintext
138 lines
6.1 KiB
Plaintext
<%# locals: (balance_sheet:, **args) %>
|
|
|
|
<div class="space-y-6" id="balance-sheet">
|
|
<% balance_sheet.classification_groups.each do |classification_group| %>
|
|
<div class="space-y-4 px-4">
|
|
<div class="flex items-center gap-2">
|
|
<h2 class="text-lg font-medium inline-flex items-center gap-1.5">
|
|
<span class="<%= "animate-pulse" if classification_group.syncing? %>">
|
|
<%= classification_group.name %>
|
|
</span>
|
|
|
|
<% if classification_group.account_groups.any? %>
|
|
<span class="text-secondary">·</span>
|
|
<span class="text-secondary font-medium text-lg privacy-sensitive"><%= classification_group.total_money.format(precision: 0) %></span>
|
|
<% 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| %>
|
|
<div class="h-1.5 rounded-sm" style="width: <%= account_group.weight %>%; background-color: <%= account_group.color %>;"></div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<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 privacy-sensitive"><%= number_to_percentage(account_group.weight, precision: 0) %></p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-container-inset rounded-xl p-1 space-y-1 overflow-x-auto">
|
|
<div class="px-4 py-2 flex items-center uppercase text-xs font-medium text-secondary">
|
|
<div class="w-40 shrink-0"><%= t(".name") %></div>
|
|
<div class="ml-auto text-right flex items-center gap-2">
|
|
<div class="w-20 shrink-0">
|
|
<p><%= t(".weight") %></p>
|
|
</div>
|
|
<div class="w-24 shrink-0">
|
|
<p><%= t(".value") %></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg bg-container font-medium text-sm min-w-fit">
|
|
<% classification_group.account_groups.each_with_index do |account_group, idx| %>
|
|
<details class="group open:bg-container
|
|
<%= idx == 0 ? "rounded-t-lg" : "" %>
|
|
<%= idx == classification_group.account_groups.size - 1 ? "rounded-b-lg" : "" %>
|
|
">
|
|
<summary class="cursor-pointer p-4 group-open:bg-container rounded-lg flex items-center justify-between">
|
|
<div class="w-40 shrink-0 flex items-center gap-1">
|
|
<%= icon("chevron-right", class: "group-open:rotate-90") %>
|
|
|
|
<p><%= account_group.name %></p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between text-right gap-2">
|
|
<div class="w-20 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-24 shrink-0">
|
|
<p class="privacy-sensitive"><%= format_money(account_group.total_money, precision: 0) %></p>
|
|
</div>
|
|
</div>
|
|
</summary>
|
|
|
|
<div>
|
|
<% account_group.accounts.each_with_index do |account, idx| %>
|
|
<div class="pl-7 pr-4 py-3 flex items-center justify-between text-sm font-medium">
|
|
<div class="flex items-center gap-2">
|
|
<%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
|
|
|
|
<%= link_to account.name, account_path(account) %>
|
|
</div>
|
|
|
|
<div class="ml-auto flex items-center text-right gap-2">
|
|
<div class="w-20 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-24 shrink-0">
|
|
<p class="privacy-sensitive"><%= format_money(account.balance_money, precision: 0) %></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<% if idx < account_group.accounts.size - 1 %>
|
|
<%= render "shared/ruler", classes: "ml-21 mr-4" %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</details>
|
|
<% unless idx == classification_group.account_groups.size - 1 %>
|
|
<%= render "shared/ruler", classes: "mx-4 group-ruler" %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<% else %>
|
|
<div class="py-10 flex flex-col items-center">
|
|
<%= render DS::FilledIcon.new(
|
|
variant: :container,
|
|
icon: classification_group.icon,
|
|
) %>
|
|
|
|
<p class="text-primary text-sm font-medium mb-1 mt-4">
|
|
<%= t("pages.dashboard.balance_sheet.no_#{classification_group.classification}") %>
|
|
</p>
|
|
<p class="text-secondary text-sm text-center">
|
|
<%= t("pages.dashboard.balance_sheet.add_#{classification_group.classification}_accounts") %>
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%# Custom style for hiding ruler when details are open %>
|
|
<style>
|
|
details[open] + .group-ruler {
|
|
display: none;
|
|
}
|
|
</style>
|