Reports frontend — spec-driven generate form, sliceable viewer, dimension bars #16

Merged
aetos merged 15 commits from cached-reporting into main 2026-08-21 14:16:36 +00:00
Showing only changes of commit f865f7dec2 - Show all commits

View File

@@ -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