khata compliant with new react-openapi

package-lock.json

@@ -27,6 +27,7 @@
         "remark-gfm": "latest"
       },
       "devDependencies": {
+        "@types/js-yaml": "^4.0.9",
         "@vitejs/plugin-react": "latest",
         "typescript": "^6.0.3",
         "vite": "latest"
@@ -1632,6 +1633,12 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/js-yaml": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz",
+      "integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==",
+      "dev": true
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",

package.json

@@ -27,6 +27,7 @@
     "remark-gfm": "latest"
   },
   "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
     "@vitejs/plugin-react": "latest",
     "typescript": "^6.0.3",
     "vite": "latest"

react-openapi/Admin.tsx

@@ -1,186 +0,0 @@
-import * as React from "react";
-import { useAuth, AuthPage } from "../react-auth";
-import { UploadProvider } from "./providers/UploadProvider";
-import AdminLayout from "./components/AdminLayout";
-import ResourceView from "./components/ResourceView";
-import { getAppConfig } from "./config";
-import { initializeApiClients } from "./api/client";
-import { AppConfig } from "./types/config";
-import { FieldComponents } from "./types/overrides";
-import { Box, Typography, Paper, CircularProgress } from "@mui/material";
-import {
-  Routes,
-  Route,
-  useNavigate,
-  useParams,
-} from "react-router-dom";
-
-import { ConfigContext } from "./providers/ConfigContext";
-import ProfileView from "./components/ProfileView";
-
-function DefaultDashboard({ basePath }: { basePath: string }) {
-  const config = React.useContext(ConfigContext);
-  const navigate = useNavigate();
-
-  const resources = config?.resources || [];
-  const visibleResources = resources.filter((res) => !res.hidden);
-
-  return (
-    <Box>
-      <Typography variant="h4" gutterBottom>
-        Welcome to the Admin Panel
-      </Typography>
-      <Typography variant="body1" sx={{ color: 'text.secondary' }}>
-        Select a resource from the sidebar to manage data.
-      </Typography>
-      <Box
-        sx={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
-          gap: 3,
-          mt: 4,
-        }}
-      >
-        {visibleResources.map((res) => (
-          <Paper
-            key={res.name}
-            sx={{
-                p: 3,
-                textAlign: "center",
-                cursor: 'pointer',
-                transition: 'transform 0.2s',
-                '&:hover': { transform: 'translateY(-4px)', boxShadow: 4 }
-            }}
-            onClick={() => navigate(`/admin/${res.name}`)}
-          >
-            <Typography variant="h6" color="primary">{res.pluralLabel}</Typography>
-            <Typography variant="body2" color="text.secondary">Manage {res.pluralLabel.toLowerCase()}</Typography>
-          </Paper>
-        ))}
-      </Box>
-    </Box>
-  );
-}
-
-interface AdminAppProps {
-  basePath: string;
-  fieldComponents: FieldComponents;
-  Dashboard?: React.ComponentType<{ basePath: string }>;
-  Layout?: React.ComponentType<AdminLayoutProps>;
-  LoginPage?: React.ComponentType<any>;
-}
-
-function AdminApp({ basePath, fieldComponents, Dashboard = DefaultDashboard, Layout = AdminLayout, LoginPage = AuthPage }: AdminAppProps) {
-  const { currentUser, login, logout, loading, error } = useAuth();
-  const config = React.useContext(ConfigContext);
-  const navigate = useNavigate();
-
-  const resources = config?.resources || [];
-  const visibleResources = resources.filter((res) => !res.hidden);
-
-  if (!currentUser) {
-    return (
-      <LoginPage
-        mode="login"
-        login={login}
-        register={async () => {}}
-        loading={loading}
-        error={error}
-        onSwitchMode={() => {}}
-        onBack={() => {}}
-        currentUser={null}
-      />
-    );
-  }
-
-  return (
-    <Layout
-      username={currentUser.username}
-      onLogout={logout}
-      onSelectResource={(name) => navigate(`/admin/${name}`)}
-      resources={visibleResources}
-    >
-      <Routes>
-        <Route path="/" element={<Dashboard basePath={basePath} />} />
-        <Route path="/profile" element={<ProfileView />} />
-        <Route path="/:resourceName" element={<ResourceRouteWrapper fieldComponents={fieldComponents} />} />
-        <Route path="/:resourceName/:id" element={<ResourceRouteWrapper fieldComponents={fieldComponents} />} />
-        <Route path="/:resourceName/create" element={<ResourceRouteWrapper fieldComponents={fieldComponents} />} />
-        <Route path="/:resourceName/edit/:id" element={<ResourceRouteWrapper fieldComponents={fieldComponents} />} />
-      </Routes>
-    </Layout>
-  );
-}
-
-function ResourceRouteWrapper({ fieldComponents }: { fieldComponents: FieldComponents }) {
-  const { resourceName } = useParams();
-  const config = React.useContext(ConfigContext);
-  const selectedResource = config?.resources.find((r) => r.name === resourceName);
-
-  if (!selectedResource) return <Typography>Resource not found</Typography>;
-
-  return <ResourceView config={selectedResource} fieldComponents={fieldComponents} />;
-}
-
-interface AdminLayoutProps {
-  children: React.ReactNode;
-  onSelectResource: (resourceName: string | null) => void;
-  onLogout: () => void;
-  username?: string;
-  resources: import("./types/config").ResourceConfig[];
-}
-
-interface AdminProps {
-  basePath?: string;
-  resourceOverrides?: Record<string, any>;
-  profileConfig?: any;
-  fieldComponents: FieldComponents;
-  Dashboard?: React.ComponentType<{ basePath: string }>;
-  Layout?: React.ComponentType<AdminLayoutProps>;
-  LoginPage?: React.ComponentType<any>;
-}
-
-export default function Admin({ basePath = "/admin", resourceOverrides = {}, profileConfig = {}, fieldComponents, Dashboard, Layout, LoginPage }: AdminProps) {
-  const existingConfig = React.useContext(ConfigContext);
-  const [config, setConfig] = React.useState<AppConfig | null>(existingConfig);
-
-  React.useEffect(() => {
-    if (!existingConfig) {
-      getAppConfig(resourceOverrides, profileConfig).then((cfg) => {
-        initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
-        setConfig(cfg);
-      });
-    }
-  }, [resourceOverrides, profileConfig, existingConfig]);
-
-  if (!config) {
-    return (
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "100vh",
-        }}
-      >
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  const content = (
-    <UploadProvider>
-      <AdminApp basePath={basePath} fieldComponents={fieldComponents} Dashboard={Dashboard} Layout={Layout} LoginPage={LoginPage} />
-    </UploadProvider>
-  );
-
-  if (existingConfig) {
-    return content;
-  }
-
-  return (
-    <ConfigContext.Provider value={config}>
-      {content}
-    </ConfigContext.Provider>
-  );
-}

react-openapi/README.md

@@ -0,0 +1,942 @@
+# react-openapi
+
+Auto-generates an admin panel (CRUD, datatable, relationship management) from an OpenAPI 3.1.0 specification at runtime.
+
+## How It Works
+
+1. You provide a `specConfiguration` object with the URL to your OpenAPI YAML spec and an auth callback.
+2. `AppProvider` fetches the spec, validates it against ``react-openapi``'s required extensions, and builds an internal resource configuration.
+3. The `Admin` component renders routes (list, detail, create, edit) for each resource detected in the spec.
+4. All API calls go through an Axios client that injects the Bearer token from your callback.
+
+## Installation
+
+```bash
+npm install react-openapi
+# peer dependencies (install these in your app):
+npm install react react-dom react-router-dom @mui/material @mui/icons-material @mui/x-data-grid @emotion/react @emotion/styled axios js-yaml
+```
+
+## Quick Start
+
+```tsx
+import { AppProvider, Admin } from "react-openapi";
+import type { SpecConfiguration } from "react-openapi";
+
+const specConfig: SpecConfiguration = {
+  specUrl: "/api/openapi.yaml",
+  baseApiUrl: "https://api.example.com/v1",
+  title: "Vet Clinic Admin",
+  getToken: () => localStorage.getItem("token"),
+};
+
+function App() {
+  return (
+    <AppProvider specConfiguration={specConfig}>
+      <Admin basePath="/admin" />
+    </AppProvider>
+  );
+}
+```
+
+## Exported API
+
+### Components
+
+| Export                 | Purpose                                                                                                        |
+|------------------------|----------------------------------------------------------------------------------------------------------------|
+| `AppProvider`          | Fetches the spec, validates it, initializes the API client, and provides context. Wrap your app with this.     |
+| `Admin`                | Renders the admin layout (sidebar + routes) for all resources. Takes `basePath`.                               |
+| `ListCellRenderer`     | Renders a cell value in a list/table column. Respects FK display formats, inline refs, enums, booleans.        |
+| `DetailFieldRenderer`  | Renders a read-only field value in a detail view (label + value pair).                                         |
+| `FormFieldRenderer`    | Renders an editable form field based on `FieldConfig`. Dispatches to `FkSelectField`, `BooleanField`, etc.     |
+| `SseStreamView`        | Renders a live SSE stream card with connection status, event counter, latest event preview, and snackbar.      |
+| `SseConnectionStatus`  | Renders a green/red dot with "Connected"/"Disconnected" for an SSE resource. Reactive across all components.  |
+
+### Hooks
+
+| Export                        | Purpose                                                                                                           |
+|-------------------------------|-------------------------------------------------------------------------------------------------------------------|
+| `useAppContext()`             | Returns `{ config, resources, schemas, loading, errors, warnings }`. Access all resource configs.                  |
+| `useResource(resourceName)`   | Returns `{ resource, components, list, get, create, update, remove, stream?, loading, error }`. CRUD + streaming. |
+
+The `stream` property is only present for SSE resources (`resource.streaming === true`). It accepts `{ onEvent, onError?, onOpen? }` and returns `{ close }`.
+
+### Utilities
+
+| Export              | Purpose                                                             |
+|---------------------|---------------------------------------------------------------------|
+| `getApi()`          | Returns the configured Axios instance. Useful for custom API calls. |
+| `applyDisplayFormat`| Formats an object using a template string like `"{name} - #{id}"`.  |
+
+### Types
+
+| Export                 | Purpose                                                  |
+|------------------------|----------------------------------------------------------|
+| `SpecConfiguration`    | `{ specUrl, baseApiUrl?, title?, getToken? }`            |
+| `ResourceConfig`       | Internal representation of a resource after spec parsing |
+| `FieldConfig`          | Internal representation of a field after spec parsing    |
+| `FKFieldConfig`        | `{ resource, prefetch }`                                 |
+| `ResourceRelationship` | `{ fieldName, config, targetSchemaName }`                |
+| `FilterComponentProps` | `{ value, onChange, data?, labelOverride? }`             |
+
+### `ResourceConfig` Properties
+
+| Property       | Type                              | Description                                                               |
+|----------------|-----------------------------------|---------------------------------------------------------------------------|
+| `name`         | `string`                          | URL-friendly resource name (e.g. `"pets"`, `"calls"`)                     |
+| `schemaName`   | `string`                          | OpenAPI schema key (e.g. `"Pet"`, `"Call"`)                               |
+| `displayName`  | `string`                          | Human-readable name for UI labels (e.g. `"Pets"`, `"Calls"`, `"Two Parts"`) |
+| `path`         | `string`                          | API base path (e.g. `"/pets"`, `"/calls"`)                                |
+| `streaming`    | `boolean` (optional)              | `true` if this resource uses SSE streaming instead of REST CRUD           |
+
+### SSE Streaming (Server-Sent Events)
+
+Resources with `x-sse: true` on their OpenAPI spec path object are treated as streaming resources. Instead of CRUD, they expose:
+
+- **`stream()`** — accepts `{ onEvent, onError?, onOpen? }` and returns `{ close }`.
+- **Connection status** — reactive across `SseConnectionStatus` and `SseStreamView`.
+- **Auto-reconnect** — SSE automatically reconnects on connection loss (browser-native).
+
+**OpenAPI extension:**
+```yaml
+/pets/events:
+  x-sse: true
+  get:
+    summary: Subscribe to Pet events
+    responses:
+      200:
+        description: SSE stream of Pet change events
+        content:
+          text/event-stream:
+            schema:
+              type: object
+```
+When `x-sse: true` is set, the resource is excluded from sidebars, list/detail routes, and CRUD hooks. It only appears in the `streaming` resource collection.
+
+**Custom UI example:**
+
+```tsx
+import { useAppContext, SseStreamView } from 'react-openapi';
+
+function MyStreamPage() {
+  const { resources } = useAppContext();
+  const res = resources.find(r => r.name === 'calls');
+  if (!res) return null;
+  return <SseStreamView resource={res} />;
+}
+```
+
+### Loading Custom Components from Resources
+
+Pass per-resource overrides via `specConfiguration`:
+
+```tsx
+<AppProvider config={config} resourceComponents={{
+  pets: { list: PetList, detail: PetDetail, form: PetForm },
+  calls: { detail: CallStream },    // SSE: only detail is used
+}} />
+```
+
+Within resource components, use `components` from `useResource()`:
+
+```tsx
+const { components } = useResource('pets');
+const row = data.map(item => <components.ListCell field={field} value={item[field.name]} />);
+```
+
+## OpenAPI Spec Authoring Guide
+
+``react-openapi`` uses custom `x-` extensions embedded in your OpenAPI 3.1.0 spec. This section is the **single source of truth** for writing a compatible spec.
+
+### Quick Reference
+
+```yaml
+openapi: 3.1.0
+info:
+  title: My API
+  version: 1.0.0
+
+servers:
+  - url: https://api.example.com/v1
+
+components:
+  schemas:
+
+    # --- Error schemas ---
+    ErrorBody:
+      type: object
+      properties:
+        detail:
+          type: string
+      required: [detail]
+
+    HTTPValidationError:
+      type: object
+      properties:
+        detail:
+          type: array
+          items:
+            $ref: '#/components/schemas/ValidationError'
+
+    ValidationError:
+      type: object
+      properties:
+        loc:
+          type: array
+          items:
+            type: string
+        msg:
+          type: string
+        type:
+          type: string
+      required: [loc, msg, type]
+
+    # --- Non-resource schema (skipped by validator) ---
+    Metadata:
+      type: object
+      properties:
+        createdOn:
+          type: string
+          format: date-time
+        updatedOn:
+          type: string
+          format: date-time
+
+    # --- Resource schema ---
+    Pet:
+      type: object
+      x-resource: pets                    # REQUIRED - maps to /pets path
+      x-primary-key: id                   # REQUIRED
+      x-display-format: "{name} - #{id}" # REQUIRED
+      x-list-columns: [name, species, age] # REQUIRED
+      properties:
+        id:
+          type: integer
+          readOnly: true
+          x-order: 0                     # REQUIRED on every property
+          x-hidden: { form: true, list: true }
+          x-label: "ID"                  # REQUIRED on every property
+        name:
+          type: string
+          x-order: 1
+          x-label: "Pet Name"
+          x-description: "Name of the pet"   # optional
+          x-filterable: true                 # optional
+          x-sortable: true                   # optional
+        species:
+          type: string
+          enum: [dog, cat, bird]             # renders as select dropdown
+          x-order: 2
+          x-label: "Species"
+        weight:
+          type: number
+          format: float
+          x-order: 3
+          x-label: "Weight"
+        birthDate:
+          type: string
+          format: date                        # renders as date picker
+          x-order: 4
+          x-label: "Date of Birth"
+        photo:
+          type: string
+          format: binary
+          x-ui-type: image                    # renders as file upload
+          x-upload-url: /pets/{id}/photo      # POST endpoint for upload
+          x-order: 5
+          x-label: "Photo"
+        owner:
+          $ref: '#/components/schemas/Parent'
+          x-fk:                               # renders as FK dropdown
+            resource: parents
+            prefetch: true                    # load all options on mount
+          x-order: 6
+          x-label: "Owner"
+        siblings:
+          type: array
+          items:
+            $ref: '#/components/schemas/Pet'
+          x-fk:                               # renders as multi-select
+            resource: pets
+            prefetch: false                   # lazy-load on focus
+          x-order: 7
+          x-label: "Siblings"
+        metadata:
+          $ref: '#/components/schemas/Metadata'
+          # NO x-fk — renders as inline read-only display
+          x-order: 8
+          x-label: "Metadata"
+      required: [id, name, owner]
+
+  # --- Error response schemas (REQUIRED for spec validity) ---
+  responses:
+    Unauthorized:
+      description: Not authenticated
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/ErrorBody'
+    Forbidden:
+      description: Insufficient permissions
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/ErrorBody'
+    NotFound:
+      description: Resource not found
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/ErrorBody'
+    ValidationError:
+      description: Validation Error
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/HTTPValidationError'
+    InternalServerError:
+      description: Internal server error
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/ErrorBody'
+
+paths:
+  # --- Collection paths ---
+  /pets:
+    get:
+      summary: List pets (paginated)
+      parameters:
+        - in: query
+          name: limit
+          schema: { type: integer, default: 20 }   # default is REQUIRED if pagination params exist
+        - in: query
+          name: offset
+          schema: { type: integer, default: 0 }
+      responses:
+        '200':
+          description: Paginated list of pets
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  total:
+                    type: integer
+                  items:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/Pet'
+        # --- Error responses (RECOMMENDED on every operation) ---
+        '401': { $ref: '#/components/responses/Unauthorized' }
+        '403': { $ref: '#/components/responses/Forbidden' }
+        '422': { $ref: '#/components/responses/ValidationError' }
+        '500': { $ref: '#/components/responses/InternalServerError' }
+    post:
+      summary: Create a pet
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Pet'
+      responses:
+        '201':
+          description: Pet created
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Pet'
+        '401': { $ref: '#/components/responses/Unauthorized' }
+        '403': { $ref: '#/components/responses/Forbidden' }
+        '422': { $ref: '#/components/responses/ValidationError' }
+        '500': { $ref: '#/components/responses/InternalServerError' }
+
+  # --- Item paths ---
+  /pets/{id}:
+    get:
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema: { type: integer }
+      responses:
+        '200':
+          description: Single pet
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Pet'
+        '401': { $ref: '#/components/responses/Unauthorized' }
+        '403': { $ref: '#/components/responses/Forbidden' }
+        '404': { $ref: '#/components/responses/NotFound' }
+        '422': { $ref: '#/components/responses/ValidationError' }
+        '500': { $ref: '#/components/responses/InternalServerError' }
+    put:
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema: { type: integer }
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Pet'
+      responses:
+        '200':
+          description: Pet updated
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Pet'
+        '401': { $ref: '#/components/responses/Unauthorized' }
+        '403': { $ref: '#/components/responses/Forbidden' }
+        '404': { $ref: '#/components/responses/NotFound' }
+        '422': { $ref: '#/components/responses/ValidationError' }
+        '500': { $ref: '#/components/responses/InternalServerError' }
+    delete:
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema: { type: integer }
+      responses:
+        '204':
+          description: Pet deleted
+        '401': { $ref: '#/components/responses/Unauthorized' }
+        '403': { $ref: '#/components/responses/Forbidden' }
+        '404': { $ref: '#/components/responses/NotFound' }
+        '422': { $ref: '#/components/responses/ValidationError' }
+        '500': { $ref: '#/components/responses/InternalServerError' }
+```
+
+### Schema-Level Extensions
+
+These go on the schema object itself and mark it as a **resource** that generates the admin UI.
+
+#### `x-resource` (REQUIRED)
+
+```yaml
+Pet:
+  type: object
+  x-resource: pets    # maps to the /pets path in paths
+```
+
+- Value must be a **string** matching the collection path segment (e.g., `pets` → `/pets`).
+- Schemas **without** `x-resource` are skipped entirely — no CRUD routes, no extension validation. Use this for shared schemas like `Metadata`, `ErrorBody`, etc.
+- **Validator error** if the path `/pets` does not exist in `paths`.
+
+#### `x-primary-key` (REQUIRED)
+
+```yaml
+x-primary-key: id
+```
+
+- The name of the property that uniquely identifies each record.
+- Used as the `:id` path parameter in routes and API calls.
+- Must reference a property that exists in `properties`.
+- **Validator error** if missing.
+
+#### `x-display-format` (REQUIRED)
+
+```yaml
+x-display-format: "{name}"
+x-display-format: "Dr. {name}"
+x-display-format: "Apt #{id} - {date}"
+```
+
+- Template string with `{propertyName}` placeholders.
+- Used to display a human-readable label for a record (list rows, detail title, FK dropdown options).
+- Property names in `{braces}` are replaced with the record's property values at render time.
+- **Validator error** if missing.
+
+#### `x-list-columns` (REQUIRED)
+
+```yaml
+x-list-columns: [name, species, age, owner]
+```
+
+- Array of property names to display as columns in the datatable.
+- Each name must exist in `properties`.
+- Column order follows the array order.
+- The display value for each cell is determined by the `x-display-format` of the **property's target resource** (for FK fields) or the **parent resource** (for direct fields).
+- **Validator error** if missing or if any column name references a non-existent property.
+
+### Property-Level Extensions
+
+These go on individual properties inside `properties`.
+
+#### `x-label` (REQUIRED on every property)
+
+```yaml
+x-label: "Pet Name"
+```
+
+- Human-readable label used in form fields, table headers, and detail views.
+- **Validator error** if missing on any property of a resource schema.
+
+#### `x-order` (REQUIRED on every property)
+
+```yaml
+x-order: 1
+```
+
+- Integer determining field ordering in forms and detail views.
+- Lower values appear first. Ties are broken by alphabetical property name.
+- **Validator error** if missing or null on any property of a resource schema.
+
+#### `x-description` (optional)
+
+```yaml
+x-description: "Name of the pet"
+```
+
+- Shown as helper text below form fields and as placeholder text.
+- Falls back to `x-label` if not provided.
+
+#### `x-hidden` (optional)
+
+```yaml
+x-hidden: { form: true, list: true, detail: true }
+x-hidden: { form: true }         # only hide in form
+```
+
+- Controls visibility in each view. Valid keys: `form`, `list`, `detail`.
+- Any missing key defaults to `false` (visible).
+- Useful for hiding auto-generated fields like `id` from forms.
+
+#### `x-filterable` (optional)
+
+```yaml
+x-filterable: true
+```
+
+- Marks the field as filterable in the datatable (UI integration TBD — reserved for future use).
+- Default: `false`.
+
+#### `x-sortable` (optional)
+
+```yaml
+x-sortable: true
+```
+
+- Adds sort controls to the datatable column header.
+- When clicked, sends `?sort=fieldName` (ascending) or `?sort=-fieldName` (descending) to the list endpoint.
+- Default: `false`.
+
+#### `x-fk` (optional)
+
+```yaml
+owner:
+  $ref: '#/components/schemas/Parent'
+  x-fk:
+    resource: parents
+    prefetch: true                 # load all options on mount
+```
+
+Marks a `$ref` property as a foreign key. The form renders a **dropdown** (single) or **multi-select** (if `type: array`, `items: $ref`).
+
+| Sub-field  | Type    | Default    | Description                                                                               |
+|------------|---------|------------|-------------------------------------------------------------------------------------------|
+| `resource` | string  | (required) | The `x-resource` value of the target schema. Uses the resource name, not the schema name. |
+| `prefetch` | boolean | `false`    | If `true`, fetch all FK options on mount. If `false`, fetch on focus (lazy).              |
+
+**How FK options are fetched:**
+1. The library calls `GET /{targetResource}?limit=0` (for paginated targets — `limit=0` is a server convention meaning "return all") or `GET /{targetResource}` (for non-paginated).
+2. The response is parsed strictly by the target resource's pagination config.
+3. Each item is formatted using the target resource's `x-display-format`.
+
+**Validator rules:**
+- The `resource` value must match some schema's `x-resource` in the spec.
+- The target schema must have `x-display-format` and `x-primary-key`.
+
+#### `$ref` without `x-fk` — Inline Display
+
+```yaml
+metadata:
+  $ref: '#/components/schemas/Metadata'
+  # no x-fk here
+```
+
+A `$ref` property without `x-fk` renders as **read-only inline display**:
+- In **list** and **detail** views: uses `InlineRefField` which shows key-value chips (or the referenced resource's `x-display-format` if the target is a resource schema).
+- In **forms**: shows a disabled `TextField` with `JSON.stringify(value, null, 2)`.
+
+The validator emits an `info` message for these to remind you they won't be editable.
+
+#### `x-ui-type` (optional)
+
+```yaml
+photo:
+  type: string
+  format: binary
+  x-ui-type: image
+  x-upload-url: /pets/{id}/photo
+```
+
+Currently, supports only `"image"`. Changes the form field to a file upload component.
+
+- If the record has an `id` and `x-upload-url` is set: POSTs the file to `x-upload-url` (with `{id}` replaced by the record's ID), then updates the field value with the response URL.
+- If no `id` or no `uploadUrl`: falls back to base64 data-URL via `FileReader`.
+
+#### `x-upload-url` (optional, used with `x-ui-type: image`)
+
+```yaml
+x-upload-url: /pets/{id}/photo
+```
+
+POST endpoint for file upload. The `{id}` placeholder is replaced with the current record ID.
+
+### Property Types That Trigger Special Renderers
+
+| Condition                            | Form Renderer                             | List/Detail Renderer                         |
+|--------------------------------------|-------------------------------------------|----------------------------------------------|
+| `x-fk` exists, `type` is NOT `array` | `FkSelectField` (dropdown)                | `ListCellRenderer` with `applyDisplayFormat` |
+| `x-fk` exists, `type: array`         | `FkMultiSelectField` (Autocomplete multi) | `ListCellRenderer` with chips                |
+| `enum` is defined                    | `EnumField` (select)                      | `Chip`                                       |
+| `type: boolean`                      | `BooleanField` (Switch)                   | Chip with "Yes"/"No"                         |
+| `type: integer` or `type: number`    | `NumberField`                             | Typography                                   |
+| `format: date`                       | `DateField` (date picker)                 | Typography                                   |
+| `format: date-time`                  | `DateField` (datetime-local picker)       | Typography                                   |
+| `x-ui-type: image`                   | `ImageField` (upload button + preview)    | `Avatar`                                     |
+| `$ref` without `x-fk`                | Disabled TextField with JSON              | `InlineRefField` (chips or displayFormat)    |
+| None of the above (default)          | `StringField` (text input)                | Typography                                   |
+
+### Path Conventions
+
+#### Collection Path
+
+Format: `/{x-resource}` (e.g., `/pets`)
+
+| Operation | Required? | Purpose                                 |
+|-----------|-----------|-----------------------------------------|
+| `GET`     | Yes       | List endpoint — populates the datatable |
+| `POST`    | Yes       | Create endpoint                         |
+
+#### Item Path
+
+Format: `/{x-resource}/{id}` (e.g., `/pets/{id}`)
+
+| Operation | Required? | Purpose       |
+|-----------|-----------|---------------|
+| `GET`     | Yes       | Detail view   |
+| `PUT`     | Yes       | Edit form     |
+| `DELETE`  | Yes       | Delete action |
+
+### Response Shapes
+
+The library expects **strict** response shapes that match the spec. No flexible fallbacks.
+
+#### Paginated List (GET with limit/offset params)
+
+```json
+{
+  "total": 42,
+  "items": [{ "id": 1, "name": "Fido" }, ...]
+}
+```
+
+- `total` is optional; falls back to `items.length` if absent.
+- `items` is **required** and must be an array.
+- The library **throws** if the response is not `{ total, items }` with an array `items`.
+
+#### Non-Paginated List (GET without limit/offset params)
+
+```json
+[{ "id": 1, "name": "Vaccination" }, ...]
+```
+
+- Response must be a **plain array**.
+- The library **throws** if the response is not an array.
+
+#### Single Item (GET /{id})
+
+```json
+{ "id": 1, "name": "Fido", ... }
+```
+
+- Returns the resource object directly.
+- No special validation beyond standard API error handling.
+
+#### Create / Update (POST / PUT)
+
+```json
+{ "id": 1, "name": "Fido", ... }
+```
+
+- Returns the created/updated resource object directly.
+
+#### Delete
+
+- Returns HTTP 204 with no body.
+
+### Error Response Format
+
+The library's `parseError()` handles two formats:
+
+**FastAPI `ValidationError` (422):**
+```json
+[
+  { "loc": ["body", "name"], "msg": "field required", "type": "value_error" }
+]
+```
+→ Rendered as: `"field required"`
+
+**Generic `ErrorBody`:**
+```json
+{ "detail": "Not found" }
+```
+→ Rendered as: `"Not found"`
+
+## Pagination Behavior
+
+### Detecting Pagination
+
+A resource is considered paginated if its collection GET path has **both** a `limit` and `offset` query parameter. The `limit` parameter **must** have a `schema.default` value:
+
+```yaml
+parameters:
+  - in: query
+    name: limit
+    schema: { type: integer, default: 20 }   # default is REQUIRED
+  - in: query
+    name: offset
+    schema: { type: integer, default: 0 }
+```
+
+If only one of `limit`/`offset` is present, pagination is **not** detected (the path is treated as non-paginated).
+
+### Datatable Pagination
+
+The datatable renders an MUI `TablePagination` component when `resource.pagination` is non-null. It sends `?limit={rowsPerPage}&offset={page * rowsPerPage}` with each list request.
+
+### FK Options — Paginated Targets
+
+When fetching FK options for a paginated target resource, the library sends `?limit=0`. This is a **server convention** meaning "return all records" — not documented in the spec. The server must interpret `limit=0` as "no limit."
+
+## Spec Validation
+
+The validator (`spec-validator.ts`) runs at mount time and categorizes issues as:
+
+| Level     | Meaning                                  | Impact                                               |
+|-----------|------------------------------------------|------------------------------------------------------|
+| `error`   | Missing required extension               | Admin panel shows error screen — **will not render** |
+| `warning` | Missing optional configuration           | Admin panel renders, warning shown in snackbar       |
+| `info`    | Informational note (e.g., non-FK `$ref`) | Shown alongside warnings                             |
+
+### Complete Validation Rules
+
+For each schema with `x-resource`:
+
+1. **`x-primary-key`** must be present.
+2. **`x-display-format`** must be present.
+3. **`x-list-columns`** must be an array, and every entry must reference a real property.
+4. Every property must have **`x-label`**.
+5. Every property must have **`x-order`**.
+6. If a property uses `$ref` without `x-fk` → `info` message.
+7. If a property uses `x-fk`, the referenced `resource` must exist as another schema's `x-resource`, and that target must have `x-display-format` and `x-primary-key`.
+8. The `x-resource` path must exist in `paths`.
+9. The collection path must have **GET** (list) and **POST** (create).
+10. The item path `/{resource}/{id}` must exist with **GET**, **PUT**, and **DELETE**.
+11. If the collection GET has pagination params (limit/offset), the `limit` param must have a `schema.default`.
+
+## Auth
+
+Authentication is handled via the `getToken` callback in `SpecConfiguration`:
+
+```ts
+const specConfig: SpecConfiguration = {
+  specUrl: "/api/openapi.yaml",
+  getToken: () => localStorage.getItem("token"),  // called on every request
+};
+```
+
+- The token is injected as `Authorization: Bearer {token}` on every API call.
+- If a 401 response is received and `getToken` returns a token, the token is cleared from localStorage (for token refresh flows — customize in your wrapper).
+
+## Design Decisions
+
+- **Spec loaded at runtime** — not built into the bundle. A single built UI works with any backend serving the spec at a known URL.
+- **Schema-to-path mapping is explicit** — the `x-resource` value maps directly to the path segment. No magic pluralization or guessing.
+- **No fallbacks for required extensions** — if the spec is missing `x-label`, `x-order`, `x-primary-key`, `x-display-format`, or `x-list-columns`, the library **throws at transform time** rather than silently defaulting.
+- **FK options use `?limit=0`** for paginated resources — server convention, not spec-documented.
+- **Response parsing is strict** — `{ total, items }` for paginated, `[]` for non-paginated. No fallback chains.
+
+## Example: Complete Minimal Spec
+
+```yaml
+openapi: 3.1.0
+info:
+  title: Minimal API
+  version: 1.0.0
+servers:
+  - url: https://api.example.com/v1
+components:
+  schemas:
+    ErrorBody:
+      type: object
+      properties:
+        detail: { type: string }
+      required: [detail]
+    HTTPValidationError:
+      type: object
+      properties:
+        detail:
+          type: array
+          items:
+            $ref: '#/components/schemas/ValidationError'
+    ValidationError:
+      type: object
+      properties:
+        loc:
+          type: array
+          items: { type: string }
+        msg: { type: string }
+        type: { type: string }
+      required: [loc, msg, type]
+    Widget:
+      type: object
+      x-resource: widgets
+      x-primary-key: id
+      x-display-format: "{name}"
+      x-list-columns: [name, status]
+      properties:
+        id:
+          type: integer
+          readOnly: true
+          x-order: 0
+          x-hidden: { form: true, list: true }
+          x-label: "ID"
+        name:
+          type: string
+          x-order: 1
+          x-label: "Widget Name"
+        status:
+          type: string
+          enum: [active, inactive, archived]
+          x-order: 2
+          x-label: "Status"
+      required: [id, name]
+  responses:
+    Unauthorized:
+      description: Not authenticated
+      content:
+        application/json:
+          schema: { $ref: '#/components/schemas/ErrorBody' }
+    Forbidden:
+      description: Insufficient permissions
+      content:
+        application/json:
+          schema: { $ref: '#/components/schemas/ErrorBody' }
+    NotFound:
+      description: Resource not found
+      content:
+        application/json:
+          schema: { $ref: '#/components/schemas/ErrorBody' }
+    ValidationError:
+      description: Validation Error
+      content:
+        application/json:
+          schema: { $ref: '#/components/schemas/HTTPValidationError' }
+    InternalServerError:
+      description: Internal server error
+      content:
+        application/json:
+          schema: { $ref: '#/components/schemas/ErrorBody' }
+paths:
+  /widgets:
+    get:
+      summary: List widgets
+      responses:
+        '200':
+          description: List of widgets
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Widget'
+        '401': { $ref: '#/components/responses/Unauthorized' }
+        '403': { $ref: '#/components/responses/Forbidden' }
+        '422': { $ref: '#/components/responses/ValidationError' }
+        '500': { $ref: '#/components/responses/InternalServerError' }
+    post:
+      summary: Create a widget
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Widget'
+      responses:
+        '201':
+          description: Widget created
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Widget'
+        '401': { $ref: '#/components/responses/Unauthorized' }
+        '403': { $ref: '#/components/responses/Forbidden' }
+        '422': { $ref: '#/components/responses/ValidationError' }
+        '500': { $ref: '#/components/responses/InternalServerError' }
+  /widgets/{id}:
+    get:
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema: { type: integer }
+      responses:
+        '200':
+          description: Single widget
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Widget'
+        '401': { $ref: '#/components/responses/Unauthorized' }
+        '403': { $ref: '#/components/responses/Forbidden' }
+        '404': { $ref: '#/components/responses/NotFound' }
+        '422': { $ref: '#/components/responses/ValidationError' }
+        '500': { $ref: '#/components/responses/InternalServerError' }
+    put:
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema: { type: integer }
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Widget'
+      responses:
+        '200':
+          description: Widget updated
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Widget'
+        '401': { $ref: '#/components/responses/Unauthorized' }
+        '403': { $ref: '#/components/responses/Forbidden' }
+        '404': { $ref: '#/components/responses/NotFound' }
+        '422': { $ref: '#/components/responses/ValidationError' }
+        '500': { $ref: '#/components/responses/InternalServerError' }
+    delete:
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema: { type: integer }
+      responses:
+        '204':
+          description: Widget deleted
+        '401': { $ref: '#/components/responses/Unauthorized' }
+        '403': { $ref: '#/components/responses/Forbidden' }
+        '404': { $ref: '#/components/responses/NotFound' }
+        '422': { $ref: '#/components/responses/ValidationError' }
+        '500': { $ref: '#/components/responses/InternalServerError' }
+```

react-openapi/api/client.ts

@@ -1,70 +0,0 @@
-import axios, { AxiosInstance } from "axios";
-import type { AxiosResponse } from "axios";
-import { createApiClient } from "../../react-auth";
-
-/**
- * We expose a singleton-like getter/setter for the API clients
- */
-let _api: AxiosInstance | null = null;
-let _auth: AxiosInstance | null = null;
-
-function withParamsSerializer(instance: AxiosInstance): AxiosInstance {
-  instance.defaults.paramsSerializer = {
-    serialize: (params) => {
-      const searchParams = new URLSearchParams();
-
-      Object.entries(params).forEach(([key, value]) => {
-        if (Array.isArray(value)) {
-          value.forEach((v) => {
-            searchParams.append(key, String(v)); // NO []
-          });
-        } else if (value !== undefined && value !== null) {
-          searchParams.append(key, String(value));
-        }
-      });
-
-      return searchParams.toString();
-    },
-  };
-
-  return instance;
-}
-
-export const api = {
-  get: <T = any, R = AxiosResponse<T>>(url: string, config?: Parameters<AxiosInstance["get"]>[1]) => {
-    if (!_api) throw new Error("API client not initialized");
-    return _api.get<T, R>(url, config);
-  },
-  post: <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: Parameters<AxiosInstance["post"]>[2]) => {
-    if (!_api) throw new Error("API client not initialized");
-    return _api.post<T, R>(url, data, config);
-  },
-  put: <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: Parameters<AxiosInstance["put"]>[2]) => {
-    if (!_api) throw new Error("API client not initialized");
-    return _api.put<T, R>(url, data, config);
-  },
-  delete: <T = any, R = AxiosResponse<T>>(url: string, config?: Parameters<AxiosInstance["delete"]>[1]) => {
-    if (!_api) throw new Error("API client not initialized");
-    return _api.delete<T, R>(url, config);
-  },
-  patch: <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: Parameters<AxiosInstance["patch"]>[2]) => {
-    if (!_api) throw new Error("API client not initialized");
-    return _api.patch<T, R>(url, data, config);
-  },
-};
-
-export const auth = {
-  post: (...args: Parameters<AxiosInstance["post"]>) => {
-    if (!_auth) throw new Error("Auth client not initialized");
-    return _auth.post(...args);
-  },
-  get: (...args: Parameters<AxiosInstance["get"]>) => {
-    if (!_auth) throw new Error("Auth client not initialized");
-    return _auth.get(...args);
-  },
-};
-
-export function initializeApiClients(baseUrl: string, authBaseUrl: string) {
-  _api = withParamsSerializer(createApiClient(baseUrl));
-  _auth = withParamsSerializer(createApiClient(authBaseUrl));
-}

