cat/Purrse
Private
Public Access
1
0
Fork 0
Code Activity

Limit dashboard spending to top 10 categories and fix nav double-highlight

Browse Source 
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>
This commit is contained in:
Catherine Renelle
2026-02-15 15:59:27 -05:00
parent d5c90a9197
commit dc4fd692ba
3 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/layout/AppLayout.vue
+2 -2
View File
@@ -159,10 +159,10 @@ const navItems = [
function isNavActive(navRoute: string) { function isNavActive(navRoute: string) {
if (route.path === navRoute) return true 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 // Highlight "Transactions" when viewing account-scoped transactions
if (navRoute === '/transactions' && route.name === 'account-transactions') return true 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 return false
} }
frontend/src/views/dashboard/DashboardView.vue
+1 -1
View File
@@ -51,7 +51,7 @@
<v-col cols="12" md="6"> <v-col cols="12" md="6">
<v-card> <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> <v-card-text>
<div class="text-h5 mb-2">{{ formatCurrency(dashboard.spendingSummary.thisMonth) }}</div> <div class="text-h5 mb-2">{{ formatCurrency(dashboard.spendingSummary.thisMonth) }}</div>
<div class="text-caption" :class="dashboard.spendingSummary.changePercent <= 0 ? 'text-success' : 'text-error'"> <div class="text-caption" :class="dashboard.spendingSummary.changePercent <= 0 ? 'text-success' : 'text-error'">
src/Purrse.Api/Services/DashboardService.cs
+1
View File
@@ -56,6 +56,7 @@ public class DashboardService : IDashboardService
.GroupBy(t => t.CategoryId) .GroupBy(t => t.CategoryId)
.Select(g => new { CategoryId = g.Key, Total = -g.Sum(t => t.Amount) }) .Select(g => new { CategoryId = g.Key, Total = -g.Sum(t => t.Amount) })
.OrderByDescending(x => x.Total) .OrderByDescending(x => x.Total)
.Take(10)
.ToListAsync(); .ToListAsync();
var categoryIds = spendingByCategory.Where(x => x.CategoryId.HasValue).Select(x => x.CategoryId!.Value); var categoryIds = spendingByCategory.Where(x => x.CategoryId.HasValue).Select(x => x.CategoryId!.Value);