From dc4fd692ba150eacbfa9a22c7ebcdbbe8bc17862 Mon Sep 17 00:00:00 2001
From: Catherine Renelle <32781029+catrenelle@users.noreply.github.com>
Date: Sun, 15 Feb 2026 15:59:27 -0500
Subject: [PATCH] Limit dashboard spending to top 10 categories and fix nav
 double-highlight

Show top 10 categories in spending breakdown with label indicating the limit.
Fix account-scoped transactions highlighting both Accounts and Transactions
nav items by excluding sub-route match when account-transactions is active.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/layout/AppLayout.vue   | 4 ++--
 frontend/src/views/dashboard/DashboardView.vue | 2 +-
 src/Purrse.Api/Services/DashboardService.cs    | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/layout/AppLayout.vue b/frontend/src/components/layout/AppLayout.vue
index 42a6104..6738768 100644
--- a/frontend/src/components/layout/AppLayout.vue
+++ b/frontend/src/components/layout/AppLayout.vue
@@ -159,10 +159,10 @@ const navItems = [
 
 function isNavActive(navRoute: string) {
   if (route.path === navRoute) return true
-  // Highlight parent nav for sub-routes (e.g. /loans/:id highlights Loans)
-  if (navRoute !== '/' && route.path.startsWith(navRoute + '/')) return true
   // Highlight "Transactions" when viewing account-scoped transactions
   if (navRoute === '/transactions' && route.name === 'account-transactions') return true
+  // Highlight parent nav for sub-routes, but not when account-transactions takes priority
+  if (navRoute !== '/' && route.name !== 'account-transactions' && route.path.startsWith(navRoute + '/')) return true
   return false
 }
 
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 1923747..f64dd48 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -51,7 +51,7 @@
 
         <v-col cols="12" md="6">
           <v-card>
-            <v-card-title><v-icon class="mr-2">mdi-chart-pie</v-icon>Spending This Month</v-card-title>
+            <v-card-title><v-icon class="mr-2">mdi-chart-pie</v-icon>Spending This Month (Top 10 Categories)</v-card-title>
             <v-card-text>
               <div class="text-h5 mb-2">{{ formatCurrency(dashboard.spendingSummary.thisMonth) }}</div>
               <div class="text-caption" :class="dashboard.spendingSummary.changePercent <= 0 ? 'text-success' : 'text-error'">
diff --git a/src/Purrse.Api/Services/DashboardService.cs b/src/Purrse.Api/Services/DashboardService.cs
index 8594bec..b03a736 100644
--- a/src/Purrse.Api/Services/DashboardService.cs
+++ b/src/Purrse.Api/Services/DashboardService.cs
@@ -56,6 +56,7 @@ public class DashboardService : IDashboardService
             .GroupBy(t => t.CategoryId)
             .Select(g => new { CategoryId = g.Key, Total = -g.Sum(t => t.Amount) })
             .OrderByDescending(x => x.Total)
+            .Take(10)
             .ToListAsync();
 
         var categoryIds = spendingByCategory.Where(x => x.CategoryId.HasValue).Select(x => x.CategoryId!.Value);