apps/khata-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show per-group report stats in collapsed accordion header

Browse Source 
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.
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2026-08-20 16:37:05 +05:30
parent fc3a48a367
commit f865f7dec2
1 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/common/components/TransactionList.tsx
View File

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