|
|
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 |
|
|
|
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 |
|
