Vishesh 'ironeagle' Bangotra
16d164b92a
# Dashboard Refactor
## Overview
This merge request performs a major cleanup and architectural refactor of the dashboard component system.
The primary goals were:
* Consolidate dashboard state handling
* Standardize component contracts
* Remove duplicated transaction aggregation logic
* Simplify theming
* Eliminate unnecessary wrapper/view layers
* Improve maintainability and type safety
---
# Major Changes
## Dashboard Architecture Refactor
### Consolidated State API
Introduced a centralized `DashboardStateSetters` interface:
```ts
export interface DashboardStateSetters {
setSelectedPeriodId: (id: DashboardSelectedPeriodId) => void;
setSelectedGroupKey: (groupKey: GroupKey | null) => void;
toggleFlow: () => void;
togglePeriodType: () => void;
toggleComparison: () => void;
}
```
This removes scattered prop drilling and standardizes dashboard interaction handling.
---
### Introduced Shared `ComponentProps`
All dashboard widgets now consume a unified contract:
```ts
export interface ComponentProps extends DashboardSection {
reportData: ReportData;
state: DashboardState;
stateSetters: DashboardStateSetters;
isFetching: boolean;
colorScheme: {
primary: string;
light: string;
text: string;
};
}
```
Benefits:
* Consistent widget APIs
* Reduced repetitive prop definitions
* Easier extensibility
* Cleaner component composition
---
### Removed `Dashboard.view.tsx`
The view/container split was removed.
Dashboard rendering now lives directly inside:
```ts
Dashboard.tsx
```
Benefits:
* Reduced indirection
* Easier navigation
* Lower cognitive overhead
* Simpler state flow
---
## Dashboard Config Cleanup
Removed legacy `style.size` configuration from dashboard sections.
Before:
```ts
style: {
size: 12,
}
```
Now:
```ts
{
id: "items",
title: "Recent Transactions",
component: LatestItems,
}
```
This simplifies section configuration and removes unnecessary abstraction.
---
# Shared Transaction Utilities
## Added `extractFilteredTransactions`
Created a reusable transaction extraction helper:
```ts
extractFilteredTransactions(
reportData,
selectedPeriodId,
selectedGroupKey
)
```
This centralizes:
* Period resolution
* Group filtering
* Tag filtering
* Payee filtering
Previously duplicated across:
* LatestItems
* TopTags
* TopPayees
---
## Added `aggregateTransactions`
Created a reusable aggregation utility:
```ts
aggregateTransactions(
transactions,
keyExtractor,
limit
)
```
Benefits:
* Removes repeated Map aggregation logic
* Standardizes sorting and totals
* Simplifies adapters significantly
---
# HistoryChart Refactor
## Split Models vs Props
Separated:
* data models
* component props
* view props
into dedicated files.
New:
```txt
HistoryChart.models.ts
HistoryChart.props.ts
```
Benefits:
* Cleaner typing boundaries
* Better maintainability
* Reduced coupling
---
## Migrated to Shared Dashboard State
HistoryChart now consumes:
```ts
state
stateSetters
```
instead of individual props.
This aligns it with the new dashboard architecture.
---
# LatestItems Refactor
## Simplified Component Contract
Removed duplicated props:
* flow
* header
* accentColor
* selectedPeriodId
* selectedGroupKey
Now inherited from shared `ComponentProps`.
---
## Added Auto Reset on Flow Change
```ts
React.useEffect(() => {
setVisibleCount(5);
}, [flow]);
```
Improves UX when switching inflow/outflow views.
---
# ProgressCard Refactor
## Removed `ProgressCard.tsx`
Deleted unnecessary wrapper component.
Rendering logic now lives directly in:
```txt
ProgressCard.view.tsx
```
---
## Introduced `ProgressCard.props.ts`
Separated props into dedicated interfaces:
```ts
ProgressCardProps
ProgressCardViewProps
```
---
## Reworked Styling System
Removed dependency on:
```ts
colorTheme
```
Now fully driven by:
```ts
colorScheme
```
Benefits:
* Consistent dashboard-wide theming
* Better dark mode behavior
* Reduced MUI palette coupling
---
## Improved Visual Consistency
Updated:
* borders
* shadows
* progress bar styling
* dark mode surfaces
* selection state styling
to use standardized dashboard colors.
---
# TopTags & TopPayees Refactor
## Removed Duplicated Aggregation Logic
Both adapters now use:
```ts
extractFilteredTransactions()
aggregateTransactions()
```
instead of maintaining separate filtering/aggregation implementations.
Benefits:
* Less code duplication
* Consistent behavior
* Easier future maintenance
---
## Migrated to Shared Component Props
Both components now consume:
```ts
ComponentProps
```
via:
```ts
ProgressCardProps
```
This aligns all dashboard widgets under the same architecture.
---
# Theme System Cleanup
## Consolidated AppTheme
Moved to:
```txt
src/shared-theme/AppTheme.tsx
```
and removed unused duplicate implementations.
---
## Added Explicit Color Mode Context
Introduced:
```ts
ColorModeContext
```
with:
* `mode`
* `setMode`
* `toggleColorMode`
This provides a cleaner foundation for future theme controls.
---
## Simplified Theme Creation
Replaced older MUI experimental color scheme setup with:
```ts
getDesignTokens(mode)
```
Benefits:
* Easier to reason about
* Cleaner light/dark handling
* Less framework complexity
---
## Added Global CssBaseline
```tsx
<CssBaseline />
```
is now applied centrally inside `AppTheme`.
---
# Type Safety Improvements
## Removed Optional Fields Where Invalid
Several previously optional fields are now required:
```ts
title: string
background: string
text: string
isFetching: boolean
style.palette
```
Benefits:
* Stronger guarantees
* Fewer runtime fallbacks
* Simpler rendering logic
---
# Cleanup Summary
## Removed
* `Dashboard.view.tsx`
* `ProgressCard.tsx`
* legacy prop duplication
* repeated transaction extraction logic
* repeated aggregation logic
* unused style configuration
* legacy theme configuration complexity
---
## Added
* centralized dashboard state setters
* reusable transaction helpers
* reusable aggregation helper
* unified component props
* dedicated prop definition files
* explicit color mode context
* consolidated theme provider
---
# Result
The dashboard system is now:
* significantly more maintainable
* easier to extend
* more type-safe
* less repetitive
* more consistent across widgets
* cleaner in terms of state ownership
* simpler to theme and customize
Reviewed-on: #5
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import * as React from "react";
|
|
import { Box, Paper, Typography } from "@mui/material";
|
|
import ProgressCardView from "./ProgressCard.view";
|
|
import { extractTopPayees } from "./TopPayees.adapter";
|
|
import { ProgressCardProps } from "./ProgressCard.props";
|
|
|
|
export default function TopPayees(props: ProgressCardProps) {
|
|
const {
|
|
title,
|
|
|
|
reportData,
|
|
state,
|
|
stateSetters,
|
|
|
|
isFetching,
|
|
} = props
|
|
const { flow, selectedPeriodId, selectedGroupKey } = state;
|
|
const { setSelectedGroupKey } = stateSetters;
|
|
|
|
const { items, total } = React.useMemo(() => {
|
|
return extractTopPayees(reportData, flow, selectedPeriodId, selectedGroupKey);
|
|
}, [reportData, flow, selectedPeriodId, selectedGroupKey]);
|
|
|
|
return (
|
|
<Paper
|
|
sx={{
|
|
p: { xs: 2.5, sm: 4 },
|
|
borderRadius: 4,
|
|
width: "100%",
|
|
boxShadow: "none",
|
|
border: "1px solid",
|
|
borderColor: "divider",
|
|
bgcolor: "background.paper",
|
|
opacity: isFetching ? 0.6 : 1,
|
|
transition: "opacity 0.3s ease",
|
|
pointerEvents: isFetching ? "none" : "auto",
|
|
}}
|
|
>
|
|
<Typography variant="h6" fontWeight={700} gutterBottom>
|
|
{title}
|
|
</Typography>
|
|
|
|
<Box
|
|
sx={{
|
|
display: "grid",
|
|
gridTemplateColumns: {
|
|
xs: "1fr",
|
|
sm: "repeat(2, 1fr)",
|
|
md: "repeat(4, 1fr)",
|
|
},
|
|
gap: 2,
|
|
}}
|
|
>
|
|
{items.map((item) => {
|
|
const isSelected = !!selectedGroupKey?.payee?.includes(item.name);
|
|
return (
|
|
<ProgressCardView
|
|
{...props}
|
|
key={item.name}
|
|
title={item.name}
|
|
progressAmount={item.amount}
|
|
totalAmount={total}
|
|
selected={isSelected}
|
|
onClick={() => {
|
|
if (setSelectedGroupKey) {
|
|
let newKey = selectedGroupKey ? { ...selectedGroupKey } : {};
|
|
|
|
if (isSelected) {
|
|
delete newKey.payee;
|
|
} else {
|
|
newKey.payee = [item.name];
|
|
}
|
|
|
|
setSelectedGroupKey(Object.keys(newKey).length ? newKey : null);
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Paper>
|
|
);
|
|
}
|