f5bc7adc3734a0cb2642331326f1d881328e2d27
2 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| 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> |
|||
| 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> |