react-openapi/components/AdminLayout.tsx

@@ -1,265 +0,0 @@
-import * as React from 'react';
-import {
-  Box,
-  Drawer,
-  List,
-  Divider,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  IconButton,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
-import TableViewIcon from '@mui/icons-material/TableView';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import MenuIcon from '@mui/icons-material/Menu';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import { ResourceConfig } from '../types/config';
-import { useLocation, useNavigate } from 'react-router-dom';
-
-const drawerWidth = 240;
-const collapsedWidth = 64;
-
-interface AdminLayoutProps {
-  children: React.ReactNode;
-  onSelectResource: (resourceName: string | null) => void;
-  onLogout: () => void;
-  username?: string;
-  resources: ResourceConfig[];
-}
-
-export default function AdminLayout({
-  children,
-  onSelectResource,
-  resources,
-}: AdminLayoutProps) {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const [isCollapsed, setIsCollapsed] = React.useState(false);
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-
-  const activeResourceName = location.pathname.split('/admin')[1] || null;
-
-  // AUTO-TOGGLE LOGIC (unchanged)
-  React.useEffect(() => {
-    if (isMobile) {
-      setIsCollapsed(false);
-      setMobileOpen(false);
-    } else {
-      if (location.pathname === '/admin' || location.pathname === '') {
-        setIsCollapsed(false);
-      } else {
-        setIsCollapsed(true);
-      }
-    }
-  }, [location.pathname, isMobile]);
-
-  const currentWidth = isMobile
-    ? drawerWidth
-    : isCollapsed
-    ? collapsedWidth
-    : drawerWidth;
-
-  const handleDrawerToggle = () => {
-    setMobileOpen((prev) => !prev);
-  };
-
-  const handleSidebarToggle = () => {
-    setIsCollapsed((prev) => !prev);
-  };
-
-  const drawerContent = (
-    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      {!isMobile && (
-        <>
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: isCollapsed ? 'center' : 'flex-end',
-              p: 1,
-            }}
-          >
-            <IconButton onClick={handleSidebarToggle}>
-              {isCollapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-            </IconButton>
-          </Box>
-          <Divider />
-        </>
-      )}
-
-      {/* Mobile spacing (replaces Toolbar) */}
-      {isMobile && (
-        <Box sx={{ height: (theme) => theme.spacing(7) }} />
-      )}
-
-      <List>
-        <ListItem disablePadding>
-          <Tooltip
-            title={isCollapsed && !isMobile ? 'Dashboard' : ''}
-            placement="right"
-          >
-            <ListItemButton
-              selected={location.pathname === '/admin'}
-              onClick={() => navigate('/admin')}
-              sx={{
-                minHeight: 48,
-                justifyContent:
-                  isCollapsed && !isMobile ? 'center' : 'initial',
-                px: 2.5,
-              }}
-            >
-              <ListItemIcon
-                sx={{
-                  minWidth: 0,
-                  mr: isCollapsed && !isMobile ? 0 : 3,
-                  justifyContent: 'center',
-                }}
-              >
-                <DashboardIcon
-                  color={
-                    location.pathname === '/admin'
-                      ? 'primary'
-                      : 'inherit'
-                  }
-                />
-              </ListItemIcon>
-              {(!isCollapsed || isMobile) && (
-                <ListItemText primary="Dashboard" />
-              )}
-            </ListItemButton>
-          </Tooltip>
-        </ListItem>
-      </List>
-
-      <Divider />
-
-      <List sx={{ flexGrow: 1 }}>
-        {resources.map((res) => (
-          <ListItem key={res.name} disablePadding>
-            <Tooltip
-              title={
-                isCollapsed && !isMobile ? res.pluralLabel : ''
-              }
-              placement="right"
-            >
-              <ListItemButton
-                selected={activeResourceName === res.name}
-                onClick={() => onSelectResource(res.name)}
-                sx={{
-                  minHeight: 48,
-                  justifyContent:
-                    isCollapsed && !isMobile
-                      ? 'center'
-                      : 'initial',
-                  px: 2.5,
-                }}
-              >
-                <ListItemIcon
-                  sx={{
-                    minWidth: 0,
-                    mr: isCollapsed && !isMobile ? 0 : 3,
-                    justifyContent: 'center',
-                  }}
-                >
-                  <TableViewIcon
-                    color={
-                      activeResourceName === res.name
-                        ? 'primary'
-                        : 'inherit'
-                    }
-                  />
-                </ListItemIcon>
-                {(!isCollapsed || isMobile) && (
-                  <ListItemText primary={res.pluralLabel} />
-                )}
-              </ListItemButton>
-            </Tooltip>
-          </ListItem>
-        ))}
-      </List>
-    </Box>
-  );
-
-  return (
-    <Box sx={{ display: 'flex' }}>
-      {/* NAV */}
-      <Box
-        component="nav"
-        sx={{ width: { md: currentWidth }, flexShrink: { md: 0 } }}
-      >
-        {isMobile ? (
-          <Drawer
-            variant="temporary"
-            open={mobileOpen}
-            onClose={handleDrawerToggle}
-            ModalProps={{ keepMounted: true }}
-            sx={{
-              display: { xs: 'block', md: 'none' },
-              '& .MuiDrawer-paper': {
-                width: drawerWidth,
-              },
-            }}
-          >
-            {drawerContent}
-          </Drawer>
-        ) : (
-          <Drawer
-            variant="permanent"
-            open
-            sx={{
-              display: { xs: 'none', md: 'block' },
-              width: currentWidth,
-              flexShrink: 0,
-              whiteSpace: 'nowrap',
-              [`& .MuiDrawer-paper`]: {
-                width: currentWidth,
-                overflowX: 'hidden',
-                transition: theme.transitions.create('width'),
-              },
-            }}
-          >
-            {drawerContent}
-          </Drawer>
-        )}
-      </Box>
-
-      {/* MAIN */}
-      <Box
-        component="main"
-        sx={{
-          flexGrow: 1,
-          p: { xs: 2, md: 3 },
-          width: {
-            xs: '100%',
-            md: `calc(100% - ${currentWidth}px)`,
-          },
-        }}
-      >
-        {/* Control row (replaces AppBar) */}
-        {isMobile && (
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              mb: 2,
-              height: (theme) => theme.spacing(7),
-            }}
-          >
-            <IconButton onClick={handleDrawerToggle}>
-              <MenuIcon />
-            </IconButton>
-          </Box>
-        )}
-
-        {children}
-      </Box>
-    </Box>
-  );
-}

react-openapi/components/EnhancedTable.tsx

@@ -1,404 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-import {
-  Box,
-  Typography,
-  Button,
-  IconButton,
-  Tooltip,
-  Card,
-  CardContent,
-  CardActions,
-  Grid,
-  Menu,
-  MenuItem,
-  useMediaQuery,
-  useTheme,
-  Divider,
-  Chip,
-  Stack,
-} from '@mui/material';
-import {
-  DataGrid,
-  GridColDef,
-  GridActionsCellItem,
-  GridRenderCellParams,
-  GridPaginationModel,
-} from '@mui/x-data-grid';
-import EditIcon from '@mui/icons-material/Edit';
-import DeleteIcon from '@mui/icons-material/Delete';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { useNavigate } from 'react-router-dom';
-import { ResourceConfig } from '../types/config';
-import { EnhancedTableComponents } from '../types/overrides';
-import { getFieldOptions, toGridValueOptions, resolveTemplate } from '../utils/options';
-
-interface EnhancedTableProps {
-  config: ResourceConfig;
-  data: any[];
-  total?: number;
-  paginationModel?: GridPaginationModel;
-  onPaginationModelChange?: (model: GridPaginationModel) => void;
-  loading?: boolean;
-  onEdit: (item: any) => void;
-  onDelete: (id: string) => void;
-  onCreate: () => void;
-  onNavigateToResource?: (resourceName: string, id: string) => void;
-  components?: EnhancedTableComponents;
-}
-
-export default function EnhancedTable({
-  config,
-  data,
-  total,
-  paginationModel: externalPaginationModel,
-  onPaginationModelChange: externalOnPaginationModelChange,
-  loading = false,
-  onEdit,
-  onDelete,
-  onCreate,
-  onNavigateToResource,
-  components: tableComponents,
-}: EnhancedTableProps) {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  const navigate = useNavigate();
-
-  const isServer = config.filterOptions?.mode !== "client";
-  const [internalPaginationModel, setInternalPaginationModel] = React.useState<GridPaginationModel>({
-    page: 0,
-    pageSize: 10,
-  });
-  const paginationModel = isServer ? externalPaginationModel : internalPaginationModel;
-  const onPaginationModelChange = isServer ? externalOnPaginationModelChange : setInternalPaginationModel;
-  
-  const columns: GridColDef[] = React.useMemo(() => {
-    const cols: GridColDef[] = Object.entries(config.fields).map(([key, field]) => {
-      let muiType: 'string' | 'number' | 'boolean' | 'date' | 'dateTime' | 'singleSelect' = 'string';
-      if (field.type === 'number') muiType = 'number';
-      if (field.type === 'boolean') muiType = 'boolean';
-      if (field.type === 'date') muiType = 'date';
-      if (field.type === 'datetime') muiType = 'dateTime';
-      if (field.type === 'enum') muiType = 'singleSelect';
-
-      const col: GridColDef = {
-        field: key,
-        headerName: field.label,
-        type: muiType,
-        flex: 1,
-        minWidth: 150,
-        renderCell: (params: GridRenderCellParams) => <FieldRenderer params={params} field={field} fieldKey={key} config={config} onNavigate={onNavigateToResource} navigate={navigate} components={tableComponents} />
-      };
-
-      if (muiType === 'date' || muiType === 'dateTime') {
-        col.valueGetter = (value: any) => {
-          if (!value) return null;
-          const date = new Date(value);
-          return isNaN(date.getTime()) ? null : date;
-        };
-      }
-
-      if (muiType === 'singleSelect') {
-        (col as GridColDef & { valueOptions: any[] }).valueOptions = toGridValueOptions(getFieldOptions(field));
-      }
-
-      return col;
-    });
-
-    cols.push({
-      field: 'actions',
-      type: 'actions',
-      headerName: 'Actions',
-      width: 120,
-      getActions: (params) => [
-        <GridActionsCellItem
-          icon={<VisibilityIcon />}
-          label="View"
-          onClick={() => navigate(`/admin/${config.name}/${params.id}`)}
-        />,
-        <GridActionsCellItem
-          icon={<EditIcon />}
-          label="Edit"
-          onClick={() => navigate(`/admin/${config.name}/edit/${params.id}`)}
-        />,
-        <GridActionsCellItem
-          icon={<DeleteIcon />}
-          label="Delete"
-          onClick={() => onDelete(params.id as string)}
-        />,
-      ],
-    });
-
-    return cols;
-  }, [config, onDelete, navigate, onNavigateToResource]);
-
-  const mobilePageSize = 10;
-  const [mobilePage, setMobilePage] = React.useState(0);
-  const mobileTotalPages = Math.ceil(data.length / mobilePageSize) || 1;
-  const mobileData = data.slice(mobilePage * mobilePageSize, (mobilePage + 1) * mobilePageSize);
-
-  React.useEffect(() => {
-    if (mobilePage >= mobileTotalPages) setMobilePage(0);
-  }, [data.length, mobilePage, mobileTotalPages]);
-
-  if (isMobile) {
-    return (
-      <Box>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2, alignItems: 'center' }}>
-          <Typography variant="h5" sx={{ fontWeight: 'bold' }}>{config.pluralLabel}</Typography>
-          <Button variant="contained" color="primary" onClick={onCreate} size="small">
-            Add
-          </Button>
-        </Box>
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          {mobileData.map((row) => (
-            <Box key={row[config.primaryKey] || Math.random()}>
-              <MobileCardRow 
-                row={row} 
-                config={config} 
-                onEdit={onEdit} 
-                onDelete={onDelete} 
-                onNavigate={onNavigateToResource}
-                navigate={navigate}
-                components={tableComponents}
-              />
-            </Box>
-          ))}
-        </Box>
-        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 1, mt: 2, flexWrap: 'wrap' }}>
-          <Button size="small" disabled={mobilePage === 0} onClick={() => setMobilePage(mobilePage - 1)}>
-            Previous
-          </Button>
-          <Typography variant="body2" sx={{ alignSelf: 'center', px: 1 }}>
-            Page {mobilePage + 1} of {mobileTotalPages}
-          </Typography>
-          <Button size="small" disabled={mobilePage >= mobileTotalPages - 1} onClick={() => setMobilePage(mobilePage + 1)}>
-            Next
-          </Button>
-        </Box>
-      </Box>
-    );
-  }
-
-  return (
-    <Box sx={{ width: '100%' }}>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3, alignItems: 'center' }}>
-        <Typography variant="h5" sx={{ fontWeight: 'bold' }}>{config.pluralLabel}</Typography>
-        <Button variant="contained" color="primary" onClick={onCreate}>
-          Add {config.label}
-        </Button>
-      </Box>
-      <DataGrid
-        rows={data || []}
-        columns={columns}
-        autoHeight
-        paginationMode={isServer ? 'server' : 'client'}
-        {...(isServer ? {
-          rowCount: (() => {
-            if (total !== undefined) return total;
-            const page = paginationModel?.page || 0;
-            const pageSize = paginationModel?.pageSize || 10;
-            if (data.length < pageSize) {
-              return page * pageSize + data.length;
-            }
-            return (page + 2) * pageSize;
-          })(),
-        } : {})}
-        loading={loading}
-        paginationModel={paginationModel || { page: 0, pageSize: 10 }}
-        onPaginationModelChange={onPaginationModelChange}
-        getRowId={(row) => {
-            const pk = config.primaryKey;
-            if (row[pk] !== undefined && row[pk] !== null) return row[pk];
-            const fallbackKeys = ['id', '_id', 'uuid', 'pk'];
-            for (const key of fallbackKeys) {
-                if (row[key] !== undefined && row[key] !== null) return row[key];
-            }
-            return `temp-id-${data.indexOf(row)}`;
-        }}
-        disableRowSelectionOnClick
-        pageSizeOptions={[10, 25, 50]}
-        sx={{
-            border: 'none',
-            '& .MuiDataGrid-cell:focus': { outline: 'none' },
-            '& .MuiDataGrid-columnHeader:focus': { outline: 'none' },
-        }}
-      />
-    </Box>
-  );
-}
-
-function MobileCardRow({ row, config, onDelete, onNavigate, navigate, components }: any) {
-    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-    const open = Boolean(anchorEl);
-    const id = row[config.primaryKey];
-
-    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-      setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-      setAnchorEl(null);
-    };
-
-    return (
-        <Card variant="outlined" sx={{ borderRadius: 2 }}>
-            <CardContent sx={{ pb: 1 }}>
-                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
-                    <Typography variant="subtitle1" sx={{ fontWeight: 'bold', color: 'primary.main' }}>
-                        #{id}
-                    </Typography>
-                    <IconButton size="small" onClick={handleClick}>
-                        <MoreVertIcon fontSize="small" />
-                    </IconButton>
-                    <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-                        <MenuItem onClick={() => { handleClose(); navigate(`/admin/${config.name}/${id}`); }}>View</MenuItem>
-                        <MenuItem onClick={() => { handleClose(); navigate(`/admin/${config.name}/edit/${id}`); }}>Edit</MenuItem>
-                        <MenuItem onClick={() => { handleClose(); onDelete(id); }} sx={{ color: 'error.main' }}>Delete</MenuItem>
-                    </Menu>
-                </Box>
-                <Divider sx={{ mb: 2 }} />
-                <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 2 }}>
-                    {Object.entries(config.fields).slice(0, 5).map(([key, field]: [string, any]) => (
-                        <Box key={key}>
-                            <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
-                                {field.label}
-                            </Typography>
-                            <Typography variant="body2" component="div" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
-                                <FieldRenderer params={{ value: row[key], row }} field={field} fieldKey={key} config={config} onNavigate={onNavigate} navigate={navigate} isMobile components={components} />
-                            </Typography>
-                        </Box>
-                    ))}
-                </Box>
-            </CardContent>
-            <CardActions sx={{ justifyContent: 'flex-end', px: 2, pb: 2 }}>
-                 <Button size="small" onClick={() => navigate(`/admin/${config.name}/${id}`)}>View Details</Button>
-            </CardActions>
-        </Card>
-    );
-}
-
-function getFormattedDisplayValue(item: any, displayFormat: string) {
-    if (!item) return "";
-
-    return resolveTemplate(displayFormat, item);
-}
-
-function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate, isMobile, components }: any) {
-    const value = params.value;
-    const isPk = fieldKey === config.primaryKey;
-
-    if (field.formatter) return field.formatter(value);
-
-    const customRenderer = components?.cellRenderers?.[field.type as string];
-    if (customRenderer) {
-      return React.createElement(customRenderer, { value, row: params.row, field, fieldKey, config, onNavigate, isMobile });
-    }
-
-    // 1. Single Relation
-    if (field.relation && value && !Array.isArray(value)) {
-        const relationId = typeof value === 'object' ? (value.id || value._id || value.pk) : value;
-        const displayValue = getFormattedDisplayValue(value, field.displayFormat);
-        
-        return (
-            <Chip 
-                label={displayValue} 
-                size="small" 
-                variant="outlined"
-                color="primary"
-                onClick={(e) => { 
-                    e.stopPropagation(); 
-                    if (relationId) onNavigate?.(field.relation!, String(relationId)); 
-                }}
-                sx={{ cursor: 'pointer' }}
-            />
-        );
-    }
-
-    // 2. Multi-Select (Array of relations or simple strings)
-    if (field.type === 'array' && Array.isArray(value)) {
-        const enumValue = field.enumOption?.value;
-        const tooltipTitle = value.map((item) => getFormattedDisplayValue(item, field.displayFormat)).join(', ');
-
-        return (
-            <Tooltip title={tooltipTitle} arrow placement="top">
-                <Stack direction="row" spacing={0.5} sx={{ overflow: 'hidden', flexWrap: 'nowrap' }}>
-                    {value.map((item, idx) => (
-                        <Chip
-                            key={idx}
-                            label={getFormattedDisplayValue(item, field.displayFormat)}
-                            size="small"
-                            variant="filled"
-                            sx={{ maxWidth: 120 }}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                if (field.relation) {
-                                    const id = typeof item === 'object' ? (item.id || item._id) : item;
-                                    if (id) onNavigate?.(field.relation!, String(id));
-                                }
-                            }}
-                        />
-                    ))}
-                </Stack>
-            </Tooltip>
-        );
-    }
-
-    // 3. Simple Objects
-    if (field.type === 'object' && value) {
-        return getFormattedDisplayValue(value, field.displayFormat) || (isMobile ? 'Object' : JSON.stringify(value));
-    }
-
-    if (field.type === 'number' && typeof value === 'number') {
-        const isNegative = value < 0;
-        const color = isNegative ? 'error' : 'success';
-        
-        return (
-            <Chip 
-                label={value.toLocaleString()} 
-                size="small" 
-                color={color}
-                variant="filled"
-                sx={{ 
-                    fontWeight: 'bold',
-                    minWidth: 60,
-                    // Soft background with bold text for a premium feel
-                    bgcolor: (theme) => alpha(theme.palette[color].main, 0.15),
-                    color: (theme) => theme.palette[color].dark,
-                    '& .MuiChip-label': { px: 1.5 }
-                }}
-            />
-        );
-    }
-
-    if (field.type === 'boolean') {
-        return value ? (
-            <Chip label="Yes" size="small" color="success" variant="outlined" sx={{ height: 20, fontSize: '0.7rem' }} />
-        ) : (
-            <Chip label="No" size="small" color="default" variant="outlined" sx={{ height: 20, fontSize: '0.7rem' }} />
-        );
-    }
-    
-    if (field.type === 'datetime') return value ? new Date(value).toLocaleString() : '';
-        if (field.type === 'date') return value ? new Date(value).toLocaleDateString() : '';
-
-
-    if (field.type === 'enum') {
-      const opt = getFieldOptions(field).find(o => o.key === value);
-      return opt?.value ?? value;
-    }
-
-    if (isPk && !isMobile) {
-        return (
-            <Chip 
-                label={value} 
-                size="small" 
-                color="primary"
-                onClick={(e) => { e.stopPropagation(); navigate(`/admin/${config.name}/${params.row[config.primaryKey]}`); }}
-                sx={{ cursor: 'pointer', fontWeight: 'bold' }}
-            />
-        );
-    }
-
-    return value;
-}

react-openapi/components/FilterBar.tsx

