25 lines
2.1 KiB
Markdown
25 lines
2.1 KiB
Markdown
# Concept Overview
|
||
|
||
The application is a **metadata‑driven admin UI** built on top of an OpenAPI description. By describing each resource in a small JSON config (type `ResourceConfig`), the UI automatically generates:
|
||
|
||
1. **Data tables** (with pagination, sorting, and actions) – `EnhancedTable`.
|
||
2. **Dynamic filters** – `FilterBar` creates appropriate filter widgets (autocomplete, number‑range, date‑range) based on field metadata.
|
||
3. **Forms for create/edit** – A generic form component can render inputs for every `ResourceField`, handling relations via the `displayFormat` template.
|
||
4. **Authentication layer** – `react‑auth` supplies a central `AuthProvider`, a `useAuth` hook, and route guarding, ensuring only authenticated users reach the admin pages.
|
||
|
||
### Core Principles
|
||
- **Declarative configuration**: Adding a new resource is just a JSON entry; no hand‑coded tables or forms.
|
||
- **Template‑based display**: `displayFormat` (e.g. `"{{firstName}} {{lastName}}"`) defines how related objects are shown across the UI, eliminating the need for separate `displayField` props.
|
||
- **Extensible UI**: Consumers can plug custom components (`components` prop) to override cell renderers, filter widgets, or action buttons without altering core logic.
|
||
- **Unified state**: TanStack Query caches server data, while `react‑auth` manages JWTs and user info. Both are provided via React context for easy access.
|
||
- **Responsive design**: The UI automatically switches to a card‑based layout on mobile, preserving functionality with a consistent look.
|
||
|
||
### Migration Goal for Lovable
|
||
The current repo implements these ideas with a solid foundation but could benefit from:
|
||
- **Improved UI/UX** (e.g., better loading states, richer snackbars, dark‑mode toggle).
|
||
- **More robust error handling** (centralized toast system, retry logic on auth failures).
|
||
- **Enhanced theming** (customizable palette, brand colors).
|
||
- **Accessibility** (ARIA roles, keyboard navigation).
|
||
|
||
By re‑using the existing `ResourceConfig` schema and `displayFormat` logic, the Lovable implementation can focus on UI polish and advanced handling while keeping the powerful code‑generation approach intact.
|