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

Dashboard Refactor #5

Merged
aetos merged 5 commits from lean-components into main 2026-05-19 07:11:47 +00:00
Conversation 0 Commits 5 Files Changed 23 +510 -620
aetos commented 2026-05-19 07:11:31 +00:00
Owner
Copy Link

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:

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:

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:

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:

style: {
  size: 12,
}

Now:

{
  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:

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:

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:

HistoryChart.models.ts
HistoryChart.props.ts

Benefits:

  • Cleaner typing boundaries
  • Better maintainability
  • Reduced coupling

Migrated to Shared Dashboard State

HistoryChart now consumes:

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

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:

ProgressCard.view.tsx

Introduced ProgressCard.props.ts

Separated props into dedicated interfaces:

ProgressCardProps
ProgressCardViewProps

Reworked Styling System

Removed dependency on:

colorTheme

Now fully driven by:

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:

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:

ComponentProps

via:

ProgressCardProps

This aligns all dashboard widgets under the same architecture.

Theme System Cleanup

Consolidated AppTheme

Moved to:

src/shared-theme/AppTheme.tsx

and removed unused duplicate implementations.

Added Explicit Color Mode Context

Introduced:

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:

getDesignTokens(mode)

Benefits:

  • Easier to reason about
  • Cleaner light/dark handling
  • Less framework complexity

Added Global CssBaseline

<CssBaseline />

is now applied centrally inside AppTheme.

Type Safety Improvements

Removed Optional Fields Where Invalid

Several previously optional fields are now required:

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
# 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
aetos added 5 commits 2026-05-19 07:11:32 +00:00
common component props ceaeca70cc
common component props 340cb6628d
common component props eb45304207
flow fixes 980dd6c111
coloring fixes 98bf77d7e8
aetos merged commit 16d164b92a into main 2026-05-19 07:11:47 +00:00
aetos deleted branch lean-components 2026-05-19 07:11:47 +00:00
aetos referenced this issue from a commit 2026-05-19 07:11:49 +00:00
Dashboard Refactor (#5)
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
aetos
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: apps/khata-ui#5
No description provided.
Delete Branch "lean-components"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?