@@ -1,308 +0,0 @@
-import * as React from "react";
-import {
-  Box,
-  Button,
-  Chip,
-  Paper,
-  TextField,
-  Autocomplete,
-  Typography,
-} from "@mui/material";
-import DoneIcon from "@mui/icons-material/Done";
-import FilterListIcon from "@mui/icons-material/FilterList";
-import { ResourceField, ResourceMode } from "../types/config";
-import { FilterBarComponents, FieldComponents } from "../types/overrides";
-import { getFieldOptions, resolveTemplate } from "../utils/options";
-
-export function FilterAutocomplete({
-  options,
-  value,
-  label,
-  onChange,
-}: {
-  options: string[];
-  value: string[];
-  label: string;
-  onChange: (val: string[]) => void;
-}) {
-  const listboxRef = React.useRef<HTMLUListElement>(null);
-  const scrollPosRef = React.useRef(0);
-  const [open, setOpen] = React.useState(false);
-  const [frozenValue, setFrozenValue] = React.useState<string[]>(value);
-
-  const toggleDropdown = () => {
-    setOpen(prev => {
-      const next = !prev;
-      setFrozenValue(value);
-      return next;
-    });
-  };
-  const sortedOptions = React.useMemo(() => {
-    const sel = new Set(frozenValue);
-    const picked: string[] = [];
-    const rest: string[] = [];
-    for (const o of options) {
-      if (sel.has(o)) picked.push(o);
-      else rest.push(o);
-    }
-    return [...picked, ...rest];
-  }, [options, frozenValue]);
-
-  return (
-    <Autocomplete
-      multiple
-      freeSolo
-      disableCloseOnSelect
-      open={open}
-      onOpen={toggleDropdown}
-      onClose={toggleDropdown}
-      options={sortedOptions}
-      value={value}
-      getOptionKey={(option) => option}
-      onChange={(_, val) => onChange(val.length > 0 ? val : [])}
-      ListboxProps={{
-        ref: listboxRef,
-        onScroll: (e) => { scrollPosRef.current = (e.target as HTMLUListElement).scrollTop; },
-      }}
-      renderOption={(props, option, { selected }) => {
-        const { key, ...rest } = props;
-        return (
-          <li key={key} {...rest}>
-            {selected ? <DoneIcon sx={{ fontSize: 14, mr: 1, color: 'primary.main' }} /> : <Box sx={{ width: 22, mr: 1 }} />}
-            {option}
-          </li>
-        );
-      }}
-      renderTags={(tagValue, getTagProps) => {
-        const maxChips = 1;
-        return (
-          <>
-            {tagValue.slice(0, maxChips).map((tag, index) => {
-              const { key, ...tagProps } = getTagProps({ index });
-              return <Chip
-                key={key}
-                {...tagProps}
-                label={tag.length > 10 ? `${tag.slice(0, 8)}..` : tag}
-                size="small"
-                onClick={toggleDropdown}
-                sx={{ cursor: 'pointer' }}
-              />;
-            })}
-            {tagValue.length > maxChips && (
-              <Chip
-                label={`+${tagValue.length - maxChips}`}
-                size="small"
-                onClick={toggleDropdown}
-                sx={{ cursor: 'pointer' }}
-              />
-            )}
-          </>
-        );
-      }}
-      renderInput={(params) => <TextField {...params} placeholder={`Add ${label}...`} />}
-      sx={{ '& .MuiOutlinedInput-root': { minHeight: '3rem', py: 0.5 } }}
-    />
-  );
-}
-
-function extractOptions(
-  fieldName: string,
-  field: ResourceField,
-  data: any[]
-): string[] {
-  const values = new Set<string>();
-
-  if (field.type === 'enum') {
-    return getFieldOptions(field).map(o => o.value);
-  }
-  if (!data) return [];
-
-  const pull = (item: any): string | null => {
-    if (item == null) return null;
-    if (typeof item === "string") return item;
-    if (typeof item !== "object") return String(item);
-
-    if (field.enumOption?.value) return resolveTemplate(field.enumOption.value, item);
-
-    // Use displayFormat if defined
-    if (field.displayFormat) {
-      return resolveTemplate(field.displayFormat, item);
-    }
-
-    return null;
-  };
-
-  for (const row of data) {
-    const v = row[fieldName];
-    if (v == null) continue;
-
-    if (Array.isArray(v)) {
-      for (const el of v) {
-        const label = pull(el);
-        if (label) values.add(label);
-      }
-    } else {
-      const label = pull(v);
-      if (label) values.add(label);
-    }
-  }
-
-  // console.log('extracted', fieldName, Array.from(values).sort())
-  return Array.from(values).sort();
-}
-
-function renderFilterInput(
-  fieldName: string,
-  field: ResourceField,
-  options: string[],
-  value: any,
-  onChange: (key: string, val: any) => void,
-  components?: FilterBarComponents,
-  fieldComponents?: FieldComponents,
-) {
-  const filterType = field.filterType;
-
-  if (filterType === "number-range") {
-    const RangeComponent = fieldComponents?.numberRange;
-    if (!RangeComponent) throw new Error(`Number range component not found for field ${fieldName}`);
-    const rangeVal = (value as { min?: string; max?: string }) || {};
-    return <RangeComponent name={fieldName} field={field} value={rangeVal} onChange={(val: any) => onChange("value", val)} />;
-  }
-
-  if (filterType === "date-range") {
-    const RangeComponent = fieldComponents?.dateRange;
-    if (!RangeComponent) throw new Error(`Number range component not found for field ${fieldName}`);
-    const rangeVal = (value as { start?: string; end?: string }) || {};
-    return <RangeComponent name={fieldName} field={field} value={rangeVal} onChange={(val: any) => onChange("value", val)} />;
-  }
-
-  const selected = Array.isArray(value) ? value : [];
-
-  return (
-    <FilterAutocomplete
-      options={options}
-      value={selected}
-      label={field.label}
-      onChange={(val) => onChange("value", val.length > 0 ? val : undefined)}
-    />
-  );
-}
-
-export interface FilterBarProps {
-  fields: Record<string, ResourceField>;
-  filterableFields: string[];
-  mode: ResourceMode;
-  data?: any[];
-  appliedValues: Record<string, any>;
-  onApply: (values: Record<string, any>) => void;
-  onClear: () => void;
-  components?: FilterBarComponents;
-  fieldComponents?: FieldComponents;
-}
-
-export default function FilterBar({
-  fields,
-  filterableFields,
-  data,
-  appliedValues,
-  onApply,
-  onClear,
-  components: filterComponents,
-  fieldComponents,
-}: FilterBarProps) {
-  const [open, setOpen] = React.useState(false);
-  const [draft, setDraft] = React.useState<Record<string, any>>(() => ({ ...appliedValues }));
-
-  React.useEffect(() => {
-    if (!open) setDraft({ ...appliedValues });
-  }, [appliedValues, open]);
-
-  if (!filterableFields || filterableFields.length === 0) return null;
-
-  const activeCount = Object.keys(appliedValues).filter((k) => {
-    const v = appliedValues[k];
-    if (v == null || v === "") return false;
-    if (typeof v === "object" && Object.values(v).every((x) => x == null || x === "")) return false;
-    return true;
-  }).length;
-
-  const handleApply = () => onApply({ ...draft });
-  const handleClear = () => {
-    setDraft({});
-    onClear();
-  };
-
-  const updateDraft = (fieldName: string, key: string, val: any) => {
-    setDraft((prev) => {
-      if (key === "value") {
-        return { ...prev, [fieldName]: val };
-      }
-      const existing = prev[fieldName] || {};
-      return { ...prev, [fieldName]: { ...existing, [key]: val } };
-    });
-  };
-
-  return (
-    <Paper variant="outlined" sx={{ mb: 2, borderRadius: 2, overflow: "hidden" }}>
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          px: 2,
-          py: 1,
-          cursor: "pointer",
-          "&:hover": { bgcolor: "action.hover" },
-        }}
-        onClick={() => setOpen((o) => !o)}
-      >
-        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-          <FilterListIcon fontSize="small" color="action" />
-          <Typography variant="subtitle2" fontWeight={600}>
-            {open ? "Hide Filters" : "Show Filters"}
-          </Typography>
-        </Box>
-        {activeCount > 0 && (
-          <Typography variant="caption" color="primary" fontWeight={600}>
-            {activeCount} active
-          </Typography>
-        )}
-      </Box>
-
-      {open && (
-        <Box sx={{ px: 2, pb: 2, borderTop: "1px solid", borderColor: "divider", pt: 2 }}>
-          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2, alignItems: "flex-end" }}>
-            {filterableFields.map((fieldName) => {
-              const field = fields[fieldName];
-              if (!field) return null;
-
-                const needsOptions = field.filterType === "autocomplete" || field.filterType === "multiselect";
-              const options = needsOptions ? extractOptions(fieldName, field, data ?? []) : [];
-              const raw = draft[fieldName];
-
-              return (
-                <Box key={fieldName} sx={{ display: "flex", flexDirection: "column", flex: { xs: '0 0 100%', sm: 1 }, minWidth: { sm: 200 } }}>
-                  <Box sx={{ typography: "caption", mb: 0.5, color: "text.secondary" }}>
-                    {field.label}
-                  </Box>
-                  {renderFilterInput(fieldName, field, options, raw, (key, val) =>
-                    updateDraft(fieldName, key, val), filterComponents, fieldComponents
-                  )}
-                </Box>
-              );
-            })}
-          </Box>
-
-          <Box sx={{ mt: 2, display: "flex", gap: 1 }}>
-            <Button variant="contained" onClick={handleApply}>
-              Apply
-            </Button>
-            <Button variant="outlined" onClick={handleClear}>
-              Clear
-            </Button>
-          </Box>
-        </Box>
-      )}
-    </Paper>
-  );
-}

react-openapi/components/GenericForm.tsx

@@ -1,143 +0,0 @@
-import * as React from 'react';
-import {
-  Box,
-  Button,
-  Typography,
-  Divider,
-  CircularProgress,
-} from '@mui/material';
-import { ResourceConfig } from '../types/config';
-import { FieldComponents } from '../types/overrides';
-import { useUpload } from '../providers/UploadProvider';
-import { useQueries } from '@tanstack/react-query';
-import { useResource } from '../hooks/useResource';
-import FormField from './fields/FormField';
-import { ConfigContext } from '../providers/ConfigContext';
-
-interface GenericFormProps {
-  config: ResourceConfig;
-  initialData?: any;
-  onSave: (data: any) => Promise<void>;
-  onCancel: () => void;
-  loading?: boolean;
-  readOnly?: boolean;
-  onEditClick?: () => void;
-  fieldComponents: FieldComponents;
-}
-
-export default function GenericForm({
-  config,
-  initialData = {},
-  onSave,
-  onCancel,
-  loading: saving,
-  readOnly = false,
-  onEditClick,
-  fieldComponents,
-}: GenericFormProps) {
-  initialData = initialData || {};
-  const [formData, setFormData] = React.useState(initialData);
-  const { uploadFile, uploading } = useUpload();
-  const appConfig = React.useContext(ConfigContext);
-
-  // 1. Identify all unique relations in the schema (including nested ones)
-  const getRelationFields = (fields: Record<string, any>): string[] => {
-    let relations: string[] = [];
-    Object.values(fields).forEach(field => {
-      if (field.relation) relations.push(field.relation);
-      if (field.schema) relations = [...relations, ...getRelationFields(field.schema)];
-    });
-    return Array.from(new Set(relations));
-  };
-
-  const allRelations = React.useMemo(() => getRelationFields(config.fields), [config.fields]);
-
-  // 2. Parallel fetch for all related resource lists
-  const queries = useQueries({
-    queries: allRelations.map(relName => {
-        const relatedRes = appConfig?.resources.find(r => r.name === relName);
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const { getListQueryOptions } = useResource(relatedRes!, { fieldComponents });
-        return {
-            ...getListQueryOptions(),
-            enabled: !!relatedRes,
-        };
-    }),
-  });
-
-  const isLoadingRelations = queries.some(q => q.isLoading);
-
-  const relationDataMap = React.useMemo(() => {
-    const map: Record<string, any[]> = {};
-    allRelations.forEach((relName, index) => {
-      // @ts-ignore
-      map[relName] = queries[index].data || [];
-    });
-    return map;
-  }, [allRelations, queries]);
-
-  const handleChange = (key: string, value: any) => {
-    if (readOnly) return;
-    setFormData((prev: any) => ({ ...prev, [key]: value }));
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (readOnly) return;
-    onSave(formData);
-  };
-
-  const getTitle = () => {
-    if (readOnly) return `View ${config.label}`;
-    return initialData[config.primaryKey] ? `Edit ${config.label}` : `New ${config.label}`;
-  };
-
-  if (isLoadingRelations) {
-    return (
-        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', p: 8, gap: 2 }}>
-            <CircularProgress />
-            <Typography variant="body2" color="text.secondary">Loading relationships...</Typography>
-        </Box>
-    );
-  }
-
-  return (
-    <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <Typography variant="h5">
-        {getTitle()}
-      </Typography>
-      <Divider />
-
-      {Object.entries(config.fields).map(([key, field]) => (
-        <FormField
-          key={key}
-          name={key}
-          field={field}
-          value={formData[key]}
-          onChange={(val: any) => handleChange(key, val)}
-          disabled={readOnly || field.readOnly}
-          uploadFile={uploadFile}
-          uploading={uploading}
-          baseUrl={appConfig?.baseUrl || ""}
-          relationDataMap={relationDataMap}
-          components={fieldComponents}
-        />
-      ))}
-
-      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 4 }}>
-        <Button variant="outlined" onClick={onCancel} disabled={saving}>
-          {readOnly ? 'Back to List' : 'Cancel'}
-        </Button>
-        {readOnly ? (
-            <Button variant="contained" color="primary" onClick={onEditClick}>
-                Edit {config.label}
-            </Button>
-        ) : (
-            <Button variant="contained" type="submit" loading={saving} disabled={saving || uploading}>
-              Save {config.label}
-            </Button>
-        )}
-      </Box>
-    </Box>
-  );
-}

react-openapi/components/ProfileView.tsx

@@ -1,83 +0,0 @@
-import * as React from 'react';
-import { Box, Typography, Paper, CircularProgress, Alert } from '@mui/material';
-import { useResource } from '../hooks/useResource';
-import GenericForm from './GenericForm';
-import { ConfigContext } from '../providers/ConfigContext';
-import { defaultFieldComponents } from './fields/DefaultFieldComponents';
-
-export default function ProfileView() {
-  const appConfig = React.useContext(ConfigContext);
-  const profileConfig = appConfig?.profile;
-  const resourceConfig = appConfig?.resources.find(r => r.name === profileConfig?.resource);
-
-  if (!profileConfig || !resourceConfig) {
-    return <Alert severity="error">Profile configuration not found.</Alert>;
-  }
-
-  const editableConfig = React.useMemo(() => {
-    const newFields = { ...resourceConfig.fields };
-    const extraFields = profileConfig.extraFields || [];
-
-    Object.keys(newFields).forEach(key => {
-      newFields[key] = {
-        ...newFields[key],
-        readOnly: !extraFields.includes(key),
-      };
-    });
-
-    return {
-      ...resourceConfig,
-      fields: newFields,
-    };
-  }, [resourceConfig, profileConfig.extraFields]);
-
-  const { useMe, useUpdateMe } = useResource(resourceConfig, { fieldComponents: defaultFieldComponents });
-  const { data: profile, isLoading, error } = useMe();
-  const updateMutation = useUpdateMe();
-
-  const handleSave = async (formData: any) => {
-    try {
-      const extraFields = profileConfig.extraFields || [];
-      const dataToSave = Object.keys(formData)
-        .filter(key => extraFields.includes(key))
-        .reduce((obj: any, key) => {
-          obj[key] = formData[key];
-          return obj;
-        }, {});
-
-      await updateMutation.mutateAsync(dataToSave);
-    } catch (err) {
-      console.error('Profile update failed:', err);
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  if (error) {
-    return <Alert severity="error">Failed to load profile data.</Alert>;
-  }
-
-  return (
-    <Box sx={{ maxWidth: 800, mx: 'auto', mt: 4 }}>
-      <Typography variant="h4" gutterBottom>
-        My Profile
-      </Typography>
-      <Paper sx={{ p: 4, mt: 2 }}>
-        <GenericForm
-          config={editableConfig}
-          initialData={profile}
-          onSave={handleSave}
-          onCancel={() => window.history.back()}
-          loading={updateMutation.isPending}
-          fieldComponents={defaultFieldComponents}
-        />
-      </Paper>
-    </Box>
-  );
-}

react-openapi/components/ResourceView.tsx

@@ -1,213 +0,0 @@
-import * as React from 'react';
-import { Box, Paper, CircularProgress } from '@mui/material';
-import { ResourceConfig } from '../types/config';
-import type { ResourceField } from '../types/config';
-import { FieldComponents } from '../types/overrides';
-import { useResource } from '../hooks/useResource';
-import { resolveTemplate } from '../utils/options';
-import EnhancedTable from './EnhancedTable';
-import FilterBar from './FilterBar';
-import { useParams, useLocation, useNavigate } from 'react-router-dom';
-
-interface ResourceViewProps {
-  config: ResourceConfig;
-  onNavigateToResource?: (resourceName: string, id: string) => void;
-  fieldComponents: FieldComponents;
-}
-
-import { GridPaginationModel } from '@mui/x-data-grid';
-
-function getDisplayString(item: any, field: ResourceField): string {
-  if (item == null || typeof item !== 'object') return String(item ?? '');
-  if (field.enumOption?.value) return resolveTemplate(field.enumOption.value, item);
-  if (field.displayFormat) return resolveTemplate(field.displayFormat, item);
-  throw new Error('cannot get display string')
-}
-
-function applyClientFilters(
-  data: any[],
-  filters: Record<string, any>,
-  fields: Record<string, ResourceField>
-): any[] {
-  const entries = Object.entries(filters).filter(([_, v]) => {
-    if (v == null || v === "" || (Array.isArray(v) && v.length === 0)) return false;
-    if (typeof v === "object" && !Array.isArray(v) && Object.values(v).every((x) => x == null || x === "")) return false;
-    return true;
-  });
-
-  if (entries.length === 0) return data;
-
-  return data.filter((item) =>
-    entries.every(([fieldName, filterValue]) => {
-      const field = fields[fieldName];
-      if (!field) return true;
-
-      const itemValue = item[fieldName];
-
-      if (typeof filterValue === "object" && !Array.isArray(filterValue)) {
-        if (field.type === "number") {
-          if (filterValue.min != null && filterValue.min !== "" && Number(itemValue) < Number(filterValue.min)) return false;
-          if (filterValue.max != null && filterValue.max !== "" && Number(itemValue) > Number(filterValue.max)) return false;
-          return true;
-        }
-        if (field.type === "datetime" || field.type === "date") {
-          const itemTime = new Date(itemValue).getTime();
-          if (filterValue.start && new Date(filterValue.start).getTime() > itemTime) return false;
-          if (filterValue.end && new Date(filterValue.end).getTime() < itemTime) return false;
-          return true;
-        }
-        return true;
-      }
-
-      if (Array.isArray(filterValue)) {
-        if (field.type === "array" && Array.isArray(itemValue)) {
-          return itemValue.some((el: any) =>
-            filterValue.includes(getDisplayString(el, field))
-          );
-        }
-        if (itemValue && typeof itemValue === "object") {
-          return filterValue.includes(getDisplayString(itemValue, field));
-        }
-        return filterValue.includes(String(itemValue));
-      }
-
-      if (!filterValue) return true;
-
-      if (field.type === "boolean") {
-        return String(itemValue) === filterValue;
-      }
-
-      if (field.type === "array" && Array.isArray(itemValue)) {
-        return itemValue.some((el: any) =>
-          getDisplayString(el, field) === String(filterValue)
-        );
-      }
-
-      if (itemValue && typeof itemValue === "object") {
-        return getDisplayString(itemValue, field) === String(filterValue);
-      }
-
-      return String(itemValue) === String(filterValue);
-    })
-  );
-}
-
-export default function ResourceView({ config, onNavigateToResource, fieldComponents }: ResourceViewProps) {
-  const { id } = useParams();
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const isCreate = location.pathname.endsWith('/create');
-  const isEdit = location.pathname.includes('/edit/');
-  const isView = !!id && !isEdit;
-  const isList = !id && !isCreate;
-
-  const isServer = config.filterOptions?.mode !== "client";
-
-  const [paginationModel, setPaginationModel] = React.useState<GridPaginationModel>({
-    page: 0,
-    pageSize: 10,
-  });
-
-  const [appliedFilters, setAppliedFilters] = React.useState<Record<string, any>>({});
-
-  const { useList, useRead, useCreate, useUpdate, useDelete, components } = useResource(config, { fieldComponents });
-
-  const queryParams = React.useMemo(() => {
-    if (!isServer) return { limit: 10000 };
-    return {
-      skip: paginationModel.page * paginationModel.pageSize,
-      limit: paginationModel.pageSize,
-    };
-  }, [isServer, paginationModel]);
-
-  const listQuery = useList(queryParams);
-  const itemQuery = useRead(id || "");
-
-  const rawData = listQuery.data?.data || [];
-  const totalCount = listQuery.data?.total;
-
-  const filteredData = React.useMemo(
-    () => (isServer ? rawData : applyClientFilters(rawData, appliedFilters, config.fields)),
-    [isServer, rawData, appliedFilters, config.fields]
-  );
-
-  const createMutation = useCreate();
-  const updateMutation = useUpdate();
-  const deleteMutation = useDelete();
-
-  const handleEdit = (item: any) => {
-    navigate(`/admin/${config.name}/edit/${item[config.primaryKey]}`);
-  };
-
-  const handleCreate = () => {
-    navigate(`/admin/${config.name}/create`);
-  };
-
-  const handleSave = async (formData: any) => {
-    try {
-      if (isEdit) {
-        await updateMutation.mutateAsync({ id: id!, data: formData });
-      } else {
-        await createMutation.mutateAsync(formData);
-      }
-      navigate(`/admin/${config.name}`);
-    } catch (err) {
-      console.error('Save failed:', err);
-    }
-  };
-
-  const handleDelete = async (itemId: string) => {
-    if (window.confirm('Are you sure you want to delete this item?')) {
-      await deleteMutation.mutateAsync(itemId);
-    }
-  };
-
-  if (isList && listQuery.isLoading) return <CircularProgress />;
-  if ((isEdit || isView) && itemQuery.isLoading) return <CircularProgress />;
-
-  return (
-    <Box>
-      {isList ? (
-        <Box>
-          {!isServer && config.filterOptions?.fields && config.filterOptions.fields.length > 0 && (
-            <FilterBar
-              fields={config.fields}
-              filterableFields={config.filterOptions.fields}
-              mode={config.filterOptions?.mode || "server"}
-              data={rawData}
-              appliedValues={appliedFilters}
-              onApply={setAppliedFilters}
-              onClear={() => setAppliedFilters({})}
-              fieldComponents={components}
-            />
-          )}
-          <EnhancedTable
-            config={config}
-            data={filteredData}
-            total={isServer ? totalCount : filteredData.length}
-            paginationModel={isServer ? paginationModel : undefined}
-            onPaginationModelChange={isServer ? setPaginationModel : undefined}
-            loading={listQuery.isFetching}
-            onEdit={handleEdit}
-            onDelete={handleDelete}
-            onCreate={handleCreate}
-            onNavigateToResource={(res, id) => navigate(`/admin/${res}/${id}`)}
-          />
-        </Box>
-      ) : (
-        <Paper sx={{ p: 4 }}>
-          {components && <components.GenericForm
-            config={config}
-            initialData={isCreate ? null : itemQuery.data}
-            onSave={handleSave}
-            onCancel={() => navigate(`/admin/${config.name}`)}
-            loading={createMutation.isPending || updateMutation.isPending}
-            readOnly={isView}
-            onEditClick={() => navigate(`/admin/${config.name}/edit/${id}`)}
-          />}
-        </Paper>
-      )}
-    </Box>
-  );
-}

react-openapi/components/fields/BooleanField.tsx

@@ -1,17 +0,0 @@
-import { FormControlLabel, Checkbox } from '@mui/material';
-import { FieldComponentProps } from '../../types/overrides';
-
-export default function BooleanField({ field, value, onChange, disabled }: FieldComponentProps) {
-  return (
-    <FormControlLabel
-      control={
-        <Checkbox
-          checked={!!value}
-          onChange={(e) => onChange(e.target.checked)}
-          disabled={disabled}
-        />
-      }
-      label={field.label}
-    />
-  );
-}

react-openapi/components/fields/DateField.tsx

@@ -1,18 +0,0 @@
-import { TextField as MuiTextField } from '@mui/material';
-import { FieldComponentProps } from '../../types/overrides';
-
-export default function DateField({ field, value, onChange, disabled }: FieldComponentProps) {
-  const isDatetime = field.type === 'datetime';
-  return (
-    <MuiTextField
-      fullWidth
-      label={field.label}
-      type={isDatetime ? "datetime-local" : "date"}
-      InputLabelProps={{ shrink: true }}
-      value={value ? new Date(value).toISOString().slice(0, isDatetime ? 16 : 10) : ''}
-      onChange={(e) => onChange(e.target.value)}
-      disabled={disabled}
-      required={field.required}
-    />
-  );
-}

react-openapi/components/fields/DateRangeField.tsx

@@ -1,30 +0,0 @@
-import { Box, TextField as MuiTextField } from '@mui/material';
-import { FieldComponentProps } from '../../types/overrides';
-
-export default function DateRangeField({ value, onChange, disabled }: FieldComponentProps) {
-  const rangeVal = (value as { start?: string; end?: string }) || {};
-  return (
-    <Box sx={{ display: "flex", gap: 1 }}>
-      <MuiTextField
-        type="date"
-        placeholder="From"
-        size="small"
-        value={rangeVal.start ?? ""}
-        onChange={(e) => onChange({ ...rangeVal, start: e.target.value || undefined })}
-        InputLabelProps={{ shrink: true }}
-        sx={{ width: 170 }}
-        disabled={disabled}
-      />
-      <MuiTextField
-        type="date"
-        placeholder="To"
-        size="small"
-        value={rangeVal.end ?? ""}
-        onChange={(e) => onChange({ ...rangeVal, end: e.target.value || undefined })}
-        InputLabelProps={{ shrink: true }}
-        sx={{ width: 170 }}
-        disabled={disabled}
-      />
-    </Box>
-  );
-}

react-openapi/components/fields/DefaultFieldComponents.ts

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { FieldComponents, FieldComponentProps } from '../../types/overrides';
-import TextFieldEntry from './TextField';
-import NumberField from './NumberField';
-import BooleanField from './BooleanField';
-import DateField from './DateField';
-import EnumField from './EnumField';
-import RelationField from './RelationField';
-import ImageUploadField from './ImageUploadField';
-import FallbackField from './FallbackField';
-import DateRangeField from './DateRangeField';
-import NumberRangeField from './NumberRangeField';
-
-const WrappedImageUploadField = (props: FieldComponentProps) =>
-  React.createElement(ImageUploadField, {
-    label: props.field.label,
-    value: props.value || '',
-    onUpload: async (file: File) => {
-      const url = await props.uploadFile?.(file);
-      if (url) props.onChange(url);
-    },
-    uploading: props.uploading,
-    baseUrl: props.baseUrl || '',
-    disabled: props.disabled,
-  });
-
-export const defaultFieldComponents: FieldComponents = {
-  string: TextFieldEntry,
-  markdown: TextFieldEntry,
-  number: NumberField,
-  boolean: BooleanField,
-  date: DateField,
-  datetime: DateField,
-  enum: EnumField,
-  image: WrappedImageUploadField,
-  relation: RelationField,
-  default: FallbackField,
-  dateRange: DateRangeField,
-  numberRange: NumberRangeField,
-};

react-openapi/components/fields/EnumField.tsx

@@ -1,24 +0,0 @@
-import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
-import { getFieldOptions } from '../../utils/options';
-import { FieldComponentProps } from '../../types/overrides';
-
-export default function EnumField({ field, value, onChange, disabled }: FieldComponentProps) {
-  const options = getFieldOptions(field);
-  return (
-    <FormControl fullWidth>
-      <InputLabel>{field.label}</InputLabel>
-      <Select
-        value={value || ''}
-        label={field.label}
-        onChange={(e) => onChange(e.target.value)}
-        disabled={disabled}
-      >
-        {options.map((opt) => (
-          <MenuItem key={opt.key} value={opt.key}>
-            {opt.value}
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
-  );
-}

react-openapi/components/fields/FallbackField.tsx

@@ -1,13 +0,0 @@
-import { TextField } from '@mui/material';
-import { FieldComponentProps } from '../../types/overrides';
-
-export default function FallbackField({ field, value }: FieldComponentProps) {
-  return (
-    <TextField
-      fullWidth
-      label={field.label}
-      value={typeof value === 'object' ? JSON.stringify(value) : value || ''}
-      disabled
-    />
-  );
-}

react-openapi/components/fields/FormField.tsx

@@ -1,85 +0,0 @@
-import * as React from 'react';
-import { ResourceField } from '../../types/config';
-import { FieldComponentProps, FieldComponents } from '../../types/overrides';
-import ObjectField from './ObjectField';
-
-export interface FormFieldProps {
-  name: string;
-  field: ResourceField;
-  value: any;
-  onChange: (val: any) => void;
-  disabled?: boolean;
-  uploadFile?: (file: File) => Promise<string | null>;
-  uploading?: boolean;
-  baseUrl?: string;
-  relationDataMap?: Record<string, any[]>;
-  components: FieldComponents;
-}
-
-export default function FormField({
-  name,
-  field,
-  value,
-  onChange,
-  disabled,
-  uploadFile,
-  uploading,
-  baseUrl,
-  relationDataMap = {},
-  components,
-}: FormFieldProps) {
-  const fieldProps: FieldComponentProps = {
-    name,
-    field,
-    value,
-    onChange,
-    disabled,
-    baseUrl,
-    relationDataMap,
-    uploadFile,
-    uploading,
-  };
-
-  const childComponents = components;
-
-  // 1. Object (recursive) - requires parent FormField for recursion
-  if (field.type === 'object' && field.schema && !field.relation) {
-    const renderChild = (childProps: FieldComponentProps) => (
-      <FormField
-        name={childProps.name}
-        field={childProps.field}
-        value={childProps.value}
-        onChange={childProps.onChange}
-        disabled={childProps.disabled}
-        uploadFile={childProps.uploadFile}
-        uploading={childProps.uploading}
-        baseUrl={childProps.baseUrl}
-        relationDataMap={childProps.relationDataMap}
-        components={components}
-      />
-    );
-    return <ObjectField {...fieldProps} renderField={renderChild} />;
-  }
-
-  // 2. Image
-  if (field.type === 'image') {
-    const ImageField = components.image;
-    if (!ImageField) return null;
-    return <ImageField {...fieldProps} />;
-  }
-
-  // 3. Relation
-  if (field.relation && relationDataMap[field.relation]) {
-    const RelationFieldComp = components.relation;
-    if (!RelationFieldComp) return null;
-    return <RelationFieldComp {...fieldProps} />;
-  }
-
-  // 4. Lookup by field type
-  const Component = components[field.type] || components.default;
-  if (Component) {
-    return <Component {...fieldProps} />;
-  }
-
-  return null;
-}

react-openapi/components/fields/ImageUploadField.tsx

@@ -1,60 +0,0 @@
-import { Box, Button, Avatar, CircularProgress, Typography } from "@mui/material";
-
-interface ImageUploadFieldProps {
-  label?: string;
-  value: string;
-  uploading?: boolean;
-  onUpload: (file: File) => void;
-  size?: number;
-  baseUrl: string;
-  disabled?: boolean;
-}
-
-export default function ImageUploadField({
-  label = "Upload Image",
-  value,
-  uploading = false,
-  onUpload,
-  size = 64,
-  baseUrl,
-  disabled = false,
-}: ImageUploadFieldProps) {
-
-  const imgSrc = value
-    ? baseUrl.replace(/\/+$/, "") +
-      "/" +
-      value.replace(/^\/+/, "")
-    : "";
-
-  return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 1, mb: 3 }}>
-      <Typography variant="caption" color="text.secondary">{label}</Typography>
-      <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
-        <Avatar
-          src={imgSrc}
-          sx={{ width: size, height: size, borderRadius: 2 }}
-        />
-
-        {!disabled && (
-          <Button
-            variant="outlined"
-            component="label"
-            disabled={uploading}
-            startIcon={uploading && <CircularProgress size={16} />}
-          >
-            {uploading ? "Uploading..." : "Choose File"}
-            <input
-              type="file"
-              accept="image/*"
-              hidden
-              onChange={(e) => {
-                const file = e.target.files?.[0];
-                if (file) onUpload(file);
-              }}
-            />
-          </Button>
-        )}
-      </Box>
-    </Box>
-  );
-}

react-openapi/components/fields/NumberField.tsx

@@ -1,16 +0,0 @@
-import { TextField as MuiTextField } from '@mui/material';
-import { FieldComponentProps } from '../../types/overrides';
-
-export default function NumberField({ field, value, onChange, disabled }: FieldComponentProps) {
-  return (
-    <MuiTextField
-      fullWidth
-      label={field.label}
-      type="number"
-      value={value === undefined || value === null ? '' : value}
-      onChange={(e) => onChange(e.target.value === '' ? '' : Number(e.target.value))}
-      disabled={disabled}
-      required={field.required}
-    />
-  );
-}

react-openapi/components/fields/NumberRangeField.tsx

@@ -1,28 +0,0 @@
-import { Box, TextField as MuiTextField } from '@mui/material';
-import { FieldComponentProps } from '../../types/overrides';
-
-export default function NumberRangeField({ value, onChange, disabled }: FieldComponentProps) {
-  const rangeVal = (value as { min?: string; max?: string }) || {};
-  return (
-    <Box sx={{ display: "flex", gap: 1 }}>
-      <MuiTextField
-        type="number"
-        placeholder="Min"
-        size="small"
-        value={rangeVal.min ?? ""}
-        onChange={(e) => onChange({ ...rangeVal, min: e.target.value || undefined })}
-        sx={{ width: 100 }}
-        disabled={disabled}
-      />
-      <MuiTextField
-        type="number"
-        placeholder="Max"
-        size="small"
-        value={rangeVal.max ?? ""}
-        onChange={(e) => onChange({ ...rangeVal, max: e.target.value || undefined })}
-        sx={{ width: 100 }}
-        disabled={disabled}
-      />
-    </Box>
-  );
-}

react-openapi/components/fields/ObjectField.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { Box, Typography } from '@mui/material';
-import { FieldComponentProps } from '../../types/overrides';
-
-export interface ObjectFieldProps extends FieldComponentProps {
-  renderField: (props: FieldComponentProps) => React.ReactNode;
-}
-
-export default function ObjectField({ name, field, value, onChange, disabled, baseUrl, uploadFile, uploading, relationDataMap, renderField }: ObjectFieldProps) {
-  if (!field.schema) return null;
-
-  return (
-    <Box sx={{ ml: 2, mt: 2, p: 2, borderLeft: '2px solid #e0e0e0' }}>
-      <Typography variant="subtitle2" color="primary" gutterBottom>
-        {field.label}
-      </Typography>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-        {Object.entries(field.schema).map(([subKey, subField]) =>
-          React.cloneElement(
-            renderField({
-              name: `${name}.${subKey}`,
-              field: subField,
-              value: value?.[subKey],
-              onChange: (newVal: any) => {
-                const updated = { ...(value || {}), [subKey]: newVal };
-                onChange(updated);
-              },
-              disabled,
-              baseUrl,
-              uploadFile,
-              uploading,
-              relationDataMap,
-            }) as React.ReactElement,
-            { key: subKey }
-          )
-        )}
-
-
-      </Box>
-    </Box>
-  );
-}

react-openapi/components/fields/RelationField.tsx

@@ -1,50 +0,0 @@
-import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
-import { getFieldOptions } from '../../utils/options';
-import { FieldComponentProps } from '../../types/overrides';
-
-export default function RelationField({ field, value, onChange, disabled, relationDataMap = {} }: FieldComponentProps) {
-  if (!field.relation || !relationDataMap[field.relation]) {
-    return null;
-  }
-
-  const relationData = relationDataMap[field.relation];
-  const isArrayRelation = field.type === 'array';
-  const options = getFieldOptions(field, relationData);
-  const keyField = field.enumOption?.key ?? 'id';
-
-  const normalizedValue = (() => {
-    if (isArrayRelation && Array.isArray(value)) {
-      return value.map((v: any) => (v != null && typeof v === 'object' ? String(v[keyField] ?? '') : String(v)));
-    }
-    if (value != null && typeof value === 'object') {
-      return String(value[keyField] ?? '');
-    }
-    return value ?? (isArrayRelation ? [] : "");
-  })();
-
-  return (
-    <FormControl fullWidth>
-      <InputLabel shrink>{field.label}</InputLabel>
-      <Select
-        multiple={isArrayRelation}
-        value={normalizedValue}
-        label={field.label}
-        displayEmpty
-        onChange={(e) => onChange(e.target.value)}
-        disabled={disabled}
-        renderValue={(selected: any) => {
-          if (isArrayRelation) {
-            return (selected as string[]).map(k => options.find(o => o.key === k)?.value ?? k).join(', ');
-          }
-          return options.find(o => o.key === selected)?.value ?? selected;
-        }}
-      >
-        {options.map((opt) => (
-          <MenuItem key={opt.key} value={opt.key}>
-            {opt.value}
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
-  );
-}

react-openapi/components/fields/TextField.tsx

@@ -1,18 +0,0 @@
-import { TextField as MuiTextField } from '@mui/material';
-import { FieldComponentProps } from '../../types/overrides';
-
-export default function TextField({ field, value, onChange, disabled }: FieldComponentProps) {
-  const isMarkdown = field.type === 'markdown';
-  return (
-    <MuiTextField
-      fullWidth
-      label={field.label}
-      value={value || ''}
-      multiline={isMarkdown}
-      rows={isMarkdown ? 4 : 1}
-      onChange={(e) => onChange(e.target.value)}
-      disabled={disabled}
-      required={field.required}
-    />
-  );
-}

react-openapi/components/fields/index.ts

@@ -1,14 +0,0 @@
-export { default as FormField } from './FormField';
-export { default as ImageUploadField } from './ImageUploadField';
-export { default as TextField } from './TextField';
-export { default as NumberField } from './NumberField';
-export { default as BooleanField } from './BooleanField';
-export { default as DateField } from './DateField';
-export { default as EnumField } from './EnumField';
-export { default as RelationField } from './RelationField';
-export { default as ObjectField } from './ObjectField';
-export { default as FallbackField } from './FallbackField';
-export { default as DateRangeField } from './DateRangeField';
-export { default as NumberRangeField } from './NumberRangeField';
-export { defaultFieldComponents } from './DefaultFieldComponents';
-export type { ObjectFieldProps } from './ObjectField';

react-openapi/config.ts

@@ -1,21 +0,0 @@
-import { AppConfig } from "./types/config";
-import { loadConfigFromOpenApi } from "./utils/openapi_loader";
-
-export async function getAppConfig(
-  resourceOverrides: Record<string, any> = {},
-  profileConfig: any = {}
-): Promise<AppConfig> {
-  // @ts-ignore
-  const baseUrl = import.meta.env.VITE_API_BASE_URL
-
-  // @ts-ignore
-  const authBaseUrl = import.meta.env.VITE_AUTH_BASE_URL
-  const config = await loadConfigFromOpenApi(baseUrl, resourceOverrides, profileConfig);
-
-  // You can still apply overrides here
-  return {
-    ...config,
-    authBaseUrl: authBaseUrl,
-    baseUrl: baseUrl,
-  };
-}

react-openapi/hooks/useResource.ts

@@ -1,184 +0,0 @@
-import { useQuery, useMutation, useQueryClient, keepPreviousData } from "@tanstack/react-query";
-import * as React from "react";
-import { api } from "../api/client";
-import { ResourceConfig } from "../types/config";
-import { ConfigContext } from "../providers/ConfigContext";
-import { FieldComponents, FieldComponentProps } from "../types/overrides";
-import { defaultFieldComponents } from "../components/fields/DefaultFieldComponents";
-import FormField from "../components/fields/FormField";
-import GenericForm from "../components/GenericForm";
-
-function wrapFormField(merged: FieldComponents) {
-  return (props: Omit<React.ComponentProps<typeof FormField>, 'components'>) =>
-    React.createElement(FormField, { ...props, components: merged });
-}
-
-function wrapGenericForm(merged: FieldComponents) {
-  return (props: Omit<React.ComponentProps<typeof GenericForm>, 'fieldComponents'>) =>
-    React.createElement(GenericForm, { ...props, fieldComponents: merged });
-}
-
-export function useResource<T = any>(config: ResourceConfig | undefined, options?: { fieldComponents: FieldComponents }) {
-  const queryClient = useQueryClient();
-
-  const { name = '', endpoint = '', primaryKey = 'id' } = config || {};
-
-  const mergedComponents = React.useMemo(
-    () => options?.fieldComponents ? ({ ...defaultFieldComponents, ...options.fieldComponents }) : undefined,
-    [options?.fieldComponents],
-  );
-
-  // --- READ ALL ---
-  const useList = (params?: any) =>
-    useQuery({
-      queryKey: [name, "list", params],
-      queryFn: async () => {
-        if (!endpoint) return { data: [], total: 0 };
-        const res = await api.get<T[]>(endpoint, { params });
-        const total = res.headers ? parseInt(res.headers['x-total-count'] || res.headers['X-Total-Count']) : undefined;
-        return {
-            data: res.data,
-            total: isNaN(total as any) ? undefined : total
-        };
-      },
-      enabled: !!endpoint,
-      placeholderData: keepPreviousData,
-    });
-
-  // --- READ ONE ---
-  const useRead = (id: string, params?: any | null) =>
-    useQuery({
-      queryKey: [name, "detail", id, params],
-      queryFn: async () => {
-        if (!id || !endpoint) return null;
-        const res = await api.get<T>(`${endpoint}/${id}`, params ? { params } : undefined);
-        return res.data;
-      },
-      enabled: !!id && !!endpoint,
-    });
-
-  // --- CREATE ---
-  const useCreate = () =>
-    useMutation({
-      mutationFn: async (data: Partial<T>) => {
-        if (!endpoint) throw new Error("Endpoint not defined");
-        const res = await api.post<T>(endpoint, data);
-        return res.data;
-      },
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: [name, "list"] });
-      },
-    });
-
-  // --- UPDATE ---
-  const useUpdate = () =>
-    useMutation({
-      mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
-        if (!endpoint) throw new Error("Endpoint not defined");
-        const res = await api.put<T>(`${endpoint}/${id}`, data);
-        return res.data;
-      },
-      onSuccess: (updatedItem: any) => {
-        const id = updatedItem[primaryKey];
-        queryClient.invalidateQueries({ queryKey: [name, "list"] });
-        queryClient.invalidateQueries({ queryKey: [name, "detail", id] });
-      },
-    });
-
-  // --- PATCH ---
-  const usePatch = () =>
-    useMutation({
-      mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
-        if (!endpoint) throw new Error("Endpoint not defined");
-        const res = await api.patch<T>(`${endpoint}/${id}`, data);
-        return res.data;
-      },
-      onSuccess: (updatedItem: any) => {
-        const listId = updatedItem[primaryKey];
-        queryClient.invalidateQueries({ queryKey: [name, "list"] });
-        queryClient.invalidateQueries({ queryKey: [name, "detail", listId] });
-      },
-    });
-
-  // --- DELETE ---
-  const useDelete = () =>
-    useMutation({
-      mutationFn: async (id: string) => {
-        if (!endpoint) throw new Error("Endpoint not defined");
-        await api.delete(`${endpoint}/${id}`);
-        return id;
-      },
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: [name, "list"] });
-      },
-    });
-
-  // --- HELPERS FOR useQueries ---
-  const getListQueryOptions = (params?: any) => ({
-    queryKey: [name, "list", params],
-    queryFn: async () => {
-      if (!endpoint) return { data: [], total: 0 };
-      const res = await api.get<T[]>(endpoint, { params });
-      const total = res.headers ? parseInt(res.headers['x-total-count'] || res.headers['X-Total-Count']) : undefined;
-      return {
-          data: res.data,
-          total: isNaN(total as any) ? undefined : total
-      };
-    },
-    enabled: !!endpoint,
-  });
-
-  // --- READ ME ---
-  const useMe = () =>
-    useQuery({
-      queryKey: [name, "me"],
-      queryFn: async () => {
-        if (!endpoint) return null;
-        const res = await api.get<T>(`${endpoint}/me`);
-        return res.data;
-      },
-      enabled: !!endpoint,
-    });
-
-  // --- UPDATE ME ---
-  const useUpdateMe = () =>
-    useMutation({
-      mutationFn: async (data: Partial<T>) => {
-        if (!endpoint) throw new Error("Endpoint not defined");
-        const res = await api.put<T>(`${endpoint}/me`, data);
-        return res.data;
-      },
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: [name, "me"] });
-        queryClient.invalidateQueries({ queryKey: [name, "list"] });
-      },
-    });
-
-  const components = React.useMemo(() => {
-    if (!mergedComponents) return undefined;
-    return {
-      ...mergedComponents,
-      FormField: wrapFormField(mergedComponents),
-      GenericForm: wrapGenericForm(mergedComponents),
-    };
-  }, [mergedComponents]);
-
-  return {
-    useList,
-    useRead,
-    useMe,
-    useCreate,
-    useUpdate,
-    usePatch,
-    useUpdateMe,
-    useDelete,
-    getListQueryOptions,
-    components,
-  };
-}
-
-export function useResourceByName<T = any>(name: string, options?: { fieldComponents: FieldComponents }) {
-  const config = React.useContext(ConfigContext);
-  const resourceConfig = config?.resources.find((r) => r.name === name);
-  return useResource<T>(resourceConfig, options);
-}

