Dashboard Refactor (#5)
# 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>
This commit is contained in:
@@ -16,23 +16,26 @@ export interface DashboardState {
|
||||
comparison: boolean;
|
||||
}
|
||||
|
||||
export interface DashboardStateSetters {
|
||||
setSelectedPeriodId: (id: DashboardSelectedPeriodId) => void;
|
||||
setSelectedGroupKey: (groupKey: GroupKey | null) => void;
|
||||
toggleFlow: () => void;
|
||||
togglePeriodType: () => void;
|
||||
toggleComparison: () => void;
|
||||
}
|
||||
|
||||
export interface DashboardSection {
|
||||
id: string;
|
||||
title?: string;
|
||||
summary?: string;
|
||||
title: string;
|
||||
component: React.ComponentType<any>;
|
||||
summary?: string;
|
||||
settings?: Record<string, any>;
|
||||
isList?: boolean;
|
||||
style?: {
|
||||
size?: number;
|
||||
[key: string]: any;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ColorDefinition {
|
||||
primary: string;
|
||||
background?: string;
|
||||
text?: string;
|
||||
background: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export interface ThemeAwarePalette {
|
||||
@@ -42,14 +45,29 @@ export interface ThemeAwarePalette {
|
||||
|
||||
export interface DashboardConfig {
|
||||
sections: DashboardSection[];
|
||||
style?: {
|
||||
palette?: Record<DashboardFlow, ThemeAwarePalette>;
|
||||
style: {
|
||||
palette: Record<DashboardFlow, ThemeAwarePalette>;
|
||||
};
|
||||
}
|
||||
|
||||
export interface DashboardProps {
|
||||
config: DashboardConfig;
|
||||
data: ReportData;
|
||||
isFetching?: boolean;
|
||||
isFetching: boolean;
|
||||
onFlowChange?: (state: DashboardState) => void;
|
||||
}
|
||||
|
||||
|
||||
export interface ComponentProps extends DashboardSection {
|
||||
reportData: ReportData;
|
||||
|
||||
state: DashboardState;
|
||||
stateSetters: DashboardStateSetters;
|
||||
isFetching: boolean;
|
||||
|
||||
colorScheme: {
|
||||
primary: string;
|
||||
light: string;
|
||||
text: string;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,8 +1,24 @@
|
||||
import * as React from "react";
|
||||
import DashboardView from "./Dashboard.view";
|
||||
import { DashboardProps, DashboardState } from "./Dashboard.models";
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Grid,
|
||||
ToggleButton,
|
||||
ToggleButtonGroup,
|
||||
Button
|
||||
} from "@mui/material";
|
||||
import { useTheme, alpha } from "@mui/material/styles";
|
||||
import { DashboardProps, DashboardState, DashboardStateSetters, DashboardFlow } from "./Dashboard.models";
|
||||
|
||||
export default function Dashboard({
|
||||
config,
|
||||
data,
|
||||
isFetching,
|
||||
onFlowChange,
|
||||
}: DashboardProps) {
|
||||
const theme = useTheme();
|
||||
const themeMode = theme.palette.mode;
|
||||
|
||||
export default function Dashboard(props: DashboardProps) {
|
||||
const [state, setState] = React.useState<DashboardState>({
|
||||
flow: "outflows",
|
||||
periodType: "rolling",
|
||||
@@ -11,22 +27,38 @@ export default function Dashboard(props: DashboardProps) {
|
||||
comparison: false,
|
||||
});
|
||||
|
||||
const toggleFlow = (
|
||||
event: React.MouseEvent<HTMLElement>,
|
||||
newFlow: "outflows" | "inflows" | null
|
||||
) => {
|
||||
if (newFlow === null) return;
|
||||
|
||||
const toggleFlow = () => {
|
||||
setState(prev => {
|
||||
if (prev.flow === newFlow) return prev;
|
||||
|
||||
const next = { ...prev, flow: newFlow };
|
||||
props.onFlowChange?.(next);
|
||||
|
||||
return next;
|
||||
const nextFlow: DashboardFlow = prev.flow === "outflows" ? "inflows" : "outflows";
|
||||
const nextState: DashboardState = {
|
||||
...prev,
|
||||
flow: nextFlow,
|
||||
selectedGroupKey: null,
|
||||
selectedPeriodId: null,
|
||||
};
|
||||
onFlowChange?.(nextState);
|
||||
return nextState;
|
||||
});
|
||||
};
|
||||
|
||||
const handleFlowChange = (
|
||||
_event: React.MouseEvent<HTMLElement>,
|
||||
newFlow: DashboardFlow | null
|
||||
) => {
|
||||
if (newFlow !== null && newFlow !== state.flow) {
|
||||
setState(prev => {
|
||||
const nextState: DashboardState = {
|
||||
...prev,
|
||||
flow: newFlow,
|
||||
selectedGroupKey: null,
|
||||
selectedPeriodId: null,
|
||||
};
|
||||
onFlowChange?.(nextState);
|
||||
return nextState;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const togglePeriodType = () => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
@@ -49,16 +81,122 @@ export default function Dashboard(props: DashboardProps) {
|
||||
setState(prev => ({ ...prev, selectedGroupKey: groupKey }));
|
||||
};
|
||||
|
||||
const stateSetters: DashboardStateSetters = {
|
||||
togglePeriodType,
|
||||
toggleComparison,
|
||||
toggleFlow,
|
||||
setSelectedPeriodId,
|
||||
setSelectedGroupKey,
|
||||
};
|
||||
|
||||
const { flow, selectedGroupKey } = state;
|
||||
|
||||
const colors = React.useMemo(() => {
|
||||
const palette = config.style.palette[flow];
|
||||
const modeColors = palette[themeMode];
|
||||
|
||||
return {
|
||||
primary: modeColors.primary,
|
||||
light: modeColors.background || alpha(modeColors.primary, 0.1),
|
||||
text:
|
||||
modeColors.text ||
|
||||
(themeMode === "light" ? theme.palette.text.primary : "#fff"),
|
||||
};
|
||||
|
||||
// if (modeColors) {
|
||||
// return {
|
||||
// primary: modeColors.primary,
|
||||
// light: modeColors.background || alpha(modeColors.primary, 0.1),
|
||||
// text:
|
||||
// modeColors.text ||
|
||||
// (themeMode === "light" ? theme.palette.text.primary : "#fff"),
|
||||
// };
|
||||
// }
|
||||
//
|
||||
// const themeColor =
|
||||
// flow === "outflows" ? theme.palette.error : theme.palette.success;
|
||||
//
|
||||
// return {
|
||||
// primary: themeColor.main,
|
||||
// light: alpha(themeColor.main, themeMode === "light" ? 0.08 : 0.15),
|
||||
// text: themeColor.main,
|
||||
// };
|
||||
}, [config.style?.palette, flow, themeMode, theme.palette]);
|
||||
|
||||
return (
|
||||
<DashboardView
|
||||
{...props}
|
||||
state={state}
|
||||
setState={setState}
|
||||
toggleFlow={toggleFlow}
|
||||
togglePeriodType={togglePeriodType}
|
||||
toggleComparison={toggleComparison}
|
||||
setSelectedPeriodId={setSelectedPeriodId}
|
||||
setSelectedGroupKey={setSelectedGroupKey}
|
||||
/>
|
||||
<Container
|
||||
sx={{
|
||||
mt: 4,
|
||||
mb: 4,
|
||||
background: `linear-gradient(180deg, ${colors.light} 0%, transparent 100%)`,
|
||||
borderRadius: 4,
|
||||
p: 2,
|
||||
transition: "background 0.3s ease",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<ToggleButtonGroup
|
||||
value={flow}
|
||||
exclusive
|
||||
onChange={handleFlowChange}
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
overflow: "hidden",
|
||||
"& .MuiToggleButton-root": {
|
||||
px: 3,
|
||||
textTransform: "none",
|
||||
color: "text.secondary",
|
||||
},
|
||||
"&.Mui-selected": {
|
||||
bgcolor: colors.primary,
|
||||
color: "white",
|
||||
borderColor: colors.primary,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ToggleButton value="outflows">Outflows</ToggleButton>
|
||||
<ToggleButton value="inflows">Inflows</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
|
||||
{selectedGroupKey && Object.keys(selectedGroupKey).length > 0 && (
|
||||
<Button
|
||||
size="small"
|
||||
sx={{ mt: 1, textTransform: "none" }}
|
||||
onClick={() => setSelectedGroupKey(null)}
|
||||
>
|
||||
Clear Drill-down
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={4}>
|
||||
{config.sections.map((section) => {
|
||||
const Component = section.component;
|
||||
|
||||
return (
|
||||
<Grid key={section.id} size={12}>
|
||||
<Component
|
||||
{...section}
|
||||
|
||||
reportData={data}
|
||||
|
||||
state={state}
|
||||
stateSetters={stateSetters}
|
||||
isFetching={isFetching}
|
||||
|
||||
colorScheme={colors}
|
||||
/>
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Grid,
|
||||
Typography,
|
||||
ToggleButton,
|
||||
ToggleButtonGroup,
|
||||
Button
|
||||
} from "@mui/material";
|
||||
import { useTheme, alpha } from "@mui/material/styles";
|
||||
import { GroupKey } from "../../features/report";
|
||||
import { DashboardProps, DashboardState } from "./Dashboard.models";
|
||||
|
||||
interface ViewProps extends DashboardProps {
|
||||
state: DashboardState;
|
||||
setState: React.Dispatch<React.SetStateAction<DashboardState>>;
|
||||
toggleFlow: (event: React.MouseEvent<HTMLElement>, newFlow: "outflows" | "inflows" | null) => void;
|
||||
togglePeriodType: () => void;
|
||||
setSelectedPeriodId: (id: string | null) => void;
|
||||
setSelectedGroupKey: (groupKey: GroupKey | null) => void;
|
||||
toggleComparison: () => void;
|
||||
}
|
||||
|
||||
export default function DashboardView({
|
||||
config,
|
||||
data,
|
||||
state,
|
||||
setState,
|
||||
toggleFlow,
|
||||
togglePeriodType,
|
||||
toggleComparison,
|
||||
setSelectedPeriodId,
|
||||
setSelectedGroupKey,
|
||||
}: ViewProps) {
|
||||
const theme = useTheme();
|
||||
const themeMode = theme.palette.mode;
|
||||
const { flow, periodType, comparison, selectedPeriodId, selectedGroupKey } = state;
|
||||
|
||||
// Resolve colors with fallbacks
|
||||
const colors = React.useMemo(() => {
|
||||
const palette = config.style?.palette?.[flow];
|
||||
const modeColors = palette ? palette[themeMode] : null;
|
||||
|
||||
if (modeColors) {
|
||||
return {
|
||||
primary: modeColors.primary,
|
||||
light: modeColors.background || alpha(modeColors.primary, 0.1),
|
||||
text: modeColors.text || (themeMode === 'light' ? theme.palette.text.primary : '#fff')
|
||||
};
|
||||
}
|
||||
|
||||
// Fallback to standard theme colors
|
||||
const themeColor = flow === 'outflows' ? theme.palette.error : theme.palette.success;
|
||||
return {
|
||||
primary: themeColor.main,
|
||||
light: alpha(themeColor.main, themeMode === 'light' ? 0.08 : 0.15),
|
||||
text: themeColor.main
|
||||
};
|
||||
}, [config.style?.palette, flow, themeMode, theme.palette]);
|
||||
|
||||
return (
|
||||
<Container
|
||||
sx={{
|
||||
mt: 4,
|
||||
mb: 4,
|
||||
background: `linear-gradient(180deg, ${colors.light} 0%, transparent 100%)`,
|
||||
borderRadius: 4,
|
||||
p: 2,
|
||||
transition: 'background 0.3s ease'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", mb: 3 }}>
|
||||
<ToggleButtonGroup
|
||||
value={flow}
|
||||
exclusive
|
||||
onChange={toggleFlow}
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
overflow: "hidden",
|
||||
"& .MuiToggleButton-root": {
|
||||
px: 3,
|
||||
textTransform: "none",
|
||||
color: "text.secondary"
|
||||
},
|
||||
"&.Mui-selected": {
|
||||
bgcolor: colors.primary,
|
||||
color: "white",
|
||||
borderColor: colors.primary
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ToggleButton value="outflows">Outflows</ToggleButton>
|
||||
<ToggleButton value="inflows">Inflows</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
|
||||
{selectedGroupKey && Object.keys(selectedGroupKey).length > 0 && (
|
||||
<Button
|
||||
size="small"
|
||||
sx={{ mt: 1, textTransform: "none" }}
|
||||
onClick={() => setSelectedGroupKey(null)}
|
||||
>
|
||||
Clear Drill-down
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={4}>
|
||||
{config.sections.map((section) => {
|
||||
const Component = section.component;
|
||||
|
||||
return (
|
||||
<Grid key={section.id} size={section.style?.size || 12 as any}>
|
||||
<Component
|
||||
{...section.settings}
|
||||
header={section.title}
|
||||
summary={section.summary}
|
||||
reportData={data}
|
||||
title={section.title}
|
||||
accentColor={colors.primary}
|
||||
colorScheme={colors}
|
||||
|
||||
// State management
|
||||
flow={flow}
|
||||
|
||||
periodType={periodType}
|
||||
comparison={comparison}
|
||||
selectedPeriodId={selectedPeriodId}
|
||||
selectedGroupKey={selectedGroupKey}
|
||||
|
||||
togglePeriodType={togglePeriodType}
|
||||
toggleComparison={toggleComparison}
|
||||
setSelectedPeriodId={setSelectedPeriodId}
|
||||
setSelectedGroupKey={setSelectedGroupKey}
|
||||
isFetching={arguments[0].isFetching}
|
||||
/>
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user