Update empty account states on dashboard (#1166)

* Update empty account states on dashboard

* Translations

app/assets/stylesheets/application.tailwind.css

@@ -96,7 +96,7 @@
   }
 
   .btn {
-    @apply px-3 py-2 rounded-lg;
+    @apply px-3 py-2 rounded-lg text-sm font-medium;
   }
 
   .btn--primary {

app/helpers/accounts_helper.rb

@@ -69,6 +69,11 @@ module AccountsHelper
     tab || available_tabs.first
   end
 
+  def account_groups(period: nil)
+    assets, liabilities = Current.family.accounts.by_group(currency: Current.family.currency, period: period || Period.last_30_days).values_at(:assets, :liabilities)
+    [ assets.children, liabilities.children ].flatten
+  end
+
   private
 
     def class_mapping(accountable_type)

app/helpers/application_helper.rb

@@ -57,11 +57,6 @@ module ApplicationHelper
     render partial: "shared/drawer", locals: { content: content }
   end
 
-  def account_groups(period: nil)
-    assets, liabilities = Current.family.accounts.by_group(currency: Current.family.currency, period: period || Period.last_30_days).values_at(:assets, :liabilities)
-    [ assets.children, liabilities.children ].flatten
-  end
-
   def sidebar_link_to(name, path, options = {})
     is_current = current_page?(path) || (request.path.start_with?(path) && path != "/")
 

app/views/accounts/_account_list.html.erb

@@ -1,6 +1,6 @@
 <%# locals: (group:) -%>
 <% type = Accountable.from_type(group.name) %>
-<% if group %>
+<% if group && group.children.any? %>
   <details class="mb-1 text-sm group" data-controller="account-collapse" data-account-collapse-type-value="<%= type %>">
     <summary class="flex gap-4 px-3 py-2 items-center w-full rounded-[10px] font-medium hover:bg-gray-100 cursor-pointer">
       <%= lucide_icon("chevron-down", class: "hidden group-open:block text-gray-500 w-5 h-5") %>
@@ -8,8 +8,8 @@
       <div class="text-left"><%= type.model_name.human %></div>
       <div class="ml-auto flex flex-col items-end">
         <p class="text-right"><%= format_money group.sum %></p>
-          <div class="flex items-center gap-1">
-            <%=
+        <div class="flex items-center gap-1">
+          <%=
               tag.div(
                 id: "#{group.name}_sparkline",
                 class: "h-3 w-8 ml-auto",
@@ -21,10 +21,10 @@
                   "time-series-chart-use-tooltip-value": false
                 }
               )
-            %>
-            <% styles = trend_styles(group.series.trend) %>
-            <span class="text-xs <%= styles[:text_class] %>"><%= sprintf("%+.2f", group.series.trend.percent) %>%</span>
-          </div>
+          %>
+          <% styles = trend_styles(group.series.trend) %>
+          <span class="text-xs <%= styles[:text_class] %>"><%= sprintf("%+.2f", group.series.trend.percent) %>%</span>
+        </div>
       </div>
     </summary>
     <% group.children.sort_by(&:name).each do |account_value_node| %>

app/views/layouts/_sidebar.html.erb

@@ -91,8 +91,9 @@
         <%= t(".portfolio") %>
       <% end %>
       <span class="font-bold tracking-wide">&bull;</span>
-      <%= form_with url: list_accounts_path, method: :get, data: { controller: "auto-submit-form", turbo_frame: "account-list" } do |form| %>
-        <%= period_select form: form, selected: "last_7_days", classes: "w-full border-none pl-2 pr-7 text-xs bg-transparent gap-1 cursor-pointer font-semibold tracking-wide focus:outline-none focus:ring-0" %>
+
+      <%= form_with url: list_accounts_path, method: :get, data: { controller: Current.family.accounts.any? ? "auto-submit-form" : nil, turbo_frame: "account-list" } do |form| %>
+        <%= period_select form: form, selected: "last_30_days", classes: "w-full border-none pl-2 pr-7 text-xs bg-transparent gap-1 cursor-pointer font-semibold tracking-wide focus:outline-none focus:ring-0" %>
       <% end %>
     </div>
     <%= link_to new_account_path, id: "sidebar-new-account", class: "block hover:bg-gray-100 font-semibold text-gray-900 flex items-center rounded", title: t(".new_account"), data: { turbo_frame: "modal" } do %>
@@ -101,8 +102,15 @@
   </div>
 
   <%= turbo_frame_tag "account-list", target: "_top" do %>