react-openapi/index.ts

@@ -1,13 +1,11 @@
-export { default as Admin } from "./Admin";
+export { AppProvider } from "./src/context/AppProvider";
-export { api, auth, initializeApiClients } from "./api/client";
+export { Admin } from "./src/components/Admin";
-export { getAppConfig } from "./config";
+export { useAppContext } from "./src/context/AppContext";
-export type { AppConfig, ResourceConfig, ResourceField, ResourceMode } from "./types/config";
+export { useResource } from "./src/context/useResource";
-export type { FieldComponents, FieldComponentProps, FieldComponent, FieldOverride, ResourceOverride, EnhancedTableComponents, FilterBarComponents, CellRendererProps, CellRenderer } from "./types/overrides";
+export { ListCellRenderer, DetailFieldRenderer, applyDisplayFormat } from "./src/components/fields";
-export { AppProvider } from "./providers/AppProvider";
+export { FormFieldRenderer } from "./src/components/fields/FormFieldRenderer";
-export { ConfigContext, useConfig } from "./providers/ConfigContext";
+export { SseStreamView } from "./src/components/SseStreamView";
-export { useResource, useResourceByName } from "./hooks/useResource";
+export { SseConnectionStatus } from "./src/components/SseConnectionStatus";
-export { default as FilterBar, FilterAutocomplete } from "./components/FilterBar";
+export { getApi } from "./src/hooks/useApi";
-export { default as EnhancedTable } from "./components/EnhancedTable";
+export type { FilterComponentProps } from "./src/context/useResource";
-export { default as GenericForm } from "./components/GenericForm";
+export type { SpecConfiguration, ResourceConfig, FieldConfig, FKFieldConfig, ResourceRelationship } from "./src/types";
-export { default as ResourceView } from "./components/ResourceView";
-export { defaultFieldComponents, FormField, TextField, NumberField, BooleanField, DateField, EnumField, RelationField, ObjectField, ImageUploadField, FallbackField } from "./components/fields";

react-openapi/providers/AppProvider.tsx

@@ -1,70 +0,0 @@
-import * as React from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ConfigContext } from "./ConfigContext";
-import { getAppConfig } from "../config";
-import { initializeApiClients } from "../api/client";
-import { AppConfig } from "../types/config";
-import { Box, CircularProgress } from "@mui/material";
-
-const defaultQueryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 5 * 60 * 1000,
-      retry: 1,
-      refetchOnWindowFocus: false,
-    },
-  },
-});
-
-interface AppProviderProps {
-  children: React.ReactNode;
-  resourceOverrides?: Record<string, any>;
-  profileConfig?: any;
-  queryClient?: QueryClient;
-}
-
-export function AppProvider({
-  children,
-  resourceOverrides = {},
-  profileConfig = {},
-  queryClient = defaultQueryClient,
-}: AppProviderProps) {
-  const [config, setConfig] = React.useState<AppConfig | null>(null);
-  const [loading, setLoading] = React.useState(true);
-
-  React.useEffect(() => {
-    getAppConfig(resourceOverrides, profileConfig)
-      .then((cfg) => {
-        initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
-        setConfig(cfg);
-        setLoading(false);
-      })
-      .catch((err) => {
-        console.error("Failed to load OpenAPI configuration:", err);
-        setLoading(false);
-      });
-  }, [resourceOverrides, profileConfig]);
-
-  if (loading) {
-    return (
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "100vh",
-        }}
-      >
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <ConfigContext.Provider value={config}>
-        {children}
-      </ConfigContext.Provider>
-    </QueryClientProvider>
-  );
-}

react-openapi/providers/ConfigContext.tsx

@@ -1,12 +0,0 @@
-import * as React from "react";
-import { AppConfig } from "../types/config";
-
-export const ConfigContext = React.createContext<AppConfig | null>(null);
-
-export function useConfig() {
-  const context = React.useContext(ConfigContext);
-  if (context === undefined) {
-    throw new Error("useConfig must be used within a ConfigProvider");
-  }
-  return context;
-}

react-openapi/providers/UploadProvider.tsx

@@ -1,52 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-import { api } from "../api/client";
-
-export interface UploadContextModel {
-  uploadFile: (file: File) => Promise<string | null>;
-  uploading: boolean;
-  error: string | null;
-}
-
-const UploadContext = createContext<UploadContextModel | undefined>(undefined);
-
-export const UploadProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [uploading, setUploading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const uploadFile = async (file: File): Promise<string | null> => {
-    setUploading(true);
-    setError(null);
-
-    try {
-      const arrayBuffer = await file.arrayBuffer();
-      const binary = new Uint8Array(arrayBuffer);
-
-      const res = await api.post("/uploads", binary, {
-        headers: {
-          "Content-Type": file.type,
-          "Content-Disposition": `attachment; filename="${file.name}"`,
-        },
-      });
-
-      return res.data.url as string;
-    } catch (err: any) {
-      console.error("File upload failed:", err);
-      setError(err.response?.data?.detail || "Failed to upload file");
-      return null;
-    } finally {
-      setUploading(false);
-    }
-  };
-
-  return (
-    <UploadContext.Provider value={{ uploadFile, uploading, error }}>
-      {children}
-    </UploadContext.Provider>
-  );
-};
-
-export const useUpload = (): UploadContextModel => {
-  const ctx = useContext(UploadContext);
-  if (!ctx) throw new Error("useUpload must be used within UploadProvider");
-  return ctx;
-};

react-openapi/src/components/Admin.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Routes, Route, Navigate } from "react-router-dom";
+import { Box, CircularProgress } from "@mui/material";
+import { useAppContext } from "../context/AppContext";
+import { Layout } from "./Layout";
+import { ResourceList } from "./ResourceList";
+import { ResourceForm } from "./ResourceForm";
+import { ResourceDetail } from "./ResourceDetail";
+import { ValidationAlert } from "./ValidationAlert";
+
+interface AdminProps {
+  basePath: string;
+}
+
+export function Admin({ basePath }: AdminProps) {
+  const { resources, loading, errors, warnings } = useAppContext();
+
+  if (loading) {
+    return (
+      <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "60vh" }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (errors.length > 0) {
+    return <ValidationAlert errors={errors} warnings={warnings} />;
+  }
+
+  if (resources.length === 0) {
+    return (
+      <Box sx={{ p: 4, textAlign: "center" }}>
+        No resources found in the OpenAPI spec with x-resource defined.
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      {warnings.length > 0 && <ValidationAlert errors={[]} warnings={warnings} />}
+      <Layout resources={resources} basePath={basePath}>
+        <Routes>
+          <Route index element={<Navigate to={`${basePath}/${resources[0].name}`} replace />} />
+          {resources.map((r) => (
+            <React.Fragment key={r.name}>
+              <Route path={r.name} element={<ResourceList resource={r} basePath={basePath} />} />
+              {!r.streaming && (
+                <>
+                  <Route path={`${r.name}/new`} element={<ResourceForm resource={r} basePath={basePath} mode="create" />} />
+                  <Route path={`${r.name}/:id`} element={<ResourceDetail resource={r} basePath={basePath} />} />
+                  <Route path={`${r.name}/:id/edit`} element={<ResourceForm resource={r} basePath={basePath} mode="edit" />} />
+                </>
+              )}
+            </React.Fragment>
+          ))}
+        </Routes>
+      </Layout>
+    </>
+  );
+}

react-openapi/src/components/FilterBar.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { Box, Button } from "@mui/material";
+import { useResource, FilterComponentProps } from "../context/useResource";
+
+interface FilterBarProps {
+  resourceName: string;
+  filters: Record<string, string>;
+  onFilterChange: (fieldName: string, value: string) => void;
+  onClear: () => void;
+  data?: any[];
+}
+
+export function FilterBar({ resourceName, filters, onFilterChange, onClear, data }: FilterBarProps) {
+  const { resource, components } = useResource(resourceName);
+  const filterable = resource.fields.filter((f) => f.filterable);
+  const hasActiveFilters = Object.values(filters).some((v) => v !== "");
+
+  if (filterable.length === 0) return null;
+
+  return (
+    <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mb: 2, alignItems: "flex-start" }}>
+      {filterable.map((field) => {
+        const Component = components[field.name] as React.FC<FilterComponentProps>;
+        const isRange = field.type === "integer" || field.type === "number" || field.format === "date" || field.format === "date-time";
+
+        if (isRange) {
+          return (
+            <Box key={field.name} sx={{ minWidth: 260, display: "flex", gap: 1 }}>
+              <Box sx={{ flex: 1, minWidth: 120 }}>
+                <Component
+                  labelOverride={`${field.label} From`}
+                  value={filters[field.name + "_from"] ?? ""}
+                  onChange={(v) => onFilterChange(field.name + "_from", v)}
+                  data={data}
+                />
+              </Box>
+              <Box sx={{ flex: 1, minWidth: 120 }}>
+                <Component
+                  labelOverride={`${field.label} To`}
+                  value={filters[field.name + "_to"] ?? ""}
+                  onChange={(v) => onFilterChange(field.name + "_to", v)}
+                  data={data}
+                />
+              </Box>
+            </Box>
+          );
+        }
+
+        return (
+          <Box key={field.name} sx={{ minWidth: 180 }}>
+            <Component
+              value={filters[field.name] ?? ""}
+              onChange={(v) => onFilterChange(field.name, v)}
+              data={data}
+            />
+          </Box>
+        );
+      })}
+      {hasActiveFilters && (
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <Button size="small" variant="outlined" onClick={onClear}>
+            Clear
+          </Button>
+        </Box>
+      )}
+    </Box>
+  );
+}

react-openapi/src/components/Layout.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Box, Toolbar, IconButton, Typography } from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import { SideMenu } from "./SideMenu";
+import type { ResourceConfig } from "../types";
+
+interface LayoutProps {
+  resources: ResourceConfig[];
+  basePath: string;
+  children: React.ReactNode;
+}
+
+export function Layout({ resources, basePath, children }: LayoutProps) {
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+
+  return (
+    <Box sx={{ display: "flex", minHeight: "calc(100vh - 128px)" }}>
+      <SideMenu
+        resources={resources}
+        basePath={basePath}
+        mobileOpen={mobileOpen}
+        onClose={() => setMobileOpen(false)}
+      />
+      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            edge="start"
+            onClick={() => setMobileOpen(true)}
+            sx={{ mr: 2, display: { md: "none" } }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" noWrap sx={{ display: { md: "none" } }}>
+            Admin Panel
+          </Typography>
+        </Toolbar>
+        {children}
+      </Box>
+    </Box>
+  );
+}

react-openapi/src/components/ResourceDetail.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Box,
+  Typography,
+  Button,
+  Paper,
+  Grid,
+  CircularProgress,
+} from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import EditIcon from "@mui/icons-material/Edit";
+import type { ResourceConfig } from "../types";
+import { useResource } from "../context/useResource";
+import { useAppContext } from "../context/AppContext";
+import { DetailFieldRenderer, applyDisplayFormat } from "./fields";
+
+interface ResourceDetailProps {
+  resource: ResourceConfig;
+  basePath: string;
+}
+
+export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const crud = useResource(resource.name);
+  const { resources: allResources } = useAppContext();
+  const [data, setData] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (id) {
+      setLoading(true);
+      crud
+        .get(id)
+        .then(setData)
+        .catch(() => navigate(`${basePath}/${resource.name}`))
+        .finally(() => setLoading(false));
+    }
+  }, [id]);
+
+  if (loading) {
+    return (
+      <Box sx={{ display: "flex", justifyContent: "center", py: 8 }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (!data) {
+    return (
+      <Typography variant="body1" color="text.secondary" sx={{ py: 4 }}>
+        Record not found
+      </Typography>
+    );
+  }
+
+  const visibleFields = resource.orderedFields.filter((f) => !f.hidden?.detail);
+
+  return (
+    <Box>
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 3 }}>
+        <Button startIcon={<ArrowBackIcon />} onClick={() => navigate(`${basePath}/${resource.name}`)}>
+          Back
+        </Button>
+        <Typography variant="h5" fontWeight={700} sx={{ flex: 1 }}>
+          {applyDisplayFormat(data, resource.displayFormat)}
+        </Typography>
+        {resource.operations.update && (
+          <Button variant="contained" startIcon={<EditIcon />} onClick={() => navigate(`${basePath}/${resource.name}/${id}/edit`)}>
+            Edit
+          </Button>
+        )}
+      </Box>
+
+      <Paper variant="outlined" sx={{ p: 3 }}>
+        <Grid container spacing={2}>
+          {visibleFields.map((field) => {
+            let value = data[field.name];
+            let fmt = resource.displayFormat;
+            if (field.fk && typeof value === "object") {
+              const targetRes = allResources.find((r) => r.name === field.fk!.resource);
+              fmt = targetRes!.displayFormat;
+            } else if (field.refSchema && !field.fk && typeof value === "object") {
+              fmt = field.inlineDisplayFormat ?? resource.displayFormat;
+            }
+            return (
+              <Grid item xs={12} sm={6} md={4} key={field.name}>
+                <DetailFieldRenderer field={field} value={value} displayFormat={fmt} />
+              </Grid>
+            );
+          })}
+        </Grid>
+      </Paper>
+    </Box>
+  );
+}

react-openapi/src/components/ResourceForm.tsx

@@ -0,0 +1,301 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Box,
+  Typography,
+  Button,
+  Paper,
+  Grid,
+  CircularProgress,
+  Alert,
+  Snackbar,
+} from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import SaveIcon from "@mui/icons-material/Save";
+import type { ResourceConfig, FieldConfig } from "../types";
+import { useResource } from "../context/useResource";
+import { useAppContext } from "../context/AppContext";
+import { getApi } from "../hooks/useApi";
+import { FormFieldRenderer } from "./fields";
+import { extractFields } from "../transformers/field-config";
+
+interface ResourceFormProps {
+  resource: ResourceConfig;
+  basePath: string;
+  mode: "create" | "edit";
+}
+
+export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const crud = useResource(resource.name);
+  const { resources: allResources } = useAppContext();
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+  const [snackbar, setSnackbar] = useState<{ open: boolean; message: string; severity: "success" | "error" }>({
+    open: false,
+    message: "",
+    severity: "success",
+  });
+
+  const [fkOptions, setFkOptions] = useState<Record<string, { value: any; label: string }[]>>({});
+  const [fkLoading, setFkLoading] = useState<Record<string, boolean>>({});
+  const { schemas } = useAppContext();
+
+  useEffect(() => {
+    console.log(`[ResourceForm] mounted resource="${resource.name}" mode=${mode} id=${id}`);
+    console.log(`[ResourceForm] relationships:`, resource.relationships.map(r => `{field=${r.fieldName} target=${r.config.resource} prefetch=${r.config.prefetch}}`));
+  }, []);
+
+  useEffect(() => {
+    if (mode === "create") {
+      const initial: Record<string, any> = {};
+      resource.orderedFields.forEach((f) => {
+        if (f.refSchema && !f.fk && formData[f.name] === undefined) {
+          const refSchemaObj = schemas[f.refSchema!];
+          if (refSchemaObj) {
+            const nestedFields = extractFields(f.refSchema!, refSchemaObj, schemas);
+            initial[f.name] = f.isArray ? [] : buildInitialShape(nestedFields, schemas);
+          } else {
+            initial[f.name] = null;
+          }
+        }
+      });
+      if (Object.keys(initial).length > 0) {
+        setFormData((prev) => ({ ...prev, ...initial }));
+      }
+    }
+  }, [mode, resource.name]);
+
+  const loadFkOptions = useCallback(async (fieldName: string, fk: { resource: string; prefetch: boolean }) => {
+    console.log(`[loadFkOptions] CALLED field="${fieldName}" resource="${fk.resource}" prefetch=${fk.prefetch}`);
+    setFkLoading((prev) => ({ ...prev, [fieldName]: true }));
+    try {
+      const targetRes = allResources.find((r) => r.name === fk.resource);
+      if (!targetRes) {
+        console.log(`[loadFkOptions] targetRes NOT FOUND for "${fk.resource}"`);
+        return;
+      }
+      console.log(`[loadFkOptions] targetRes found: path="${targetRes.path}" pagination=${!!targetRes.pagination}`);
+
+      const api = getApi();
+      const params: Record<string, any> = {};
+      if (targetRes.pagination) {
+        params.limit = 0;
+      }
+      console.log(`[loadFkOptions] fetching GET ${targetRes.path}`, params);
+      const res = await api.get(targetRes.path, { params });
+      console.log(`[loadFkOptions] response status=${res.status} data type=${typeof res.data} isArray=${Array.isArray(res.data)}`);
+
+      let items: any[];
+      if (targetRes.pagination) {
+        if (!res.data || typeof res.data !== "object" || !Array.isArray(res.data.items)) {
+          console.log(`[loadFkOptions] paginated parse FAILED: data=`, res.data);
+          throw new Error(`Expected paginated response from ${targetRes.path}`);
+        }
+        items = res.data.items;
+        console.log(`[loadFkOptions] paginated: total=${res.data.total} items.length=${items.length}`);
+      } else {
+        if (!Array.isArray(res.data)) {
+          console.log(`[loadFkOptions] non-paginated parse FAILED: data=`, res.data);
+          throw new Error(`Expected array response from ${targetRes.path}`);
+        }
+        items = res.data;
+        console.log(`[loadFkOptions] non-paginated: items.length=${items.length}`);
+      }
+
+      const opts = items.map((item: any) => ({
+        value: item[targetRes.primaryKey],
+        label: applyFormat(item, targetRes.displayFormat),
+      }));
+      console.log(`[loadFkOptions] computed ${opts.length} options for field "${fieldName}"`, opts.slice(0, 3));
+
+      setFkOptions((prev) => ({ ...prev, [fieldName]: opts }));
+    } catch (e) {
+      console.log(`[loadFkOptions] ERROR field="${fieldName}":`, e);
+    } finally {
+      setFkLoading((prev) => ({ ...prev, [fieldName]: false }));
+    }
+  }, [allResources]);
+
+  useEffect(() => {
+    console.log(`[prefetch effect] ${resource.relationships.length} relationships, checking prefetch...`);
+    resource.relationships.forEach((rel) => {
+      console.log(`[prefetch effect] field="${rel.fieldName}" prefetch=${rel.config.prefetch} -> ${rel.config.prefetch ? "WILL FETCH" : "skipped (onFocus)"}`);
+      if (rel.config.prefetch) {
+        loadFkOptions(rel.fieldName, rel.config);
+      }
+    });
+  }, [resource.relationships, loadFkOptions]);
+
+  useEffect(() => {
+    if (mode === "edit" && id) {
+      crud.get(id).then((data) => {
+        const resolved = { ...(data ?? {}) };
+        resource.relationships.forEach((rel) => {
+          const val = resolved[rel.fieldName];
+          if (val != null) {
+            const targetRes = allResources.find((r) => r.name === rel.config.resource);
+            if (targetRes) {
+              if (Array.isArray(val)) {
+                resolved[rel.fieldName] = val.map((item: any) => item[targetRes.primaryKey]);
+              } else if (typeof val === "object") {
+                resolved[rel.fieldName] = val[targetRes.primaryKey];
+              }
+            }
+            if (!rel.config.prefetch) {
+              loadFkOptions(rel.fieldName, rel.config);
+            }
+          }
+        });
+        setFormData(resolved);
+      });
+    }
+  }, [mode, id, loadFkOptions, resource.relationships]);
+
+  const loadFkOnFocus = (fieldName: string) => {
+    console.log(`[loadFkOnFocus] CALLED field="${fieldName}"`);
+    const rel = resource.relationships.find((r) => r.fieldName === fieldName);
+    if (rel) {
+      console.log(`[loadFkOnFocus] found rel: prefetch=${rel.config.prefetch} fkOptions[${fieldName}]=${fkOptions[fieldName] ? "exists" : "undefined"}`);
+    } else {
+      console.log(`[loadFkOnFocus] NO RELATIONSHIP found for field="${fieldName}"`);
+    }
+    if (rel && !rel.config.prefetch && !fkOptions[fieldName]) {
+      console.log(`[loadFkOnFocus] conditions met -> calling loadFkOptions`);
+      loadFkOptions(fieldName, rel.config);
+    } else {
+      console.log(`[loadFkOnFocus] NOT calling loadFkOptions: rel=${!!rel} !prefetch=${rel && !rel.config.prefetch} !hasOptions=${!fkOptions[fieldName]}`);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const validationErrors: Record<string, string> = {};
+    resource.orderedFields
+      .filter((f) => f.required && !f.readOnly && f.name !== resource.primaryKey)
+      .forEach((f) => {
+        if (formData[f.name] === undefined || formData[f.name] === null || formData[f.name] === "") {
+          validationErrors[f.name] = `${f.label} is required`;
+        }
+      });
+
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      return;
+    }
+
+    setErrors({});
+    setSaving(true);
+
+    try {
+      if (mode === "create") {
+        await crud.create(formData);
+        setSnackbar({ open: true, message: "Created successfully", severity: "success" });
+        navigate(`${basePath}/${resource.name}`);
+      } else {
+        await crud.update(id!, formData);
+        setSnackbar({ open: true, message: "Updated successfully", severity: "success" });
+        navigate(`${basePath}/${resource.name}/${id}`);
+      }
+    } catch (e: any) {
+      setSnackbar({ open: true, message: e.message ?? "Operation failed", severity: "error" });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleChange = (fieldName: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [fieldName]: value }));
+    if (errors[fieldName]) {
+      setErrors((prev) => {
+        const copy = { ...prev };
+        delete copy[fieldName];
+        return copy;
+      });
+    }
+  };
+
+  const title = mode === "create" ? `Create ${resource.displayName}` : `Edit ${resource.displayName}`;
+
+  return (
+    <Box>
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 3 }}>
+        <Button startIcon={<ArrowBackIcon />} onClick={() => navigate(`${basePath}/${resource.name}`)}>
+          Back
+        </Button>
+        <Typography variant="h5" fontWeight={700}>
+          {title}
+        </Typography>
+      </Box>
+
+      <Paper variant="outlined" sx={{ p: 3 }}>
+        <Box component="form" onSubmit={handleSubmit}>
+          <Grid container spacing={2}>
+            {resource.orderedFields
+              .filter((f) => !(f.name === resource.primaryKey && mode === "edit"))
+              .map((field) => (
+                <Grid item xs={12} sm={6} md={4} key={field.name}>
+                  <FormFieldRenderer
+                    field={field}
+                    value={formData[field.name]}
+                    onChange={(val) => handleChange(field.name, val)}
+                    error={errors[field.name]}
+                    fkOptions={fkOptions[field.name]}
+                    fkLoading={fkLoading[field.name]}
+                    recordId={id}
+                    onFkOpen={loadFkOnFocus}
+                  />
+                </Grid>
+              ))}
+          </Grid>
+
+          <Box sx={{ mt: 3, display: "flex", gap: 2 }}>
+            <Button
+              type="submit"
+              variant="contained"
+              startIcon={saving ? <CircularProgress size={18} color="inherit" /> : <SaveIcon />}
+              disabled={saving}
+            >
+              {mode === "create" ? "Create" : "Save Changes"}
+            </Button>
+            <Button variant="outlined" onClick={() => navigate(`${basePath}/${resource.name}`)}>
+              Cancel
+            </Button>
+          </Box>
+        </Box>
+      </Paper>
+
+      <Snackbar
+        open={snackbar.open}
+        autoHideDuration={4000}
+        onClose={() => setSnackbar((s) => ({ ...s, open: false }))}
+      >
+        <Alert severity={snackbar.severity} onClose={() => setSnackbar((s) => ({ ...s, open: false }))}>
+          {snackbar.message}
+        </Alert>
+      </Snackbar>
+    </Box>
+  );
+}
+
+function applyFormat(obj: any, format: string): string {
+  if (!obj || typeof obj !== "object") return String(obj ?? "");
+  return format.replace(/\{(\w+)\}/g, (_, key) => String(obj[key] ?? ""));
+}
+
+function buildInitialShape(fields: FieldConfig[], schemas: Record<string, any>): Record<string, any> {
+  const shape: Record<string, any> = {};
+  for (const f of fields) {
+    if (f.refSchema && !f.fk) {
+      const refSchemaObj = schemas[f.refSchema!];
+      const nestedFields = refSchemaObj ? extractFields(f.refSchema!, refSchemaObj, schemas) : [];
+      shape[f.name] = f.isArray ? [] : buildInitialShape(nestedFields, schemas);
+    } else {
+      shape[f.name] = null;
+    }
+  }
+  return shape;
+}

