Add transactions widget to dashboard page (#656)

2025-07-24 15:49:39 +02:00 · 2024-04-22 22:51:06 +02:00 · 2024-04-22 22:51:06 +02:00 · 8a29725562
commit 8a29725562
parent 49b603f478
12 changed files with 56 additions and 28 deletions
--- a/app/controllers/pages_controller.rb
+++ b/app/controllers/pages_controller.rb
@ -7,6 +7,7 @@ class PagesController < ApplicationController
    @asset_series = snapshot[:asset_series]
    @liability_series = snapshot[:liability_series]
    @account_groups = Current.family.accounts.by_group(period: @period, currency: Current.family.currency)
+    @transactions = Current.family.transactions.limit(5).order(date: :desc)

    # TODO: Placeholders for trendlines
    placeholder_series_data = 10.times.map do |i|
--- a/app/helpers/transactions_helper.rb
+++ b/app/helpers/transactions_helper.rb
@ -17,4 +17,8 @@ module TransactionsHelper
  def transaction_filter_by_name(name)
    transaction_filters.find { |filter| filter[:name] == name }
  end
+
+  def full_width_transaction_row?(route)
+    route != "/"
+  end
 end
--- a/app/views/accounts/_transactions.html.erb
+++ b/app/views/accounts/_transactions.html.erb
@ -11,9 +11,7 @@
    <p class="text-gray-500 py-4">No transactions for this account yet.</p>
  <% else %>
    <div class="space-y-6">
-      <% transactions.group_by { |transaction| transaction.date }.each do |date, grouped_transactions| %>
-        <%= render partial: "transactions/transaction_group", locals: { date: date, transactions: grouped_transactions } %>
-      <% end %>
+      <%= render partial: "transactions/transaction_group", collection: transactions.group_by(&:date), as: :transaction_group %>
    </div>
  <% end %>
 </div>
--- a/app/views/pages/dashboard.html.erb
+++ b/app/views/pages/dashboard.html.erb
@ -106,14 +106,21 @@
      </div>
    </div>
  </section>
-  <section class="flex items-start gap-4">
-    <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl w-1/2 space-y-4">
+  <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 @transactions.empty? %>
        <div class="text-gray-500 flex items-center justify-center py-12">
-        <p>Coming soon...</p>
+          <p><%= t(".no_transactions") %></p>
        </div>
+      <% else %>
+        <div class="text-gray-500 flex items-center justify-center flex-col bg-gray-25 rounded-md">
+          <%= render partial: "transactions/transaction_group", collection: @transactions.group_by(&:date), as: :transaction_group %>
+          <p class="py-2 text-sm"><%= link_to t(".view_all"), transactions_path %></p>
        </div>
-    <div class="w-1/2 space-y-4">
+      <% 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">
--- a/app/views/transactions/_list.html.erb
+++ b/app/views/transactions/_list.html.erb
@ -20,9 +20,7 @@
        </div>
      </div>
      <div class="space-y-6">
-        <% transactions.group_by { |transaction| transaction.date }.each do |date, grouped_transactions| %>
-          <%= render partial: "transactions/transaction_group", locals: { date: date, transactions: grouped_transactions } %>
-        <% end %>
+        <%= render partial: "transactions/transaction_group", collection: transactions.group_by(&:date), as: :transaction_group %>
      </div>
    <% end %>
    <% if pagy.pages > 1 %>
--- a/app/views/transactions/_transaction.html.erb
+++ b/app/views/transactions/_transaction.html.erb
@ -1,9 +1,8 @@
+<%# locals: (transaction:) %>
 <%= turbo_frame_tag dom_id(transaction), class:"text-gray-900 flex items-center gap-6 py-4 text-sm font-medium px-4" do %>
-  <%= link_to transaction_path(transaction), data: { turbo_frame: "modal" }, class: "group", id: dom_id(transaction) do %>
-    <div class="w-96 flex items-center gap-2">
-      <div class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-600/5 text-gray-600"><%= transaction.name[0].upcase %></div>
-      <p class="text-gray-900 group-hover:underline group-hover:text-gray-800"><%= transaction.name %></p>
-    </div>
+  <% if full_width_transaction_row?(request.path) %>
+    <%= link_to transaction_path(transaction), data: { turbo_frame: "modal" }, class: "group" do %>
+      <%= render partial: "transactions/transaction_name", locals: { name: transaction.name } %>
    <% end %>
    <div class="w-48">
      <%= render partial: "transactions/categories/menu", locals: { transaction: } %>
@ -11,7 +10,13 @@
    <div>
      <p><%= transaction.account.name %></p>
    </div>
-  <div class="ml-auto">
-    <p class="<%= transaction.amount < 0 ? "text-green-600" : "" %>"><%= format_money -transaction.amount_money %></p>
+  <% else %>
+    <%= render partial: "transactions/transaction_name", locals: { name: transaction.name } %>
+    <div class="w-36">
+      <%= render partial: "transactions/categories/badge", locals: transaction.category.nil? ? {} : { name: transaction.category.name, color: transaction.category.color } %>
+    </div>
+  <% end %>
+  <div class="ml-auto">
+    <%= content_tag :p, format_money(-transaction.amount_money), class: ["whitespace-nowrap", { "text-green-600": transaction.amount.negative? }] %>
  </div>
 <% end %>
--- a/app/views/transactions/_transaction_group.html.erb
+++ b/app/views/transactions/_transaction_group.html.erb
@ -1,5 +1,8 @@
-<%# locals: (date:, transactions:) %>
-<div class="bg-gray-25 rounded-xl p-1">
+<%# locals: (transaction_group:) %>
+<% date = transaction_group[0] %>
+<% transactions = transaction_group[1] %>
+
+<div class="bg-gray-25 rounded-xl p-1 w-full">
  <div class="py-2 px-4 flex items-center justify-between font-medium text-xs text-gray-500">
    <h4><%= date.strftime("%b %d, %Y") %> &middot; <%= transactions.size %></h4>
    <span><%= format_money -transactions.sum(&:amount_money) %></span>
--- a/app/views/transactions/_transaction_name.html.erb
+++ b/app/views/transactions/_transaction_name.html.erb
@ -0,0 +1,10 @@
+<%# locals: (name:) %>
+
+<%= content_tag :div, class: ["flex items-center gap-2", { "w-40": !full_width_transaction_row?(request.path), "w-96": full_width_transaction_row?(request.path) }] do %>
+  <div class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-600/5 text-gray-600">
+    <%= name[0].upcase %>
+  </div>
+  <p class="text-gray-900 group-hover:underline group-hover:text-gray-800 truncate">
+    <%= name %>
+  </p>
+<% end %>
--- a/app/views/transactions/categories/_badge.html.erb
+++ b/app/views/transactions/categories/_badge.html.erb
@ -1,4 +1,4 @@
 <%# locals: (name: "Uncategorized", color: Transaction::Category::UNCATEGORIZED_COLOR) %>
 <% background_color = "color-mix(in srgb, #{color} 5%, white)" %>
 <% border_color = "color-mix(in srgb, #{color} 10%, white)" %>
-<span class="border text-sm font-medium px-2.5 py-1 rounded-full cursor-pointer" style="background-color: <%= background_color %>; border-color: <%= border_color %>; color: <%= color %>"><%= name %></span>
+<span class="border text-sm font-medium px-2.5 py-1 rounded-full truncate" style="background-color: <%= background_color %>; border-color: <%= border_color %>; color: <%= color %>"><%= name %></span>
--- a/app/views/transactions/categories/_menu.html.erb
+++ b/app/views/transactions/categories/_menu.html.erb
@ -1,6 +1,6 @@
 <%# locals: (transaction:) %>
 <div class="relative" data-controller="menu">
-  <button data-menu-target="button" class="flex">
+  <button data-menu-target="button cursor-pointer" class="flex">
    <%= render partial: "transactions/categories/badge", locals: transaction.category.nil? ? {} : { name: transaction.category.name, color: transaction.category.color } %>
  </button>
  <div data-menu-target="content" class="absolute z-10 hidden w-screen mt-2 max-w-min cursor-default">
--- a/app/views/transactions/search_form/_category_filter.html.erb
+++ b/app/views/transactions/search_form/_category_filter.html.erb
@ -8,7 +8,7 @@
    <% Current.family.transaction_categories.each do |transaction_category| %>
      <div class="filterable-item flex items-center gap-2 p-2" data-filter-name="<%= transaction_category.name %>">
        <%= form.check_box :category_id_in, { "data-auto-submit-form-target": "auto", multiple: true, class: "rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" }, transaction_category.id, nil %>
-        <%= form.label :category_id_in, transaction_category.name, value: transaction_category.id, class: "text-sm text-gray-900" do %>
+        <%= form.label :category_id_in, transaction_category.name, value: transaction_category.id, class: "text-sm text-gray-900 cursor-pointer" do %>
          <%= render partial: "transactions/categories/badge", locals: { name: transaction_category.name, color: transaction_category.color } %>
        <% end %>
      </div>
--- a/config/locales/views/pages/en.yml
+++ b/config/locales/views/pages/en.yml
@ -11,8 +11,10 @@ en:
      investing: Investing (coming soon...)
      net_worth: Net Worth
      new: New account
+      no_transactions: You have no recent transactions
      recurring: Recurring
      savings_rate: Savings Rate (coming soon...)
      spending: Spending (coming soon...)
      subtitle: Here's what's happening today
      transactions: Transactions
+      view_all: View all