034e0ad29aee30848fde95a7db318762874ee12f
4 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| 16d164b92a |
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>
|
|||
| 8bea3d06f6 |
Dashboard Refactor: Flow-based Metrics + Unified Data Model (#4)
# Dashboard Refactor: Flow-based Metrics + Unified Data Model
## Summary
This MR transforms the dashboard into a **flow-driven, backend-powered analytics system** with a significantly cleaner architecture and improved UX.
## Overview
This MR introduces a **major refactor of the dashboard and report data model**, transitioning from separate `expense/income` handling to a unified **flow-based (`outflows` / `inflows`) system** backed by a single `metric` structure.
It simplifies data handling, improves UI consistency, and enables better extensibility for future analytics.
---
## Key Changes
### 1. Data Model Simplification
* Replaced:
* `expenses` / `incomes`
* With:
* `metric`
```ts
ReportPeriod {
start: string;
end: string;
metric: {
sum: number;
count: number;
transactions: Transaction[];
}
}
```
* Eliminates duplication across logic paths
* Flow is now controlled at query level instead of data shape
---
### 2. Flow-based System (Core Change)
* Introduced:
```ts
type DashboardFlow = "outflows" | "inflows";
```
* Replaced all references of:
* `expense` → `outflows`
* `income` → `inflows`
* Flow is now:
* Controlled at **Dashboard level**
* Propagated to **API query (`useReport`)**
---
### 3. API Changes
#### `useReport`
* Removed legacy params:
* `group_by`, `rolling`, `include_transactions`, etc.
* New structure:
```ts
useReport({
periods: ["daily", "weekly", "monthly", "all"],
flow,
payee,
tags
})
```
* Backend now handles:
* Flow filtering
* Aggregation
---
### 4. Period System Update
* Removed:
* yearly, fyly, full
* Added:
* `daily`
* `all`
```ts
type PeriodType = "daily" | "weekly" | "monthly" | "all";
```
* Updated helpers:
* `periodIdToKey`
* `buildPeriodId`
* `buildLabel`
---
### 5. React Query UX Improvement
* Added:
```ts
placeholderData: keepPreviousData
```
* Prevents UI flicker on filter/flow changes
* Enables smooth transitions
---
### 6. Dashboard State Refactor
#### Before
```ts
mode: "expense" | "income"
```
#### After
```ts
flow: "outflows" | "inflows"
```
* Introduced `onFlowChange` callback
* Lifted flow state to parent (`Dashboard.tsx`)
* Flow change triggers API refetch
---
### 7. UI Improvements
#### Flow Toggle
* Replaced mode toggle with:
* Outflows / Inflows switch
#### Loading State Handling
* Added `isFetching` across components
* UI behavior during fetch:
* Reduced opacity
* Disabled interactions
#### Drill-down UX
* Added:
* "Clear Drill-down" button
---
### 8. New Components
#### TopPayees
* New analytics card
* Shows top payees based on:
* Selected period
* Drill-down filters
* Supports:
* Click-to-filter (drill-down)
---
### 9. Adapter Layer Simplification
#### Removed mode branching everywhere
Examples:
* `getAmount(period)` now uses:
```ts
period.metric.sum
```
* `LatestItems`, `TopTags`, `HistoryChart`:
* No longer split logic by expense/income
* Work on unified transaction stream
---
### 10. GroupKey Generalization
#### Before
```ts
{
payee?: string[];
tags?: string[];
}
```
#### After
```ts
{
[dimension: string]: string[];
}
```
* Enables future dimensions without refactor
---
## Behavioral Changes
* Flow selection now **controls backend query**
* All components consume **filtered data only**
* No client-side filtering for expense/income
---
## Benefits
* Single source of truth (`metric`)
* Cleaner adapters (no branching explosion)
* Easier feature additions (new dimensions, filters)
* Better UX (no flicker, smoother transitions)
* Backend-driven correctness
---
## Migration Notes
* Replace all `mode` usages with `flow`
* Update adapters to use `metric`
* Remove assumptions about:
* `expenses`
* `incomes`
* Ensure API supports:
* `flow`
* new period types
---
## Future Scope
* Add more dimensions (account, category hierarchy)
* Multi-flow comparison (inflows vs outflows together)
* Snapshot-based caching (already partially supported)
---
## Testing Notes
Verify:
* Flow toggle updates API calls
* No UI flicker on filter change
* Drill-down works across:
* tags
* payees
* Daily / Weekly / Monthly / All tabs behave correctly
* Loading state disables interaction properly
---
Reviewed-on: #4
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
|
|||
| 77b60ba073 |
items-by-period (#2)
Reviewed-on: #2 Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com> Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com> |
|||
| 009ab50b47 |
major refactor of the dashboard and react-openapi integration (#1)
## Summary This MR introduces a major refactor of the dashboard and react-openapi integration, focusing on configurability, separation of concerns, and improved extensibility. --- ## Key Changes ### 1. OpenAPI / Admin Refactor * Extracted `ConfigContext` into a dedicated provider. * Introduced `AppProvider` to encapsulate: * Config loading * API client initialization * React Query setup * Removed internal `QueryClientProvider` from `Admin` for better composability. * `Admin` now supports both: * Standalone usage * Nested usage inside an existing provider ### 2. Resource System Improvements * Added `hidden` flag to `ResourceConfig` and overrides. * Admin UI now filters out hidden resources. * Added `useResourceByName` helper for dynamic resource access. * Improved `useResource`: * Handles undefined config safely * Adds guards for missing endpoints * Disables queries when endpoint is absent ### 3. API Client Enhancements * Added custom `paramsSerializer`: * Serializes arrays without `[]` * Ensures backend-compatible query formats ### 4. Dashboard Architecture Overhaul * Replaced hardcoded dashboard with **config-driven system**: * Introduced `ConfigurableDashboard` * Dashboard sections defined via config * New state model: * `mode` (expense/income) * `periodType` (rolling/calendar) * `comparison` * `selectedPeriodId` ### 5. Component Refactor (View / Logic Split) * Split major components into: * `.tsx` (logic/controller) * `.view.tsx` (presentation) * `.models.ts` (types) * Applied to: * Dashboard * HistoryChart * ProgressCard * LatestItems ### 6. HistoryChart Redesign * Fully rebuilt using report-driven data * Supports: * Weekly / Monthly / Yearly / FY / Full views * Rolling vs Calendar periods * Comparison mode (auto-aligned offsets) * Introduced: * Bucket merging logic * Dynamic comparison attachment ### 7. Reporting Integration * Dashboard now powered by: * `useReport` * `prepareReport` * Removes need for multiple manual API calls ### 8. UI / UX Improvements * Theme-aware color system * Dynamic accent colors per mode * Cleaner layout using section-based rendering * Improved selection and interaction in charts ### 9. Cleanup & Removals * Removed legacy components: * Old `HistoryChart` * Old `ProgressCard` * Simplified Header layout spacing --- ## Behavior Changes * Hidden resources are no longer visible in Admin UI. * Dashboard is now entirely configuration-driven. * API query params for arrays no longer use `[]`. * Resource hooks no longer crash on missing config. --- ## Risks / Considerations * Dashboard depends on correct configuration structure. * Hidden flag may unintentionally hide resources if misconfigured. * Query param serialization change must align with backend expectations. --- ## Follow-ups * Add typing improvements to remove `@ts-ignore` in `GenericForm`. * Extend dashboard config with more reusable section presets. * Add tests for report aggregation and comparison logic. --- Reviewed-on: #1 Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com> Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com> |