react-openapi/src/components/ResourceList.tsx

@@ -0,0 +1,407 @@
+import React, { useEffect, useState, useCallback, useMemo, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  Box,
+  Typography,
+  Button,
+  IconButton,
+  Tooltip,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TablePagination,
+  Paper,
+  TableSortLabel,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Grid,
+} from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import type { ResourceConfig, FieldConfig } from "../types";
+import { useResource } from "../context/useResource";
+import { useAppContext } from "../context/AppContext";
+import { ListCellRenderer, DetailFieldRenderer, applyDisplayFormat } from "./fields";
+import { FilterBar } from "./FilterBar";
+import { readSseCache, appendSseCache, clearSseCache, nextSseSeq, setSseConnected } from "../context/useResource";
+import { SseConnectionStatus } from "./SseConnectionStatus";
+
+interface ResourceListProps {
+  resource: ResourceConfig;
+  basePath: string;
+}
+
+function matchRow(row: any, filters: Record<string, string>, fields: FieldConfig[], allResources: ResourceConfig[]): boolean {
+  for (const field of fields) {
+    if (!field.filterable) continue;
+
+    const isRange = field.type === "integer" || field.type === "number" || field.format === "date" || field.format === "date-time";
+
+    if (isRange) {
+      const from = filters[field.name + "_from"];
+      const to = filters[field.name + "_to"];
+      if (from || to) {
+        const cell = row[field.name];
+        if (cell == null) return false;
+        if (field.type === "integer" || field.type === "number") {
+          if (from && Number(cell) < Number(from)) return false;
+          if (to && Number(cell) > Number(to)) return false;
+        } else {
+          if (from && String(cell) < String(from)) return false;
+          if (to && String(cell) > String(to)) return false;
+        }
+      }
+      continue;
+    }
+
+    const val = filters[field.name];
+    if (!val) continue;
+
+    const cell = row[field.name];
+    if (cell == null) return false;
+
+    let str: string;
+    if (field.fk && typeof cell === "object" && cell !== null) {
+      const targetRes = allResources.find((r) => r.name === field.fk!.resource);
+      if (targetRes) {
+        const items = Array.isArray(cell) ? cell : [cell];
+        str = items.map((item: any) => applyDisplayFormat(item, targetRes.displayFormat)).join(" ");
+      } else {
+        str = String(cell);
+      }
+    } else {
+      str = String(cell);
+    }
+    const filterParts = val.split(",").filter(Boolean);
+    if (!filterParts.some((part) => str.toLowerCase().includes(part.toLowerCase()))) return false;
+  }
+  return true;
+}
+
+export function ResourceList({ resource, basePath }: ResourceListProps) {
+  const navigate = useNavigate();
+  const { components, ...crud } = useResource(resource.name);
+  const { resources: allResources, config } = useAppContext();
+  const [data, setData] = useState<any[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(resource.pagination?.defaultLimit ?? 20);
+  const [sortField, setSortField] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+  const [filters, setFilters] = useState<Record<string, string>>({});
+  const [detailRow, setDetailRow] = useState<any | null>(null);
+
+  const isStreaming = resource.streaming === true;
+  const hasActions = resource.operations.get || resource.operations.update || resource.operations.delete;
+
+  const filterMode = config.resourceConfig?.[resource.name]?.filterOptions?.mode ?? "client";
+  const isClientMode = filterMode === "client" && !isStreaming;
+
+  const visibleColumns = resource.listColumns
+    .map((colName) => resource.fields.find((f) => f.name === colName))
+    .filter((f): f is FieldConfig => !!f && !f.hidden?.list);
+
+  useEffect(() => {
+    setFilters({});
+  }, [resource.name]);
+
+  useEffect(() => {
+    if (!isStreaming || !crud.stream) return;
+
+    setData(readSseCache(resource.name));
+    setSseConnected(resource.name, false);
+
+    const sub = crud.stream({
+      onEvent: (evt) => {
+        const enriched = { ...evt, _received_at: new Date().toISOString(), _seq: nextSseSeq() };
+        const updated = appendSseCache(resource.name, enriched);
+        setData(updated);
+      },
+      onOpen: () => setSseConnected(resource.name, true),
+      onError: () => setSseConnected(resource.name, false),
+    });
+
+    return () => {
+      setSseConnected(resource.name, false);
+      sub.close();
+    };
+  }, [isStreaming, crud.stream, resource.name]);
+
+  const serverFetchData = useCallback(async () => {
+    const params: Record<string, any> = {};
+    if (resource.pagination) {
+      params[resource.pagination.limitParam] = rowsPerPage;
+      params[resource.pagination.offsetParam] = page * rowsPerPage;
+    }
+    if (sortField) {
+      params.sort = sortDir === "desc" ? `-${sortField}` : sortField;
+    }
+    for (const [key, val] of Object.entries(filters)) {
+      if (val) params[key] = val;
+    }
+    const result = await crud.list(params);
+    setData(result.items ?? []);
+    setTotal(result.total ?? result.items?.length ?? 0);
+  }, [crud.list, resource.pagination, rowsPerPage, page, sortField, sortDir, filters]);
+
+  const clientFetchAll = useCallback(async () => {
+    const params: Record<string, any> = {};
+    if (resource.pagination) {
+      params[resource.pagination.limitParam] = 0;
+    }
+    const result = await crud.list(params);
+    setData(result.items ?? []);
+    setTotal(result.items?.length ?? 0);
+  }, [crud.list, resource.pagination]);
+
+  useEffect(() => {
+    if (isStreaming) return;
+    if (isClientMode) {
+      clientFetchAll();
+    } else {
+      serverFetchData();
+    }
+  }, [isStreaming, isClientMode, clientFetchAll, serverFetchData]);
+
+  useEffect(() => {
+    if (isClientMode) {
+      setPage(0);
+    }
+  }, [filters, isClientMode]);
+
+  const filteredData = useMemo(() => {
+    if (!isClientMode) return data;
+
+    let items = data.filter((row) => matchRow(row, filters, resource.fields, allResources));
+
+    if (sortField) {
+      items = [...items].sort((a, b) => {
+        const aVal = a[sortField];
+        const bVal = b[sortField];
+        if (aVal == null) return 1;
+        if (bVal == null) return -1;
+        if (aVal < bVal) return sortDir === "asc" ? -1 : 1;
+        if (aVal > bVal) return sortDir === "asc" ? 1 : -1;
+        return 0;
+      });
+    }
+
+    const start = page * rowsPerPage;
+    return items.slice(start, start + rowsPerPage);
+  }, [data, isClientMode, filters, sortField, sortDir, page, rowsPerPage, resource.fields, allResources]);
+
+  const clientTotal = useMemo(() => {
+    if (!isClientMode) return total;
+    return data.filter((row) => matchRow(row, filters, resource.fields, allResources)).length;
+  }, [data, isClientMode, filters, resource.fields, allResources]);
+
+  const displayData = isClientMode ? filteredData : data;
+  const displayTotal = isClientMode ? clientTotal : total;
+
+  const handleDelete = async (id: string | number) => {
+    if (!window.confirm("Are you sure you want to delete this item?")) return;
+    await crud.remove(id);
+    if (isClientMode) {
+      clientFetchAll();
+    } else {
+      serverFetchData();
+    }
+  };
+
+  const handleSort = (field: string) => {
+    if (sortField === field) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortField(field);
+      setSortDir("asc");
+    }
+  };
+
+  const handleFilterChange = (fieldName: string, value: string) => {
+    setFilters((prev) => ({ ...prev, [fieldName]: value }));
+  };
+
+  return (
+    <Box>
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 3 }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
+          <Typography variant="h5" fontWeight={700}>
+            {resource.displayName}
+          </Typography>
+          {isStreaming && <SseConnectionStatus resourceName={resource.name} />}
+        </Box>
+        <Box sx={{ display: "flex", gap: 1 }}>
+          {isStreaming && data.length > 0 && (
+            <Button variant="outlined" size="small" onClick={() => { setData([]); setTotal(0); clearSseCache(resource.name); }}>
+              Clear ({data.length})
+            </Button>
+          )}
+          {resource.operations.create && !isStreaming && (
+            <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              onClick={() => navigate(`${basePath}/${resource.name}/new`)}
+            >
+              Create
+            </Button>
+          )}
+        </Box>
+      </Box>
+
+      {!isStreaming && (
+        <FilterBar
+          resourceName={resource.name}
+          filters={filters}
+          onFilterChange={handleFilterChange}
+          onClear={() => setFilters({})}
+          data={data}
+        />
+      )}
+
+      <TableContainer component={Paper} variant="outlined">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              {visibleColumns.map((col) => (
+                <TableCell key={col.name} sx={{ fontWeight: 700 }}>
+                  {col.sortable ? (
+                    <TableSortLabel
+                      active={sortField === col.name}
+                      direction={sortField === col.name ? sortDir : "asc"}
+                      onClick={() => handleSort(col.name)}
+                    >
+                      {col.label}
+                    </TableSortLabel>
+                  ) : (
+                    col.label
+                  )}
+                </TableCell>
+              ))}
+              {hasActions && <TableCell align="right" sx={{ fontWeight: 700 }}>Actions</TableCell>}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {displayData.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={visibleColumns.length + (hasActions ? 1 : 0)} align="center">
+                  <Typography variant="body2" color="text.secondary" sx={{ py: 4 }}>
+                    {isStreaming ? "Waiting for events\u2026" : "No records found"}
+                  </Typography>
+                </TableCell>
+              </TableRow>
+            ) : (
+              displayData.map((row, idx) => {
+                const rowId = isStreaming ? `evt-${row._seq ?? idx}` : row[resource.primaryKey];
+                return (
+                  <TableRow
+                    key={rowId}
+                    hover
+                    sx={{ cursor: "pointer" }}
+                    onClick={() => {
+                      if (isStreaming) {
+                        setDetailRow(row);
+                      } else {
+                        navigate(`${basePath}/${resource.name}/${rowId}`);
+                      }
+                    }}
+                  >
+                    {visibleColumns.map((col) => {
+                      let value = row[col.name];
+                      let fmt = resource.displayFormat;
+                      if (col.fk) {
+                        const targetRes = allResources.find((r) => r.name === col.fk!.resource);
+                        fmt = targetRes!.displayFormat;
+                      } else if (col.refSchema && !col.fk && col.inlineDisplayFormat) {
+                        fmt = col.inlineDisplayFormat;
+                      }
+                      return (
+                        <TableCell key={col.name}>
+                          <ListCellRenderer field={col} value={value} displayFormat={fmt} />
+                        </TableCell>
+                      );
+                    })}
+                    {hasActions && (
+                      <TableCell align="right" onClick={(e) => e.stopPropagation()}>
+                        {resource.operations.get && !isStreaming && (
+                          <Tooltip title="View">
+                            <IconButton size="small" onClick={() => navigate(`${basePath}/${resource.name}/${rowId}`)}>
+                              <VisibilityIcon fontSize="small" />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                        {resource.operations.update && (
+                          <Tooltip title="Edit">
+                            <IconButton size="small" onClick={() => navigate(`${basePath}/${resource.name}/${rowId}/edit`)}>
+                              <EditIcon fontSize="small" />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                        {resource.operations.delete && (
+                          <Tooltip title="Delete">
+                            <IconButton size="small" onClick={() => handleDelete(rowId)} color="error">
+                              <DeleteIcon fontSize="small" />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                      </TableCell>
+                    )}
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      {!isStreaming && (resource.pagination || isClientMode) && (
+        <TablePagination
+          component="div"
+          count={displayTotal}
+          page={page}
+          onPageChange={(_, p) => setPage(p)}
+          rowsPerPage={rowsPerPage}
+          onRowsPerPageChange={(e) => {
+            setRowsPerPage(parseInt(e.target.value, 10));
+            setPage(0);
+          }}
+          rowsPerPageOptions={[10, 20, 50, 100]}
+        />
+      )}
+
+      {!isStreaming && displayData.length > 0 && (
+        <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: "block", textAlign: "right" }}>
+          {displayTotal} record{displayTotal !== 1 ? "s" : ""}
+        </Typography>
+      )}
+
+      <Dialog open={!!detailRow} onClose={() => setDetailRow(null)} maxWidth="sm" fullWidth>
+        <DialogTitle>{resource.displayName} Event</DialogTitle>
+        <DialogContent dividers>
+          {detailRow && (
+            <Grid container spacing={2} sx={{ mt: 0.5 }}>
+              {visibleColumns.map((col) => (
+                <Grid key={col.name} item xs={12} sm={6}>
+                  <DetailFieldRenderer
+                    field={col}
+                    value={detailRow[col.name]}
+                    displayFormat={resource.displayFormat}
+                  />
+                </Grid>
+              ))}
+            </Grid>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDetailRow(null)}>Close</Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}

react-openapi/src/components/SideMenu.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import {
+  Drawer,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+  Typography,
+  Box,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import CircleIcon from "@mui/icons-material/Circle";
+import type { ResourceConfig } from "../types";
+
+interface SideMenuProps {
+  resources: ResourceConfig[];
+  basePath: string;
+  mobileOpen: boolean;
+  onClose: () => void;
+}
+
+const drawerWidth = 260;
+
+export function SideMenu({ resources, basePath, mobileOpen, onClose }: SideMenuProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+  const colors = [
+    "#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6",
+    "#ec4899", "#14b8a6", "#f97316", "#06b6d4", "#84cc16",
+  ];
+
+  const content = (
+    <Box>
+      <Toolbar>
+        <Typography variant="h6" fontWeight={700} noWrap>
+          Admin Panel
+        </Typography>
+      </Toolbar>
+      <List sx={{ px: 1 }}>
+        {resources.map((r, i) => {
+          const listPath = `${basePath}/${r.name}`;
+          const active = location.pathname.startsWith(listPath);
+          return (
+            <ListItemButton
+              key={r.name}
+              selected={active}
+              onClick={() => {
+                navigate(listPath);
+                if (isMobile) onClose();
+              }}
+              sx={{
+                borderRadius: 2,
+                mb: 0.5,
+                "&.Mui-selected": {
+                  bgcolor: `${colors[i % colors.length]}15`,
+                  "&:hover": { bgcolor: `${colors[i % colors.length]}20` },
+                },
+              }}
+            >
+              <ListItemIcon sx={{ minWidth: 36 }}>
+                <CircleIcon sx={{ color: colors[i % colors.length], fontSize: 12 }} />
+              </ListItemIcon>
+              <ListItemText
+                primary={r.displayName}
+                primaryTypographyProps={{ fontWeight: active ? 700 : 500, fontSize: 14 }}
+              />
+            </ListItemButton>
+          );
+        })}
+      </List>
+    </Box>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        variant="temporary"
+        open={mobileOpen}
+        onClose={onClose}
+        ModalProps={{ keepMounted: true }}
+        sx={{
+          "& .MuiDrawer-paper": { boxSizing: "border-box", width: drawerWidth },
+        }}
+      >
+        {content}
+      </Drawer>
+    );
+  }
+
+  return (
+    <Drawer
+      variant="permanent"
+      sx={{
+        width: drawerWidth,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": { width: drawerWidth, boxSizing: "border-box" },
+      }}
+    >
+      {content}
+    </Drawer>
+  );
+}
+
+export { drawerWidth };

react-openapi/src/components/SseConnectionStatus.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Box } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import { useSseConnected } from "../context/useResource";
+
+interface SseConnectionStatusProps {
+  resourceName: string;
+}
+
+export function SseConnectionStatus({ resourceName }: SseConnectionStatusProps) {
+  const connected = useSseConnected(resourceName);
+
+  return (
+    <Box
+      component="span"
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.5,
+        px: 1,
+        py: 0.25,
+        borderRadius: 1,
+        border: 1,
+        borderColor: connected ? "#4caf50" : "#f44336",
+        color: connected ? "#4caf50" : "#f44336",
+        fontSize: "0.75rem",
+        fontWeight: 600,
+      }}
+    >
+      <FiberManualRecordIcon sx={{ fontSize: 10 }} />
+      {connected ? "Connected" : "Disconnected"}
+    </Box>
+  );
+}

react-openapi/src/components/SseStreamView.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from "react";
+import {
+  Box, Typography, Paper, Chip, Snackbar,
+} from "@mui/material";
+import type { ResourceConfig } from "../types";
+import { useResource, readSseCache, appendSseCache, clearSseCache, nextSseSeq, setSseConnected } from "../context/useResource";
+import { applyDisplayFormat } from "./fields";
+import { SseConnectionStatus } from "./SseConnectionStatus";
+
+interface SseStreamViewProps {
+  resource: ResourceConfig;
+}
+
+export function SseStreamView({ resource }: SseStreamViewProps) {
+  const { stream } = useResource(resource.name);
+  const [events, setEvents] = useState<any[]>(() => readSseCache(resource.name));
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMsg, setSnackbarMsg] = useState("");
+
+  useEffect(() => {
+    if (!stream) return;
+    setSseConnected(resource.name, false);
+
+    const sub = stream({
+      onEvent: (evt) => {
+        const enriched = { ...evt, _received_at: new Date().toISOString(), _seq: nextSseSeq() };
+        const updated = appendSseCache(resource.name, enriched);
+        setEvents([...updated]);
+        setSnackbarMsg(applyDisplayFormat(evt, resource.displayFormat));
+        setSnackbarOpen(true);
+      },
+      onOpen: () => setSseConnected(resource.name, true),
+      onError: () => setSseConnected(resource.name, false),
+    });
+
+    return () => {
+      setSseConnected(resource.name, false);
+      sub.close();
+    };
+  }, [resource.name]);
+
+  const eventCount = events.length;
+  const latestEvent = events[events.length - 1] ?? null;
+
+  return (
+    <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}>
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2.5 }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
+          <Typography variant="subtitle1" fontWeight={700}>
+            {resource.displayName}
+          </Typography>
+          <SseConnectionStatus resourceName={resource.name} />
+        </Box>
+        <Chip
+          label={eventCount > 0 ? `${eventCount} event${eventCount !== 1 ? "s" : ""}` : "No events"}
+          size="small"
+          variant="outlined"
+          color={eventCount > 0 ? "primary" : "default"}
+        />
+      </Box>
+
+      {latestEvent ? (
+        <Box
+          sx={{
+            bgcolor: "grey.50",
+            borderRadius: 1,
+            p: 2,
+            border: "1px solid",
+            borderColor: "divider",
+            fontFamily: "monospace",
+            fontSize: "0.875rem",
+          }}
+        >
+          <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: "block" }}>
+            Latest event (#{latestEvent._seq})
+          </Typography>
+          <Typography>
+            {applyDisplayFormat(latestEvent, resource.displayFormat)}
+          </Typography>
+        </Box>
+      ) : (
+        <Typography variant="body2" color="text.secondary" sx={{ py: 2, textAlign: "center" }}>
+          Waiting for events&hellip;
+        </Typography>
+      )}
+
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={2000}
+        onClose={() => setSnackbarOpen(false)}
+        message={snackbarMsg}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      />
+    </Paper>
+  );
+}

react-openapi/src/components/ValidationAlert.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Box, Typography, Alert, Snackbar, List, ListItem, ListItemIcon, ListItemText } from "@mui/material";
+import ErrorIcon from "@mui/icons-material/Error";
+import WarningIcon from "@mui/icons-material/Warning";
+import type { ValidationMessage } from "../types";
+
+interface ValidationAlertProps {
+  errors: ValidationMessage[];
+  warnings: ValidationMessage[];
+}
+
+export function ValidationAlert({ errors, warnings }: ValidationAlertProps) {
+  const [warningOpen, setWarningOpen] = React.useState(warnings.length > 0);
+
+  if (errors.length > 0) {
+    return (
+      <Box sx={{ p: 4, maxWidth: 700, mx: "auto", mt: 8 }}>
+        <Alert severity="error" sx={{ mb: 2 }}>
+          <Typography variant="h6" fontWeight={700}>
+            OpenAPI Spec Validation Failed
+          </Typography>
+          <Typography variant="body2">
+            The spec has {errors.length} error{errors.length > 1 ? "s" : ""}. Fix them before the admin panel can render.
+          </Typography>
+        </Alert>
+        <List dense>
+          {errors.map((e, i) => (
+            <ListItem key={i}>
+              <ListItemIcon sx={{ minWidth: 36 }}>
+                <ErrorIcon color="error" fontSize="small" />
+              </ListItemIcon>
+              <ListItemText primary={e.message} />
+            </ListItem>
+          ))}
+        </List>
+        {warnings.length > 0 && (
+          <>
+            <Typography variant="subtitle2" sx={{ mt: 2, mb: 1, color: "text.secondary" }}>
+              Warnings ({warnings.length})
+            </Typography>
+            <List dense>
+              {warnings.map((w, i) => (
+                <ListItem key={i}>
+                  <ListItemIcon sx={{ minWidth: 36 }}>
+                    <WarningIcon color="warning" fontSize="small" />
+                  </ListItemIcon>
+                  <ListItemText primary={w.message} />
+                </ListItem>
+              ))}
+            </List>
+          </>
+        )}
+      </Box>
+    );
+  }
+
+  return (
+    <Snackbar
+      open={warningOpen}
+      autoHideDuration={8000}
+      onClose={() => setWarningOpen(false)}
+      anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+    >
+      <Box>
+        {warnings.map((w, i) => (
+          <Alert key={i} severity="warning" sx={{ mb: 1 }} onClose={() => setWarningOpen(false)}>
+            {w.message}
+          </Alert>
+        ))}
+      </Box>
+    </Snackbar>
+  );
+}

react-openapi/src/components/fields/DetailFieldRenderer.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import type { FieldConfig } from "../../types";
+import { ListCellRenderer } from "./ListCellRenderer";
+
+interface DetailFieldProps {
+  field: FieldConfig;
+  value: any;
+  displayFormat?: string;
+}
+
+export function DetailFieldRenderer({ field, value, displayFormat }: DetailFieldProps) {
+  if (field.hidden?.detail) return null;
+
+  return (
+    <Box sx={{ mb: 2 }}>
+      <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ mb: 0.25, display: "block" }}>
+        {field.label}
+      </Typography>
+      <ListCellRenderer field={field} value={value} displayFormat={displayFormat} />
+    </Box>
+  );
+}

