Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-05 13:35:21 +02:00
Code Issues Releases Activity Actions

Add empty states to account summary page (#1265)

Browse source 
* Add empty states to account summary page

* Liability icon fix

* Normalize translations

* Clean up modal styles

* Account color updates

* Lint fixes

* Test fix
This commit is contained in:
Zach Gollwitzer 2024-10-08 13:00:35 -04:00 • committed by GitHub
parent ffd54e4065
commit 2f6479f058
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 93 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

100
app/views/accounts/summary.html.erb
View file

@ -2,75 +2,89 @@
<%= render "header" %>
<% if @accounts.empty? %>
<%= render "shared/no_account_empty_state" %>
<% else %>
<div class="bg-white rounded-xl shadow-xs border border-alpha-black-100 flex divide-x divide-gray-200">
<div class="w-1/2 p-4 flex items-stretch justify-between">
<div class="space-y-2 grow">
<%= render partial: "shared/value_heading", locals: {
<div class="bg-white rounded-xl shadow-xs border border-alpha-black-100 flex divide-x divide-gray-200">
<div class="w-1/2 p-4 flex items-stretch justify-between">
<div class="space-y-2 grow">
<%= render partial: "shared/value_heading", locals: {
label: "Assets",
period: @period,
value: Current.family.assets,
trend: @asset_series.trend
} %>
</div>
<div
</div>
<div
id="assetsChart"
class="h-full w-2/5"
data-controller="time-series-chart"
data-time-series-chart-data-value="<%= @asset_series.to_json %>"
data-time-series-chart-use-labels-value="false"></div>
</div>
<div class="w-1/2 p-4 flex items-stretch justify-between">
<div class="space-y-2 grow">
<%= render partial: "shared/value_heading", locals: {
</div>
<div class="w-1/2 p-4 flex items-stretch justify-between">
<div class="space-y-2 grow">
<%= render partial: "shared/value_heading", locals: {
label: "Liabilities",
period: @period,
size: "md",
value: Current.family.liabilities,
trend: @liability_series.trend
} %>
</div>
<div
</div>
<div
id="liabilitiesChart"
class="h-full w-2/5"
data-controller="time-series-chart"
data-time-series-chart-data-value="<%= @liability_series.to_json %>"
data-time-series-chart-use-labels-value="false"></div>
</div>
</div>
<div class="p-4 bg-white rounded-xl shadow-xs border border-alpha-black-25 space-y-4">
<div class="flex justify-between items-center mb-5">
<h2 class="text-lg font-medium text-gray-900">Assets</h2>
<div class="flex items-center gap-2">
<%= link_to new_account_path, class: "btn btn--secondary flex items-center gap-1", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-500") %>
<p><%= t(".new") %></p>
<% end %>
<%= form_with url: summary_accounts_path, method: :get, data: { controller: "auto-submit-form" } do |form| %>
<%= period_select form: form, selected: @period.name %>
<% end %>
</div>
</div>
<div class="p-4 bg-white rounded-xl shadow-xs border border-alpha-black-25 space-y-4">
<div class="flex justify-between items-center mb-5">
<h2 class="text-lg font-medium text-gray-900">Assets</h2>
<div class="flex items-center gap-2">
<%= link_to new_account_path, class: "flex items-center gap-1 p-2 pr-3 text-gray-900 text-sm font-medium bg-gray-50 rounded-lg hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-500") %>
<p><%= t(".new") %></p>
<% end %>
<%= form_with url: summary_accounts_path, method: :get, data: { controller: "auto-submit-form" } do |form| %>
<%= period_select form: form, selected: @period.name %>
<% end %>
</div>
</div>
<% if @account_groups[:assets].children.any? %>
<%= render partial: "pages/account_percentages_bar", locals: { account_groups: @account_groups[:assets].children } %>
<%= render partial: "pages/account_percentages_table", locals: { account_groups: @account_groups[:assets].children } %>
</div>
<div class="p-4 bg-white rounded-xl shadow-xs border border-alpha-black-25 space-y-4">
<div class="flex justify-between items-center mb-5">
<h2 class="text-lg font-medium text-gray-900">Liabilities</h2>
<div class="flex items-center gap-2">
<%= link_to new_account_path, class: "flex items-center gap-1 p-2 pr-3 text-gray-900 text-sm font-medium bg-gray-50 rounded-lg hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-500") %>
<p><%= t(".new") %></p>
<% end %>
<%= form_with url: summary_accounts_path, method: :get, data: { controller: "auto-submit-form" } do |form| %>
<%= period_select form: form, selected: @period.name %>
<% end %>
</div>
<% else %>
<div class="py-20 flex flex-col items-center">
<%= lucide_icon "blocks", class: "w-6 h-6 shrink-0 text-gray-500" %>
<p class="text-gray-900 text-sm font-medium mb-1 mt-4"><%= t(".no_assets") %></p>
<p class="text-gray-500 text-sm max-w-xs text-center"><%= t(".no_assets_description") %></p>
</div>
<% end %>
</div>
<div class="p-4 bg-white rounded-xl shadow-xs border border-alpha-black-25 space-y-4">
<div class="flex justify-between items-center mb-5">
<h2 class="text-lg font-medium text-gray-900">Liabilities</h2>
<div class="flex items-center gap-2">
<%= link_to new_account_path, class: "btn btn--secondary flex items-center gap-1", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-500") %>
<p><%= t(".new") %></p>
<% end %>
<%= form_with url: summary_accounts_path, method: :get, data: { controller: "auto-submit-form" } do |form| %>
<%= period_select form: form, selected: @period.name %>
<% end %>
</div>
</div>
<% if @account_groups[:liabilities].children.any? %>
<%= render partial: "pages/account_percentages_bar", locals: { account_groups: @account_groups[:liabilities].children } %>
<%= render partial: "pages/account_percentages_table", locals: { account_groups: @account_groups[:liabilities].children } %>
</div>
<% end %>
<% else %>
<div class="py-20 flex flex-col items-center">
<%= lucide_icon "scale", class: "w-6 h-6 shrink-0 text-gray-500" %>
<p class="text-gray-900 text-sm font-medium mb-1 mt-4"><%= t(".no_liabilities") %></p>
<p class="text-gray-500 text-sm max-w-xs text-center"><%= t(".no_liabilities_description") %></p>
</div>
<% end %>
</div>
</div>