-    <% account_groups.each do |group| %>
-      <%= render "accounts/account_list", group: group %>
+    <% if Current.family.accounts.any? %>
+      <% account_groups.each do |group| %>
+        <%= render "accounts/account_list", group: group %>
+      <% end %>
+    <% else %>
+      <%= link_to new_account_path, class: "flex items-center min-h-10 gap-4 px-3 py-2 mb-1 text-gray-500 text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
+        <%= lucide_icon("plus", class: "w-5 h-5") %>
+        <%= tag.p t(".new_account") %>
+      <% end %>
     <% end %>
   <% end %>
 </div>

app/views/pages/dashboard.html.erb

@@ -1,189 +1,177 @@
 <div class="space-y-4">
   <header class="flex items-center justify-between">
     <div>
-      <h1 class="sr-only">Dashboard</h1>
+      <h1 class="sr-only"><%= t(".title") %></h1>
       <p class="text-xl font-medium text-gray-900 mb-1"><%= t(".greeting", name: Current.user.first_name ) %></p>
       <% unless @accounts.blank? %>
         <p class="text-gray-500 text-sm"><%= t(".subtitle") %></p>
       <% end %>
     </div>
-    <%= link_to new_account_path, class: "flex text-white text-sm font-medium items-center gap-1 bg-gray-900 hover:bg-gray-700 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
+
+    <%= link_to new_account_path, class: "flex items-center gap-1 btn btn--primary", data: { turbo_frame: "modal" } do %>
       <%= lucide_icon("plus", class: "w-5 h-5") %>
       <span><%= t(".new") %></span>
     <% end %>
   </header>
+
   <% if @accounts.empty? %>
     <%= render "shared/no_account_empty_state" %>
   <% else %>