react-openapi/src/components/fields/FormFieldRenderer.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import { TextField } from "@mui/material";
+import type { FieldConfig } from "../../types";
+import { StringField } from "./renderers/StringField";
+import { NumberField } from "./renderers/NumberField";
+import { DateField } from "./renderers/DateField";
+import { BooleanField } from "./renderers/BooleanField";
+import { EnumField } from "./renderers/EnumField";
+import { FkSelectField } from "./renderers/FkSelectField";
+import { FkMultiSelectField } from "./renderers/FkMultiSelectField";
+import { ImageField } from "./renderers/ImageField";
+import { JsonField } from "./renderers/JsonField";
+
+interface FormFieldProps {
+  field: FieldConfig;
+  value: any;
+  onChange: (value: any) => void;
+  error?: string;
+  fkOptions?: { value: any; label: string }[];
+  fkLoading?: boolean;
+  recordId?: string | number;
+  onFkOpen?: (fieldName: string) => void;
+}
+
+export function FormFieldRenderer({ field, value, onChange, error, fkOptions, fkLoading, recordId, onFkOpen }: FormFieldProps) {
+  if (field.hidden?.form) return null;
+
+  if (field.readOnly && field.uiType !== "image") {
+    return (
+      <StringField field={field} value={value} onChange={onChange} error={error} />
+    );
+  }
+
+  if (field.uiType === "image") {
+    return (
+      <ImageField
+        field={field}
+        value={value}
+        onChange={onChange}
+        id={recordId}
+        uploadUrl={field.uploadUrl}
+      />
+    );
+  }
+
+  if (field.fk) {
+    console.log(`[FormFieldRenderer] FK field="${field.name}" fkOptions=${fkOptions ? `${fkOptions.length} items` : "undefined"} fkLoading=${fkLoading} isArray=${field.isArray}`);
+    if (field.isArray) {
+      return (
+        <FkMultiSelectField
+          field={field}
+          value={value}
+          onChange={onChange}
+          fkOptions={fkOptions}
+          fkLoading={fkLoading}
+          onOpen={() => onFkOpen?.(field.name)}
+        />
+      );
+    }
+    return (
+      <FkSelectField
+        field={field}
+        value={value}
+        onChange={onChange}
+        error={error}
+        fkOptions={fkOptions}
+        onOpen={() => onFkOpen?.(field.name)}
+      />
+    );
+  }
+
+  if (field.enumValues) {
+    return (
+      <EnumField
+        field={field}
+        value={value}
+        onChange={onChange}
+        error={error}
+      />
+    );
+  }
+
+  if (field.type === "boolean") {
+    return <BooleanField field={field} value={value} onChange={onChange} />;
+  }
+
+  if (field.type === "integer" || field.type === "number") {
+    return (
+      <NumberField
+        field={field}
+        value={value}
+        onChange={onChange}
+        error={error}
+      />
+    );
+  }
+
+  if (field.format === "date" || field.format === "date-time") {
+    return (
+      <DateField
+        field={field}
+        value={value}
+        onChange={onChange}
+        error={error}
+      />
+    );
+  }
+
+  if (field.refSchema && !field.fk) {
+    return (
+      <JsonField
+        field={field}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
+
+  return (
+    <StringField
+      field={field}
+      value={value}
+      onChange={onChange}
+      error={error}
+    />
+  );
+}

react-openapi/src/components/fields/ListCellRenderer.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { Box, Typography, Chip, Avatar } from "@mui/material";
+import type { FieldConfig } from "../../types";
+import { applyDisplayFormat } from "./utils";
+import { InlineRefField } from "./renderers/InlineRefField";
+
+interface ListCellProps {
+  field: FieldConfig;
+  value: any;
+  displayFormat?: string;
+}
+
+export function ListCellRenderer({ field, value, displayFormat }: ListCellProps) {
+  if (value === null || value === undefined) {
+    return <Typography variant="body2" color="text.disabled">—</Typography>;
+  }
+
+  if (field.refSchema && !field.fk && !field.isArray && typeof value === "object") {
+    return <InlineRefField field={field} value={value} displayFormat={displayFormat} />;
+  }
+
+  if (field.isArray && Array.isArray(value) && field.refSchema && !field.fk) {
+    if (value.length === 0) {
+      return <Typography variant="body2" color="text.disabled">—</Typography>;
+    }
+    return (
+      <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
+        {value.map((item: any, i: number) => {
+          const label = typeof item === "object"
+            ? applyDisplayFormat(item, displayFormat ?? "")
+            : String(item);
+          return <Chip key={i} label={label} size="small" variant="outlined" />;
+        })}
+      </Box>
+    );
+  }
+
+  if (field.fk && typeof value === "object" && !field.isArray) {
+    return <Typography variant="body2">{applyDisplayFormat(value, displayFormat ?? "")}</Typography>;
+  }
+
+  if (field.isArray && Array.isArray(value) && field.fk) {
+    return (
+      <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
+        {value.map((item: any, i: number) => {
+          const label = typeof item === "object" ? applyDisplayFormat(item, displayFormat ?? "") : String(item);
+          return <Chip key={i} label={label} size="small" variant="outlined" />;
+        })}
+      </Box>
+    );
+  }
+
+  if (field.enumValues) {
+    return <Chip label={value} size="small" />;
+  }
+
+  if (field.uiType === "image" && value) {
+    return <Avatar src={value} variant="rounded" sx={{ width: 40, height: 40 }} />;
+  }
+
+  if (field.type === "boolean") {
+    return <Chip label={value ? "Yes" : "No"} size="small" color={value ? "success" : "default"} />;
+  }
+
+  return <Typography variant="body2">{String(value)}</Typography>;
+}

react-openapi/src/components/fields/index.ts

@@ -0,0 +1,5 @@
+export { FormFieldRenderer } from "./FormFieldRenderer";
+export { ListCellRenderer } from "./ListCellRenderer";
+export { DetailFieldRenderer } from "./DetailFieldRenderer";
+export { applyDisplayFormat } from "./utils";
+export { JsonField } from "./renderers/JsonField";

react-openapi/src/components/fields/renderers/BooleanField.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Box, FormControl, FormControlLabel, Switch, FormHelperText, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import CancelIcon from "@mui/icons-material/Cancel";
+import type { FieldConfig } from "../../../types";
+
+interface Props {
+  field: FieldConfig;
+  value: any;
+  onChange: (value: any) => void;
+  nullable?: boolean;
+}
+
+export function BooleanField({ field, value, onChange, nullable }: Props) {
+  if (nullable) {
+    const strValue = String(value ?? "");
+    return (
+      <Box>
+        <Box sx={{ fontSize: "0.75rem", color: "text.secondary", mb: 0.5, fontWeight: 600 }}>
+          {field.label}
+        </Box>
+        <ToggleButtonGroup
+          value={strValue}
+          exclusive
+          onChange={(_, v) => onChange(v ?? "")}
+          size="small"
+        >
+          <ToggleButton value="" sx={{ color: "text.disabled", borderColor: "divider" }}>
+            <Box sx={{ width: 16, height: 16, borderRadius: "50%", bgcolor: "action.disabledBackground" }} />
+          </ToggleButton>
+          <ToggleButton value="true" sx={{ color: "success.main", borderColor: "success.main" }}>
+            <CheckCircleIcon fontSize="small" />
+          </ToggleButton>
+          <ToggleButton value="false" sx={{ color: "error.main", borderColor: "error.main" }}>
+            <CancelIcon fontSize="small" />
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </Box>
+    );
+  }
+
+  return (
+    <FormControl component="fieldset" fullWidth size="small">
+      <FormControlLabel
+        control={
+          <Switch
+            checked={!!value}
+            onChange={(e) => onChange(e.target.checked)}
+            disabled={field.readOnly}
+          />
+        }
+        label={field.label}
+      />
+      {field.description && <FormHelperText>{field.description}</FormHelperText>}
+    </FormControl>
+  );
+}

react-openapi/src/components/fields/renderers/DateField.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { TextField } from "@mui/material";
+import type { FieldConfig } from "../../../types";
+
+interface Props {
+  field: FieldConfig;
+  value: any;
+  onChange: (value: any) => void;
+  error?: string;
+}
+
+export function DateField({ field, value, onChange, error }: Props) {
+  const inputType = field.format === "date" ? "date" : "datetime-local";
+
+  return (
+    <TextField
+      fullWidth
+      label={field.label}
+      type={inputType}
+      value={value ?? ""}
+      onChange={(e) => onChange(e.target.value)}
+      error={!!error}
+      helperText={error ?? field.description}
+      placeholder={field.description}
+      size="small"
+      disabled={field.readOnly}
+      InputLabelProps={{ shrink: true }}
+    />
+  );
+}

react-openapi/src/components/fields/renderers/EnumField.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { FormControl, InputLabel, Select, MenuItem, FormHelperText } from "@mui/material";
+import type { FieldConfig } from "../../../types";
+
+interface Props {
+  field: FieldConfig;
+  value: any;
+  onChange: (value: any) => void;
+  error?: string;
+}
+
+export function EnumField({ field, value, onChange, error }: Props) {
+  return (
+    <FormControl fullWidth size="small" error={!!error}>
+      <InputLabel>{field.label}</InputLabel>
+      <Select
+        value={value ?? ""}
+        label={field.label}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={field.readOnly}
+      >
+        <MenuItem value="">
+          <em>None</em>
+        </MenuItem>
+        {(field.enumValues ?? []).map((opt) => (
+          <MenuItem key={opt} value={opt}>
+            {opt}
+          </MenuItem>
+        ))}
+      </Select>
+      {field.description && <FormHelperText>{field.description}</FormHelperText>}
+    </FormControl>
+  );
+}

react-openapi/src/components/fields/renderers/FkMultiSelectField.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { TextField, Autocomplete } from "@mui/material";
+import type { FieldConfig } from "../../../types";
+
+interface Props {
+  field: FieldConfig;
+  value: any;
+  onChange: (value: any) => void;
+  fkOptions?: { value: any; label: string }[];
+  fkLoading?: boolean;
+  onOpen?: () => void;
+}
+
+export function FkMultiSelectField({ field, value, onChange, fkOptions, fkLoading, onOpen }: Props) {
+  console.log(`[FkMultiSelectField] render field="${field.name}" fkOptions=${fkOptions ? `${fkOptions.length} items` : "undefined"} fkLoading=${fkLoading} value=${JSON.stringify(value)}`);
+  return (
+    <Autocomplete
+      multiple
+      options={fkOptions ?? []}
+      getOptionLabel={(o) => o.label}
+      value={fkOptions?.filter((o) => (value ?? []).includes(o.value)) ?? []}
+      onChange={(_, newVal) => onChange(newVal.map((v) => v.value))}
+      onOpen={() => onOpen?.()}
+      loading={fkLoading}
+      renderInput={(params) => (
+        <TextField {...params} label={field.label} helperText={field.description} size="small" />
+      )}
+      size="small"
+      disabled={field.readOnly}
+    />
+  );
+}

react-openapi/src/components/fields/renderers/FkSelectField.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { FormControl, InputLabel, Select, MenuItem, FormHelperText } from "@mui/material";
+import type { FieldConfig } from "../../../types";
+
+interface Props {
+  field: FieldConfig;
+  value: any;
+  onChange: (value: any) => void;
+  error?: string;
+  fkOptions?: { value: any; label: string }[];
+  onOpen?: () => void;
+}
+
+export function FkSelectField({ field, value, onChange, error, fkOptions, onOpen }: Props) {
+  console.log(`[FkSelectField] render field="${field.name}" fkOptions=${fkOptions ? `${fkOptions.length} items` : "undefined"} value=${value}`);
+  return (
+    <FormControl fullWidth size="small" error={!!error}>
+      <InputLabel>{field.label}</InputLabel>
+      <Select
+        value={value ?? ""}
+        label={field.label}
+        onChange={(e) => onChange(e.target.value)}
+        onOpen={() => onOpen?.()}
+        disabled={field.readOnly}
+      >
+        <MenuItem value="">
+          <em>None</em>
+        </MenuItem>
+        {(fkOptions ?? []).map((opt) => (
+          <MenuItem key={opt.value} value={opt.value}>
+            {opt.label}
+          </MenuItem>
+        ))}
+      </Select>
+      {field.description && <FormHelperText>{field.description}</FormHelperText>}
+    </FormControl>
+  );
+}

react-openapi/src/components/fields/renderers/ImageField.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Box, Typography, Avatar, FormHelperText } from "@mui/material";
+import Button from "@mui/material/Button";
+import type { FieldConfig } from "../../../types";
+import { getApi } from "../../../hooks/useApi";
+
+interface Props {
+  field: FieldConfig;
+  value: any;
+  onChange: (value: any) => void;
+  id?: string | number;
+  uploadUrl?: string;
+}
+
+export function ImageField({ field, value, onChange, id, uploadUrl }: Props) {
+  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!id || !uploadUrl) {
+      const reader = new FileReader();
+      reader.onload = () => onChange(reader.result);
+      reader.readAsDataURL(file);
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const api = getApi();
+      const url = uploadUrl.replace("{id}", String(id));
+      const res = await api.post(url, formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+      onChange(res.data.url ?? res.data);
+    } catch {
+      const reader = new FileReader();
+      reader.onload = () => onChange(reader.result);
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <Box>
+      <Typography variant="body2" fontWeight={600} sx={{ mb: 0.5 }}>
+        {field.label}
+      </Typography>
+      {value ? (
+        <Avatar src={value} variant="rounded" sx={{ width: 120, height: 120 }} />
+      ) : (
+        <Button variant="outlined" component="label" size="small">
+          Upload {field.label}
+          <input type="file" hidden accept="image/*" onChange={handleUpload} />
+        </Button>
+      )}
+      <FormHelperText>{field.description}</FormHelperText>
+    </Box>
+  );
+}

react-openapi/src/components/fields/renderers/InlineRefField.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Box, Typography, Chip } from "@mui/material";
+import type { FieldConfig } from "../../../types";
+import { applyDisplayFormat } from "../utils";
+
+interface Props {
+  field: FieldConfig;
+  value: any;
+  displayFormat?: string;
+}
+
+export function InlineRefField({ field, value, displayFormat }: Props) {
+  if (!value || typeof value !== "object") {
+    return <Typography variant="body2" color="text.disabled">—</Typography>;
+  }
+
+  if (displayFormat) {
+    return <Typography variant="body2">{applyDisplayFormat(value, displayFormat)}</Typography>;
+  }
+
+  const entries = Object.entries(value).filter(([, v]) => v !== null && v !== undefined);
+  if (entries.length === 0) {
+    return <Typography variant="body2" color="text.disabled">—</Typography>;
+  }
+
+  return (
+    <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
+      {entries.map(([key, v]) => (
+        <Chip
+          key={key}
+          label={`${key}: ${String(v)}`}
+          size="small"
+          variant="outlined"
+        />
+      ))}
+    </Box>
+  );
+}

react-openapi/src/components/fields/renderers/JsonField.tsx

