From 1eff0f9337ce7c3468cdc72c8d0a8e90863d2cad Mon Sep 17 00:00:00 2001
From: siddharthd <siddharthdevilz@gmail.com>
Date: Sun, 8 Mar 2026 21:03:53 +1100
Subject: [PATCH] fix(analytics): use React.Fragment with key for expandable
 category rows

---
 src/app/budget/page.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/budget/page.tsx b/src/app/budget/page.tsx
index bc7871a..699d70d 100644
--- a/src/app/budget/page.tsx
+++ b/src/app/budget/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, Fragment } from "react";
 import {
   ComposedChart,
   BarChart,
@@ -551,9 +551,8 @@ export default function AnalyticsPage() {
               {categoryRows.map(({ category, spent, txCount }) => {
                 const isExpanded = expandedCategory === category;
                 return (
-                  <>
+                  <Fragment key={category}>
                     <tr
-                      key={category}
                       className={`border-b border-zinc-800/50 cursor-pointer select-none transition-colors ${
                         isExpanded ? "bg-zinc-800/40" : "hover:bg-zinc-800/30"
                       }`}
@@ -581,12 +580,11 @@ export default function AnalyticsPage() {
                     </tr>
                     {isExpanded && (
                       <CategoryPanel
-                        key={`panel-${category}`}
                         category={category}
                         selectedMonth={selectedMonth}
                       />
                     )}
-                  </>
+                  </Fragment>
                 );
               })}
             </tbody>