From 63a58b10c02b8899c369f25cb929db9032b6c10d Mon Sep 17 00:00:00 2001
From: Catherine Renelle <32781029+catrenelle@users.noreply.github.com>
Date: Sun, 15 Feb 2026 17:26:36 -0500
Subject: [PATCH] Default reports to This Month, add Last Month preset, fix
 chart theme colors

Change default date range from Last 3 Months to This Month. Add Last Month
option. Apply theme-aware colors to chart axis labels, legends, and data
labels so they're readable in both light and dark modes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/views/reports/ReportsView.vue | 30 +++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/reports/ReportsView.vue b/frontend/src/views/reports/ReportsView.vue
index bdda963..f4c4f3d 100644
--- a/frontend/src/views/reports/ReportsView.vue
+++ b/frontend/src/views/reports/ReportsView.vue
@@ -9,6 +9,7 @@
           <v-col cols="auto">
             <v-btn-toggle v-model="preset" mandatory color="primary" density="compact">
               <v-btn value="thisMonth" size="small">This Month</v-btn>
+              <v-btn value="lastMonth" size="small">Last Month</v-btn>
               <v-btn value="last3" size="small">Last 3 Months</v-btn>
               <v-btn value="last6" size="small">Last 6 Months</v-btn>
               <v-btn value="thisYear" size="small">This Year</v-btn>
@@ -242,6 +243,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
+import { useTheme } from 'vuetify'
 import VueApexCharts from 'vue3-apexcharts'
 import { reportsApi } from '@/services/reports'
 import { useAccountsStore } from '@/stores/accounts'
@@ -255,10 +257,13 @@ import type {
 
 const apexchart = VueApexCharts
 
+const theme = useTheme()
+const isDark = computed(() => theme.global.current.value.dark)
+const labelColor = computed(() => isDark.value ? '#E0E0E0' : '#333333')
 const accountsStore = useAccountsStore()
 
 const activeTab = ref('spending')
-const preset = ref('last3')
+const preset = ref('thisMonth')
 const customStart = ref('')
 const customEnd = ref('')
 const selectedAccountId = ref<string | undefined>(undefined)
@@ -284,6 +289,10 @@ const dateRange = computed(() => {
     case 'thisMonth':
       start = new Date(now.getFullYear(), now.getMonth(), 1)
       break
+    case 'lastMonth':
+      start = new Date(now.getFullYear(), now.getMonth() - 1, 1)
+      end = new Date(now.getFullYear(), now.getMonth(), 0)
+      break
     case 'last3':
       start = new Date(now.getFullYear(), now.getMonth() - 3, 1)
       break
@@ -325,7 +334,8 @@ const spendingChartSeries = computed(() =>
 const spendingChartOptions = computed(() => ({
   chart: { type: 'donut' as const },
   labels: spending.value?.categories.map(c => c.categoryName) ?? [],
-  legend: { position: 'bottom' as const },
+  legend: { position: 'bottom' as const, labels: { colors: labelColor.value } },
+  dataLabels: { style: { colors: undefined }, dropShadow: { enabled: false } },
   tooltip: {
     y: {
       formatter: (val: number) => formatCurrency(val),
@@ -367,12 +377,12 @@ const incomeChartOptions = computed(() => ({
   chart: { type: 'bar' as const },
   plotOptions: { bar: { columnWidth: '60%' } },
   stroke: { width: [0, 0, 3] },
-  xaxis: { categories: monthLabels.value },
+  xaxis: { categories: monthLabels.value, labels: { style: { colors: labelColor.value } } },
   yaxis: {
-    labels: { formatter: (val: number) => formatCurrency(val) },
+    labels: { formatter: (val: number) => formatCurrency(val), style: { colors: labelColor.value } },
   },
   colors: ['#4CAF50', '#F44336', '#2196F3'],
-  legend: { position: 'top' as const },
+  legend: { position: 'top' as const, labels: { colors: labelColor.value } },
   tooltip: {
     y: { formatter: (val: number) => formatCurrency(val) },
   },
@@ -405,14 +415,15 @@ const netWorthChartOptions = computed(() => ({
   chart: { type: 'area' as const },
   xaxis: {
     categories: netWorth.value?.entries.map(e => formatDate(e.date)) ?? [],
+    labels: { style: { colors: labelColor.value } },
   },
   yaxis: {
-    labels: { formatter: (val: number) => formatCurrency(val) },
+    labels: { formatter: (val: number) => formatCurrency(val), style: { colors: labelColor.value } },
   },
   colors: ['#4CAF50', '#F44336', '#2196F3'],
   stroke: { curve: 'smooth' as const, width: 2 },
   fill: { type: 'gradient', gradient: { opacityFrom: 0.3, opacityTo: 0.05 } },
-  legend: { position: 'top' as const },
+  legend: { position: 'top' as const, labels: { colors: labelColor.value } },
   tooltip: {
     y: { formatter: (val: number) => formatCurrency(val) },
   },
@@ -445,12 +456,13 @@ const cashFlowChartOptions = computed(() => ({
   plotOptions: { bar: { columnWidth: '60%' } },
   xaxis: {
     categories: cashFlow.value?.entries.map(e => formatDate(e.date)) ?? [],
+    labels: { style: { colors: labelColor.value } },
   },
   yaxis: {
-    labels: { formatter: (val: number) => formatCurrency(val) },
+    labels: { formatter: (val: number) => formatCurrency(val), style: { colors: labelColor.value } },
   },
   colors: ['#4CAF50', '#F44336'],
-  legend: { position: 'top' as const },
+  legend: { position: 'top' as const, labels: { colors: labelColor.value } },
   tooltip: {
     y: { formatter: (val: number) => formatCurrency(val) },
   },