d58f2a0744
fix: use date component for report snapshot start/end dates
2026-06-12 16:29:55 +05:30
8300e43e14
feat: add date field overrides for fetch-requests and allow type/label in overrides
2026-06-10 00:40:19 +05:30
386297dc1e
fix: date rendering now shows only date for date fields
2026-06-10 00:29:19 +05:30
a227c14e0a
removed displayField
2026-06-08 01:03:00 +05:30
58df11c623
refactor: replace all displayField usages with displayFormat
2026-06-08 00:55:54 +05:30
9771816cf9
getDisplayString fix to use displayFormat
2026-06-08 00:37:17 +05:30
7bd946ec7a
Refactor the React OpenAPI admin framework to support fully customizable field rendering and UI composition. ( #11 )
...
# Summary
Refactor the React OpenAPI admin framework to support fully customizable field rendering and UI composition.
## Changes
### Admin UI Customization
* Added support for custom:
* Dashboard component
* Layout component
* Login page component
* Introduced `AdminAppProps` and extended `Admin` configuration API.
* Renamed internal dashboard implementation to `DefaultDashboard`.
### Field Component Architecture
* Extracted field rendering into dedicated field components:
* TextField
* NumberField
* BooleanField
* DateField
* EnumField
* RelationField
* ObjectField
* FallbackField
* DateRangeField
* NumberRangeField
* Added `defaultFieldComponents` registry.
* Refactored `FormField` to resolve components dynamically from a component map instead of hardcoded field type handling.
### Resource Customization
* Added `FieldComponents` support across:
* Admin
* ResourceView
* GenericForm
* useResource
* Introduced wrapped `FormField` and `GenericForm` components generated from configured field overrides.
### Table Customization
* Added `EnhancedTableComponents`.
* Added support for custom cell renderers per field type.
* Enabled custom rendering for both desktop and mobile table layouts.
### Filter Improvements
* Exported `FilterAutocomplete`.
* Added support for custom date-range and number-range filter components.
* Added filter component extension points.
* Updated filter option label resolution to support `displayFormat`.
### Display Formatting
* Replaced `displayField` usage with `displayFormat`.
* Added template-based display rendering support through `resolveTemplate`.
* Improved relation display configuration handling.
### TypeScript Improvements
* Added TypeScript as a project dependency.
* Removed multiple `@ts-ignore` usages.
* Added strongly typed Axios wrapper methods with generic response support.
* Improved typing across hooks and component interfaces.
### OpenAPI Configuration Validation
* Added validation for enum fields without enum values.
* Added validation for relation resources missing `referenceOptions.enumOption`.
* Improved relation metadata propagation during schema parsing.
### Library Exports
* Exported:
* Field component types
* Override types
* EnhancedTable
* GenericForm
* ResourceView
* Field components and defaults
* Expanded public API surface for consumers extending the framework.
## Benefits
* Enables complete UI customization without modifying framework internals.
* Simplifies creation of custom field types and renderers.
* Improves type safety and developer experience.
* Provides consistent extension points for forms, tables, filters, and admin layouts.
* Makes the framework more suitable for reusable library distribution.
Reviewed-on: #11
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com >
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com >
2026-06-07 12:35:52 +00:00
e6ce62a166
openapi-spec-reader ( #10 )
...
### Summary of Changes:
1. **Spec-Driven Enums**:
- Updated `openapi_loader.ts` to collect all standalone enum schemas (e.g., `FetchRequestStatus`) into the `AppConfig.enums` map.
- Implemented `mergeProperties` and `oneOf`/`anyOf` resolution in `openapi_loader.ts` to ensure complex schemas like `FetchRequest` (using `allOf`) and `source` (using `oneOf`) are correctly parsed.
2. **Customizable Labeling**:
- Added `enumOption` (template-based) and `enumLabels` (mapping-based) to the config and field types.
- Implemented `resolveTemplate` in `utils/options.ts` to handle placeholders like `'{name} {number}'` or plain field names.
3. **UI Integration**:
- **`FormField.tsx`**: Updated relation and enum selects to use `getFieldOptions()` for correct key/value pairs and labels. Added value normalization to extract keys from API objects.
- **`EnhancedTable.tsx`**: Updated `valueOptions` to use key/value pairs for `singleSelect` and updated `FieldRenderer` to show the human-readable label for enums.
- **`FilterBar.tsx`**: Updated `extractOptions` to use spec-driven labels for enum filters.
- **`ResourceView.tsx`**: Centralized filter matching logic into a `getDisplayString` helper, ensuring filter comparisons use the same templates as the UI labels.
4. **App Fixes**:
- `FetchRequests.tsx` and `FetchRequestDetail.tsx` now derive status and format options from the OpenAPI spec via `useConfig()` instead of using hardcoded arrays.
Reviewed-on: #10
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com >
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com >
2026-06-04 17:23:44 +00:00
2dbe9a5270
icici not icici_ocr
2026-06-03 19:01:38 +05:30
5cf2a4c3c4
Fetch Request UI ( #9 )
...
## Summary
Add Fetch Request pipeline UI with real-time SSE progress tracking, ambiguity resolution, enhanced list page with filtering/retry, and detail page with stepper/event feed. Includes new API primitives (`api.patch`, `usePatch` hook) and extensive type definitions for SSE events, ambiguity resolution, and pipeline statuses.
## Changes by file
### `react-openapi/api/client.ts`
- Added `api.patch()` method (delegates to `AxiosInstance.patch`)
### `react-openapi/hooks/useResource.ts`
- Added `usePatch()` mutation hook — sends PATCH `/{endpoint}/{id}` with partial data, invalidates list + detail query caches on success
### `src/FetchRequestDetail.tsx` **(new, +675 lines)**
Full detail page for a single fetch request, composed of:
- **Header** — status chip, account name, source type (File/Email), date range, created/completed timestamps
- **Progress bar** — `LinearProgress` with percentage computed via `computeProgressPercent()`:
- Extract phase: snaps to 10% on first `raw_lines`/`txn_blocks` event
- Raw Expense: ratio of `displayParsedCount` / `txnBlockCount` × 20%
- Enrich: ratio of `stepStats.enrich_count` / `txnDictCount` × 50%
- Save: ratio of `stepStats.save_count` / `txnDictCount` × 20%
- **Retry section** — retry count bar (`retryCount/RETRY_MAX`) + "Retry" button if failed & not exhausted
- **Error/success alerts** — `error_message` display, max-retries info
- **Pipeline Stepper** — 4-step (`Extract` → `Raw Expense` → `Enrich` → `Save`) with custom icons per state: completed (CheckCircle, green), active (CircularProgress, animating), paused (WarningAmber, amber), failed (ErrorIcon, red), inactive (step number, grey). Step count labels shown below each label (e.g. `150/246`, `100/246`)
- **Progress Events feed** — auto-scrolling list of SSE events with deduplication:
- Only latest `progress` event per step (`txn_dicts`, `enrich`, `save_expenses`)
- `started` events hidden when a terminal event (`completed`/`skipped`/`paused`/`failed`) follows
- `load_content` events excluded entirely
- Connection status indicator (green dot / red dot)
- **Ambiguity Resolution** — When pipeline is `paused`, shows ambiguity cards:
- Raw line in monospace code block
- OCR amount/balance (struck through), previous balance
- Candidate buttons with credit/debit coloring (green for positive, red for negative)
- Resolved state shows green alert with chosen values
- "All resolved" vs "Pipeline paused" alerts
- **SSE connection** — `EventSource` to `{baseUrl}/fetch-requests/{id}/events`:
- Tracks `progress`, `completed`, `paused`, `failed` events
- On `paused`: refetch request + ambiguities
- On `failed`: refetch request + show error snackbar from `message.error`
- On `completed`/`resume_extract`: refetch request
- Cleans up on unmount
- **Snackbar** — pipeline failure notification (6s, bottom-center)
### `src/FetchRequests.tsx` **(+347/−73 lines)**
Major enhancement to the list page:
- **New filter bar** (replaces plain list header):
- Status multi-select (pending, processing, paused, raw_expenses_done, enriched_done, completed, failed)
- Account name text filter
- Source type toggle (All / File / Email)
- Refresh button
- **Account autocomplete** — fetches accounts list via `useResourceByName("accounts")`, provides dropdown
- **Format dropdown** — driven by `resourceOverrides` config (`fetchRes.fields.source.schema.format.options`), fallback `["axis", "icici_ocr"]`
- **Date pickers** — changed from `datetime-local` to `date`, capped at today's date
- **Navigation** — on create, navigates to `/fetch-requests/{id}` via `useNavigate`
- **Row actions**: retry (failed, retry_count < 3), navigate to detail (paused), delete with confirmation dialog
- **Copy fingerprint** — icon button copies to clipboard with snackbar confirmation
- **Sorting** — table sorted by `created_at` descending
- **Table columns** — changed from `[Fingerprint, Source, Account, Status, Created, Actions]` to `[ID, Account, Source, Date Range, Status, Retries, Created, Actions]`
- **Retry count display** — shows `retry_count/RETRY_MAX` when >0, otherwise `—`
- **Status tooltip** — shows `error_message` on hover when present
- **Status icons** — new `statusIcons` map: ScheduleIcon (pending), CircularProgress (processing), WarningAmber (paused), HourglassEmpty (raw_expenses_done/enriched_done), CheckCircle (completed), ErrorIcon (failed)
- **Error handling** — 409 conflict detection (duplicate fingerprint), 422 validation via `formatApiError()`
- **`handleRetry`** — PATCH `{status: "pending"}` on failed requests, success/error snackbar
### `src/features/fetch-requests/fetch-requests.models.ts` **(+97 lines)**
New types and helpers:
- Added `"paused"` to `FetchRequestStatus`
- `FileSource`: added `raw_lines`, `txn_blocks`, `txn_dicts`, `txn_dict_count`, `txn_dicts_count`
- `EmailSource`: added `txn_dict_count`, `txn_dicts_count`
- `FetchRequest` added `retry_count`
- **New interfaces**: `FetchRequestUpdate`, `AmbiguityCandidate`, `PendingAmbiguity`, `ResolveAmbiguityPayload`, `FetchRequestFilters`
- **SSE types**:
- `SSEEventStep`: `load_content | raw_lines | txn_blocks | txn_dicts | resume_extract | extract | paused | complete | enrich | save_expenses | pipeline`
- `SSEEventStatus`: `started | completed | skipped | paused | progress | failed`
- `ProgressMessage`: `lines? | blocks? | count? | unit? | raw_ocr_line? | error?`
- `SSEEvent: { step, status, message }`
- **Helpers**: `formatApiError()` — parses FastAPI 422 validation detail arrays (`"Missing: field_name"`), `RETRY_MAX = 3`
### `src/features/fetch-requests/index.ts` **(+13 lines)**
Barrel exports for all new types (`FetchRequestUpdate`, `FetchRequestFilters`, `PendingAmbiguity`, `AmbiguityCandidate`, `ResolveAmbiguityPayload`, `SSEEvent`, `SSEEventStep`, `SSEEventStatus`, `ProgressMessage`), value exports (`RETRY_MAX`, `formatApiError`), and new hooks (`useUpdateFetchRequest`, `useFetchRequestAmbiguities`, `useResolveAmbiguity`)
### `src/features/fetch-requests/useFetchRequests.ts` **(+49 lines)**
Added hooks:
- `useUpdateFetchRequest()` → `usePatch("fetch-requests")`
- `useFetchRequestAmbiguities(fetchRequestId)` → `useQuery` for `GET /fetch-requests/{id}/ambiguities`
- `useResolveAmbiguity()` → `useMutation` for `POST /ambiguities/{id}/resolve` with cache invalidation of both ambiguities and detail queries
### `src/main.jsx` **(+2 lines)**
- Added import for `FetchRequestDetail`
- Added route `{ path: "/fetch-requests/:id", component: FetchRequestDetail, headerTitle: "Fetch Request" }`
Reviewed-on: #9
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com >
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com >
2026-05-31 09:28:26 +00:00
d4a79c785d
report-fetch-request-ui ( #7 )
...
## MR: Fetch Request Pipeline, Report Snapshots, and Admin Filtering
### Summary
Adds fetch request pipeline UI, report snapshot manager, snapshot selector on dashboard, and client-side in-memory filtering for the admin panel. Also overhauls the Home page with feature cards and adds navigation links.
### Changes
**New Pages**
- `/fetch-requests` — Upload bank statements (two-step: upload file, then configure source) or configure email ingestion. Table shows fingerprint (with copy), source type, account, status (color-coded chip), and created date.
- `/reports` — Generate cached report snapshots with filters (ignore self, date range, amount range). Table shows snapshot ID (with copy), creation time, and query summary chips.
**Dashboard**
- Snapshot selector autocomplete dropdown (formatted "Snapshot from {date}"), passes `snapshot_id` to `useReport`
- Styled to match other filter controls (caption above, auto-height)
**Admin — In-Memory Filtering**
- `FilterBar` component: collapsible, Dashboard-style column layout with caption + autocomplete/range/date inputs per filterable field
- `FilterAutocomplete` component: multi-select, free solo, checkmark ticks, selected-first sort frozen while dropdown open (prevents scroll reset)
- `applyClientFilters` in `ResourceView`: handles number range, datetime range, array (object/string elements), non-relation objects, boolean, primitive exact match
- Config-driven via `filterOptions: { mode: "client", fields: [...] }` in `openapi-config.ts`
- Mobile view: each filter takes full width (`flex: "0 0 100%"`), no horizontal squeeze
- `rowCount` omitted in client pagination mode (suppresses MUI X warning)
**Navigation & Home**
- Header nav links: Dashboard, Fetch, Reports
- Home page redesign: gradient hero, "Import Data" CTA, 4 feature cards (Dashboard, Fetch Requests, Report Snapshots, Admin) with accent-colored hover effects
**React-OpenAPI Library**
- `filterOptions` (mode + fields) on `ResourceOverride` and `ResourceConfig` types
- `EnhancedTable` mobile pagination (10 per page with Prev/Next, prevents browser hang with 10000 records)
- `useResource` accepts `filterOptions` from loader
**Misc**
- `public/favicon.png` added, proper `image/png` type in index.html
- 24 files changed, ~1541 insertions, ~100 deletions
### Files Changed (24)
| File | Change |
|------|--------|
| `src/FetchRequests.tsx` | +336 — new page |
| `src/ReportSnapshots.tsx` | +273 — new page |
| `src/features/fetch-requests/` | +96 — models, hooks, index |
| `src/features/report-snapshots/` | +40 — models, hooks, index |
| `src/Dashboard.tsx` | +58 — snapshot selector |
| `src/Home.tsx` | +224 — redesign with feature cards |
| `src/Header.tsx` | +26 — nav links |
| `src/main.jsx` | +4 — routes |
| `react-openapi/components/FilterBar.tsx` | +313 — new component |
| `react-openapi/components/ResourceView.tsx` | +151 — client filtering |
| `react-openapi/components/EnhancedTable.tsx` | +62 — mobile pagination |
| `react-openapi/types/config.ts` | +7 — filterOptions type |
| `react-openapi/types/overrides.ts` | +5 — filterOptions type |
| `react-openapi/utils/openapi_loader.ts` | +8 — load filterOptions |
| `react-openapi/hooks/useResource.ts` | +6 — filterOptions passthrough |
| `react-openapi/index.ts` | +3 — exports |
| `src/openapi-config.ts` | +15 — expenses config |
| `src/features/report/useReport.ts` | +13 — snapshot_id support |
| `index.html` | +1 — favicon link |
| `public/favicon.png` | +2910 bytes |
Reviewed-on: #7
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com >
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com >
2026-05-24 17:23:02 +00:00
a1ff2c692c
Theme System Refactor ( #6 )
...
# Dashboard State Lift + Theme System Refactor
## Summary
Refactored dashboard state ownership, centralized theme semantics, and simplified component styling across the application.
## Changes
### Dashboard State Refactor
* Moved dashboard state management from `Dashboard.view` into `Dashboard.tsx`
* Added centralized `DashboardState` initialization in parent container
* Introduced memoized dashboard state setter callbacks:
* `toggleFlow`
* `setFlow`
* `togglePeriodType`
* `toggleComparison`
* `setSelectedPeriodId`
* `setSelectedGroupKey`
* Added `DashboardStateSetters` memoized object for prop-driven state management
* Removed `onFlowChange` callback pattern
* Converted dashboard component into stateless view layer
* Renamed component export flow:
* `Dashboard.tsx` → removed
* `Dashboard.view.tsx` → primary implementation
### Dashboard Models Cleanup
* Removed legacy palette configuration interfaces:
* `ColorDefinition`
* `ThemeAwarePalette`
* Removed config-level style palette support from `DashboardConfig`
* Renamed `DashboardProps` → `DashboardViewProps`
* Added reusable `ColorScheme` interface
* Simplified component color contract:
* `primary`
* `surface`
* `text`
### Theme Architecture Refactor
* Moved `AppTheme.tsx` into `shared-theme`
* Added centralized semantic theme system
* Introduced `themeConfig.ts` with semantic tokens:
* surface
* border
* text
* Added `semantic` extension to MUI theme typing
* Added `flows` palette extension:
* outflows
* inflows
* Centralized flow colors inside theme primitives
* Added CSS semantic variables:
* `--bg-page`
* `--bg-card`
* `--bg-elevated`
* `--border-default`
* `--border-subtle`
* `--text-primary`
* `--text-secondary`
* `--text-muted`
### Theme Mode Improvements
* Added explicit `ColorMode` type
* Expanded `ColorModeContext`:
* `mode`
* `setMode`
* `toggleColorMode`
* Added `CssBaseline`
* Added configurable `defaultMode`
* Simplified dark theme palette handling
* Standardized dark surfaces and shadows
* Reduced excessive dark-mode glow/shadow intensity
### Dashboard UI Styling Improvements
* Replaced hardcoded dashboard palette config with theme palette usage
* Updated dashboard background gradients to use alpha-based semantic colors
* Replaced `colorScheme.light` usage with `colorScheme.surface`
* Standardized border usage with theme divider tokens
* Removed manual dark-mode conditional styling where redundant
* Simplified card and progress styling logic
### Shared Theme Customization Cleanup
Updated customization layers for improved consistency:
* `inputs`
* `navigation`
* `feedback`
* `surfaces`
Key improvements:
* Reduced dark-mode contrast harshness
* Unified divider usage
* Replaced hardcoded grayscale backgrounds with semantic surfaces
* Simplified hover and active state styling
* Reduced shadow intensity across components
* Improved dark-mode readability and layering
### Home Page Styling Cleanup
* Replaced manual RGBA handling with `alpha()` utility
* Improved dark-mode glassmorphism consistency
* Updated CTA hover shadow to use theme primary color
### Miscellaneous Cleanup
* Updated imports to new theme structure
* Removed unused legacy color mode components:
* `ColorModeIconDropdown.tsx`
* `ColorModeSelect.tsx`
* Removed dashboard config style palette definitions
* Simplified flow-based color derivation logic
## Result
* Cleaner separation of stateful vs presentational dashboard logic
* Centralized semantic theming system
* Consistent dark/light mode behavior
* Reduced styling duplication
* Improved maintainability and extensibility of theme architecture
* Simplified dashboard component contracts
* Better UI consistency across surfaces and controls
Reviewed-on: #6
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com >
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com >
2026-05-23 11:41:57 +00:00
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 >
2026-05-19 07:11:46 +00:00
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 >
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
