khata-ui/IMPLEMENTATION.md

Implementation Details

React‑Auth

• File Structure
  • src/auth/AuthContext.tsx – Provides AuthContext and AuthProvider.
  • src/auth/useAuth.ts – Custom hook returning context values and actions.
  • src/auth/ProtectedRoute.tsx – Wrapper component that checks isAuthenticated and redirects.
  • src/auth/api.ts – Thin wrapper around axios for login, logout, refresh.
• Logic
  1. On login, POST credentials → store accessToken & user info in context and localStorage.
  2. An axios interceptor attaches the token to every request.
  3. refreshToken runs on 401 responses; it attempts a silent refresh and updates the context.
  4. logout clears context and storage, navigating back to /login.
• UI Components
  • LoginForm – MUI TextFields, validation, and submit handling.
  • AuthLoading – Full‑screen spinner displayed while session restoration runs on app boot.

React‑OpenAPI

• Core Files
  • src/react-openapi/types/config.ts – Already defines ResourceField with displayFormat.
  • src/react-openapi/utils/options.ts – Helper resolveTemplate parses {{field}} placeholders using the item data.
  • src/react-openapi/components/EnhancedTable.tsx – Renders a MUI DataGrid. Uses getFormattedDisplayValue to compute readable labels for relation fields based on displayFormat.
  • src/react-openapi/components/FilterBar.tsx – Generates filter inputs; extracts option labels using the same displayFormat logic.
• Data Fetching
  • useResource(resourceName) – TanStack useQuery hook that builds the endpoint URL from config.endpoint and fetches data via the shared Axios instance.
• Customization
  • components prop passed to EnhancedTable/FilterBar allows overriding cell renderers, filter widgets, and action buttons.
• Error Handling
  • Centralized error toast (useToast) displays API errors.
  • Table shows “No data” state when an empty array is returned.

src (Application Core)

• src/main.tsx – Sets up MUI theme, React Router, AuthProvider, and QueryClientProvider.
• src/App.tsx – Defines routes:

  <Routes>
    <Route path="/login" element={<LoginForm />} />
    <Route element={<ProtectedRoute />}>
      <Route path="/admin/:resource" element={<ResourceList />} />
      <Route path="/admin/:resource/edit/:id" element={<ResourceForm />} />
    </Route>
  </Routes>
  

• src/pages/ResourceList.tsx – Reads resource from URL, loads its ResourceConfig, calls useResource, and renders EnhancedTable + FilterBar.
• src/pages/ResourceForm.tsx – Dynamically builds a form based on ResourceField definitions, using displayFormat for default values.
• State Management – TanStack Query caches paginated results; AuthProvider ensures all API calls include a valid JWT.
• Theming – ThemeProvider toggles light/dark mode via a context hook that persists the preference in localStorage.

These implementation notes detail the concrete file layout, data flow, and core logic that power the UI generated from OpenAPI specifications while maintaining authenticated access. They can be directly adapted for the lovable platform to provide a richer UI and better handling of auth and data rendering.