@@ -0,0 +1,270 @@
+import React, { useState } from "react";
+import {
+  Button,
+  Chip,
+  Box,
+  Typography,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  IconButton,
+  Divider,
+} from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
+import type { FieldConfig } from "../../../types";
+import { useAppContext } from "../../../context/AppContext";
+import { extractFields } from "../../../transformers/field-config";
+import { FormFieldRenderer } from "../FormFieldRenderer";
+
+interface JsonFieldProps {
+  field: FieldConfig;
+  value: any;
+  onChange: (val: any) => void;
+}
+
+export function JsonField({ field, value, onChange }: JsonFieldProps) {
+  const { schemas } = useAppContext();
+  const [open, setOpen] = useState(false);
+
+  const refSchema = field.refSchema ? schemas[field.refSchema] : null;
+  const subFields = refSchema
+    ? extractFields(field.refSchema!, refSchema, schemas)
+    : [];
+
+  const [editValue, setEditValue] = useState<any>(null);
+
+  const handleOpen = () => {
+    setEditValue(initEditValue(value, field, schemas));
+    setOpen(true);
+  };
+
+  const handleSave = () => {
+    onChange(editValue);
+    setOpen(false);
+  };
+
+  const handleCancel = () => {
+    setEditValue(null);
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange(null);
+    setOpen(false);
+  };
+
+  const handleAddItem = () => {
+    setEditValue((prev: any[]) => [...(prev || []), buildDefaultShape(subFields, schemas)]);
+  };
+
+  const handleRemoveItem = (index: number) => {
+    setEditValue((prev: any[]) => prev.filter((_: any, i: number) => i !== index));
+  };
+
+  const handleItemFieldChange = (index: number, fieldName: string, val: any) => {
+    setEditValue((prev: any[]) => {
+      const next = [...prev];
+      next[index] = { ...next[index], [fieldName]: val };
+      return next;
+    });
+  };
+
+  const handleFieldChange = (fieldName: string, val: any) => {
+    setEditValue((prev: any) => ({ ...prev, [fieldName]: val }));
+  };
+
+  if (!open) {
+    if (value === null || value === undefined) {
+      return (
+        <Button variant="outlined" onClick={handleOpen} size="small">
+          Set {field.label}
+        </Button>
+      );
+    }
+
+    if (field.isArray && Array.isArray(value)) {
+      if (value.length === 0) {
+        return (
+          <Button variant="outlined" onClick={handleOpen} size="small">
+            Set {field.label}
+          </Button>
+        );
+      }
+      return (
+        <Chip
+          label={`${value.length} item${value.length !== 1 ? "s" : ""}`}
+          size="small"
+          color="primary"
+          variant="outlined"
+          onClick={handleOpen}
+          onDelete={handleClear}
+        />
+      );
+    }
+
+    if (typeof value === "object") {
+      const summary = field.inlineDisplayFormat
+        ? applyInlineFormat(value, field.inlineDisplayFormat)
+        : Object.entries(value)
+            .filter(([, v]) => v != null)
+            .map(([k, v]) => `${k}: ${String(v)}`)
+            .join(" | ");
+      return (
+        <Chip
+          label={summary || field.label}
+          size="small"
+          color="primary"
+          variant="outlined"
+          onClick={handleOpen}
+          onDelete={handleClear}
+        />
+      );
+    }
+  }
+
+  return (
+    <Dialog fullScreen open={open} onClose={handleCancel}>
+      <DialogTitle>{field.label}</DialogTitle>
+      <DialogContent dividers>
+        {field.isArray ? (
+          <ArrayEditor
+            items={editValue ?? []}
+            subFields={subFields}
+            onAddItem={handleAddItem}
+            onRemoveItem={handleRemoveItem}
+            onFieldChange={handleItemFieldChange}
+            schemas={schemas}
+          />
+        ) : (
+          <ObjectEditor
+            value={editValue}
+            subFields={subFields}
+            onFieldChange={handleFieldChange}
+            schemas={schemas}
+          />
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClear} color="error">
+          Clear
+        </Button>
+        <Button onClick={handleCancel}>Cancel</Button>
+        <Button onClick={handleSave} variant="contained">
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+function ObjectEditor({
+  value,
+  subFields,
+  onFieldChange,
+}: {
+  value: any;
+  subFields: FieldConfig[];
+  onFieldChange: (name: string, val: any) => void;
+  schemas: Record<string, any>;
+}) {
+  return (
+    <Box>
+      {subFields.map((subField) => (
+        <Box key={subField.name} sx={{ mb: 2 }}>
+          <FormFieldRenderer
+            field={subField}
+            value={value?.[subField.name]}
+            onChange={(val) => onFieldChange(subField.name, val)}
+          />
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function ArrayEditor({
+  items,
+  subFields,
+  onAddItem,
+  onRemoveItem,
+  onFieldChange,
+  schemas,
+}: {
+  items: any[];
+  subFields: FieldConfig[];
+  onAddItem: () => void;
+  onRemoveItem: (index: number) => void;
+  onFieldChange: (index: number, name: string, val: any) => void;
+  schemas: Record<string, any>;
+}) {
+  return (
+    <Box>
+      {items.length === 0 && (
+        <Typography variant="body2" color="text.disabled" sx={{ mb: 2 }}>
+          No items added yet.
+        </Typography>
+      )}
+      {items.map((item, index) => (
+        <Box key={index} sx={{ mb: 2 }}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}>
+            <Typography variant="subtitle2" sx={{ flex: 1 }}>
+              Item {index + 1}
+            </Typography>
+            <IconButton size="small" color="error" onClick={() => onRemoveItem(index)}>
+              <DeleteIcon fontSize="small" />
+            </IconButton>
+          </Box>
+          <Box sx={{ pl: 2 }}>
+            {subFields.map((subField) => (
+              <Box key={subField.name} sx={{ mb: 2 }}>
+                <FormFieldRenderer
+                  field={subField}
+                  value={item?.[subField.name]}
+                  onChange={(val) => onFieldChange(index, subField.name, val)}
+                />
+              </Box>
+            ))}
+          </Box>
+          <Divider sx={{ mt: 2 }} />
+        </Box>
+      ))}
+      <Button startIcon={<AddIcon />} onClick={onAddItem} variant="outlined" size="small">
+        Add Item
+      </Button>
+    </Box>
+  );
+}
+
+function buildDefaultShape(fields: FieldConfig[], schemas: Record<string, any>): Record<string, any> {
+  const shape: Record<string, any> = {};
+  for (const f of fields) {
+    if (f.refSchema && !f.fk) {
+      const refSchemaObj = schemas[f.refSchema!];
+      const nestedFields = refSchemaObj ? extractFields(f.refSchema!, refSchemaObj, schemas) : [];
+      shape[f.name] = f.isArray ? [] : buildDefaultShape(nestedFields, schemas);
+    } else {
+      shape[f.name] = null;
+    }
+  }
+  return shape;
+}
+
+function initEditValue(value: any, field: FieldConfig, schemas: Record<string, any>): any {
+  if (field.isArray) {
+    return value ? value.map((item: any) => ({ ...item })) : [];
+  }
+  if (value && typeof value === "object") {
+    return { ...value };
+  }
+  return buildDefaultShape(
+    field.refSchema ? extractFields(field.refSchema, schemas[field.refSchema], schemas) : [],
+    schemas
+  );
+}
+
+function applyInlineFormat(obj: any, format: string): string {
+  if (!obj || typeof obj !== "object") return String(obj ?? "");
+  return format.replace(/\{(\w+)\}/g, (_, key) => String(obj[key] ?? ""));
+}

react-openapi/src/components/fields/renderers/NumberField.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { TextField } from "@mui/material";
+import type { FieldConfig } from "../../../types";
+
+interface Props {
+  field: FieldConfig;
+  value: any;
+  onChange: (value: any) => void;
+  error?: string;
+}
+
+export function NumberField({ field, value, onChange, error }: Props) {
+  const isFloat = field.type === "number" || field.format === "float";
+
+  return (
+    <TextField
+      fullWidth
+      label={field.label}
+      type="number"
+      value={value ?? ""}
+      onChange={(e) => {
+        const raw = e.target.value;
+        if (raw === "") {
+          onChange("");
+        } else {
+          onChange(isFloat ? parseFloat(raw) : parseInt(raw, 10));
+        }
+      }}
+      error={!!error}
+      helperText={error ?? field.description}
+      placeholder={field.description}
+      size="small"
+      disabled={field.readOnly}
+      inputProps={isFloat ? { step: "any" } : undefined}
+    />
+  );
+}

react-openapi/src/components/fields/renderers/StringField.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { TextField } from "@mui/material";
+import type { FieldConfig } from "../../../types";
+
+interface Props {
+  field: FieldConfig;
+  value: any;
+  onChange: (value: any) => void;
+  error?: string;
+}
+
+export function StringField({ field, value, onChange, error }: Props) {
+  const inputType = field.format === "email" ? "email" : "text";
+
+  return (
+    <TextField
+      fullWidth
+      label={field.label}
+      type={inputType}
+      value={value ?? ""}
+      onChange={(e) => onChange(e.target.value)}
+      error={!!error}
+      helperText={error ?? field.description}
+      placeholder={field.description}
+      size="small"
+      disabled={field.readOnly}
+    />
+  );
+}

react-openapi/src/components/fields/utils.ts

@@ -0,0 +1,11 @@
+function getNested(obj: any, path: string): any {
+  return path.split(".").reduce((o, k) => o?.[k], obj);
+}
+
+export function applyDisplayFormat(item: any, format: string): string {
+  if (!item || typeof item !== "object") return String(item ?? "");
+  return format.replace(/\{([\w.]+)\}/g, (_, key) => {
+    const val = getNested(item, key);
+    return val != null ? String(val) : "";
+  });
+}

react-openapi/src/context/AppContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+import type { ResourceConfig, SpecConfiguration, ValidationMessage } from "../types";
+
+export interface AppContextValue {
+  config: SpecConfiguration;
+  resources: ResourceConfig[];
+  schemas: Record<string, any>;
+  loading: boolean;
+  errors: ValidationMessage[];
+  warnings: ValidationMessage[];
+}
+
+export const AppContext = createContext<AppContextValue | null>(null);
+
+export function useAppContext(): AppContextValue {
+  const ctx = useContext(AppContext);
+  if (!ctx) {
+    throw new Error("useAppContext must be used within an AppProvider");
+  }
+  return ctx;
+}

react-openapi/src/context/AppProvider.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState, useMemo } from "react";
+import type { SpecConfiguration, ResourceConfig, ValidationMessage } from "../types";
+import { AppContext } from "./AppContext";
+import { loadSpec } from "../spec-loader";
+import { validateSpec } from "../spec-validator";
+import { buildResourceConfigs } from "../transformers/resource-config";
+import { initApi } from "../hooks/useApi";
+
+interface AppProviderProps {
+  specConfiguration: SpecConfiguration;
+  children: React.ReactNode;
+}
+
+export function AppProvider({ specConfiguration, children }: AppProviderProps) {
+  const [loading, setLoading] = useState(true);
+  const [resources, setResources] = useState<ResourceConfig[]>([]);
+  const [schemas, setSchemas] = useState<Record<string, any>>({});
+  const [errors, setErrors] = useState<ValidationMessage[]>([]);
+  const [warnings, setWarnings] = useState<ValidationMessage[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function init() {
+      try {
+        setLoading(true);
+
+        const spec = await loadSpec(specConfiguration.specUrl);
+
+        const allMessages = validateSpec(spec);
+
+        const errs = allMessages.filter((m) => m.type === "error");
+        const warns = allMessages.filter((m) => m.type === "warning");
+
+        if (!cancelled) {
+          setErrors(errs);
+          setWarnings(warns);
+          setSchemas(spec.components?.schemas ?? {});
+        }
+
+        if (errs.length === 0) {
+          const configs = buildResourceConfigs(spec);
+          if (!cancelled) {
+            setResources(configs);
+          }
+
+          const baseUrl = specConfiguration.baseApiUrl ?? spec.servers?.[0]?.url ?? "";
+          if (baseUrl) {
+            initApi(baseUrl, specConfiguration.getToken);
+          }
+        }
+      } catch (e: any) {
+        if (!cancelled) {
+          setErrors([{ type: "error", message: e.message ?? "Failed to load spec" }]);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    init();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [specConfiguration.specUrl]);
+
+  const value = useMemo(
+    () => ({
+      config: specConfiguration,
+      resources,
+      schemas,
+      loading,
+      errors,
+      warnings,
+    }),
+    [specConfiguration, resources, schemas, loading, errors, warnings]
+  );
+
+  return React.createElement(AppContext.Provider, { value }, children);
+}

react-openapi/src/context/useResource.tsx

@@ -0,0 +1,522 @@
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import { Autocomplete, TextField } from "@mui/material";
+import type { ResourceConfig, ParsedListResponse, FieldConfig } from "../types";
+import { useAppContext } from "./AppContext";
+import { getApi } from "../hooks/useApi";
+import { StringField } from "../components/fields/renderers/StringField";
+import { NumberField } from "../components/fields/renderers/NumberField";
+import { DateField } from "../components/fields/renderers/DateField";
+import { BooleanField } from "../components/fields/renderers/BooleanField";
+import { EnumField } from "../components/fields/renderers/EnumField";
+import { FkSelectField } from "../components/fields/renderers/FkSelectField";
+import { FkMultiSelectField } from "../components/fields/renderers/FkMultiSelectField";
+
+function parseError(e: any): string {
+  if (e.response?.data) {
+    const data = e.response.data;
+    if (Array.isArray(data)) {
+      return data.map((err: any) => err.msg ?? String(err)).join("; ");
+    }
+    if (typeof data.detail === "string") {
+      return data.detail;
+    }
+  }
+  return e.message ?? "An error occurred";
+}
+
+interface ResourceState {
+  loading: boolean;
+  error: string | null;
+}
+
+export interface FilterComponentProps {
+  value: string;
+  onChange: (v: string) => void;
+  data?: any[];
+  labelOverride?: string;
+}
+
+interface StreamHandlers {
+  onEvent: (data: any) => void;
+  onError?: (evt: Event) => void;
+  onOpen?: () => void;
+}
+
+interface StreamSubscription {
+  close: () => void;
+}
+
+interface UseResourceReturn {
+  resource: ResourceConfig;
+  components: Record<string, React.FC<FilterComponentProps>>;
+  list: (params?: Record<string, any>) => Promise<ParsedListResponse>;
+  get: (id: string | number) => Promise<any>;
+  create: (data: any) => Promise<any>;
+  update: (id: string | number, data: any) => Promise<any>;
+  remove: (id: string | number) => Promise<void>;
+  stream?: (handlers: StreamHandlers) => StreamSubscription;
+  loading: boolean;
+  error: string | null;
+}
+
+const _fkOptionsCache = new Map<string, { value: any; label: string }[]>();
+const _stringOptionsCache = new Map<string, string[]>();
+const _sseEventCache = new Map<string, any[]>();
+let _sseSeq = 0;
+
+export function readSseCache(resourceName: string): any[] {
+  return _sseEventCache.get(resourceName) ?? [];
+}
+
+export function appendSseCache(resourceName: string, event: any): any[] {
+  const events = _sseEventCache.get(resourceName) ?? [];
+  events.push(event);
+  if (events.length > 100) events.splice(0, events.length - 100);
+  _sseEventCache.set(resourceName, events);
+  return events;
+}
+
+export function clearSseCache(resourceName: string): void {
+  _sseEventCache.delete(resourceName);
+}
+
+export function nextSseSeq(): number {
+  return ++_sseSeq;
+}
+
+const _sseConnection = new Map<string, boolean>();
+const _sseListeners = new Map<string, Set<() => void>>();
+
+export function setSseConnected(resourceName: string, connected: boolean): void {
+  if (_sseConnection.get(resourceName) === connected) return;
+  _sseConnection.set(resourceName, connected);
+  _sseListeners.get(resourceName)?.forEach((cb) => cb());
+}
+
+export function getSseConnected(resourceName: string): boolean {
+  return _sseConnection.get(resourceName) ?? false;
+}
+
+export function useSseConnected(resourceName: string): boolean {
+  const [connected, setConnected] = useState(() => getSseConnected(resourceName));
+
+  useEffect(() => {
+    const cb = () => setConnected(getSseConnected(resourceName));
+    const listeners = _sseListeners.get(resourceName) ?? new Set();
+    listeners.add(cb);
+    _sseListeners.set(resourceName, listeners);
+    return () => {
+      listeners.delete(cb);
+      if (listeners.size === 0) _sseListeners.delete(resourceName);
+    };
+  }, [resourceName]);
+
+  return connected;
+}
+
+function extractDataOptions(data: any[], fieldName: string): string[] {
+  const values = new Set<string>();
+  for (const row of data) {
+    const v = row[fieldName];
+    if (v != null && v !== "") {
+      values.add(String(v));
+    }
+  }
+  return [...values].sort();
+}
+
+function applyDisplayFormat(obj: any, format: string): string {
+  if (!obj || typeof obj !== "object") return String(obj ?? "");
+  return format.replace(/\{(\w+)\}/g, (_, key) => String(obj[key] ?? ""));
+}
+
+function buildFilterComponent(field: FieldConfig, resourceName: string): React.FC<FilterComponentProps> {
+  if (field.type === "boolean") {
+    return ({ value, onChange, labelOverride }) => (
+      <BooleanField
+        field={{ ...field, readOnly: false, description: "", label: labelOverride ?? field.label }}
+        value={value}
+        onChange={(v) => onChange(v ?? "")}
+        nullable
+      />
+    );
+  }
+
+  if (field.fk) {
+    const FkFilter: React.FC<FilterComponentProps> = ({ value, onChange, data, labelOverride }) => {
+      const { resources, config } = useAppContext();
+      const filterMode = config.resourceConfig?.[resourceName]?.filterOptions?.mode ?? "server";
+      const targetRes = resources.find((r) => r.name === field.fk!.resource);
+      const [options, setOptions] = useState<{ value: any; label: string }[]>([]);
+      const fetched = useRef(false);
+
+      useEffect(() => {
+        if (filterMode === "client" && data && targetRes) {
+          const seen = new Set<string>();
+          const opts: { value: any; label: string }[] = [];
+          for (const row of data) {
+            const items = Array.isArray(row[field.name]) ? row[field.name] : [row[field.name]];
+            for (const item of items) {
+              if (item == null) continue;
+              const label = applyDisplayFormat(item, targetRes.displayFormat);
+              if (!seen.has(label)) {
+                seen.add(label);
+                opts.push({ value: label, label });
+              }
+            }
+          }
+          opts.sort((a, b) => a.label.localeCompare(b.label));
+          setOptions(opts);
+          fetched.current = true;
+        } else if (filterMode === "server" && targetRes && !fetched.current) {
+          const cacheKey = targetRes.name;
+          if (_fkOptionsCache.has(cacheKey)) {
+            setOptions(_fkOptionsCache.get(cacheKey)!);
+            fetched.current = true;
+          } else {
+            (async () => {
+              try {
+                const api = getApi();
+                const params: Record<string, any> = {};
+                if (targetRes.pagination) params.limit = 0;
+                const res = await api.get(targetRes.path, { params });
+                let items: any[];
+                if (targetRes.pagination) {
+                  items = res.data.items ?? [];
+                } else {
+                  items = Array.isArray(res.data) ? res.data : [];
+                }
+                const opts = items.map((item: any) => {
+                  const label = applyDisplayFormat(item, targetRes.displayFormat);
+                  return { value: label, label };
+                });
+                _fkOptionsCache.set(cacheKey, opts);
+                setOptions(opts);
+                fetched.current = true;
+              } catch {
+                fetched.current = true;
+              }
+            })();
+          }
+        }
+      }, [filterMode, data, targetRes]);
+
+      if (field.isArray) {
+        const selected = value ? value.split(",").filter(Boolean) : [];
+        return (
+          <FkMultiSelectField
+            field={{ ...field, readOnly: false, description: "", label: labelOverride ?? field.label }}
+            value={selected}
+            onChange={(v: any[]) => onChange(v.join(","))}
+            fkOptions={options}
+          />
+        );
+      }
+
+      return (
+        <FkSelectField
+          field={{ ...field, readOnly: false, description: "", label: labelOverride ?? field.label }}
+          value={value}
+          onChange={(v: any) => onChange(v ?? "")}
+          fkOptions={options}
+        />
+      );
+    };
+    return FkFilter;
+  }
+
+  if (field.enumValues) {
+    const EnumFilter: React.FC<FilterComponentProps> = ({ value, onChange, data, labelOverride }) => {
+      const dataOptions = useMemo(() => {
+        if (!data) return [];
+        return extractDataOptions(data, field.name);
+      }, [data]);
+      const merged = useMemo(
+        () => [...new Set([...(field.enumValues ?? []), ...dataOptions])],
+        [dataOptions]
+      );
+      return (
+        <EnumField
+          field={{ ...field, readOnly: false, description: "", label: labelOverride ?? field.label, enumValues: merged }}
+          value={value}
+          onChange={(v) => onChange(v ?? "")}
+        />
+      );
+    };
+    return EnumFilter;
+  }
+
+  if (field.type === "integer" || field.type === "number") {
+    return ({ value, onChange, labelOverride }) => (
+      <NumberField
+        field={{ ...field, readOnly: false, description: "", label: labelOverride ?? field.label }}
+        value={value}
+        onChange={(v) => onChange(v === "" ? "" : String(v))}
+      />
+    );
+  }
+
+  if (field.format === "date" || field.format === "date-time") {
+    return ({ value, onChange, labelOverride }) => (
+      <DateField
+        field={{ ...field, readOnly: false, description: "", label: labelOverride ?? field.label }}
+        value={value}
+        onChange={(v) => onChange(v ?? "")}
+      />
+    );
+  }
+
+  if (
+    !field.fk &&
+    !field.enumValues &&
+    field.type !== "boolean" &&
+    field.type !== "integer" &&
+    field.type !== "number" &&
+    field.format !== "date" &&
+    field.format !== "date-time" &&
+    !field.refSchema
+  ) {
+    const StringAutocompleteFilter: React.FC<FilterComponentProps> = ({ value, onChange, data, labelOverride }) => {
+      const { resources, config } = useAppContext();
+      const filterMode = config.resourceConfig?.[resourceName]?.filterOptions?.mode ?? "server";
+      const [options, setOptions] = useState<string[]>([]);
+      const fetched = useRef(false);
+
+      useEffect(() => {
+        if (filterMode === "client" && data) {
+          setOptions(extractDataOptions(data, field.name));
+          fetched.current = true;
+        } else if (filterMode === "server" && !fetched.current) {
+          const cacheKey = resourceName + ":" + field.name;
+          if (_stringOptionsCache.has(cacheKey)) {
+            setOptions(_stringOptionsCache.get(cacheKey)!);
+            fetched.current = true;
+          } else {
+            (async () => {
+              try {
+                const api = getApi();
+                const selfRes = resources.find((r) => r.name === resourceName);
+                if (!selfRes) { fetched.current = true; return; }
+                const params: Record<string, any> = {};
+                if (selfRes.pagination) params.limit = 0;
+                const res = await api.get(selfRes.path, { params });
+                let items: any[];
+                if (selfRes.pagination) {
+                  items = res.data.items ?? [];
+                } else {
+                  items = Array.isArray(res.data) ? res.data : [];
+                }
+                const values = [...new Set(items.map((r: any) => String(r[field.name] ?? "")).filter(Boolean))].sort();
+                _stringOptionsCache.set(cacheKey, values);
+                setOptions(values);
+                fetched.current = true;
+              } catch {
+                fetched.current = true;
+              }
+            })();
+          }
+        }
+      }, [data]);
+
+      return (
+        <Autocomplete
+          freeSolo
+          size="small"
+          options={options}
+          value={value || null}
+          onInputChange={(_, newVal) => onChange(newVal ?? "")}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label={labelOverride ?? field.label}
+              size="small"
+            />
+          )}
+        />
+      );
+    };
+    return StringAutocompleteFilter;
+  }
+
+  return ({ value, onChange, labelOverride }) => (
+    <StringField
+      field={{ ...field, readOnly: false, description: "", label: labelOverride ?? field.label }}
+      value={value}
+      onChange={(v) => onChange(v ?? "")}
+    />
+  );
+}
+
+export function useResource(resourceName: string): UseResourceReturn {
+  const { resources } = useAppContext();
+  const resource = resources.find((r) => r.name === resourceName);
+
+  const [state, setState] = useState<ResourceState>({ loading: false, error: null });
+
+  if (!resource) {
+    const noop = async () => { throw new Error(`Resource "${resourceName}" not found yet`); };
+    return {
+      resource: null as unknown as ResourceConfig,
+      components: {},
+      list: noop,
+      get: noop,
+      create: noop,
+      update: noop,
+      remove: noop,
+      loading: false,
+      error: null,
+    };
+  }
+
+  const setLoading = useCallback((loading: boolean) => {
+    setState((s) => ({ ...s, loading }));
+  }, []);
+
+  const setError = useCallback((error: string | null) => {
+    setState((s) => ({ ...s, error }));
+  }, []);
+
+  const list = useCallback(
+    async (params?: Record<string, any>): Promise<ParsedListResponse> => {
+      setLoading(true);
+      setError(null);
+      try {
+        const api = getApi();
+        const res = await api.get(resource.path, { params });
+        const data = res.data;
+
+        if (resource.pagination) {
+          if (!data || typeof data !== "object" || !Array.isArray(data.items)) {
+            throw new Error(`Expected paginated response { total, items } from ${resource.path}`);
+          }
+          return { items: data.items, total: data.total ?? data.items.length };
+        }
+
+        if (!Array.isArray(data)) {
+          throw new Error(`Expected array response from ${resource.path}`);
+        }
+        return { items: data };
+      } catch (e: any) {
+        const msg = parseError(e);
+        setError(msg);
+        return { items: [] };
+      } finally {
+        setLoading(false);
+      }
+    },
+    [resource.path, resource.pagination, setLoading, setError]
+  );
+
+  const get = useCallback(
+    async (id: string | number): Promise<any> => {
+      setLoading(true);
+      setError(null);
+      try {
+        const api = getApi();
+        const res = await api.get(`${resource.path}/${id}`);
+        return res.data;
+      } catch (e: any) {
+        setError(parseError(e));
+        throw e;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [resource.path, setLoading, setError]
+  );
+
+  const create = useCallback(
+    async (data: any): Promise<any> => {
+      setLoading(true);
+      setError(null);
+      try {
+        const api = getApi();
+        const res = await api.post(resource.path, data);
+        return res.data;
+      } catch (e: any) {
+        setError(parseError(e));
+        throw e;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [resource.path, setLoading, setError]
+  );
+
+  const update = useCallback(
+    async (id: string | number, data: any): Promise<any> => {
+      setLoading(true);
+      setError(null);
+      try {
+        const api = getApi();
+        const method = resource.updateMethod ?? "put";
+        const res = await (method === "patch" ? api.patch : api.put)(`${resource.path}/${id}`, data);
+        return res.data;
+      } catch (e: any) {
+        setError(parseError(e));
+        throw e;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [resource.path, resource.updateMethod, setLoading, setError]
+  );
+
+  const remove = useCallback(
+    async (id: string | number): Promise<void> => {
+      setLoading(true);
+      setError(null);
+      try {
+        const api = getApi();
+        await api.delete(`${resource.path}/${id}`);
+      } catch (e: any) {
+        setError(parseError(e));
+        throw e;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [resource.path, setLoading, setError]
+  );
+
+  const stream = useCallback(
+    (handlers: StreamHandlers): StreamSubscription => {
+      if (!resource.streaming) {
+        throw new Error(`Resource "${resourceName}" does not support streaming`);
+      }
+      const api = getApi();
+      const baseUrl = (api.defaults.baseURL ?? "").replace(/\/+$/, "");
+      const url = baseUrl + resource.path;
+      const es = new EventSource(url);
+
+      es.onopen = () => handlers.onOpen?.();
+      es.onmessage = (e) => {
+        try {
+          const data = JSON.parse(e.data);
+          handlers.onEvent(data);
+        } catch {
+          // ignore malformed JSON payloads
+        }
+      };
+      es.onerror = (e) => {
+        handlers.onError?.(e);
+      };
+
+      return { close: () => es.close() };
+    },
+    [resource.path, resource.streaming, resourceName]
+  );
+
+  const components = useMemo(
+    () => {
+      const map: Record<string, React.FC<FilterComponentProps>> = {};
+      for (const field of resource.fields) {
+        map[field.name] = buildFilterComponent(field, resourceName);
+      }
+      return map;
+    },
+    [resource.fields, resourceName]
+  );
+
+  return { resource, components, list, get, create, update, remove, stream: resource.streaming ? stream : undefined, loading: state.loading, error: state.error };
+}

react-openapi/src/hooks/useApi.ts

@@ -0,0 +1,45 @@
+import axios, { AxiosInstance } from "axios";
+
+let apiClient: AxiosInstance | null = null;
+
+export function initApi(baseUrl: string, getToken?: () => string | null): AxiosInstance {
+  if (apiClient && apiClient.defaults.baseURL === baseUrl) {
+    return apiClient;
+  }
+
+  apiClient = axios.create({
+    baseURL: baseUrl,
+    headers: { "Content-Type": "application/json" },
+  });
+
+  apiClient.interceptors.request.use((config) => {
+    const token = getToken?.();
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  });
+
+  apiClient.interceptors.response.use(
+    (res) => res,
+    (error) => {
+      if (error.response?.status === 401 && getToken) {
+        const currentToken = getToken();
+        if (currentToken) {
+          const tokenStore = { clear: () => localStorage.removeItem("token") };
+          tokenStore.clear();
+        }
+      }
+      return Promise.reject(error);
+    }
+  );
+
+  return apiClient;
+}
+
+export function getApi(): AxiosInstance {
+  if (!apiClient) {
+    throw new Error("API client not initialized. Make sure AppProvider is mounted.");
+  }
+  return apiClient;
+}

react-openapi/src/spec-loader.ts

@@ -0,0 +1,17 @@
+import * as yaml from "js-yaml";
+import type { OpenApiSpec } from "./types";
+
+export async function loadSpec(url: string): Promise<OpenApiSpec> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch spec: ${response.status} ${response.statusText}`);
+  }
+  const text = await response.text();
+
+  const parsed = yaml.load(text);
+  if (!parsed || typeof parsed !== "object") {
+    throw new Error("Spec is empty or not an object");
+  }
+
+  return parsed as OpenApiSpec;
+}

react-openapi/src/spec-validator.ts

@@ -0,0 +1,132 @@
+import type { OpenApiSpec, ValidationMessage } from "./types";
+
+export function validateSpec(spec: OpenApiSpec): ValidationMessage[] {
+  const messages: ValidationMessage[] = [];
+  const schemas = (spec.components?.schemas ?? {}) as Record<string, any>;
+  const paths = spec.paths ?? {};
+
+  if (!spec.openapi) {
+    messages.push({ type: "error", message: "Missing 'openapi' version field" });
+  }
+
+  if (!spec.info?.title) {
+    messages.push({ type: "error", message: "Missing 'info.title'" });
+  }
+
+  if (!spec.servers?.[0]?.url) {
+    messages.push({ type: "warning", message: "No 'servers[0].url' defined — provide 'baseApiUrl' in specConfiguration" });
+  }
+
+  for (const [schemaName, schema] of Object.entries(schemas)) {
+    if (!schema || typeof schema !== "object") continue;
+
+    const isResource = typeof schema["x-resource"] === "string";
+
+    if (!isResource) continue;
+
+    const resourcePath = `/${schema["x-resource"]}`;
+
+    if (!schema["x-primary-key"]) {
+      messages.push({ type: "error", message: `Schema "${schemaName}" is missing 'x-primary-key'` });
+    }
+
+    if (!schema["x-display-format"]) {
+      messages.push({ type: "error", message: `Resource schema "${schemaName}" is missing 'x-display-format'` });
+    }
+
+    if (!schema["x-list-columns"]) {
+      messages.push({ type: "error", message: `Resource schema "${schemaName}" is missing 'x-list-columns'` });
+    }
+
+    if (Array.isArray(schema["x-list-columns"])) {
+      const props = schema.properties ?? {};
+      for (const col of schema["x-list-columns"]) {
+        if (!props[col]) {
+          messages.push({ type: "error", message: `"${schemaName}.x-list-columns" references "${col}" but no such property exists` });
+        }
+      }
+    }
+
+    const props = schema.properties ?? {};
+    for (const [propName, _raw] of Object.entries(props)) {
+      const prop = _raw as any;
+      if (!prop || typeof prop !== "object") continue;
+      if (!prop["x-label"]) {
+        messages.push({ type: "error", message: `Property "${schemaName}.${propName}" is missing 'x-label'` });
+      }
+      if (prop["x-order"] === undefined || prop["x-order"] === null) {
+        messages.push({ type: "error", message: `Property "${schemaName}.${propName}" is missing 'x-order'` });
+      }
+
+      if (prop["$ref"] && !prop["x-fk"]) {
+        const refName = (prop["$ref"] as string).split("/").pop();
+        messages.push({ type: "info", message: `"${schemaName}.${propName}" uses $ref to "${refName}" without x-fk — will render inline` });
+      }
+
+      if (prop.type === "array" && prop.items?.$ref && !prop["x-fk"]) {
+        const refName = (prop.items.$ref as string).split("/").pop();
+        messages.push({ type: "info", message: `"${schemaName}.${propName}" is an array of $ref to "${refName}" without x-fk — will render inline` });
+      }
+
+      if (prop["x-fk"]) {
+        const fkResource = prop["x-fk"].resource as string;
+        const targetSchema = Object.entries(schemas as Record<string, any>).find(([, s]) => s?.["x-resource"] === fkResource);
+        if (!targetSchema) {
+          messages.push({ type: "error", message: `"${schemaName}.${propName}" x-fk references resource "${fkResource}" but no schema has x-resource="${fkResource}"` });
+        } else {
+          const [, target] = targetSchema;
+          if (!target["x-display-format"]) {
+            messages.push({ type: "error", message: `FK target "${fkResource}" (referenced by "${schemaName}.${propName}") is missing 'x-display-format'` });
+          }
+          if (!target["x-primary-key"]) {
+            messages.push({ type: "error", message: `FK target "${fkResource}" (referenced by "${schemaName}.${propName}") is missing 'x-primary-key'` });
+          }
+        }
+      }
+    }
+
+    if (!paths[resourcePath]) {
+      messages.push({ type: "error", message: `x-resource "${schema["x-resource"]}" points to path "${resourcePath}" but no such path exists` });
+      continue;
+    }
+
+    const collectionPath = paths[resourcePath] as any;
+
+    if (!collectionPath?.get) {
+      messages.push({ type: "error", message: `"${resourcePath}" has no GET list endpoint — datatable cannot be populated` });
+    }
+
+    const isSSE = collectionPath?.get?.["x-sse"] === true;
+    if (isSSE) continue;
+
+    const listParams = collectionPath?.get?.parameters ?? [];
+    const limitParam = listParams.find((p: any) => p.in === "query" && p.name === "limit");
+    const offsetParam = listParams.find((p: any) => p.in === "query" && p.name === "offset");
+    if (limitParam || offsetParam) {
+      if (!limitParam?.schema?.default) {
+        messages.push({ type: "error", message: `"${resourcePath}.get" has pagination params but 'limit' schema is missing 'default'` });
+      }
+    }
+
+    if (!collectionPath?.post) {
+      messages.push({ type: "error", message: `"${resourcePath}" has no POST endpoint — creation not possible` });
+    }
+
+    const itemPath = paths[`${resourcePath}/{id}`] as any;
+    if (!itemPath) {
+      messages.push({ type: "error", message: `No path "${resourcePath}/{id}" found — detail/update/delete not possible` });
+    } else {
+      if (!itemPath?.get) {
+        messages.push({ type: "error", message: `"${resourcePath}/{id}" has no GET endpoint — detail view not possible` });
+      }
+      if (!itemPath?.put) {
+        messages.push({ type: "info", message: `"${resourcePath}/{id}" has no PUT endpoint — update not available` });
+      }
+      if (!itemPath?.delete) {
+        messages.push({ type: "info", message: `"${resourcePath}/{id}" has no DELETE endpoint — deletion not available` });
+      }
+    }
+  }
+
+  return messages;
+}

react-openapi/src/transformers/field-config.ts

@@ -0,0 +1,53 @@
+import type { FieldConfig } from "../types";
+
+function resolveRef(ref: string): string | undefined {
+  return ref.split("/").pop();
+}
+
+export function extractFields(schemaName: string, schema: any, schemas: Record<string, any>): FieldConfig[] {
+  const props = schema.properties ?? {};
+  const requiredFields: string[] = schema.required ?? [];
+
+  return Object.entries(props)
+    .filter(([, prop]: [string, any]) => prop && typeof prop === "object")
+    .map(([name, prop]: [string, any]) => {
+      const isDirectRef = !!prop.$ref;
+      const isItemsRef = prop.type === "array" && !!prop.items?.$ref;
+      const isRef = isDirectRef || isItemsRef;
+
+      const refSchemaName = isDirectRef
+        ? resolveRef(prop.$ref)
+        : isItemsRef
+        ? resolveRef(prop.items.$ref)
+        : undefined;
+
+      const refSchema = refSchemaName ? schemas[refSchemaName] : undefined;
+
+      const inlineDisplayFormat = isRef && refSchema && !prop["x-fk"]
+        ? refSchema["x-display-format"]
+        : undefined;
+
+      const field: FieldConfig = {
+        name,
+        label: prop["x-label"],
+        description: prop["x-description"] ?? prop["x-label"] ?? name,
+        type: isRef && refSchema ? "object" : (prop.type ?? "string"),
+        format: prop.format,
+        order: prop["x-order"],
+        hidden: prop["x-hidden"] ?? {},
+        filterable: prop["x-filterable"] ?? false,
+        sortable: prop["x-sortable"] ?? false,
+        readOnly: prop.readOnly ?? false,
+        required: requiredFields.includes(name),
+        enumValues: prop.enum,
+        fk: prop["x-fk"],
+        uiType: prop["x-ui-type"],
+        uploadUrl: prop["x-upload-url"],
+        refSchema: refSchemaName,
+        inlineDisplayFormat,
+        isArray: prop.type === "array",
+      };
+
+      return field;
+    });
+}

react-openapi/src/transformers/relationship-config.ts

@@ -0,0 +1,32 @@
+import type { FKFieldConfig, ResourceRelationship } from "../types";
+
+export function extractRelationships(schema: any, schemas: Record<string, any>): ResourceRelationship[] {
+  const props = schema.properties ?? {};
+  const rels: ResourceRelationship[] = [];
+
+  for (const [name, _raw] of Object.entries(props)) {
+    const prop = _raw as any;
+    if (!prop || typeof prop !== "object") continue;
+
+    if (!prop["x-fk"]) continue;
+
+    const fkResource = prop["x-fk"].resource as string;
+    const targetEntry = Object.entries(schemas).find(([, s]) => s?.["x-resource"] === fkResource);
+    const targetSchemaName = targetEntry ? targetEntry[0] : fkResource;
+
+    const prefetch = prop["x-fk"].prefetch ?? false;
+    console.log(`[FK] extracted relationship: field="${name}" target="${fkResource}" prefetch=${prefetch} rawPrefetch=${prop["x-fk"].prefetch}`);
+
+    rels.push({
+      fieldName: name,
+      config: {
+        resource: fkResource,
+        prefetch,
+      },
+      targetSchemaName,
+    });
+  }
+
+  console.log(`[FK] total relationships extracted: ${rels.length}`);
+  return rels;
+}

react-openapi/src/transformers/resource-config.ts

@@ -0,0 +1,108 @@
+import type { OpenApiSpec, ResourceConfig, FieldConfig } from "../types";
+import { extractFields } from "./field-config";
+import { extractRelationships } from "./relationship-config";
+
+function detectPagination(pathObj: any): { limitParam: string; offsetParam: string; defaultLimit: number } | null {
+  const params = pathObj?.get?.parameters ?? [];
+  const limit = params.find((p: any) => p.in === "query" && p.name === "limit");
+  const offset = params.find((p: any) => p.in === "query" && p.name === "offset");
+  if (limit && offset) {
+    return {
+      limitParam: "limit",
+      offsetParam: "offset",
+      defaultLimit: limit.schema.default,
+    };
+  }
+  return null;
+}
+
+function hasOperation(pathObj: any, method: string): boolean {
+  return !!pathObj?.[method];
+}
+
+function sortFields(fields: FieldConfig[]): FieldConfig[] {
+  return [...fields].sort((a, b) => {
+    const orderDiff = a.order - b.order;
+    if (orderDiff !== 0) return orderDiff;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+function formatDisplayName(name: string): string {
+  return name.split(/[-_]/).map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join(" ");
+}
+
+const SSE_RECEIVED_FIELD: FieldConfig = {
+  name: "_received_at",
+  label: "Received",
+  description: "Timestamp when the event was received",
+  type: "string",
+  format: "date-time",
+  order: 0,
+  hidden: {},
+  filterable: false,
+  sortable: true,
+  readOnly: true,
+  required: false,
+  isArray: false,
+};
+
+export function buildResourceConfigs(spec: OpenApiSpec): ResourceConfig[] {
+  const schemas = spec.components?.schemas ?? {};
+  const paths = spec.paths ?? {};
+  const configs: ResourceConfig[] = [];
+
+  for (const [schemaName, schema] of Object.entries(schemas)) {
+    if (!schema || typeof schema !== "object") continue;
+
+    const resourceName = schema["x-resource"];
+    if (!resourceName || typeof resourceName !== "string") continue;
+
+    const resourcePath = `/${resourceName}`;
+    const itemPath = `${resourcePath}/{id}`;
+    const collectionPathObj = paths[resourcePath];
+    const itemPathObj = paths[itemPath];
+
+    const fields = extractFields(schemaName, schema, schemas);
+    const relationships = extractRelationships(schema, schemas);
+    const hasSSE = collectionPathObj?.get?.["x-sse"] === true;
+
+    const resource: ResourceConfig = {
+      name: resourceName,
+      schemaName,
+      displayName: formatDisplayName(resourceName),
+      path: resourcePath,
+      primaryKey: schema["x-primary-key"],
+      displayFormat: schema["x-display-format"],
+      listColumns: schema["x-list-columns"],
+      fields,
+      orderedFields: sortFields(fields),
+      operations: {
+        list: hasOperation(collectionPathObj, "get"),
+        get: hasOperation(itemPathObj, "get"),
+        create: hasOperation(collectionPathObj, "post"),
+        update: hasOperation(itemPathObj, "put") || hasOperation(itemPathObj, "patch"),
+        delete: hasOperation(itemPathObj, "delete"),
+      },
+      updateMethod: hasOperation(itemPathObj, "patch") && !hasOperation(itemPathObj, "put") ? "patch" : "put",
+      pagination: detectPagination(collectionPathObj),
+      relationships,
+      streaming: hasSSE || undefined,
+    };
+
+    if (hasSSE) {
+      resource.operations = { list: true, get: false, create: false, update: false, delete: false };
+      resource.updateMethod = "put";
+      resource.pagination = null;
+      resource.relationships = [];
+      resource.fields = [SSE_RECEIVED_FIELD, ...fields.map((f) => ({ ...f, readOnly: true }))];
+      resource.orderedFields = sortFields(resource.fields);
+      resource.listColumns = ["_received_at", ...resource.listColumns];
+      resource.primaryKey = "_received_at";
+    }
+
+    configs.push(resource);
+  }
+
+  return configs;
+}

react-openapi/src/types.ts

@@ -0,0 +1,97 @@
+export type FilterMode = "client" | "server";
+
+export interface ResourceConfiguration {
+  filterOptions?: {
+    mode?: FilterMode;
+  };
+}
+
+export interface SpecConfiguration {
+  specUrl: string;
+  baseApiUrl?: string;
+  title?: string;
+  getToken?: () => string | null;
+  resourceConfig?: Record<string, ResourceConfiguration>;
+}
+
+export interface ValidationMessage {
+  type: "error" | "warning" | "info";
+  message: string;
+}
+
+export interface ResourceRelationship {
+  fieldName: string;
+  config: FKFieldConfig;
+  targetSchemaName: string;
+}
+
+export interface ResourceConfig {
+  name: string;
+  schemaName: string;
+  displayName: string;
+  path: string;
+  primaryKey: string;
+  displayFormat: string;
+  listColumns: string[];
+  fields: FieldConfig[];
+  orderedFields: FieldConfig[];
+  operations: {
+    list: boolean;
+    get: boolean;
+    create: boolean;
+    update: boolean;
+    delete: boolean;
+  };
+  updateMethod: "put" | "patch";
+  pagination: {
+    limitParam: string;
+    offsetParam: string;
+    defaultLimit: number;
+  } | null;
+  relationships: ResourceRelationship[];
+  streaming?: boolean;
+}
+
+export interface FieldConfig {
+  name: string;
+  label: string;
+  description: string;
+  type: string;
+  format?: string;
+  order: number;
+  hidden: { form?: boolean; list?: boolean; detail?: boolean };
+  filterable: boolean;
+  sortable: boolean;
+  readOnly: boolean;
+  required: boolean;
+  enumValues?: string[];
+  fk?: FKFieldConfig;
+  uiType?: string;
+  uploadUrl?: string;
+  refSchema?: string;
+  inlineDisplayFormat?: string;
+  isArray: boolean;
+}
+
+export interface FKFieldConfig {
+  resource: string;
+  prefetch: boolean;
+}
+
+export interface OpenApiSpec {
+  openapi: string;
+  info: {
+    title: string;
+    version: string;
+  };
+  servers?: { url: string }[];
+  components?: {
+    schemas?: Record<string, any>;
+  };
+  paths?: Record<string, any>;
+}
+
+export interface ParsedListResponse {
+  total?: number;
+  items?: any[];
+}

react-openapi/types/config.ts

@@ -1,65 +0,0 @@
-export type FieldType =
-  | 'string'
-  | 'number'
-  | 'boolean'
-  | 'date'
-  | 'datetime'
-  | 'markdown'
-  | 'enum'
-  | 'image'
-  | 'object'
-  | 'array';
-
-export interface SelectOption {
-  key: string;
-  value: string;
-}
-
-export interface EnumOption {
-  key: string;
-  value: string;
-}
-
-export interface ResourceField {
-  displayFormat: string;
-  type: FieldType;
-  label: string;
-  required?: boolean;
-  options?: string[];
-  readOnly?: boolean;
-  schema?: Record<string, ResourceField>;
-  formatter?: (value: any) => string;
-  relation?: string;
-  filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
-  enumOption?: EnumOption;
-  enumLabels?: Record<string, string>;
-}
-
-export type ResourceMode = "server" | "client";
-
-export interface ResourceConfig {
-  name: string;
-  label: string;
-  pluralLabel: string;
-  endpoint: string;
-  primaryKey: string;
-  fields: Record<string, ResourceField>;
-  pagination?: boolean;
-  hidden?: boolean;
-  filterOptions?: {
-    mode?: ResourceMode;
-    fields?: string[];
-  };
-  enumOption?: EnumOption;
-}
-
-export interface AppConfig {
-  baseUrl: string;
-  authBaseUrl: string;
-  resources: ResourceConfig[];
-  enums: Record<string, string[]>;
-  profile?: {
-    resource: string;
-    extraFields?: Record<string, any>;
-  };
-}

react-openapi/types/overrides.ts

@@ -1,89 +0,0 @@
-import { ResourceField, FieldType } from './config';
-
-export interface EnumOption {
-  key: string;
-  value: string;
-}
-
-export interface FieldOverride {
-  displayFormat?: string;
-  display?: boolean;
-  formatter?: (value: any) => string;
-  filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
-  enumLabels?: Record<string, string>;
-  // New optional properties to support custom config extensions
-  path?: string;
-  refers?: string;
-  // Added support for overriding the base field type and label
-  type?: FieldType;
-  label?: string;
-}
-
-export interface ResourceOverride {
-  fields?: Record<string, FieldOverride>;
-  pagination?: boolean;
-  hidden?: boolean;
-  filterOptions?: {
-    mode?: "server" | "client";
-    fields?: string[];
-  };
-  enumOption?: EnumOption;
-  // New optional property for reference‑type resources
-  referenceOptions?: {
-    enumOption?: EnumOption;
-    autoComplete?: boolean;
-    prefetch?: boolean;
-  };
-}
-
-export interface FieldComponentProps {
-  name: string;
-  field: ResourceField;
-  value: any;
-  onChange: (val: any) => void;
-  disabled?: boolean;
-  error?: string;
-  baseUrl?: string;
-  relationDataMap?: Record<string, any[]>;
-  uploadFile?: (file: File) => Promise<string | null>;
-  uploading?: boolean;
-}
-
-export type FieldComponent = React.ComponentType<FieldComponentProps>;
-
-export type FieldComponents = Partial<Record<FieldType, FieldComponent>> & {
-  relation?: FieldComponent;
-  image?: FieldComponent;
-  default?: FieldComponent;
-  dateRange?: FieldComponent;
-  numberRange?: FieldComponent;
-  FormField?: React.ComponentType<any>;
-  GenericForm?: React.ComponentType<any>;
-};
-
-export interface CellRendererProps {
-  value: any;
-  row: any;
-  field: ResourceField;
-  fieldKey: string;
-  config: import('./config').ResourceConfig;
-  onNavigate?: (resourceName: string, id: string) => void;
-  isMobile?: boolean;
-}
-
-export type CellRenderer = React.ComponentType<CellRendererProps>;
-
-export interface EnhancedTableComponents {
-  cellRenderers?: Partial<Record<FieldType, CellRenderer>>;
-}
-
-export interface FilterBarComponents {
-  filterInputs?: Record<string, React.ComponentType<{
-    field: ResourceField;
-    value: any;
-    onChange: (val: any) => void;
-    options: string[];
-  }>>;
-}
-
-export type { FieldType };

react-openapi/utils/openapi_loader.ts

@@ -1,249 +0,0 @@
-import SwaggerParser from "@apidevtools/swagger-parser";
-import { AppConfig, ResourceConfig, ResourceField, FieldType } from "../types/config";
-
-/**
- * Maps OpenAPI property types to our internal FieldType
- */
-function mapOpenApiType(prop: any): FieldType {
-  const type = prop.type;
-  const format = prop.format;
-
-  if (format === "date-time") return "datetime";
-  if (format === "date") return "date";
-  if (prop.enum) return "enum";
-  if (
-    type === "string" &&
-    (prop.description?.toLowerCase().includes("image") ||
-      prop.name?.toLowerCase().includes("icon"))
-  )
-    return "image";
-
-  switch (type) {
-    case "integer":
-    case "number":
-      return "number";
-    case "boolean":
-      return "boolean";
-    case "object":
-      return "object";
-    case "array":
-      return "array";
-    default:
-      return "string";
-  }
-}
-
-/**
- * Recursively converts OpenAPI schemas to ResourceField map
- */
-function mergeProperties(schema: any): { properties: Record<string, any>; required: string[] } {
-  let properties: Record<string, any> = {};
-  let required: string[] = [];
-
-  if (schema.allOf) {
-    for (const sub of schema.allOf) {
-      const merged = mergeProperties(sub);
-      properties = { ...properties, ...merged.properties };
-      required = [...required, ...merged.required];
-    }
-  }
-  if (schema.properties) {
-    properties = { ...properties, ...schema.properties };
-  }
-  if (schema.required) {
-    required = [...required, ...schema.required];
-  }
-  return { properties, required };
-}
-
-function parseSchemaFields(
-  schema: any,
-  resourceName: string,
-  schemaToResourceMap: Map<any, string>,
-  configuration: Record<string, any> = {}
-): Record<string, ResourceField> {
-  const fields: Record<string, ResourceField> = {};
-  const { properties, required } = mergeProperties(schema);
-  const overrides = configuration[resourceName]?.fields || {};
-  console.log('inside parseSchemaFields configuration...', configuration['accounts']['referenceOptions'])
-
-  for (const [key, prop] of Object.entries(properties) as [string, any]) {
-    // Resolve oneOf/anyOf by merging all branch properties
-    let resolvedProp = prop;
-    if (prop.oneOf || prop.anyOf) {
-      const branches = prop.oneOf || prop.anyOf;
-      const merged = mergeProperties({ allOf: branches });
-      resolvedProp = { ...prop, type: 'object', properties: merged.properties, required: merged.required };
-    }
-
-    const type = mapOpenApiType(resolvedProp);
-    if (type === 'enum' && (!resolvedProp.enum || resolvedProp.enum.length === 0)) {
-      throw new Error(
-        `OpenAPI schema error: field "${resourceName}.${key}" is type "enum" but has no enum values. ` +
-        `Add an "enum" array with at least one value to the OpenAPI schema definition.`
-      );
-    }
-    const override = overrides[key];
-
-    // Explicitly skip 'id' as it's the primary key and handled elsewhere
-    if (key === "id" || override?.display === false) continue;
-
-    fields[key] = {
-      type,
-      label:
-        resolvedProp.title ||
-        key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " "),
-      required: required.includes(key),
-      options: resolvedProp.enum,
-      readOnly:
-        resolvedProp.readOnly ||
-        key === "created_at" ||
-        key === "updated_at",
-      ...override,
-    };
-
-    // STRICT RELATION DETECTION
-    // A field is a relation ONLY if its schema object (or items schema) 
-    // exactly matches a schema that is defined as a resource.
-    let targetSchema = resolvedProp;
-    if (type === "array" && resolvedProp.items) {
-      targetSchema = resolvedProp.items;
-    }
-
-    // Check if this schema object is registered as a resource
-    const relation = schemaToResourceMap.get(targetSchema);
-    if (relation) {
-      fields[key].relation = relation;
-
-        // Propagate enumOption from target resource config, or derive from target schema
-        const explicitEnumOption = configuration[relation].referenceOptions.enumOption;
-        console.log('if relation configuration...', configuration['accounts']['referenceOptions'])
-        if (explicitEnumOption) {
-          fields[key].enumOption = explicitEnumOption;
-        } else {
-          // No explicit enumOption supplied – this is a configuration error.
-          // We abort loading so the problem is visible immediately.
-          throw new Error(
-            `Missing enumOption for relation "${relation}" on field "${key}". ` +
-            `Define referenceOptions.enumOption in the configuration for resource "${relation}".`
-          );
-        }
-
-    }
-
-    // Recursively parse nested objects (only if not a relation)
-    if (fields[key].type === "object" && resolvedProp.properties && !relation) {
-      console.log('recursive configuration...', configuration['accounts']['referenceOptions'])
-      fields[key].schema = parseSchemaFields(resolvedProp, resourceName, schemaToResourceMap, configuration);
-    }
-  }
-
-  return fields;
-}
-
-/**
- * Scans paths to identify resources and their basic configuration
- */
-export async function loadConfigFromOpenApi(baseUrl: string, configuration: Record<string, any> = {}, profileConfiguration: any = {}): Promise<AppConfig> {
-  console.log('init configuration...', configuration['accounts']['referenceOptions'])
-  // Use SwaggerParser to dereference the spec.
-  // Dereferencing preserves object identity for $ref targets.
-  const api = await SwaggerParser.dereference(
-    new URL("/openapi.json", baseUrl).href
-  );
-
-  const resources: ResourceConfig[] = [];
-  const paths = api.paths || {};
-
-  // Group paths by base resource name
-  const resourcePaths: Record<string, any> = {};
-  for (const path of Object.keys(paths)) {
-    const base = path.split("/")[1];
-    if (!base) continue;
-
-    if (!resourcePaths[base]) resourcePaths[base] = { path, methods: [] };
-    const methods = Object.keys(paths[path] || {});
-    resourcePaths[base].methods.push(...methods);
-
-    // Identify the list endpoint for this resource
-    if (!resourcePaths[base].listPath && !path.includes("{") && paths[path]?.get?.responses?.["200"]) {
-      resourcePaths[base].listPath = path;
-    }
-  }
-
-  // 1. Identify which schema objects correspond to which resources
-  const schemaToResourceMap = new Map<any, string>();
-  for (const [name, info] of Object.entries(resourcePaths)) {
-    const listPath = info.listPath || `/${name}`;
-    const listOp = paths[listPath]?.get;
-    if (!listOp) continue;
-
-    // @ts-ignore
-    const responseSchema = listOp.responses?.["200"]?.content?.["application/json"]?.schema;
-    let schemaObj = responseSchema;
-    if (responseSchema?.type === "array" && responseSchema.items) {
-      schemaObj = responseSchema.items;
-    }
-
-    if (schemaObj) {
-      schemaToResourceMap.set(schemaObj, name);
-      resourcePaths[name].schemaObj = schemaObj;
-    }
-  }
-
-  // 2. Generate ResourceConfig for each identified resource
-  for (const [name, info] of Object.entries(resourcePaths)) {
-    const listPath = info.listPath || `/${name}`;
-    const listOp = paths[listPath]?.get;
-    if (!listOp || !info.schemaObj) continue;
-
-    const schema = info.schemaObj;
-    const label = name.charAt(0).toUpperCase() + name.slice(1, -1);
-    const pluralLabel = name.charAt(0).toUpperCase() + name.slice(1);
-
-    console.log('before parseSchemaFields configuration...', configuration['accounts']['referenceOptions'])
-    const fields = parseSchemaFields(schema, name, schemaToResourceMap, configuration);
-
-    const resourceOverride = configuration[name] || {};
-
-    const fo = resourceOverride.filterOptions || {};
-
-    resources.push({
-      name,
-      label: schema.title || label,
-      pluralLabel: pluralLabel,
-      endpoint: listPath,
-      primaryKey: "id",
-      fields,
-      pagination: resourceOverride.pagination,
-      hidden: resourceOverride.hidden,
-      filterOptions: {
-        mode: fo.mode || "server",
-        fields: fo.fields,
-      },
-    });
-  }
-
-  // Collect standalone enum schemas (e.g. FetchRequestStatus, AccountType, etc.)
-  const enums: Record<string, string[]> = {};
-  const apiDoc = api as any;
-  if (apiDoc.components?.schemas) {
-    for (const [name, schema] of Object.entries(apiDoc.components.schemas) as [string, any]) {
-      if (schema.enum) {
-        enums[name] = schema.enum;
-      }
-    }
-  }
-
-  // @ts-ignore
-  const serverBaseUrl = import.meta.env.VITE_API_BASE_URL || (api.servers?.[0]?.url ?? "")
-  // @ts-ignore
-  const authBaseUrl = import.meta.env.VITE_AUTH_BASE_URL || ""
-  return {
-    baseUrl: serverBaseUrl,
-    authBaseUrl: authBaseUrl,
-    resources,
-    enums,
-    profile: profileConfiguration,
-  };
-}

react-openapi/utils/options.ts

@@ -1,39 +0,0 @@
-import { ResourceField, SelectOption } from "../types/config";
-
-export function resolveTemplate(template: string, item: any): string {
-  if (/\{(\w+)\}/.test(template)) {
-    return template.replace(/\{(\w+)\}/g, (_, field: string) => String(item[field] ?? ''));
-  }
-  return String(item[template] ?? '');
-}
-
-export function getFieldOptions(field: ResourceField, relationData?: any[]): SelectOption[] {
-  if (field.type === 'enum') {
-    return (field.options ?? []).map(opt => ({
-      key: opt,
-      value: field.enumLabels?.[opt] ?? opt,
-    }));
-  }
-
-  if (field.relation) {
-    const data = Array.isArray(relationData) ? relationData : [];
-    const enumOption = field.enumOption;
-    if (!enumOption) {
-      throw new Error(
-        `Missing enumOption for relation "${field.relation}" on field "${field}". ` +
-        `Define referenceOptions.enumOption in the configuration for resource "${field.relation}".`
-      );
-    }
-
-    return data.map(item => ({
-      key: String(item[enumOption.key]),
-      value: resolveTemplate(enumOption.value, item),
-    }));
-  }
-
-  return [];
-}
-
-export function toGridValueOptions(options: SelectOption[]): { value: string; label: string }[] {
-  return options.map(opt => ({ value: opt.key, label: opt.value }));
-}

src/Dashboard.tsx

@@ -23,7 +23,7 @@ import {
   useReport,
   prepareReport,
 } from "./features/report";
-import { useResourceByName } from "../react-openapi";
+import { useReportSnapshotsList } from "./features/report-snapshots";
 
 function formatSnapshotDate(iso: string) {
   const d = new Date(iso);
@@ -56,13 +56,13 @@ export default function Dashboard() {
 
   const [selectedSnapshotId, setSelectedSnapshotId] = React.useState<string | null>(null);
 
-  const { data: snapshotsData } = useResourceByName("reports").useList();
+  const { data: snapshotsData } = useReportSnapshotsList();
   const snapshotOptions = React.useMemo(() => {
     const options: { label: string; value: string | null }[] = [
       { label: "Latest (auto)", value: null },
     ];
-    if (snapshotsData?.data) {
+    if (snapshotsData?.items) {
-      for (const snap of snapshotsData.data) {
+      for (const snap of snapshotsData.items) {
         options.push({
           label: `Snapshot from ${formatSnapshotDate(snap.created_at)}`,
           value: snap.snapshot_id,

src/FetchRequestDetail.tsx

@@ -35,7 +35,8 @@ import type {
   ProgressMessage,
 } from "./features/fetch-requests";
 import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
-import { useResourceByName, useConfig, defaultFieldComponents } from "../react-openapi";
+import { useAppContext, useResource } from "../react-openapi";
+import { useQuery, useMutation } from "@tanstack/react-query";
 
 const statusColors: Record<FetchRequestStatus, "default" | "primary" | "warning" | "info" | "success" | "error"> = {
   pending: "default",
@@ -144,11 +145,17 @@ function isMathValid(candidate: { amount: number; balance: number }, prevBalance
 export default function FetchRequestDetail() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
-  const config = useConfig();
+  const { config } = useAppContext();
+  const { get, update } = useResource("fetch-requests");
 
-  const { useRead, usePatch } = useResourceByName("fetch-requests", { fieldComponents: defaultFieldComponents });
+  const { data: fetchRequest, isLoading, error: fetchError, refetch: refetchRequest } = useQuery({
-  const { data: fetchRequest, isLoading, error: fetchError, refetch: refetchRequest } = useRead(id!);
+    queryKey: ["fetch-requests", "detail", id],
-  const updateMutation = usePatch();
+    queryFn: () => get(id!),
+    enabled: !!id,
+  });
+  const updateMutation = useMutation({
+    mutationFn: ({ id: rid, data }: { id: string; data: any }) => update(rid, data),
+  });
   const resolveMutation = useResolveAmbiguity();
   const { data: ambiguities, refetch: refetchAmbiguities } = useFetchRequestAmbiguities(id!);
 
@@ -193,8 +200,8 @@ export default function FetchRequestDetail() {
   }, [fetchRequest, stepStats, liveParsedCount, txnBlockCount]);
 
   React.useEffect(() => {
-    if (!id || !config?.baseUrl) return;
+    if (!id || !config?.baseApiUrl) return;
-    const url = `${config.baseUrl}/fetch-requests/${id}/events`;
+    const url = `${config.baseApiUrl}/fetch-requests/${id}/events`;
     const es = new EventSource(url);
     sseRef.current = es;
 
@@ -243,7 +250,7 @@ export default function FetchRequestDetail() {
       es.close();
       sseRef.current = null;
     };
-  }, [id, config?.baseUrl]);
+  }, [id, config?.baseApiUrl]);
 
   React.useEffect(() => {
     if (feedRef.current) {

src/FetchRequests.tsx

@@ -47,8 +47,9 @@ import type {
 } from "./features/fetch-requests";
 import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
 import { useNavigate } from "react-router-dom";
-import { useResourceByName, useConfig, defaultFieldComponents } from "../react-openapi";
+import { useResource, FormFieldRenderer } from "../react-openapi";
-import type { ResourceField } from "../react-openapi";
+import type { FieldConfig } from "../react-openapi";
+import { useMutation, useQuery } from "@tanstack/react-query";
 
 const statusColors: Record<FetchRequestStatus, "default" | "primary" | "warning" | "info" | "success" | "error"> = {
   pending: "default",
@@ -70,6 +71,16 @@ const statusIcons: Record<FetchRequestStatus, React.ReactNode> = {
   failed: <ErrorIcon sx={{ fontSize: 16, color: "error.main" }} />,
 };
 
+const STATUS_OPTIONS: FetchRequestStatus[] = [
+  "pending",
+  "processing",
+  "paused",
+  "raw_expenses_done",
+  "enriched_done",
+  "completed",
+  "failed",
+];
+
 function formatDate(iso: string) {
   const d = new Date(iso);
   return d.toLocaleString();
@@ -107,33 +118,46 @@ export default function FetchRequests() {
   const [accountFilter, setAccountFilter] = React.useState("");
   const [sourceFilter, setSourceFilter] = React.useState<"all" | "file" | "email">("all");
 
-  const { useList, useCreate, usePatch, useDelete, components } = useResourceByName("fetch-requests", { fieldComponents: defaultFieldComponents });
+  const fr = useResource("fetch-requests");
-  const { data: listData, isLoading, isFetching, refetch } = useList({
+  const { list, create, update, remove, resource: fetchRes } = fr;
-    ...(statusFilter.length > 0 ? { status: statusFilter.join(",") } : {}),
+
-    ...(accountFilter ? { account_name: accountFilter } : {}),
+  const { data: listData, isLoading, isFetching, refetch } = useQuery({
-    ...(sourceFilter !== "all" ? { source_type: sourceFilter } : {}),
+    queryKey: ["fetch-requests", "list", { statusFilter, accountFilter, sourceFilter }],
+    queryFn: () => list({
+      ...(statusFilter.length > 0 ? { status: statusFilter.join(",") } : {}),
+      ...(accountFilter ? { account_name: accountFilter } : {}),
+      ...(sourceFilter !== "all" ? { source_type: sourceFilter } : {}),
+    }),
   });
 
-  const { useList: useAccountsList } = useResourceByName("accounts");
+  const { list: listAccounts } = useResource("accounts");
-  const { data: accountsData } = useAccountsList();
+  const { data: accountsData } = useQuery({
+    queryKey: ["accounts", "list"],
+    queryFn: () => listAccounts(),
+  });
   const accountOptions: string[] = React.useMemo(() => {
-    return (accountsData?.data ?? []).map((a: any) => a.name).filter(Boolean);
+    return (accountsData?.items ?? []).map((a: any) => a.name).filter(Boolean);
   }, [accountsData]);
 
-  const config = useConfig();
+  const fields = fetchRes?.orderedFields ?? [];
-  const fetchRes = config?.resources.find((r: any) => r.name === "fetch-requests");
+  const formatField: FieldConfig | undefined = fields.find(f => f.name === "format");
-  const formatField: ResourceField | undefined = fetchRes?.fields?.source?.schema?.format;
+  const formatOptions: string[] = formatField?.enumValues ?? [];
-  const formatOptions: string[] = formatField?.options ?? [];
+  const startDateField: FieldConfig | undefined = fields.find(f => f.name === "start_date");
-  const startDateField: ResourceField | undefined = fetchRes?.fields?.start_date;
+  const endDateField: FieldConfig | undefined = fields.find(f => f.name === "end_date");
-  const endDateField: ResourceField | undefined = fetchRes?.fields?.end_date;
+  const payorUsernameField: FieldConfig | undefined = fields.find(f => f.name === "payor_username");
-  const payorUsernameField: ResourceField | undefined = fetchRes?.fields?.payor_username;
 
-  const createMutation = useCreate();
+  const createMutation = useMutation({
-  const updateMutation = usePatch();
+    mutationFn: (data: any) => create(data),
-  const deleteMutation = useDelete();
+  });
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: any }) => update(id, data),
+  });
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => remove(id),
+  });
   const uploadMutation = useUploadFile();
 
-  const requests = listData?.data ?? [];
+  const requests = listData?.items ?? [];
 
   const handleUpload = async () => {
     if (!file) return;
@@ -262,9 +286,8 @@ export default function FetchRequests() {
                   Uploaded as: {uploadedPath}
                 </Alert>
               )}
-              {formatField && components?.FormField ? (
+              {formatField ? (
-                <components.FormField
+                <FormFieldRenderer
-                  name="format"
                   field={formatField}
                   value={format}
                   onChange={setFormat}
@@ -282,9 +305,8 @@ export default function FetchRequests() {
             </>
           ) : (
             <>
-              {formatField && components?.FormField ? (
+              {formatField ? (
-                <components.FormField
+                <FormFieldRenderer
-                  name="format"
                   field={formatField}
                   value={format}
                   onChange={setFormat}
@@ -314,9 +336,8 @@ export default function FetchRequests() {
             )}
             sx={{ "& .MuiOutlinedInput-root": { height: "auto", minHeight: "2.5rem" } }}
           />
-          {payorUsernameField && components?.FormField ? (
+          {payorUsernameField ? (
-            <components.FormField
+            <FormFieldRenderer
-              name="payor_username"
               field={payorUsernameField}
               value={payorUsername}
               onChange={setPayorUsername}
@@ -326,10 +347,9 @@ export default function FetchRequests() {
           )}
 
           <Box sx={{ display: "flex", gap: 2 }}>
-            {startDateField && components?.date ? (
+            {startDateField ? (
               <Box sx={{ flex: 1 }}>
-                <components.date
+                <FormFieldRenderer
-                  name="start_date"
                   field={startDateField}
                   value={startDate}
                   onChange={setStartDate}
@@ -347,10 +367,9 @@ export default function FetchRequests() {
                 sx={{ flex: 1 }}
               />
             )}
-            {endDateField && components?.date ? (
+            {endDateField ? (
               <Box sx={{ flex: 1 }}>
-                <components.date
+                <FormFieldRenderer
-                  name="end_date"
                   field={endDateField}
                   value={endDate}
                   onChange={setEndDate}
@@ -391,7 +410,7 @@ export default function FetchRequests() {
               input={<OutlinedInput label="Status" />}
               renderValue={(selected) => (selected as string[]).join(", ")}
             >
-              {(config?.enums?.FetchRequestStatus ?? []).map((s: string) => (
+              {STATUS_OPTIONS.map((s: string) => (
                 <MenuItem key={s} value={s}>{s.replace(/_/g, " ")}</MenuItem>
               ))}
             </Select>

src/ReportSnapshots.tsx

@@ -21,8 +21,8 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import AddCircleIcon from "@mui/icons-material/AddCircle";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import { useResourceByName, useConfig, defaultFieldComponents } from "../react-openapi";
+import { useResource } from "../react-openapi";
-import type { ResourceField } from "../react-openapi";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 interface ReportSnapshotQuery {
   accounts?: string[];
@@ -53,21 +53,24 @@ export default function ReportSnapshots() {
   const [deleteTarget, setDeleteTarget] = React.useState<ReportSnapshot | null>(null);
   const [createdSnapshotId, setCreatedSnapshotId] = React.useState<string | null>(null);
 
-  const { useList, useCreate, useDelete, components } = useResourceByName("reports", { fieldComponents: defaultFieldComponents });
+  const { list, create, remove } = useResource("reports");
 
-  const { data: listData, isLoading, isFetching, refetch } = useList();
+  const { data: listData, isLoading, isFetching, refetch } = useQuery({
-  const createMutation = useCreate();
+    queryKey: ["reports", "list"],
-  const deleteMutation = useDelete();
+    queryFn: () => list(),
+  });
+  const createMutation = useMutation({
+    mutationFn: (data: any) => create(data),
+  });
+  const queryClient = useQueryClient();
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => remove(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["reports", "list"] });
+    },
+  });
 
-  const config = useConfig();
+  const snapshots: ReportSnapshot[] = listData?.items ?? [];
-  const reportsRes = config?.resources.find((r: any) => r.name === "reports");
-  const ignoreSelfField: ResourceField | undefined = reportsRes?.fields?.ignore_self;
-  const startDateField: ResourceField | undefined = reportsRes?.fields?.start_date;
-  const endDateField: ResourceField | undefined = reportsRes?.fields?.end_date;
-  const minAmountField: ResourceField | undefined = reportsRes?.fields?.min_amount;
-  const maxAmountField: ResourceField | undefined = reportsRes?.fields?.max_amount;
-
-  const snapshots: ReportSnapshot[] = listData?.data ?? [];
 
   const handleCreate = async () => {
     try {
@@ -123,61 +126,50 @@ export default function ReportSnapshots() {
         </Typography>
 
         <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-          {ignoreSelfField && components?.FormField && (
+          <Box sx={{ display: "flex", gap: 2 }}>
-            <components.FormField
+            <Box sx={{ flex: 1 }}>
-              name="ignore_self"
+              <TextField
-              field={ignoreSelfField}
+                label="Start Date"
-              value={ignoreSelf}
+                type="date"
-              onChange={(val: boolean) => setIgnoreSelf(val)}
+                value={startDate}
-            />
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setStartDate(e.target.value)}
-          )}
+                size="small"
-
+                InputLabelProps={{ shrink: true }}
-            <Box sx={{ display: "flex", gap: 2 }}>
+                inputProps={{ max: new Date().toISOString().split("T")[0] }}
-              <Box sx={{ flex: 1 }}>
+              />
-                <TextField
-                  label="Start Date"
-                  type="date"
-                  value={startDate}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setStartDate(e.target.value)}
-                  size="small"
-                  InputLabelProps={{ shrink: true }}
-                  inputProps={{ max: new Date().toISOString().split("T")[0] }}
-                />
-              </Box>
-              <Box sx={{ flex: 1 }}>
-                <TextField
-                  label="End Date"
-                  type="date"
-                  value={endDate}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEndDate(e.target.value)}
-                  size="small"
-                  InputLabelProps={{ shrink: true }}
-                  inputProps={{ max: new Date().toISOString().split("T")[0] }}
-                />
-              </Box>
             </Box>
+            <Box sx={{ flex: 1 }}>
+              <TextField
+                label="End Date"
+                type="date"
+                value={endDate}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEndDate(e.target.value)}
+                size="small"
+                InputLabelProps={{ shrink: true }}
+                inputProps={{ max: new Date().toISOString().split("T")[0] }}
+              />
+            </Box>
+          </Box>
 
           <Box sx={{ display: "flex", gap: 2 }}>
-            {minAmountField && components?.FormField && (
+            <Box sx={{ flex: 1 }}>
-              <Box sx={{ flex: 1 }}>
+              <TextField
-                <components.FormField
+                label="Min Amount"
-                  name="min_amount"
+                type="number"
-                  field={minAmountField}
+                value={minAmount}
-                  value={minAmount}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMinAmount(e.target.value)}
-                  onChange={(val: string) => setMinAmount(val)}
+                size="small"
-                />
+              />
-              </Box>
+            </Box>
-            )}
+            <Box sx={{ flex: 1 }}>
-            {maxAmountField && components?.FormField && (
+              <TextField
-              <Box sx={{ flex: 1 }}>
+                label="Max Amount"
-                <components.FormField
+                type="number"
-                  name="max_amount"
+                value={maxAmount}
-                  field={maxAmountField}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMaxAmount(e.target.value)}
-                  value={maxAmount}
+                size="small"
-                  onChange={(val: string) => setMaxAmount(val)}
+              />
-                />
+            </Box>
-              </Box>
-            )}
           </Box>
 
           <Button

src/features/fetch-requests/useFetchRequests.ts

@@ -1,5 +1,4 @@
-import { useResourceByName } from "../../../react-openapi";
+import { useResource, getApi } from "../../../react-openapi";
-import { api } from "../../../react-openapi/api/client";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { ResolveAmbiguityPayload } from "./fetch-requests.models";
 
@@ -8,28 +7,41 @@ export function useFetchRequestsList(params?: {
   account_name?: string;
   source_type?: string;
 }) {
-  const { useList } = useResourceByName("fetch-requests");
+  const { list } = useResource("fetch-requests");
-  return useList(params);
+  return useQuery({
+    queryKey: ["fetch-requests", "list", params],
+    queryFn: () => list(params),
+  });
 }
 
 export function useFetchRequest(id: string) {
-  const { useRead } = useResourceByName("fetch-requests");
+  const { get } = useResource("fetch-requests");
-  return useRead(id);
+  return useQuery({
+    queryKey: ["fetch-requests", "detail", id],
+    queryFn: () => get(id),
+    enabled: !!id,
+  });
 }
 
 export function useCreateFetchRequest() {
-  const { useCreate } = useResourceByName("fetch-requests");
+  const { create } = useResource("fetch-requests");
-  return useCreate();
+  return useMutation({
+    mutationFn: (data: any) => create(data),
+  });
 }
 
 export function useUpdateFetchRequest() {
-  const { usePatch } = useResourceByName("fetch-requests");
+  const { update } = useResource("fetch-requests");
-  return usePatch();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: any }) => update(id, data),
+  });
 }
 
 export function useDeleteFetchRequest() {
-  const { useDelete } = useResourceByName("fetch-requests");
+  const { remove } = useResource("fetch-requests");
-  return useDelete();
+  return useMutation({
+    mutationFn: (id: string) => remove(id),
+  });
 }
 
 export function useUploadFile() {
@@ -37,6 +49,7 @@ export function useUploadFile() {
     mutationFn: async (file: File) => {
       const arrayBuffer = await file.arrayBuffer();
       const binary = new Uint8Array(arrayBuffer);
+      const api = getApi();
       const res = await api.post("/uploads", binary, {
         headers: {
           "Content-Type": file.type,
@@ -52,6 +65,7 @@ export function useFetchRequestAmbiguities(fetchRequestId: string) {
   return useQuery({
     queryKey: ["fetch-requests", fetchRequestId, "ambiguities"],
     queryFn: async () => {
+      const api = getApi();
       const res = await api.get(
         `/fetch-requests/${fetchRequestId}/ambiguities`
       );
@@ -72,6 +86,7 @@ export function useResolveAmbiguity() {
       ambiguityId: string;
       payload: ResolveAmbiguityPayload;
     }) => {
+      const api = getApi();
       const res = await api.post(
         `/ambiguities/${ambiguityId}/resolve`,
         payload

src/features/report-snapshots/index.ts

@@ -2,3 +2,8 @@ export type {
   ReportSnapshot,
   ReportQuery,
 } from "./report-snapshots.models";
+export {
+  useReportSnapshotsList,
+  useCreateSnapshot,
+  useDeleteSnapshot,
+} from "./useReportSnapshots";

src/features/report-snapshots/useReportSnapshots.ts

@@ -1,16 +1,28 @@
-import { useResourceByName } from "../../../react-openapi";
+import { useResource } from "../../../react-openapi";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 export function useReportSnapshotsList() {
-  const { useList } = useResourceByName("reports");
+  const { list } = useResource("reports");
-  return useList();
+  return useQuery({
+    queryKey: ["reports", "list"],
+    queryFn: () => list(),
+  });
 }
 
 export function useCreateSnapshot() {
-  const { useCreate } = useResourceByName("reports");
+  const { create } = useResource("reports");
-  return useCreate();
+  return useMutation({
+    mutationFn: (data: any) => create(data),
+  });
 }
 
 export function useDeleteSnapshot() {
-  const { useDelete } = useResourceByName("reports");
+  const queryClient = useQueryClient();
-  return useDelete();
+  const { remove } = useResource("reports");
+  return useMutation({
+    mutationFn: (id: string) => remove(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["reports", "list"] });
+    },
+  });
 }

src/features/report/useReport.ts

@@ -1,4 +1,5 @@
-import { useResourceByName } from "../../../react-openapi";
+import { useResource } from "../../../react-openapi";
+import { useQuery } from "@tanstack/react-query";
 
 export interface ReportParams {
   snapshot_id?: string;
@@ -9,13 +10,11 @@ export interface ReportParams {
 }
 
 export function useReport(params: ReportParams) {
-  const { useRead } = useResourceByName("reports");
+  const { get } = useResource("reports");
 
-  return useRead(
+  return useQuery({
-    params.snapshot_id ? params.snapshot_id : "latest",
+    queryKey: ["reports", "read", params],
-    {
+    queryFn: () =>
-      ...params,
+      get(params.snapshot_id ? params.snapshot_id : "latest"),
-      periods: params.periods,
+  });
-    }
-  );
 }

src/main.jsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   BrowserRouter,
   Routes,
@@ -15,8 +16,7 @@ import Dashboard from './Dashboard';
 import FetchRequests from './FetchRequests';
 import FetchRequestDetail from './FetchRequestDetail';
 import ReportSnapshots from './ReportSnapshots';
-import { Admin, AppProvider, defaultFieldComponents } from '../react-openapi';
+import { AppProvider, Admin } from '../react-openapi';
-import { configuration, profileConfiguration } from './openapi-config';
 import { Buffer } from 'buffer';
 import process from 'process';
 import { AuthProvider } from "../react-auth";
@@ -24,6 +24,8 @@ import Header from './Header';
 import Footer from './Footer';
 import AppTheme from './shared-theme/AppTheme';
 
+const queryClient = new QueryClient();
+
 window.Buffer = Buffer;
 window.process = process;
 
@@ -31,6 +33,14 @@ const rootElement = document.getElementById('root');
 const root = createRoot(rootElement);
 
 const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
+const API_BASE = import.meta.env.VITE_API_BASE_URL;
+
+const specConfig = {
+  specUrl: `${API_BASE}/openapi.yaml`,
+  baseApiUrl: API_BASE,
+  title: 'Khata Admin',
+  getToken: () => localStorage.getItem('token'),
+};
 
 const routerMapping = [
   { path: "/", component: Home, headerTitle: "Home" },
@@ -43,7 +53,8 @@ const routerMapping = [
 ];
 
 root.render(
-  <AppProvider resourceOverrides={configuration} profileConfig={profileConfiguration}>
+  <QueryClientProvider client={queryClient}>
+  <AppProvider specConfiguration={specConfig}>
     <BrowserRouter>
       <AuthProvider authBaseUrl={AUTH_BASE}>
         <AppTheme>
@@ -60,7 +71,7 @@ root.render(
                   path={path}
                   element={
                     path.startsWith("/admin") ? (
-                      <Component basePath="/admin" fieldComponents={{ ...defaultFieldComponents }} />
+                      <Component basePath="/admin" />
                     ) : (
                       <Component />
                     )
@@ -75,4 +86,5 @@ root.render(
       </AuthProvider>
     </BrowserRouter>
   </AppProvider>
+  </QueryClientProvider>
 );

src/openapi-config.ts

@@ -1,103 +0,0 @@
-import { ResourceOverride } from "../react-openapi";
-
-export const configuration: Record<string, ResourceOverride> = {
-  expenses: {
-    filterOptions: {
-      mode: "client",
-      fields: ["account", "payee", "tags", "occurred_at", "amount"],
-    },
-    fields: {
-      payee: {
-        displayFormat: "{name}",
-        filterType: "autocomplete",
-      },
-      payor: {
-        display: false,
-        displayFormat: "{username}",
-      },
-      account: {
-        displayFormat: "{name}",
-        filterType: "multiselect",
-        refers: "accounts"
-      },
-      tags: {
-        displayFormat: "{icon} {name}",
-        filterType: "autocomplete",
-        refers: "tags"
-      },
-      occurred_at: {
-        filterType: "date-range",
-        formatter: (val: string) => {
-            const date = new Date(val);
-            const day = date.getDate();
-            const month = date.toLocaleString('default', { month: 'long' });
-            const year = date.getFullYear();
-            const suffix = (day: number) => {
-                if (day > 3 && day < 21) return 'th';
-                switch (day % 10) {
-                    case 1: return "st";
-                    case 2: return "nd";
-                    case 3: return "rd";
-                    default: return "th";
-                }
-            };
-            return `${day}${suffix(day)} ${month} ${year}`;
-        }
-      },
-      amount: {
-        filterType: "number-range",
-      },
-      created_at: {
-        display: false
-      }
-    },
-  },
-  'fetch-requests': {
-    fields: {
-      format: {
-        path: 'source.format',
-      },
-      start_date: {
-        type: 'date',
-        label: 'Start Date',
-      },
-      end_date: {
-        type: 'date',
-        label: 'End Date',
-      },
-      // account: {
-      //   refers: 'accounts',
-      // },
-      // tags: {
-      //   refers: 'tags',
-      // },
-    },
-  },
-  accounts: {
-    referenceOptions: {
-      enumOption: {
-        key: 'id',
-        value: '{name} - XX{number}',
-      },
-      autoComplete: true,
-      prefetch: true,
-    }
-  },
-  tags: {
-    referenceOptions: {
-      enumOption: {
-        key: 'id',
-        value: '{icon} {name}',
-      },
-      autoComplete: true,
-      prefetch: true,
-    }
-  },
-};
-
-export const profileConfiguration = {
-  "extraFields": ['name'],
-  "resource": "payors",
-  // not in use
-  "hidden": true,
-};