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>

src/components/Dashboard/Dashboard.view.tsx

@@ -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>
-  );
-}