-  <section class="flex gap-4">
-    <div class="bg-white border border-alpha-black-25 shadow-xs rounded-xl w-3/4 min-h-48 flex flex-col">
-      <div class="flex justify-between p-4">
-        <div>
-          <%= render partial: "shared/value_heading", locals: {
+    <section class="flex gap-4">
+      <div class="bg-white border border-alpha-black-25 shadow-xs rounded-xl w-3/4 min-h-48 flex flex-col">
+        <div class="flex justify-between p-4">
+          <div>
+            <%= render partial: "shared/value_heading", locals: {
             label: t(".net_worth"),
             period: @period,
             value: Current.family.net_worth,
             trend: @net_worth_series.trend
           } %>
+          </div>
+          <%= form_with url: root_path, method: :get, class: "flex items-center gap-4", data: { controller: "auto-submit-form" } do |form| %>
+            <%= period_select form: form, selected: @period.name %>
+          <% end %>
         </div>
-        <%= form_with url: root_path, method: :get, class: "flex items-center gap-4", data: { controller: "auto-submit-form" } do |form| %>
-          <%= period_select form: form, selected: @period.name %>
-        <% end %>
+        <%= render partial: "pages/dashboard/net_worth_chart", locals: { series: @net_worth_series } %>
       </div>
-      <%= render partial: "pages/dashboard/net_worth_chart", locals: { series: @net_worth_series } %>
-    </div>
-    <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl w-1/4">
-      <%= render partial: "pages/dashboard/allocation_chart", locals: { account_groups: @account_groups } %>
-    </div>
-  </section>
-  <section class="grid grid-cols-2 gap-4">
-    <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
-      <div class="flex flex-col gap-4 h-full">
-        <div class="flex gap-4">
-          <div class="grow">
-          <%= render partial: "shared/value_heading", locals: {
+      <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl w-1/4">
+        <%= render partial: "pages/dashboard/allocation_chart", locals: { account_groups: @account_groups } %>
+      </div>
+    </section>
+    <section class="grid grid-cols-2 gap-4">
+      <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
+        <div class="flex flex-col gap-4 h-full">
+          <div class="flex gap-4">
+            <div class="grow">
+              <%= render partial: "shared/value_heading", locals: {
             label: t(".income"),
               period: Period.last_30_days,
               value: @income_series.last&.value,
               trend: @income_series.trend
             } %>
-          </div>
-          <div
+            </div>
+            <div
             id="incomeChart"
             class="h-full w-2/5"
             data-controller="time-series-chart"
             data-time-series-chart-data-value="<%= @income_series.to_json %>"
             data-time-series-chart-use-labels-value="false"
             data-time-series-chart-use-tooltip-value="false"></div>
-        </div>
-        <div class="flex gap-1.5">
-          <% @top_earners.first(3).each do |account| %>
-            <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
-              <%= image_tag account_logo_url(account), class: "w-5 h-5" %>
-              <span>+<%= Money.new(account.income, account.currency) %></span>
+          </div>
+          <div class="flex gap-1.5">
+            <% @top_earners.first(3).each do |account| %>
+              <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
+                <%= image_tag account_logo_url(account), class: "w-5 h-5" %>
+                <span>+<%= Money.new(account.income, account.currency) %></span>
+              <% end %>
             <% end %>
-          <% end %>
-          <% if @top_earners.count > 3 %>
-            <div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-gray-500">+<%= @top_earners.count - 3 %></div>
-          <% end %>
+            <% if @top_earners.count > 3 %>
+              <div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-gray-500">+<%= @top_earners.count - 3 %></div>
+            <% end %>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
-      <div class="flex flex-col gap-4 h-full">
-        <div class="flex gap-4">
-          <div class="grow">
-            <%= render partial: "shared/value_heading", locals: {
+      <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
+        <div class="flex flex-col gap-4 h-full">
+          <div class="flex gap-4">
+            <div class="grow">
+              <%= render partial: "shared/value_heading", locals: {
             label: t(".spending"),
               period: Period.last_30_days,
               value: @spending_series.last&.value,
               trend: @spending_series.trend
             } %>
-          </div>
-          <div
+            </div>
+            <div
             id="spendingChart"
             class="h-full w-2/5"
             data-controller="time-series-chart"
             data-time-series-chart-data-value="<%= @spending_series.to_json %>"
             data-time-series-chart-use-labels-value="false"
             data-time-series-chart-use-tooltip-value="false"></div>
-        </div>
-        <div class="flex gap-1.5">
-          <% @top_spenders.first(3).each do |account| %>
-            <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
-              <%= image_tag account_logo_url(account), class: "w-5 h-5" %>
-              -<%= Money.new(account.spending, account.currency) %>
+          </div>
+          <div class="flex gap-1.5">
+            <% @top_spenders.first(3).each do |account| %>
+              <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
+                <%= image_tag account_logo_url(account), class: "w-5 h-5" %>
+                -<%= Money.new(account.spending, account.currency) %>
+              <% end %>
             <% end %>
-          <% end %>
-          <% if @top_spenders.count > 3 %>
-            <div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-gray-500">+<%= @top_spenders.count - 3 %></div>
-          <% end %>
+            <% if @top_spenders.count > 3 %>
+              <div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-gray-500">+<%= @top_spenders.count - 3 %></div>
+            <% end %>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
-      <div class="flex flex-col gap-4 h-full">
-        <div class="flex gap-4">
-          <div class="grow">
-            <%= render partial: "shared/value_heading", locals: {
+      <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
+        <div class="flex flex-col gap-4 h-full">
+          <div class="flex gap-4">
+            <div class="grow">
+              <%= render partial: "shared/value_heading", locals: {
             label: t(".savings_rate"),
               period: Period.last_30_days,
               value: @savings_rate_series.last&.value,
               trend: @savings_rate_series.trend,
               is_percentage: true
             } %>
-          </div>
-          <div
+            </div>
+            <div
             id="savingsRateChart"
             class="h-full w-2/5"
             data-controller="time-series-chart"
             data-time-series-chart-data-value="<%= @savings_rate_series.to_json %>"
             data-time-series-chart-use-labels-value="false"
             data-time-series-chart-use-tooltip-value="false"></div>
-        </div>
-        <div class="flex gap-1.5">
-          <% @top_savers.first(3).each do |account| %>
-            <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
-              <%= image_tag account_logo_url(account), class: "w-5 h-5" %>
-              <span><%= account.savings_rate > 0 ? "+" : "-" %><%= number_to_percentage(account.savings_rate.abs * 100, precision: 2) %></span>
+          </div>
+          <div class="flex gap-1.5">
+            <% @top_savers.first(3).each do |account| %>
+              <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
+                <%= image_tag account_logo_url(account), class: "w-5 h-5" %>
+                <span><%= account.savings_rate > 0 ? "+" : "-" %><%= number_to_percentage(account.savings_rate.abs * 100, precision: 2) %></span>
+              <% end %>
             <% end %>
-          <% end %>
-          <% if @top_savers.count > 3 %>
-            <div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-gray-500">+<%= @top_savers.count - 3 %></div>
-          <% end %>
+            <% if @top_savers.count > 3 %>
+              <div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-gray-500">+<%= @top_savers.count - 3 %></div>
+            <% end %>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
-      <div class="flex gap-4 h-full">
-        <div class="grow">
-          <%= render partial: "shared/value_heading", locals: {
+      <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
+        <div class="flex gap-4 h-full">
+          <div class="grow">
+            <%= render partial: "shared/value_heading", locals: {
           label: t(".investing"),
             period: @period,
             value: @investing_series.last.value,
             trend: @investing_series.trend
           } %>
-        </div>
-        <div
+          </div>
+          <div
           id="investingChart"
           class="h-full w-2/5"
           data-controller="time-series-chart"
           data-time-series-chart-data-value="<%= @investing_series.to_json %>"
           data-time-series-chart-use-labels-value="false"></div>
-      </div>
-    </div>
-  </section>
-  <section class="grid grid-cols-2 gap-4 items-baseline">
-    <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl space-y-4">
-      <h2 class="text-lg font-medium text-gray-900"><%= t(".transactions") %></h2>
-      <% if @transaction_entries.empty? %>
-        <div class="text-gray-500 flex items-center justify-center py-12">
-          <p><%= t(".no_transactions") %></p>
         </div>
-      <% else %>
-        <div class="text-gray-500 p-1 space-y-1 bg-gray-25 rounded-xl">
-          <%= entries_by_date(@transaction_entries, selectable: false) do |entries| %>
-            <%= render entries, selectable: false, editable: false, short: true %>
-          <% end %>
+      </div>
+    </section>
+    <section class="w-full">
+      <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl space-y-4">
+        <h2 class="text-lg font-medium text-gray-900"><%= t(".transactions") %></h2>
+        <% if @transaction_entries.empty? %>
+          <div class="text-gray-500 flex items-center justify-center py-12">
+            <p><%= t(".no_transactions") %></p>
+          </div>
+        <% else %>
+          <div class="text-gray-500 p-1 space-y-1 bg-gray-25 rounded-xl">
+            <%= entries_by_date(@transaction_entries, selectable: false) do |entries| %>
+              <%= render entries, selectable: false, editable: false %>
+            <% end %>
 
-          <p class="py-2 text-sm text-center"><%= link_to t(".view_all"), transactions_path %></p>
-        </div>
-      <% end %>
-    </div>
-    <div class="space-y-4">
-      <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl space-y-4">
-        <h2 class="text-lg font-medium text-gray-900"><%= t(".recurring") %></h2>
-        <div class="text-gray-500 flex items-center justify-center py-12">
-          <p>Coming soon...</p>
-        </div>
+            <p class="py-2 text-sm text-center"><%= link_to t(".view_all"), transactions_path %></p>
+          </div>
+        <% end %>
       </div>
-      <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl space-y-4">
-        <h2 class="text-lg font-medium text-gray-900"><%= t(".categories") %></h2>
-        <div class="text-gray-500 flex items-center justify-center py-12">
-          <p>Coming soon...</p>
-        </div>
-      </div>
-    </div>
-  </section>
+    </section>
   <% end %>
 </div>

app/views/shared/_no_account_empty_state.html.erb

@@ -1,8 +1,13 @@
-<div class="flex justify-center items-center h-[800px] text-sm">
-  <div class="text-center flex flex-col items-center max-w-[300px]">
-    <p class="text-gray-900 mb-1 font-medium"><%= t(".no_account_title") %></p>
-    <p class="text-gray-500 mb-4"><%= t(".no_account_subtitle") %></p>
-    <%= link_to new_account_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
+<div class="flex justify-center items-center h-[800px]">
+  <div class="text-center flex flex-col gap-4 items-center max-w-[300px]">
+    <%= lucide_icon "layers", class: "w-6 h-6 text-gray-500" %>
+
+    <div class="space-y-1 text-sm">
+      <p class="text-gray-900 font-medium"><%= t(".no_account_title") %></p>
+      <p class="text-gray-500"><%= t(".no_account_subtitle") %></p>
+    </div>
+
+    <%= link_to new_account_path, class: "btn btn--primary flex items-center gap-1", data: { turbo_frame: "modal" } do %>
       <%= lucide_icon("plus", class: "w-5 h-5") %>
       <span><%= t(".new_account") %></span>
     <% end %>

config/locales/views/pages/en.yml

@@ -7,16 +7,15 @@ en:
       allocation_chart:
         assets: Assets
         debts: Debts
-      categories: Categories
       greeting: Welcome back, %{name}
       income: Income
       investing: Investing (coming soon...)
       net_worth: Net Worth
       new: New account
       no_transactions: You have no recent transactions
-      recurring: Recurring
       savings_rate: Savings Rate
       spending: Spending
       subtitle: Here's what's happening today
-      transactions: Transactions
+      title: Dashboard
+      transactions: Recent transactions
       view_all: View all