From f865f7dec23431c816ce0ea03d24906a21cc3b0d Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Thu, 20 Aug 2026 16:37:05 +0530
Subject: [PATCH] feat: show per-group report stats in collapsed accordion
 header

Move the Sum/Count/Avg/Min/Max/First/Last metric row from inside the
expanded accordion details into the accordion summary as a second row,
so group stats are visible while the group is collapsed. Second row
renders compact label-value pairs instead of pills; summary content is
now a two-row column.
---
 src/common/components/TransactionList.tsx | 43 +++++++++++++----------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/common/components/TransactionList.tsx b/src/common/components/TransactionList.tsx
index b6898a1..db26e34 100644
--- a/src/common/components/TransactionList.tsx
+++ b/src/common/components/TransactionList.tsx
@@ -165,31 +165,36 @@ export function TransactionList({ items, fields, granularity = "monthly", showMe
                   px: 2,
                   py: 1,
                   "& .MuiAccordionSummary-content": {
-                    alignItems: "center",
-                    gap: 1.5,
+                    flexDirection: "column",
+                    alignItems: "stretch",
+                    gap: 0.75,
                     minWidth: 0,
                   },
                 }}
               >
-                <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
-                  {group.label}
-                </Typography>
-                <Typography variant="caption" color="text.secondary">
-                  {group.items.length} transaction{group.items.length === 1 ? "" : "s"}
-                </Typography>
-                <Box sx={{ flex: 1 }} />
-                <Typography variant="body2" fontWeight={700} color="error.main">
-                  {formatCurrency(group.spent, group.currency)}
-                </Typography>
-                <Typography variant="body2" color="text.disabled">
-                  /
-                </Typography>
-                <Typography variant="body2" fontWeight={700} color="success.main">
-                  {formatCurrency(group.income, group.currency)}
-                </Typography>
+                <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, minWidth: 0 }}>
+                  <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
+                    {group.label}
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary">
+                    {group.items.length} transaction{group.items.length === 1 ? "" : "s"}
+                  </Typography>
+                  <Box sx={{ flex: 1 }} />
+                  <Typography variant="body2" fontWeight={700} color="error.main">
+                    {formatCurrency(group.spent, group.currency)}
+                  </Typography>
+                  <Typography variant="body2" color="text.disabled">
+                    /
+                  </Typography>
+                  <Typography variant="body2" fontWeight={700} color="success.main">
+                    {formatCurrency(group.income, group.currency)}
+                  </Typography>
+                </Box>
+                <Box sx={{ display: "flex", alignItems: "stretch", gap: 1.5, minWidth: 0 }}>
+                  {showMetrics && <GroupMetrics items={group.items} currency={group.currency} />}
+                </Box>
               </AccordionSummary>
               <AccordionDetails sx={{ p: 1.5, pt: 1 }}>
-                {showMetrics && <GroupMetrics items={group.items} currency={group.currency} />}
                 <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                   {groupByDate(group.items).map((dateGroup) => (
                     <Box