Design Overview

React‑Auth

Purpose: Centralize authentication flows (login, logout, token refresh) for the UI.
Key Concepts
- AuthProvider – React context that stores user, accessToken, and isAuthenticated.
- useAuth hook – Exposes login, logout, refreshToken, and state values.
- Route Guard – HOC/Component (ProtectedRoute) that redirects unauthenticated users to the login page.
UI: Simple MUI forms, error handling with snackbars, and a loading spinner while the auth request is pending.
Extensibility: Plug‑in point for additional providers (OAuth, SSO) via a providers map.

Purpose: Generate UI components directly from an OpenAPI spec (tables, filters, forms).
Core Modules
- ResourceConfig & ResourceField – Typed definitions that describe each endpoint and its fields, including displayFormat for rendering.
- EnhancedTable – Data‑grid component that renders rows according to the config, supports relation rendering, sorting, pagination, and custom cell renderers.
- FilterBar – Dynamically builds filter controls (autocomplete, number‑range, date‑range) based on the same config.
Data Flow
1. Load OpenAPI spec → transform to ResourceConfig objects.
2. useQuery (TanStack) fetches data.
3. UI components consume the config to render tables and filter UI without hand‑written column definitions.
Design Goals
- Zero boilerplate – Adding a new resource only requires a JSON config.
- Consistency – All tables share pagination, actions, and styling.
- Extensibility – Override components via components prop.

Entry Point – main.tsx mounts the React app with BrowserRouter and wraps it with AuthProvider.
Routing – Routes are defined per‑resource (/admin/:resource, /admin/:resource/edit/:id). ProtectedRoute ensures auth.
State Management – TanStack Query handles server state; React Context handles auth state.
Theming – MUI theming with light/dark mode toggle (future enhancement).

These design notes serve as a concise reference for developers preparing a richer UI/UX implementation on the lovable platform.