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

## React‑OpenAPI
- **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.

## src (Root Application)
- **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.