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

major refactor of the dashboard and react-openapi integration #1

Merged
aetos merged 44 commits from period-selection into main 2026-05-07 11:00:54 +00:00
Conversation 0 Commits 44 Files Changed 45 +1600 -1099
aetos commented 2026-05-07 11:00:44 +00:00
Owner
Copy Link

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.
## 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. ---
aetos added 44 commits 2026-05-07 11:00:45 +00:00
color pallete 82264a5c34
header fixes c9e609fee6
refactored HistoryChart to component 175ca64d1f
refactored LatestItems to component b1509fd5ab
refactored ProgressCard to component 49bdb85088
removed client data massaging with backend report using feature/report 1fe44abfde
dashboard feature to use dashboard data 922d05ae37
hidden resource 3fd20f11ab
hiding report resource 5acbb7ccdd
proper use of react-openapi for resource api calls 71afc157ff
Progress Cards for Top Payees 89ad8e376e
fixes 67d4c85146
configurable Dashboard.tsx a36d9119bb
better name 8a3ebdb1be
theme changes cc7e6509d2
use full for fast loading than weekly for payee report 5f85abdf86
fixes for correct comparison period 2d0b0bc470
refactor period (rolling/calender) to periodType 1daa90d091
refactor period (rolling/calender) to periodType e82cad4f21
refactor period (rolling/calender) to periodType 38f7416942
period selection 7b0b3fb615
report models and prepareReport function 0e0928af95
report models and prepareReport function f684083496
dashboard using report feature 25bd882b75
removed latest items for now 4b4875c3f5
removed latest items for now ea3b451266
fixes a0e62b1bc4
state controlled by Dashboard.models.ts 30cf227050
toggleComparison 0a92126b92
using new state management 34594215f9
all period types 7470da6d2d
new report structure 15f76eb5f0
passing clean periods and group_by params instead of periods[] and group_by[] params 4e56d86cdb
passing needed periods and group_by 02eb55995e
passing reportData instead of data 4b046c15a5
reading reportData instead of customized data. self massaging data for needed format df5cf9fbb6
fixed height of bar b97e350b1b
correct comparison 04b72d5843
all periods 55b604f700
removed dataKey 1a5261ab25
TopTags 089381125f
cleanup 71ba700322
cleanup a62c10de7d
cleanup 21a4a95f39
aetos merged commit 009ab50b47 into main 2026-05-07 11:00:54 +00:00
aetos deleted branch period-selection 2026-05-07 11:00:55 +00:00
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#1
No description provided.
Delete Branch "period-selection"

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?