From b16857b040aeda2d94e8acbc9afc2936870c9efd Mon Sep 17 00:00:00 2001
From: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com>
Date: Sat, 15 Nov 2025 16:29:50 +0100
Subject: [PATCH] UI Improvements for Ouflows Section (#334)

* feat: Improve categories list in outflows section

* feat: align bg containers in home page sections

* Revert "feat: align bg containers in home page sections"

This reverts commit 62ad36f23e8a26d5959b15784a87f3ab833d608d.

* Revert "feat: Improve categories list in outflows section"

This reverts commit 4b6cb6684394ba5914c21f0b765fd05060a447d3.

* feat: Improve categories list in outflows section

* feat: align bg containers in home page sections

* feat: reduce padding and align styling between outflows and assets sections

* feat: add number of categories and translations

* fix: Adjust Outflows header width for mobile
---
 .../pages/dashboard/_balance_sheet.html.erb   |  6 ++---
 .../pages/dashboard/_outflows_donut.html.erb  | 24 +++++++++++++++----
 config/locales/views/pages/en.yml             |  3 +++
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/app/views/pages/dashboard/_balance_sheet.html.erb b/app/views/pages/dashboard/_balance_sheet.html.erb
index 5273e5031..af9ab3165 100644
--- a/app/views/pages/dashboard/_balance_sheet.html.erb
+++ b/app/views/pages/dashboard/_balance_sheet.html.erb
@@ -35,7 +35,7 @@
           </div>
         </div>
 
-        <div class="bg-surface rounded-xl p-1 space-y-1 overflow-x-auto">
+        <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">Name</div>
             <div class="ml-auto text-right flex items-center gap-6">
@@ -50,11 +50,11 @@
 
           <div class="shadow-border-xs 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-surface
+              <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-surface rounded-lg flex items-center justify-between">
+                <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-4">
                     <%= icon("chevron-right", class: "group-open:rotate-90") %>
 
diff --git a/app/views/pages/dashboard/_outflows_donut.html.erb b/app/views/pages/dashboard/_outflows_donut.html.erb
index dd1aab80f..b1132cf9b 100644
--- a/app/views/pages/dashboard/_outflows_donut.html.erb
+++ b/app/views/pages/dashboard/_outflows_donut.html.erb
@@ -59,11 +59,24 @@
       </div>
 
       <!-- Category List -->
-      <div class="w-full lg:w-2/3">
-        <div class="space-y-2">
-          <% outflows_data[:categories].each do |category| %>
+      <div class="w-full lg:w-2/3 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-16 lg:w-40">
+            <p><%= t("pages.dashboard.outflows_donut.categories") %><span class="text-subdued mx-1">&middot;</span><%= outflows_data[:categories].count %></p>
+          </div>
+          <div class="ml-auto text-right flex items-center gap-6">
+            <div class="w-16 lg:w-40">
+              <p><%= t("pages.dashboard.outflows_donut.value") %></p>
+            </div>
+            <div class="w-16">
+              <p><%= t("pages.dashboard.outflows_donut.weight") %></p>
+            </div>
+          </div>
+        </div>
+        <div class="py-3 shadow-border-xs rounded-lg bg-container font-medium text-sm min-w-fit max-w-full">
+          <% outflows_data[:categories].each_with_index do |category, idx| %>
             <%= link_to transactions_path(q: { categories: [category[:name]], start_date: period.date_range.first, end_date: period.date_range.last }),
-                class: "flex items-center justify-between p-3 rounded-lg hover:bg-container-inset transition-colors cursor-pointer group",
+                class: "flex items-center justify-between mx-3 p-3 rounded-lg cursor-pointer group",
                 data: {
                   turbo_frame: "_top",
                   category_id: category[:id],
@@ -79,6 +92,9 @@
                 <span class="text-sm text-secondary whitespace-nowrap"><%= category[:percentage] %>%</span>
               </div>
             <% end %>
+            <% if idx < outflows_data[:categories].size - 1 %>
+              <%= render "shared/ruler", classes: "mx-3 lg:mx-4" %>
+            <% end %>
           <% end %>
         </div>
       </div>
diff --git a/config/locales/views/pages/en.yml b/config/locales/views/pages/en.yml
index f33a3e00a..572b06c78 100644
--- a/config/locales/views/pages/en.yml
+++ b/config/locales/views/pages/en.yml
@@ -29,3 +29,6 @@ en:
       outflows_donut:
         title: "Outflows"
         total_outflows: "Total Outflows"
+        categories: "Categories"
+        value: "Value"
+        weight: "Weight"