From 73f76066a9a21388c29b2c4d4db9bc8dc80b58dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20Sch=C3=A4fer?= <me@tobias-schaefer.it>
Date: Wed, 8 Apr 2026 20:34:51 +0200
Subject: [PATCH] Fix monthly comparison card not rendering by using Inertia
 props

The comparison card depended on snapshot data from the AI API response,
which is only available after an AI analysis runs. Now the monthly ratios
and growing/shrinking categories are passed as Inertia props from the
controller, making the card render immediately on page load.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/Http/Controllers/AiAnalysisController.php |  3 +++
 resources/js/Pages/AI/Index.vue               | 11 +++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/Http/Controllers/AiAnalysisController.php b/app/Http/Controllers/AiAnalysisController.php
index 0859ec9..484bb24 100644
--- a/app/Http/Controllers/AiAnalysisController.php
+++ b/app/Http/Controllers/AiAnalysisController.php
@@ -23,6 +23,9 @@ public function index()
             'anomalies' => $snapshot->anomalies,
             'budgetUtilization' => $snapshot->budgetUtilization,
             'currentMonthComplete' => $snapshot->currentMonthComplete,
+            'topGrowingCategories' => $snapshot->topGrowingCategories,
+            'topShrinkingCategories' => $snapshot->topShrinkingCategories,
+            'monthlyRatios' => $snapshot->monthlyRatios,
             'history' => FinancialAnalyst::history(),
         ]);
     }
diff --git a/resources/js/Pages/AI/Index.vue b/resources/js/Pages/AI/Index.vue
index c49f5de..b10fc32 100644
--- a/resources/js/Pages/AI/Index.vue
+++ b/resources/js/Pages/AI/Index.vue
@@ -19,6 +19,9 @@ const props = defineProps({
     anomalies: { type: Array, default: () => [] },
     budgetUtilization: { type: Array, default: () => [] },
     currentMonthComplete: { type: Boolean, default: true },
+    topGrowingCategories: { type: Array, default: () => [] },
+    topShrinkingCategories: { type: Array, default: () => [] },
+    monthlyRatios: { type: Array, default: () => [] },
     history: { type: Array, default: () => [] },
 });
 
@@ -259,9 +262,9 @@ const hasCategoryComments = computed(() => {
     return structured.value?.categoryInsights?.some(c => c.comment?.trim());
 });
 
-// Monthly comparison: last two complete months
+// Monthly comparison: last two complete months (from Inertia props, always available)
 const monthlyComparison = computed(() => {
-    const ratios = snapshot.value?.monthlyRatios?.filter(m => !m.incomplete) ?? [];
+    const ratios = props.monthlyRatios.filter(m => !m.incomplete);
     if (ratios.length < 2) return null;
     const current = ratios[ratios.length - 1];
     const previous = ratios[ratios.length - 2];
@@ -274,8 +277,8 @@ const monthlyComparison = computed(() => {
         expenses: current.expenses,
         prevExpenses: previous.expenses,
         expensesChange: +(current.expenses - previous.expenses).toFixed(1),
-        growing: snapshot.value?.topGrowingCategories ?? [],
-        shrinking: snapshot.value?.topShrinkingCategories ?? [],
+        growing: props.topGrowingCategories,
+        shrinking: props.topShrinkingCategories,
     };
 });