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") %>

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 %>
+    <% 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,17 +1,19 @@
 <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 %>
@@ -153,7 +155,7 @@
         </div>
       </div>
     </section>
-  <section class="grid grid-cols-2 gap-4 items-baseline">
+    <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? %>
@@ -163,27 +165,13 @@
         <% 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 %>
+              <%= 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>
-      </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>
   <% 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