|
|
25ec534597
|
Stripe-style UI overhaul + Expenses feed with month grouping (#15)
## Title
Stripe-style UI overhaul + Expenses feed with month grouping
## Summary
Rework the khata-ui frontend to a Stripe-grade design system and add a
rich, monthly-grouped Expenses experience driven by react-openapi's
shared, spec-configured field renderers.
## Highlights
### Design overhaul
- New design system: single indigo (#635BFF), 6px radius, Inter type
scale, streamlined surfaces/inputs/feedback tokens
- Sticky app bar with brand-left header + inline footer, route titles
- Split-panel auth pages, Stripe-style Home hero + feature cards
- Toast provider + shared PageHeader/EmptyState UI primitives
- Admin polish: right-aligned numerics, row-hover actions, skeletons,
richer empty states, breadcrumbed fetch-request flows
### Expenses page
- Monthly grouped feed with stat cards (total spent / this month / income)
- Month cards as single-open accordions with red-spent / green-income totals
- Flat transaction rows: logo, name/date, account, amount (no accordion)
- Floating month–year selector pill (scroll-spy) that expands + scrolls
to the selected month
- Strict DD-MM-YYYY date parsing (day-first), no format guessing
### Shared react-openapi fields
- New `CurrencyField` + `formatCurrency` (cached Intl, sign-colored,
sign-less amounts; form editing reuses NumberField)
- `resourceConfig.fieldTypes` override mechanism (amount → currency)
- Expenses page rendered via ListCellRenderer / DetailFieldRenderer /
applyDisplayFormat — zero custom field renderers
- `resolveMediaUrl` resolves relative `/uploads/...` against the API
base for every image field (Admin + Expenses logos)
### Fixes
- Perf: memoized rows, formatter caches, single-open accordions —
cuts slow-click INP and DOM-nesting warnings
- Removed unused @mui/x-data-grid@7, which hoisted @mui/system@7 and
crashed Box/createTheme at runtime (v5/v7 mix)
## Commits (10)
- 9808a1f design overhaul + expenses page
- d6856a5 fix expenses list performance + dom nesting
- 3dd833a shared currency field + expenses rendered from react-openapi fields
- e8c585b fix expenses grouping to parse occurred_at as DD-MM-YYYY strictly
- cc940ee expense list: split month totals, sticky headers + month pill
- 47d799f expense list: clickable month pill + fix scroll-to-month
- 537aef9 resolve relative media URLs against the API base in react-openapi
- 8e9a13d expense list: replace accordion with flat Stripe-style rows
- 62dd06c expense list: month accordions + month-year selector; drop unused x-data-grid
- 806bd42 dropped amount sign from CurrencyField.tsx
Reviewed-on: #15
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
|
2026-08-18 13:51:28 +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 |
|
