|
|
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>
|
2026-05-18 05:37:51 +00:00 |
|
|
|
ad62d7dd9c
|
filter-by-payee-and-tags (#3)
Reviewed-on: #3
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
0.0.1
|
2026-05-12 06:24:47 +00:00 |
|
|
|
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>
|
2026-05-09 13:00:42 +00:00 |
|
|
|
f213a9455b
|
Fix pagination bounds in HistoryChart and add responsive grid to TopTags
|
2026-05-07 16:42:52 +05:30 |
|
|
|
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>
|
2026-05-07 11:00:54 +00:00 |
|
|
|
b1db439dda
|
fixes for toggles
|
2026-04-07 13:32:16 +05:30 |
|
|
|
e4abe61781
|
fixes for correct labels
|
2026-04-07 12:48:42 +05:30 |
|
|
|
cef8f10990
|
added logic to only show 7 or 6 bars based on daily period or not
|
2026-04-07 12:16:13 +05:30 |
|
|
|
3f51d2f869
|
fixes
|
2026-04-07 12:01:22 +05:30 |
|
|
|
692d907ca5
|
fixes
|
2026-04-07 11:59:11 +05:30 |
|
|
|
15c2cce263
|
comparison amount text height refactor to avoid amount text clipping comparison bar
|
2026-04-07 11:59:01 +05:30 |
|
|
|
3704bd0c23
|
refactored types from HistoryChart.tsx
|
2026-04-07 11:32:32 +05:30 |
|
|
|
69c9fd6bef
|
fixed urls (hardcoded /admin) to admin navigation
|
2026-04-07 11:26:56 +05:30 |
|
|
|
00c8da629c
|
comparison with proper formatting for diff amount
|
2026-04-07 11:22:53 +05:30 |
|
|
|
ce0c34d014
|
labels with proper formatting
|
2026-04-07 11:14:04 +05:30 |
|
|
|
6c305e0cdd
|
labels with proper formatting
|
2026-04-07 11:12:29 +05:30 |
|
|
|
b587f8aeb6
|
compare shows +/- instead of full amounts for easier consumption
|
2026-04-07 11:06:24 +05:30 |
|
|
|
6602d29299
|
fixed compare display
|
2026-04-07 10:54:57 +05:30 |
|
|
|
f4e5979c00
|
fixed compare
|
2026-04-07 10:49:10 +05:30 |
|
|
|
e6c7778c08
|
comparison
|
2026-04-06 18:39:19 +05:30 |
|
|
|
f320f6ff31
|
rolling and calender toggle
|
2026-04-06 18:31:03 +05:30 |
|
|
|
fc88703a38
|
rolling and calender toggle
|
2026-04-06 18:27:05 +05:30 |
|
|
|
787324260c
|
rolling and calender toggle
|
2026-04-06 18:07:38 +05:30 |
|
|
|
8a866566ba
|
aggre based time week, month, year renamed to daily, weekly, monthly
|
2026-04-06 17:37:45 +05:30 |
|
|
|
5f0fa91075
|
rolling calender
|
2026-04-06 17:15:00 +05:30 |
|
|
|
6f1547dde7
|
relationShip fixes
|
2026-04-06 17:14:52 +05:30 |
|
|
|
234f86d6b9
|
amount formatter
|
2026-04-06 16:10:09 +05:30 |
|
|
|
2979634033
|
5 instead of 10 transactions
|
2026-04-06 16:09:57 +05:30 |
|
|
|
b07de2b03c
|
calcuation fixes
|
2026-04-04 22:42:34 +05:30 |
|
|
|
4eca3b7124
|
calcuation fixes
|
2026-04-04 22:35:17 +05:30 |
|
|
|
6abed4e72a
|
grid fixes
|
2026-04-04 22:30:30 +05:30 |
|
|
|
214c0be44e
|
dashboard fixes
|
2026-04-04 22:08:39 +05:30 |
|
|
|
68337ba312
|
dashboard loader
|
2026-04-04 20:14:39 +05:30 |
|
|
|
84059a84b5
|
rough dashboard components
|
2026-04-04 19:45:52 +05:30 |
|
|
|
ffa41825dd
|
react-openapi and react-auth cleanup. index.ts for react-openapi
|
2026-04-04 18:01:22 +05:30 |
|
|
|
86e5bc6429
|
theme fixes
|
2026-04-04 16:00:33 +05:30 |
|
|
|
3771eb7dca
|
fixes
|
2026-04-04 13:57:45 +05:30 |
|
|
|
47fa309342
|
header fixes
|
2026-04-04 13:56:20 +05:30 |
|
|
|
3e3d7686f6
|
header fixes
|
2026-04-04 13:53:21 +05:30 |
|
|
|
eb05cd264d
|
header fixes
|
2026-04-04 13:40:31 +05:30 |
|
|
|
c3d233c41a
|
header and footer
|
2026-04-04 13:34:48 +05:30 |
|
|
|
177cc976b4
|
fixes
|
2026-04-04 13:18:36 +05:30 |
|
|
|
0749060b1f
|
fixes
|
2026-04-04 13:07:28 +05:30 |
|
|
|
8a6b438e93
|
added footer
|
2026-04-04 13:05:51 +05:30 |
|
|
|
5c7d36403f
|
minor fixes
|
2026-04-04 13:00:02 +05:30 |
|
|
|
51e70a72e1
|
run file for run dev
|
2026-04-04 12:59:52 +05:30 |
|
|
|
9871dac5c2
|
refactored out of src packages
|
2026-04-04 12:55:10 +05:30 |
|
|
|
8a285bbdbe
|
init
|
2026-04-04 12:46:28 +05:30 |
|
