Add Fetch Request pipeline UI with real-time SSEs (#8 )

## Summary Add Fetch Request pipeline UI with real-time SSE progress tracking, ambiguity resolution, list page with filtering/retry, and detail page with stepper/event feed. ## Changes ### New files - **`src/FetchRequestDetail.tsx`** (+675 lines) — Full detail page for a single fetch request with: - SSE connection for real-time pipeline progress (`/fetch-requests/:id/events`) - 4-step stepper (Extract → Raw Expense → Enrich → Save) with active/completed/failed/paused states - Granular progress bar (10% Extract, 20% Raw Expense, 50% Enrich, 20% Save) - Progress event feed with auto-scroll and deduplication (only latest `progress` per step, hides `started` when terminal event follows) - Ambiguity resolution cards with candidate selection buttons - Retry support with retry-count progress bar - Failure/success snackbar notifications - Error display for failed fetch requests ### Modified files - **`react-openapi/api/client.ts`** — added `api.patch()` method for PATCH requests - **`react-openapi/hooks/useResource.ts`** — added `usePatch()` mutation hook for partial updates with cache invalidation - **`src/FetchRequests.tsx`** (+347/−73 lines) — Major list page rewrite: - Row-level actions: retry (failed <3 retries), navigate to detail (paused), delete with confirmation dialog - Filter bar: status multi-select, account text filter, file/email source toggle - Account name autocomplete from API - Format dropdown driven by `resourceOverrides` config - Date pickers (changed from `datetime-local` to `date`) - Copy fingerprint button, retry count display, date range column - Row click navigates to detail, sorted by `created_at` desc - `pause` status support in `statusColors` - 409 conflict handling on duplicate fingerprint - `formatApiError()` for 422 validation error display - **`src/features/fetch-requests/fetch-requests.models.ts`** — Added types: - `paused` to `FetchRequestStatus` - `FetchRequestUpdate` interface - `retry_count` to `FetchRequest` interface - `raw_lines`, `txn_blocks`, `txn_dicts`, `txn_dict_count`/`txn_dicts_count` to source types - `PendingAmbiguity`, `AmbiguityCandidate`, `ResolveAmbiguityPayload` - `SSEEvent`, `SSEEventStep`, `SSEEventStatus`, `ProgressMessage` - `FetchRequestFilters` - `formatApiError()` helper for FastAPI 422 error parsing - `RETRY_MAX = 3` constant - **`src/features/fetch-requests/index.ts`** — Barrel exports for all new types, hooks, and helpers - **`src/features/fetch-requests/useFetchRequests.ts`** — Added hooks: - `useUpdateFetchRequest()` — PATCH via `usePatch` - `useFetchRequestAmbiguities(id)` — queries `/fetch-requests/:id/ambiguities` - `useResolveAmbiguity()` — posts to `/ambiguities/:id/resolve` with cache invalidation - **`src/main.jsx`** — Added route `/fetch-requests/:id` → `FetchRequestDetail` ## Key decisions - SSE event stream is the single source of truth for progress; REST is only fallback for page load - Stepper shows granular ratio-based progress counts (e.g. `150/246` for enrich) - `pipeline/failed` SSE event triggers refetch + error snackbar - `load_content` events excluded from event feed entirely - Enrich/Save progress counts come only from SSE (no REST fallback since those phases don't pause) Reviewed-on: #8 Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com> Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
2026-05-30 15:58:48 +00:00
35 changed files with 640 additions and 1171 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,6 @@
      },
      "devDependencies": {
        "@vitejs/plugin-react": "latest",
-        "typescript": "^6.0.3",
        "vite": "latest"
      }
    },
@@ -4104,19 +4103,6 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
-    "node_modules/typescript": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
-      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
-      "dev": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
    "node_modules/unified": {
      "version": "11.0.5",
      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
  },
  "devDependencies": {
    "@vitejs/plugin-react": "latest",
-    "typescript": "^6.0.3",
    "vite": "latest"
  }
 }
--- a/react-openapi/Admin.tsx
+++ b/react-openapi/Admin.tsx
@@ -6,7 +6,6 @@ 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,
@@ -16,9 +15,8 @@ import {
 } from "react-router-dom";

 import { ConfigContext } from "./providers/ConfigContext";
-import ProfileView from "./components/ProfileView";

-function DefaultDashboard({ basePath }: { basePath: string }) {
+function Dashboard({ basePath }: { basePath: string }) {
  const config = React.useContext(ConfigContext);
  const navigate = useNavigate();

@@ -33,6 +31,7 @@ function DefaultDashboard({ basePath }: { basePath: string }) {
      <Typography variant="body1" sx={{ color: 'text.secondary' }}>
        Select a resource from the sidebar to manage data.
      </Typography>
+
      <Box
        sx={{
          display: "grid",
@@ -42,10 +41,10 @@ function DefaultDashboard({ basePath }: { basePath: string }) {
        }}
      >
        {visibleResources.map((res) => (
-          <Paper
-            key={res.name}
-            sx={{
-                p: 3,
+          <Paper 
+            key={res.name} 
+            sx={{ 
+                p: 3, 
                textAlign: "center",
                cursor: 'pointer',
                transition: 'transform 0.2s',
@@ -62,15 +61,9 @@ function DefaultDashboard({ basePath }: { basePath: string }) {
  );
 }

-interface AdminAppProps {
-  basePath: string;
-  fieldComponents: FieldComponents;
-  Dashboard?: React.ComponentType<{ basePath: string }>;
-  Layout?: React.ComponentType<AdminLayoutProps>;
-  LoginPage?: React.ComponentType<any>;
-}
+import ProfileView from "./components/ProfileView";

-function AdminApp({ basePath, fieldComponents, Dashboard = DefaultDashboard, Layout = AdminLayout, LoginPage = AuthPage }: AdminAppProps) {
+function AdminApp({ basePath }: { basePath: string }) {
  const { currentUser, login, logout, loading, error } = useAuth();
  const config = React.useContext(ConfigContext);
  const navigate = useNavigate();
@@ -80,10 +73,10 @@ function AdminApp({ basePath, fieldComponents, Dashboard = DefaultDashboard, Lay

  if (!currentUser) {
    return (
-      <LoginPage
+      <AuthPage
        mode="login"
        login={login}
-        register={async () => {}}
+        register={async () => {}} // Disable registration for Admin
        loading={loading}
        error={error}
        onSwitchMode={() => {}}
@@ -94,7 +87,7 @@ function AdminApp({ basePath, fieldComponents, Dashboard = DefaultDashboard, Lay
  }

  return (
-    <Layout
+    <AdminLayout
      username={currentUser.username}
      onLogout={logout}
      onSelectResource={(name) => navigate(`/admin/${name}`)}
@@ -103,44 +96,32 @@ function AdminApp({ basePath, fieldComponents, Dashboard = DefaultDashboard, Lay
      <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} />} />
+        <Route path="/:resourceName" element={<ResourceRouteWrapper />} />
+        <Route path="/:resourceName/:id" element={<ResourceRouteWrapper />} />
+        <Route path="/:resourceName/create" element={<ResourceRouteWrapper />} />
+        <Route path="/:resourceName/edit/:id" element={<ResourceRouteWrapper />} />
      </Routes>
-    </Layout>
+    </AdminLayout>
  );
 }

-function ResourceRouteWrapper({ fieldComponents }: { fieldComponents: FieldComponents }) {
+function ResourceRouteWrapper() {
  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[];
+  return <ResourceView config={selectedResource} />;
 }

 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) {
+export default function Admin({ basePath = "/admin", resourceOverrides = {}, profileConfig = {} }: AdminProps) {
  const existingConfig = React.useContext(ConfigContext);
  const [config, setConfig] = React.useState<AppConfig | null>(existingConfig);

@@ -170,14 +151,16 @@ export default function Admin({ basePath = "/admin", resourceOverrides = {}, pro

  const content = (
    <UploadProvider>
-      <AdminApp basePath={basePath} fieldComponents={fieldComponents} Dashboard={Dashboard} Layout={Layout} LoginPage={LoginPage} />
+      <AdminApp basePath={basePath} />
    </UploadProvider>
  );

+  // If we have an existing config, we are already inside a Provider and QueryClient
  if (existingConfig) {
    return content;
  }

+  // Fallback for standalone usage
  return (
    <ConfigContext.Provider value={config}>
      {content}
--- a/react-openapi/api/client.ts
+++ b/react-openapi/api/client.ts
@@ -1,5 +1,4 @@
 import axios, { AxiosInstance } from "axios";
-import type { AxiosResponse } from "axios";
 import { createApiClient } from "../../react-auth";

 /**
@@ -31,25 +30,25 @@ function withParamsSerializer(instance: AxiosInstance): AxiosInstance {
 }

 export const api = {
-  get: <T = any, R = AxiosResponse<T>>(url: string, config?: Parameters<AxiosInstance["get"]>[1]) => {
+  get: (...args: Parameters<AxiosInstance["get"]>) => {
    if (!_api) throw new Error("API client not initialized");
-    return _api.get<T, R>(url, config);
+    return _api.get(...args);
  },
-  post: <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: Parameters<AxiosInstance["post"]>[2]) => {
+  post: (...args: Parameters<AxiosInstance["post"]>) => {
    if (!_api) throw new Error("API client not initialized");
-    return _api.post<T, R>(url, data, config);
+    return _api.post(...args);
  },
-  put: <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: Parameters<AxiosInstance["put"]>[2]) => {
+  put: (...args: Parameters<AxiosInstance["put"]>) => {
    if (!_api) throw new Error("API client not initialized");
-    return _api.put<T, R>(url, data, config);
+    return _api.put(...args);
  },
-  delete: <T = any, R = AxiosResponse<T>>(url: string, config?: Parameters<AxiosInstance["delete"]>[1]) => {
+  delete: (...args: Parameters<AxiosInstance["delete"]>) => {
    if (!_api) throw new Error("API client not initialized");
-    return _api.delete<T, R>(url, config);
+    return _api.delete(...args);
  },
-  patch: <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: Parameters<AxiosInstance["patch"]>[2]) => {
+  patch: (...args: Parameters<AxiosInstance["patch"]>) => {
    if (!_api) throw new Error("API client not initialized");
-    return _api.patch<T, R>(url, data, config);
+    return _api.patch(...args);
  },
 };

--- a/react-openapi/components/EnhancedTable.tsx
+++ b/react-openapi/components/EnhancedTable.tsx
@@ -31,8 +31,6 @@ 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;
@@ -45,7 +43,6 @@ interface EnhancedTableProps {
  onDelete: (id: string) => void;
  onCreate: () => void;
  onNavigateToResource?: (resourceName: string, id: string) => void;
-  components?: EnhancedTableComponents;
 }

 export default function EnhancedTable({
@@ -59,7 +56,6 @@ export default function EnhancedTable({
  onDelete,
  onCreate,
  onNavigateToResource,
-  components: tableComponents,
 }: EnhancedTableProps) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -88,7 +84,7 @@ export default function EnhancedTable({
        type: muiType,
        flex: 1,
        minWidth: 150,
-        renderCell: (params: GridRenderCellParams) => <FieldRenderer params={params} field={field} fieldKey={key} config={config} onNavigate={onNavigateToResource} navigate={navigate} components={tableComponents} />
+        renderCell: (params: GridRenderCellParams) => <FieldRenderer params={params} field={field} fieldKey={key} config={config} onNavigate={onNavigateToResource} navigate={navigate} />
      };

      if (muiType === 'date' || muiType === 'dateTime') {
@@ -99,8 +95,9 @@ export default function EnhancedTable({
        };
      }

-      if (muiType === 'singleSelect') {
-        (col as GridColDef & { valueOptions: any[] }).valueOptions = toGridValueOptions(getFieldOptions(field));
+      if (muiType === 'singleSelect' && field.options) {
+        // @ts-ignore
+        col.valueOptions = field.options;
      }

      return col;
@@ -161,7 +158,6 @@ export default function EnhancedTable({
                onDelete={onDelete} 
                onNavigate={onNavigateToResource}
                navigate={navigate}
-                components={tableComponents}
              />
            </Box>
          ))}
@@ -229,7 +225,7 @@ export default function EnhancedTable({
  );
 }

-function MobileCardRow({ row, config, onDelete, onNavigate, navigate, components }: any) {
+function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);
    const id = row[config.primaryKey];
@@ -265,7 +261,7 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate, components
                                {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} />
+                                <FieldRenderer params={{ value: row[key], row }} field={field} fieldKey={key} config={config} onNavigate={onNavigate} navigate={navigate} isMobile />
                            </Typography>
                        </Box>
                    ))}
@@ -278,9 +274,8 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate, components
    );
 }

-function getFormattedDisplayValue(item: any, displayField?: string | string[], enumValue?: string) {
+function getFormattedDisplayValue(item: any, displayField?: string | string[]) {
    if (!item) return "";
-    if (enumValue) return resolveTemplate(enumValue, item);
    if (!displayField) return item.name || item.title || item.label || item.id || JSON.stringify(item);

    if (Array.isArray(displayField)) {
@@ -293,21 +288,16 @@ function getFormattedDisplayValue(item: any, displayField?: string | string[], e
    return item[displayField] || item.id || JSON.stringify(item);
 }

-function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate, isMobile, components }: any) {
+function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate, isMobile }: 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.displayField, field.enumOption?.value);
+        const displayValue = getFormattedDisplayValue(value, field.displayField);
        
        return (
            <Chip 
@@ -326,8 +316,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,

    // 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.displayField, enumValue)).join(', ');
+        const tooltipTitle = value.map((item) => getFormattedDisplayValue(item, field.displayField)).join(', ');

        return (
            <Tooltip title={tooltipTitle} arrow placement="top">
@@ -335,7 +324,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
                    {value.map((item, idx) => (
                        <Chip
                            key={idx}
-                            label={getFormattedDisplayValue(item, field.displayField, enumValue)}
+                            label={getFormattedDisplayValue(item, field.displayField)}
                            size="small"
                            variant="filled"
                            sx={{ maxWidth: 120 }}
@@ -355,7 +344,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,

    // 3. Simple Objects
    if (field.type === 'object' && value) {
-        return getFormattedDisplayValue(value, field.displayField, field.enumOption?.value) || (isMobile ? 'Object' : JSON.stringify(value));
+        return getFormattedDisplayValue(value, field.displayField) || (isMobile ? 'Object' : JSON.stringify(value));
    }

    if (field.type === 'number' && typeof value === 'number') {
@@ -390,11 +379,6 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
    
    if (field.type === 'datetime' || field.type === 'date') return value ? new Date(value).toLocaleString() : '';

-    if (field.type === 'enum') {
-      const opt = getFieldOptions(field).find(o => o.key === value);
-      return opt?.value ?? value;
-    }
-
    if (isPk && !isMobile) {
        return (
            <Chip 
--- a/react-openapi/components/FilterBar.tsx
+++ b/react-openapi/components/FilterBar.tsx
@@ -11,10 +11,8 @@ import {
 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({
+function FilterAutocomplete({
  options,
  value,
  label,
@@ -112,9 +110,7 @@ function extractOptions(
 ): string[] {
  const values = new Set<string>();

-  if (field.type === 'enum') {
-    return getFieldOptions(field).map(o => o.value);
-  }
+  if (field.options) return field.options;
  if (!data) return [];

  const pull = (item: any): string | null => {
@@ -122,13 +118,18 @@ function extractOptions(
    if (typeof item === "string") return item;
    if (typeof item !== "object") return String(item);

-    if (field.enumOption?.value) return resolveTemplate(field.enumOption.value, item);
+    const df = field.displayField;
+    if (!df) { debugger; return null; }

-    // Use displayFormat if defined, otherwise fall back to displayField logic (for backward compatibility)
-    if (field.displayFormat) {
-      return resolveTemplate(field.displayFormat, item);
+    if (Array.isArray(df)) {
+      const parts = df.map((k) => item[k]).filter((v) => v != null);
+      if (parts.length > 0) return parts.join(" ");
+    } else {
+      const v = item[df];
+      if (v != null) return String(v);
    }

+    debugger;
    return null;
  };

@@ -156,24 +157,32 @@ function renderFilterInput(
  field: ResourceField,
  options: string[],
  value: any,
-  onChange: (key: string, val: any) => void,
-  components?: FilterBarComponents,
-  fieldComponents?: FieldComponents,
+  onChange: (key: string, val: any) => void
 ) {
  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)} />;
+    return (
+      <Box sx={{ display: "flex", gap: 1 }}>
+        <TextField type="number" placeholder="Min" size="small" value={rangeVal.min ?? ""}
+          onChange={(e) => onChange("min", e.target.value || undefined)} sx={{ width: 100 }} />
+        <TextField type="number" placeholder="Max" size="small" value={rangeVal.max ?? ""}
+          onChange={(e) => onChange("max", e.target.value || undefined)} sx={{ width: 100 }} />
+      </Box>
+    );
  }

  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)} />;
+    return (
+      <Box sx={{ display: "flex", gap: 1 }}>
+        <TextField type="datetime-local" placeholder="From" size="small" value={rangeVal.start ?? ""}
+          onChange={(e) => onChange("start", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
+        <TextField type="datetime-local" placeholder="To" size="small" value={rangeVal.end ?? ""}
+          onChange={(e) => onChange("end", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
+      </Box>
+    );
  }

  const selected = Array.isArray(value) ? value : [];
@@ -196,8 +205,6 @@ export interface FilterBarProps {
  appliedValues: Record<string, any>;
  onApply: (values: Record<string, any>) => void;
  onClear: () => void;
-  components?: FilterBarComponents;
-  fieldComponents?: FieldComponents;
 }

 export default function FilterBar({
@@ -207,8 +214,6 @@ export default function FilterBar({
  appliedValues,
  onApply,
  onClear,
-  components: filterComponents,
-  fieldComponents,
 }: FilterBarProps) {
  const [open, setOpen] = React.useState(false);
  const [draft, setDraft] = React.useState<Record<string, any>>(() => ({ ...appliedValues }));
@@ -276,7 +281,7 @@ export default function FilterBar({
              const field = fields[fieldName];
              if (!field) return null;

-                const needsOptions = field.filterType === "autocomplete" || field.filterType === "multiselect";
+              const needsOptions = !field.filterType || field.filterType === "autocomplete" || field.filterType === "multiselect";
              const options = needsOptions ? extractOptions(fieldName, field, data ?? []) : [];
              const raw = draft[fieldName];

@@ -286,7 +291,7 @@ export default function FilterBar({
                    {field.label}
                  </Box>
                  {renderFilterInput(fieldName, field, options, raw, (key, val) =>
-                    updateDraft(fieldName, key, val), filterComponents, fieldComponents
+                    updateDraft(fieldName, key, val)
                  )}
                </Box>
              );
--- a/react-openapi/components/GenericForm.tsx
+++ b/react-openapi/components/GenericForm.tsx
@@ -7,7 +7,6 @@ import {
  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';
@@ -22,7 +21,6 @@ interface GenericFormProps {
  loading?: boolean;
  readOnly?: boolean;
  onEditClick?: () => void;
-  fieldComponents: FieldComponents;
 }

 export default function GenericForm({
@@ -33,7 +31,6 @@ export default function GenericForm({
  loading: saving,
  readOnly = false,
  onEditClick,
-  fieldComponents,
 }: GenericFormProps) {
  initialData = initialData || {};
  const [formData, setFormData] = React.useState(initialData);
@@ -57,7 +54,7 @@ export default function GenericForm({
    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 });
+        const { getListQueryOptions } = useResource(relatedRes!);
        return {
            ...getListQueryOptions(),
            enabled: !!relatedRes,
@@ -120,7 +117,6 @@ export default function GenericForm({
          uploading={uploading}
          baseUrl={appConfig?.baseUrl || ""}
          relationDataMap={relationDataMap}
-          components={fieldComponents}
        />
      ))}

--- a/react-openapi/components/ProfileView.tsx
+++ b/react-openapi/components/ProfileView.tsx
@@ -3,7 +3,6 @@ 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);
@@ -14,10 +13,11 @@ export default function ProfileView() {
    return <Alert severity="error">Profile configuration not found.</Alert>;
  }

+  // Create a modified config where only extraFields are editable
  const editableConfig = React.useMemo(() => {
    const newFields = { ...resourceConfig.fields };
    const extraFields = profileConfig.extraFields || [];
-
+    
    Object.keys(newFields).forEach(key => {
      newFields[key] = {
        ...newFields[key],
@@ -31,12 +31,13 @@ export default function ProfileView() {
    };
  }, [resourceConfig, profileConfig.extraFields]);

-  const { useMe, useUpdateMe } = useResource(resourceConfig, { fieldComponents: defaultFieldComponents });
+  const { useMe, useUpdateMe } = useResource(resourceConfig);
  const { data: profile, isLoading, error } = useMe();
  const updateMutation = useUpdateMe();

  const handleSave = async (formData: any) => {
    try {
+      // Only send editable fields to prevent accidental overwrites of read-only data
      const extraFields = profileConfig.extraFields || [];
      const dataToSave = Object.keys(formData)
        .filter(key => extraFields.includes(key))
@@ -75,7 +76,6 @@ export default function ProfileView() {
          onSave={handleSave}
          onCancel={() => window.history.back()}
          loading={updateMutation.isPending}
-          fieldComponents={defaultFieldComponents}
        />
      </Paper>
    </Box>
--- a/react-openapi/components/ResourceView.tsx
+++ b/react-openapi/components/ResourceView.tsx
@@ -2,9 +2,8 @@ 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 GenericForm from './GenericForm';
 import EnhancedTable from './EnhancedTable';
 import FilterBar from './FilterBar';
 import { useParams, useLocation, useNavigate } from 'react-router-dom';
@@ -12,21 +11,15 @@ 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);
-  const df = field.displayField;
-  if (!df) return item.name ?? item.title ?? item.label ?? item.id ?? JSON.stringify(item);
-  if (Array.isArray(df)) {
-    const parts = df.map((k: string) => item[k]).filter((v: any) => v != null);
-    return parts.length > 0 ? parts.join(' ') : '';
-  }
-  return String(item[df] ?? '');
+function getFilterDisplayFields(field: ResourceField): string[] {
+  if (!field.displayField) return [];
+  return (Array.isArray(field.displayField) ? field.displayField : [field.displayField]).filter(
+    (df): df is string => !!df
+  );
 }

 function applyClientFilters(
@@ -66,12 +59,18 @@ function applyClientFilters(

      if (Array.isArray(filterValue)) {
        if (field.type === "array" && Array.isArray(itemValue)) {
-          return itemValue.some((el: any) =>
-            filterValue.includes(getDisplayString(el, field))
-          );
+          return itemValue.some((el: any) => {
+            if (el != null && typeof el === "object") {
+              const dispFields = getFilterDisplayFields(field);
+              return dispFields.some((df) => filterValue.includes(String(el[df])));
+            }
+            return filterValue.includes(String(el));
+          });
        }
        if (itemValue && typeof itemValue === "object") {
-          return filterValue.includes(getDisplayString(itemValue, field));
+          const dispFields = getFilterDisplayFields(field);
+          const itemDisplay = dispFields.map((df) => itemValue[df]).filter((v) => v != null).join(" ");
+          return filterValue.includes(itemDisplay);
        }
        return filterValue.includes(String(itemValue));
      }
@@ -83,13 +82,18 @@ function applyClientFilters(
      }

      if (field.type === "array" && Array.isArray(itemValue)) {
-        return itemValue.some((el: any) =>
-          getDisplayString(el, field) === String(filterValue)
-        );
+        return itemValue.some((el: any) => {
+          if (el != null && typeof el === "object") {
+            const dispFields = getFilterDisplayFields(field);
+            return dispFields.some((df) => String(el[df]) === String(filterValue));
+          }
+          return String(el) === String(filterValue);
+        });
      }

      if (itemValue && typeof itemValue === "object") {
-        return getDisplayString(itemValue, field) === String(filterValue);
+        const dispFields = getFilterDisplayFields(field);
+        return dispFields.some((df) => String(itemValue[df]) === String(filterValue));
      }

      return String(itemValue) === String(filterValue);
@@ -97,7 +101,7 @@ function applyClientFilters(
  );
 }

-export default function ResourceView({ config, onNavigateToResource, fieldComponents }: ResourceViewProps) {
+export default function ResourceView({ config, onNavigateToResource }: ResourceViewProps) {
  const { id } = useParams();
  const location = useLocation();
  const navigate = useNavigate();
@@ -116,10 +120,10 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon

  const [appliedFilters, setAppliedFilters] = React.useState<Record<string, any>>({});

-  const { useList, useRead, useCreate, useUpdate, useDelete, components } = useResource(config, { fieldComponents });
+  const { useList, useRead, useCreate, useUpdate, useDelete } = useResource(config);

  const queryParams = React.useMemo(() => {
-    if (!isServer) return { limit: 10 };
+    if (!isServer) return { limit: 10000 };
    return {
      skip: paginationModel.page * paginationModel.pageSize,
      limit: paginationModel.pageSize,
@@ -184,7 +188,6 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon
              appliedValues={appliedFilters}
              onApply={setAppliedFilters}
              onClear={() => setAppliedFilters({})}
-              fieldComponents={components}
            />
          )}
          <EnhancedTable
@@ -202,7 +205,7 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon
        </Box>
      ) : (
        <Paper sx={{ p: 4 }}>
-          {components && <components.GenericForm
+          <GenericForm
            config={config}
            initialData={isCreate ? null : itemQuery.data}
            onSave={handleSave}
@@ -210,7 +213,7 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon
            loading={createMutation.isPending || updateMutation.isPending}
            readOnly={isView}
            onEditClick={() => navigate(`/admin/${config.name}/edit/${id}`)}
-          />}
+          />
        </Paper>
      )}
    </Box>
--- a/react-openapi/components/fields/BooleanField.tsx
+++ b/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}
-    />
-  );
-}
--- a/react-openapi/components/fields/DateField.tsx
+++ b/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}
-    />
-  );
-}
--- a/react-openapi/components/fields/DateRangeField.tsx
+++ b/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>
-  );
-}
--- a/react-openapi/components/fields/DefaultFieldComponents.ts
+++ b/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,
-};
--- a/react-openapi/components/fields/EnumField.tsx
+++ b/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>
-  );
-}
--- a/react-openapi/components/fields/FallbackField.tsx
+++ b/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
-    />
-  );
-}
--- a/react-openapi/components/fields/FormField.tsx
+++ b/react-openapi/components/fields/FormField.tsx
@@ -1,19 +1,29 @@
 import * as React from 'react';
+import {
+  TextField,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  FormControlLabel,
+  Checkbox,
+  Typography,
+  Box,
+  Divider,
+} from '@mui/material';
 import { ResourceField } from '../../types/config';
-import { FieldComponentProps, FieldComponents } from '../../types/overrides';
-import ObjectField from './ObjectField';
+import ImageUploadField from './ImageUploadField';

-export interface FormFieldProps {
+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;
+  uploadFile: (file: File) => Promise<string | null>;
+  uploading: boolean;
+  baseUrl: string;
+  relationDataMap?: Record<string, any[]>; // Map of relation name to data array
 }

 export default function FormField({
@@ -26,60 +36,189 @@ export default function FormField({
  uploading,
  baseUrl,
  relationDataMap = {},
-  components,
 }: FormFieldProps) {
-  const fieldProps: FieldComponentProps = {
-    name,
-    field,
-    value,
-    onChange,
-    disabled,
-    baseUrl,
-    relationDataMap,
-    uploadFile,
-    uploading,
-  };
+  const label = field.label;

-  const childComponents = components;
-
-  // 1. Object (recursive) - requires parent FormField for recursion
+  // 1. Recursive Rendering for Objects (Not Relations)
  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 (
+      <Box sx={{ ml: 2, mt: 2, p: 2, borderLeft: '2px solid #e0e0e0' }}>
+        <Typography variant="subtitle2" color="primary" gutterBottom>
+          {label}
+        </Typography>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          {Object.entries(field.schema).map(([subKey, subField]) => (
+            <FormField
+              key={subKey}
+              name={`${name}.${subKey}`}
+              field={subField}
+              value={value?.[subKey]}
+              onChange={(newVal) => {
+                const updated = { ...(value || {}), [subKey]: newVal };
+                onChange(updated);
+              }}
+              disabled={disabled}
+              uploadFile={uploadFile}
+              uploading={uploading}
+              baseUrl={baseUrl}
+              relationDataMap={relationDataMap}
+            />
+          ))}
+        </Box>
+      </Box>
+    );
+  }
+
+  // 2. Relation Handling (Select / Multi-Select)
+  if (field.relation && relationDataMap[field.relation]) {
+    const relationData = relationDataMap[field.relation].data;
+    const isArrayRelation = field.type === 'array';
+    
+    // Determine how to display the related item
+    const getOptionLabel = (option: any) => {
+        if (!option) return "";
+        if (field.displayField && option[field.displayField]) return option[field.displayField];
+        // Standard naming fields
+        return option.name || option.title || option.label || option.id || JSON.stringify(option);
+    };
+
+    const getOptionValue = (option: any) => {
+        // Return the whole object to maintain identity
+        return option;
+    };
+
+    return (
+      <FormControl fullWidth>
+        <InputLabel shrink>{label}</InputLabel>
+        <Select
+          multiple={isArrayRelation}
+          value={value || (isArrayRelation ? [] : "")}
+          label={label}
+          displayEmpty
+          onChange={(e) => onChange(e.target.value)}
+          disabled={disabled}
+          renderValue={(selected: any) => {
+            if (isArrayRelation) {
+              return (selected as any[]).map(getOptionLabel).join(', ');
+            }
+            return getOptionLabel(selected);
+          }}
+        >
+          {relationData.map((option) => (
+            <MenuItem key={option.id || JSON.stringify(option)} value={getOptionValue(option)}>
+              {getOptionLabel(option)}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    );
+  }
+
+  // 3. Image Handling
+  if (field.type === 'image') {
+    return (
+      <ImageUploadField
+        label={label}
+        value={value}
+        onUpload={async (file: any) => {
+          const url = await uploadFile(file);
+          if (url) onChange(url);
+        }}
+        uploading={uploading}
+        baseUrl={baseUrl}
+        disabled={disabled}
      />
    );
-    return <ObjectField {...fieldProps} renderField={renderChild} />;
  }

-  // 2. Image
-  if (field.type === 'image') {
-    const ImageField = components.image;
-    if (!ImageField) return null;
-    return <ImageField {...fieldProps} />;
+  // 4. Boolean Handling
+  if (field.type === 'boolean') {
+    return (
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={!!value}
+            onChange={(e) => onChange(e.target.checked)}
+            disabled={disabled}
+          />
+        }
+        label={label}
+      />
+    );
  }

-  // 3. Relation
-  if (field.relation && relationDataMap[field.relation]) {
-    const RelationFieldComp = components.relation;
-    if (!RelationFieldComp) return null;
-    return <RelationFieldComp {...fieldProps} />;
+  // 5. Enum Handling
+  if (field.type === 'enum' && field.options) {
+    return (
+      <FormControl fullWidth>
+        <InputLabel>{label}</InputLabel>
+        <Select
+          value={value || ''}
+          label={label}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={disabled}
+        >
+          {field.options.map((opt: string) => (
+            <MenuItem key={opt} value={opt}>
+              {opt}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    );
  }

-  // 4. Lookup by field type
-  const Component = components[field.type] || components.default;
-  if (Component) {
-    return <Component {...fieldProps} />;
+  // 6. Common Text Fields
+  if (field.type === 'datetime' || field.type === 'date') {
+    return (
+      <TextField
+        fullWidth
+        label={label}
+        type={field.type === 'datetime' ? "datetime-local" : "date"}
+        InputLabelProps={{ shrink: true }}
+        value={value ? new Date(value).toISOString().slice(0, field.type === 'datetime' ? 16 : 10) : ''}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        required={field.required}
+      />
+    );
  }

-  return null;
+  if (field.type === 'markdown' || field.type === 'string') {
+    return (
+      <TextField
+        fullWidth
+        label={label}
+        value={value || ''}
+        multiline={field.type === 'markdown'}
+        rows={field.type === 'markdown' ? 4 : 1}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        required={field.required}
+      />
+    );
+  }
+
+  if (field.type === 'number') {
+    return (
+      <TextField
+        fullWidth
+        label={label}
+        type="number"
+        value={value === undefined || value === null ? '' : value}
+        onChange={(e) => onChange(e.target.value === '' ? '' : Number(e.target.value))}
+        disabled={disabled}
+        required={field.required}
+      />
+    );
+  }
+
+  return (
+    <TextField
+      fullWidth
+      label={label}
+      value={typeof value === 'object' ? JSON.stringify(value) : value || ''}
+      disabled
+    />
+  );
 }
--- a/react-openapi/components/fields/NumberField.tsx
+++ b/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}
-    />
-  );
-}
--- a/react-openapi/components/fields/NumberRangeField.tsx
+++ b/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>
-  );
-}
--- a/react-openapi/components/fields/ObjectField.tsx
+++ b/react-openapi/components/fields/ObjectField.tsx
@@ -1,36 +0,0 @@
-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]) =>
-          renderField({
-            name: `${name}.${subKey}`,
-            field: subField,
-            value: value?.[subKey],
-            onChange: (newVal: any) => {
-              const updated = { ...(value || {}), [subKey]: newVal };
-              onChange(updated);
-            },
-            disabled,
-            baseUrl,
-            uploadFile,
-            uploading,
-            relationDataMap,
-          })
-        )}
-      </Box>
-    </Box>
-  );
-}
--- a/react-openapi/components/fields/RelationField.tsx
+++ b/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>
-  );
-}
--- a/react-openapi/components/fields/TextField.tsx
+++ b/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}
-    />
-  );
-}
--- a/react-openapi/components/fields/index.ts
+++ b/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';
--- a/react-openapi/hooks/useResource.ts
+++ b/react-openapi/hooks/useResource.ts
@@ -1,44 +1,28 @@
 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";
+import * as React from "react";

-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 }) {
+export function useResource<T = any>(config: ResourceConfig | undefined) {
  const queryClient = useQueryClient();
-
+  
+  // Return empty/disabled hooks if config is missing
  const { name = '', endpoint = '', primaryKey = 'id' } = config || {};

-  const mergedComponents = React.useMemo(
-    () => options?.fieldComponents ? ({ ...defaultFieldComponents, ...options.fieldComponents }) : undefined,
-    [options?.fieldComponents],
-  );
-
  // --- READ ALL ---
-  const useList = (params?: any) =>
+  const useList = (params?: any) => 
    useQuery({
      queryKey: [name, "list", params],
      queryFn: async () => {
        if (!endpoint) return { data: [], total: 0 };
+        console.log('params:', params);
+        // @ts-ignore
        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
+        return { 
+            data: res.data, 
+            total: isNaN(total as any) ? undefined : total 
        };
      },
      enabled: !!endpoint,
@@ -51,6 +35,7 @@ export function useResource<T = any>(config: ResourceConfig | undefined, options
      queryKey: [name, "detail", id, params],
      queryFn: async () => {
        if (!id || !endpoint) return null;
+        // @ts-ignore
        const res = await api.get<T>(`${endpoint}/${id}`, params ? { params } : undefined);
        return res.data;
      },
@@ -62,6 +47,7 @@ export function useResource<T = any>(config: ResourceConfig | undefined, options
    useMutation({
      mutationFn: async (data: Partial<T>) => {
        if (!endpoint) throw new Error("Endpoint not defined");
+        // @ts-ignore
        const res = await api.post<T>(endpoint, data);
        return res.data;
      },
@@ -75,10 +61,12 @@ export function useResource<T = any>(config: ResourceConfig | undefined, options
    useMutation({
      mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
        if (!endpoint) throw new Error("Endpoint not defined");
+        // @ts-ignore
        const res = await api.put<T>(`${endpoint}/${id}`, data);
        return res.data;
      },
-      onSuccess: (updatedItem: any) => {
+      onSuccess: (updatedItem) => {
+        // @ts-ignore
        const id = updatedItem[primaryKey];
        queryClient.invalidateQueries({ queryKey: [name, "list"] });
        queryClient.invalidateQueries({ queryKey: [name, "detail", id] });
@@ -90,13 +78,15 @@ export function useResource<T = any>(config: ResourceConfig | undefined, options
    useMutation({
      mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
        if (!endpoint) throw new Error("Endpoint not defined");
+        // @ts-ignore
        const res = await api.patch<T>(`${endpoint}/${id}`, data);
        return res.data;
      },
-      onSuccess: (updatedItem: any) => {
-        const listId = updatedItem[primaryKey];
+      onSuccess: (updatedItem) => {
+        // @ts-ignore
+        const id = updatedItem[primaryKey];
        queryClient.invalidateQueries({ queryKey: [name, "list"] });
-        queryClient.invalidateQueries({ queryKey: [name, "detail", listId] });
+        queryClient.invalidateQueries({ queryKey: [name, "detail", id] });
      },
    });

@@ -118,11 +108,12 @@ export function useResource<T = any>(config: ResourceConfig | undefined, options
    queryKey: [name, "list", params],
    queryFn: async () => {
      if (!endpoint) return { data: [], total: 0 };
+      // @ts-ignore
      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
+      return { 
+          data: res.data, 
+          total: isNaN(total as any) ? undefined : total 
      };
    },
    enabled: !!endpoint,
@@ -134,6 +125,7 @@ export function useResource<T = any>(config: ResourceConfig | undefined, options
      queryKey: [name, "me"],
      queryFn: async () => {
        if (!endpoint) return null;
+        // @ts-ignore
        const res = await api.get<T>(`${endpoint}/me`);
        return res.data;
      },
@@ -145,6 +137,7 @@ export function useResource<T = any>(config: ResourceConfig | undefined, options
    useMutation({
      mutationFn: async (data: Partial<T>) => {
        if (!endpoint) throw new Error("Endpoint not defined");
+        // @ts-ignore
        const res = await api.put<T>(`${endpoint}/me`, data);
        return res.data;
      },
@@ -154,15 +147,6 @@ export function useResource<T = any>(config: ResourceConfig | undefined, options
      },
    });

-  const components = React.useMemo(() => {
-    if (!mergedComponents) return undefined;
-    return {
-      ...mergedComponents,
-      FormField: wrapFormField(mergedComponents),
-      GenericForm: wrapGenericForm(mergedComponents),
-    };
-  }, [mergedComponents]);
-
  return {
    useList,
    useRead,
@@ -173,12 +157,12 @@ export function useResource<T = any>(config: ResourceConfig | undefined, options
    useUpdateMe,
    useDelete,
    getListQueryOptions,
-    components,
  };
 }

-export function useResourceByName<T = any>(name: string, options?: { fieldComponents: FieldComponents }) {
+export function useResourceByName<T = any>(name: string) {
  const config = React.useContext(ConfigContext);
  const resourceConfig = config?.resources.find((r) => r.name === name);
-  return useResource<T>(resourceConfig, options);
+  return useResource<T>(resourceConfig);
 }
+
--- a/react-openapi/index.ts
+++ b/react-openapi/index.ts
@@ -2,12 +2,7 @@ export { default as Admin } from "./Admin";
 export { api, auth, initializeApiClients } from "./api/client";
 export { getAppConfig } from "./config";
 export type { AppConfig, ResourceConfig, ResourceField, ResourceMode } from "./types/config";
-export type { FieldComponents, FieldComponentProps, FieldComponent, FieldOverride, ResourceOverride, EnhancedTableComponents, FilterBarComponents, CellRendererProps, CellRenderer } from "./types/overrides";
 export { AppProvider } from "./providers/AppProvider";
 export { ConfigContext, useConfig } from "./providers/ConfigContext";
 export { useResource, useResourceByName } from "./hooks/useResource";
-export { default as FilterBar, FilterAutocomplete } from "./components/FilterBar";
-export { default as EnhancedTable } from "./components/EnhancedTable";
-export { default as GenericForm } from "./components/GenericForm";
-export { default as ResourceView } from "./components/ResourceView";
-export { defaultFieldComponents, FormField, TextField, NumberField, BooleanField, DateField, EnumField, RelationField, ObjectField, ImageUploadField, FallbackField } from "./components/fields";
+export { default as FilterBar } from "./components/FilterBar";
--- a/react-openapi/types/config.ts
+++ b/react-openapi/types/config.ts
@@ -10,29 +10,17 @@ export type FieldType =
  | '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>;
+  displayField?: string | string[];
  formatter?: (value: any) => string;
-  relation?: string;
+  relation?: string; // Name of the target resource
  filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
-  enumOption?: EnumOption;
-  enumLabels?: Record<string, string>;
 }

 export type ResourceMode = "server" | "client";
@@ -50,14 +38,12 @@ export interface ResourceConfig {
    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>;
--- a/react-openapi/types/overrides.ts
+++ b/react-openapi/types/overrides.ts
@@ -1,19 +1,13 @@
-import { ResourceField, FieldType } from './config';
-
-export interface EnumOption {
-  key: string;
-  value: string;
-}
+/**
+ * This file contains application-specific overrides and configuration
+ * for the generic Admin Panel.
+ */

 export interface FieldOverride {
-  displayFormat?: string;
+  displayField?: string | 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;
 }

 export interface ResourceOverride {
@@ -24,63 +18,4 @@ export interface ResourceOverride {
    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 };
--- a/react-openapi/utils/openapi_loader.ts
+++ b/react-openapi/utils/openapi_loader.ts
@@ -36,26 +36,6 @@ function mapOpenApiType(prop: any): FieldType {
 /**
 * 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,
@@ -63,26 +43,12 @@ function parseSchemaFields(
  configuration: Record<string, any> = {}
 ): Record<string, ResourceField> {
  const fields: Record<string, ResourceField> = {};
-  const { properties, required } = mergeProperties(schema);
+  const properties = schema.properties || {};
+  const required = schema.required || [];
  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 type = mapOpenApiType(prop);
    const override = overrides[key];

    // Explicitly skip 'id' as it's the primary key and handled elsewhere
@@ -91,12 +57,12 @@ function parseSchemaFields(
    fields[key] = {
      type,
      label:
-        resolvedProp.title ||
+        prop.title ||
        key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " "),
      required: required.includes(key),
-      options: resolvedProp.enum,
+      options: prop.enum,
      readOnly:
-        resolvedProp.readOnly ||
+        prop.readOnly ||
        key === "created_at" ||
        key === "updated_at",
      ...override,
@@ -105,36 +71,20 @@ function parseSchemaFields(
    // 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;
+    let targetSchema = prop;
+    if (type === "array" && prop.items) {
+      targetSchema = prop.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);
+    if (fields[key].type === "object" && prop.properties && !relation) {
+      fields[key].schema = parseSchemaFields(prop, resourceName, schemaToResourceMap, configuration);
    }
  }

@@ -145,7 +95,6 @@ function parseSchemaFields(
 * 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(
@@ -201,7 +150,6 @@ export async function loadConfigFromOpenApi(baseUrl: string, configuration: Reco
    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] || {};
@@ -224,17 +172,6 @@ export async function loadConfigFromOpenApi(baseUrl: string, configuration: Reco
    });
  }

-  // 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
@@ -243,7 +180,6 @@ export async function loadConfigFromOpenApi(baseUrl: string, configuration: Reco
    baseUrl: serverBaseUrl,
    authBaseUrl: authBaseUrl,
    resources,
-    enums,
    profile: profileConfiguration,
  };
 }
--- a/react-openapi/utils/options.ts
+++ b/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 = 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 }));
-}
--- a/src/FetchRequestDetail.tsx
+++ b/src/FetchRequestDetail.tsx
@@ -26,6 +26,8 @@ import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
 import {
+  useFetchRequest,
+  useUpdateFetchRequest,
  useFetchRequestAmbiguities,
  useResolveAmbiguity,
 } from "./features/fetch-requests";
@@ -35,7 +37,7 @@ import type {
  ProgressMessage,
 } from "./features/fetch-requests";
 import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
-import { useResourceByName, useConfig, defaultFieldComponents } from "../react-openapi";
+import { useConfig } from "../react-openapi";

 const statusColors: Record<FetchRequestStatus, "default" | "primary" | "warning" | "info" | "success" | "error"> = {
  pending: "default",
@@ -146,9 +148,8 @@ export default function FetchRequestDetail() {
  const navigate = useNavigate();
  const config = useConfig();

-  const { useRead, usePatch } = useResourceByName("fetch-requests", { fieldComponents: defaultFieldComponents });
-  const { data: fetchRequest, isLoading, error: fetchError, refetch: refetchRequest } = useRead(id!);
-  const updateMutation = usePatch();
+  const { data: fetchRequest, isLoading, error: fetchError, refetch: refetchRequest } = useFetchRequest(id!);
+  const updateMutation = useUpdateFetchRequest();
  const resolveMutation = useResolveAmbiguity();
  const { data: ambiguities, refetch: refetchAmbiguities } = useFetchRequestAmbiguities(id!);

--- a/src/FetchRequests.tsx
+++ b/src/FetchRequests.tsx
@@ -4,9 +4,16 @@ import {
  Container,
  Paper,
  Typography,
+  TextField,
  Button,
  ToggleButtonGroup,
  ToggleButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
  Chip,
  IconButton,
  CircularProgress,
@@ -18,7 +25,6 @@ import {
  DialogContentText,
  DialogActions,
  Tooltip,
-  TextField,
  Select,
  MenuItem,
  InputLabel,
@@ -37,6 +43,10 @@ import ScheduleIcon from "@mui/icons-material/Schedule";
 import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
 import {
+  useFetchRequestsList,
+  useCreateFetchRequest,
+  useUpdateFetchRequest,
+  useDeleteFetchRequest,
  useUploadFile,
 } from "./features/fetch-requests";
 import type {
@@ -47,8 +57,7 @@ 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 type { ResourceField } from "../react-openapi";
+import { useResourceByName, useConfig } from "../react-openapi";

 const statusColors: Record<FetchRequestStatus, "default" | "primary" | "warning" | "info" | "success" | "error"> = {
  pending: "default",
@@ -76,14 +85,14 @@ function formatDate(iso: string) {
 }

 function formatDateRange(start?: string, end?: string) {
-  if (!start && !end) return "\u2014";
+  if (!start && !end) return "—";
  const s = start ? new Date(start).toLocaleDateString() : "?";
  const e = end ? new Date(end).toLocaleDateString() : "?";
-  return `${s} \u2192 ${e}`;
+  return `${s} → ${e}`;
 }

 function shortId(fp: string) {
-  return fp.length > 8 ? fp.slice(0, 8) + "\u2026" : fp;
+  return fp.length > 8 ? fp.slice(0, 8) + "…" : fp;
 }

 export default function FetchRequests() {
@@ -107,13 +116,11 @@ 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 { data: listData, isLoading, isFetching, refetch } = useList({
+  const { data: listData, isLoading, isFetching, refetch } = useFetchRequestsList({
    ...(statusFilter.length > 0 ? { status: statusFilter.join(",") } : {}),
    ...(accountFilter ? { account_name: accountFilter } : {}),
    ...(sourceFilter !== "all" ? { source_type: sourceFilter } : {}),
  });
-
  const { useList: useAccountsList } = useResourceByName("accounts");
  const { data: accountsData } = useAccountsList();
  const accountOptions: string[] = React.useMemo(() => {
@@ -122,15 +129,11 @@ export default function FetchRequests() {

  const config = useConfig();
  const fetchRes = config?.resources.find((r: any) => r.name === "fetch-requests");
-  const formatField: ResourceField | undefined = fetchRes?.fields?.source?.schema?.format;
-  const formatOptions: string[] = formatField?.options ?? [];
-  const startDateField: ResourceField | undefined = fetchRes?.fields?.start_date;
-  const endDateField: ResourceField | undefined = fetchRes?.fields?.end_date;
-  const payorUsernameField: ResourceField | undefined = fetchRes?.fields?.payor_username;
+  const formatOptions: string[] = (fetchRes?.fields?.source?.schema?.format?.options as string[]) ?? ["axis", "icici_ocr"];

-  const createMutation = useCreate();
-  const updateMutation = usePatch();
-  const deleteMutation = useDelete();
+  const createMutation = useCreateFetchRequest();
+  const updateMutation = useUpdateFetchRequest();
+  const deleteMutation = useDeleteFetchRequest();
  const uploadMutation = useUploadFile();

  const requests = listData?.data ?? [];
@@ -175,7 +178,7 @@ export default function FetchRequests() {
      navigate(`/fetch-requests/${result.id}`);
    } catch (err: any) {
      if (err?.response?.status === 409) {
-        setSnackbar({ message: "Duplicate \u2014 same fingerprint already exists", severity: "error" });
+        setSnackbar({ message: "Duplicate — same fingerprint already exists", severity: "error" });
      } else {
        setSnackbar({ message: formatApiError(err) || "Failed to create fetch request", severity: "error" });
      }
@@ -262,43 +265,25 @@ export default function FetchRequests() {
                  Uploaded as: {uploadedPath}
                </Alert>
              )}
-              {formatField && components?.FormField ? (
-                <components.FormField
-                  name="format"
-                  field={formatField}
-                  value={format}
-                  onChange={setFormat}
-                />
-              ) : (
-                <FormControl size="small">
-                  <InputLabel>Format</InputLabel>
-                  <Select value={format} onChange={(e) => setFormat(e.target.value)} label="Format">
-                    {formatOptions.map((opt) => (
-                      <MenuItem key={opt} value={opt}>{opt}</MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              )}
+              <FormControl size="small">
+                <InputLabel>Format</InputLabel>
+                <Select value={format} onChange={(e) => setFormat(e.target.value)} label="Format">
+                  {formatOptions.map((opt) => (
+                    <MenuItem key={opt} value={opt}>{opt}</MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
            </>
          ) : (
            <>
-              {formatField && components?.FormField ? (
-                <components.FormField
-                  name="format"
-                  field={formatField}
-                  value={format}
-                  onChange={setFormat}
-                />
-              ) : (
-                <FormControl size="small">
-                  <InputLabel>Format</InputLabel>
-                  <Select value={format} onChange={(e) => setFormat(e.target.value)} label="Format">
-                    {formatOptions.map((opt) => (
-                      <MenuItem key={opt} value={opt}>{opt}</MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              )}
+              <FormControl size="small">
+                <InputLabel>Format</InputLabel>
+                <Select value={format} onChange={(e) => setFormat(e.target.value)} label="Format">
+                  {formatOptions.map((opt) => (
+                    <MenuItem key={opt} value={opt}>{opt}</MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
              <TextField label="From Email" value={fromEmail} onChange={(e) => setFromEmail(e.target.value)} size="small" />
              <TextField label="Subject" value={subject} onChange={(e) => setSubject(e.target.value)} size="small" />
              <TextField label="Raw Terms" value={rawTerms} onChange={(e) => setRawTerms(e.target.value)} size="small" helperText="Comma-separated search terms" />
@@ -314,60 +299,29 @@ export default function FetchRequests() {
            )}
            sx={{ "& .MuiOutlinedInput-root": { height: "auto", minHeight: "2.5rem" } }}
          />
-          {payorUsernameField && components?.FormField ? (
-            <components.FormField
-              name="payor_username"
-              field={payorUsernameField}
-              value={payorUsername}
-              onChange={setPayorUsername}
-            />
-          ) : (
-            <TextField label="Payor Username" value={payorUsername} onChange={(e) => setPayorUsername(e.target.value)} size="small" helperText="Default: aetos" />
-          )}
+          <TextField label="Payor Username" value={payorUsername} onChange={(e) => setPayorUsername(e.target.value)} size="small" helperText="Default: aetos" />

          <Box sx={{ display: "flex", gap: 2 }}>
-            {startDateField && components?.date ? (
-              <Box sx={{ flex: 1 }}>
-                <components.date
-                  name="start_date"
-                  field={startDateField}
-                  value={startDate}
-                  onChange={setStartDate}
-                />
-              </Box>
-            ) : (
-              <TextField
-                label="Start Date"
-                type="date"
-                value={startDate}
-                onChange={(e) => setStartDate(e.target.value)}
-                size="small"
-                InputLabelProps={{ shrink: true }}
-                inputProps={{ max: new Date().toISOString().split("T")[0] }}
-                sx={{ flex: 1 }}
-              />
-            )}
-            {endDateField && components?.date ? (
-              <Box sx={{ flex: 1 }}>
-                <components.date
-                  name="end_date"
-                  field={endDateField}
-                  value={endDate}
-                  onChange={setEndDate}
-                />
-              </Box>
-            ) : (
-              <TextField
-                label="End Date"
-                type="date"
-                value={endDate}
-                onChange={(e) => setEndDate(e.target.value)}
-                size="small"
-                InputLabelProps={{ shrink: true }}
-                inputProps={{ max: new Date().toISOString().split("T")[0] }}
-                sx={{ flex: 1 }}
-              />
-            )}
+            <TextField
+              label="Start Date"
+              type="date"
+              value={startDate}
+              onChange={(e) => setStartDate(e.target.value)}
+              size="small"
+              InputLabelProps={{ shrink: true }}
+              inputProps={{ max: new Date().toISOString().split("T")[0] }}
+              sx={{ flex: 1 }}
+            />
+            <TextField
+              label="End Date"
+              type="date"
+              value={endDate}
+              onChange={(e) => setEndDate(e.target.value)}
+              size="small"
+              InputLabelProps={{ shrink: true }}
+              inputProps={{ max: new Date().toISOString().split("T")[0] }}
+              sx={{ flex: 1 }}
+            />
          </Box>

          <Button
@@ -391,19 +345,17 @@ export default function FetchRequests() {
              input={<OutlinedInput label="Status" />}
              renderValue={(selected) => (selected as string[]).join(", ")}
            >
-              {(config?.enums?.FetchRequestStatus ?? []).map((s: string) => (
+              {["pending", "processing", "paused", "raw_expenses_done", "enriched_done", "completed", "failed"].map((s) => (
                <MenuItem key={s} value={s}>{s.replace(/_/g, " ")}</MenuItem>
              ))}
            </Select>
          </FormControl>
-          <Autocomplete
-            options={accountOptions}
-            value={accountFilter || null}
-            onChange={(_, val) => setAccountFilter(val ?? "")}
-            renderInput={(params) => (
-              <TextField {...params} label="Account" size="small" sx={{ minWidth: 160 }} />
-            )}
-            sx={{ minWidth: 160, "& .MuiOutlinedInput-root": { height: "auto", minHeight: "2.5rem" } }}
+          <TextField
+            label="Account"
+            value={accountFilter}
+            onChange={(e) => setAccountFilter(e.target.value)}
+            size="small"
+            sx={{ minWidth: 160 }}
          />
          <ToggleButtonGroup
            value={sourceFilter}
@@ -433,143 +385,132 @@ export default function FetchRequests() {
          No fetch requests yet
        </Box>
      ) : (
-        <Paper variant="outlined" sx={{ borderRadius: 4 }}>
-          <Box sx={{ overflowX: "auto" }}>
-            <Box component="table" sx={{ width: "100%", borderCollapse: "collapse" }}>
-              <Box component="thead">
-                <Box component="tr" sx={{ borderBottom: 1, borderColor: "divider" }}>
-                  {["ID", "Account", "Source", "Date Range", "Status", "Retries", "Created", "Actions"].map((h) => (
-                    <Box
-                      key={h}
-                      component="th"
-                      sx={{ px: 2, py: 1.5, textAlign: h === "Actions" ? "right" : "left", fontWeight: 600, fontSize: "0.8rem", color: "text.secondary", whiteSpace: "nowrap" }}
-                    >
-                      {h}
-                    </Box>
-                  ))}
-                </Box>
-              </Box>
-              <Box component="tbody">
-                {[...requests]
-                  .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
-                  .map((req: FetchRequest) => (
-                  <Box
-                    key={req.id}
-                    component="tr"
-                    onClick={() => navigate(`/fetch-requests/${req.id}`)}
-                    sx={{
-                      cursor: "pointer",
-                      borderBottom: 1,
-                      borderColor: "divider",
-                      "&:hover": { bgcolor: "action.hover" },
-                      "&:last-child": { borderBottom: 0 },
-                    }}
-                  >
-                    <Box component="td" sx={{ px: 2, py: 1.5, fontFamily: "monospace", fontSize: "0.8rem" }}>
-                      <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
-                        {shortId(req.fingerprint)}
-                        <IconButton
-                          size="small"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            navigator.clipboard.writeText(req.fingerprint);
-                            setSnackbar({ message: "Copied!", severity: "success" });
-                          }}
-                          sx={{ opacity: 0.5, '&:hover': { opacity: 1 } }}
-                        >
-                          <ContentCopyIcon sx={{ fontSize: 14 }} />
-                        </IconButton>
-                      </Box>
-                    </Box>
-                    <Box component="td" sx={{ px: 2, py: 1.5, fontSize: "0.875rem" }}>
-                      {req.account_name}
-                    </Box>
-                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
-                      <Chip
-                        label={"path" in req.source ? "File" : "Email"}
+        <TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 4 }}>
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell>ID</TableCell>
+                <TableCell>Account</TableCell>
+                <TableCell>Source</TableCell>
+                <TableCell>Date Range</TableCell>
+                <TableCell>Status</TableCell>
+                <TableCell>Retries</TableCell>
+                <TableCell>Created</TableCell>
+                <TableCell align="right">Actions</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {[...requests]
+                .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+                .map((req: FetchRequest) => (
+                <TableRow
+                  key={req.id}
+                  hover
+                  onClick={() => navigate(`/fetch-requests/${req.id}`)}
+                  sx={{ cursor: "pointer", "&:last-child td": { border: 0 } }}
+                >
+                  <TableCell sx={{ fontFamily: "monospace", fontSize: "0.8rem" }}>
+                    <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                      {shortId(req.fingerprint)}
+                      <IconButton
                        size="small"
-                        variant="outlined"
-                        color={"path" in req.source ? "primary" : "secondary"}
-                      />
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigator.clipboard.writeText(req.fingerprint);
+                          setSnackbar({ message: "Copied!", severity: "success" });
+                        }}
+                        sx={{ opacity: 0.5, '&:hover': { opacity: 1 } }}
+                      >
+                        <ContentCopyIcon sx={{ fontSize: 14 }} />
+                      </IconButton>
                    </Box>
-                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
-                      <Typography variant="body2" sx={{ fontSize: "0.8rem", whiteSpace: "nowrap" }}>
-                        {formatDateRange((req as any).start_date, (req as any).end_date)}
+                  </TableCell>
+                  <TableCell>{req.account_name}</TableCell>
+                  <TableCell>
+                    <Chip
+                      label={"path" in req.source ? "File" : "Email"}
+                      size="small"
+                      variant="outlined"
+                      color={"path" in req.source ? "primary" : "secondary"}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <Typography variant="body2" sx={{ fontSize: "0.8rem", whiteSpace: "nowrap" }}>
+                      {formatDateRange((req as any).start_date, (req as any).end_date)}
+                    </Typography>
+                  </TableCell>
+                  <TableCell>
+                    <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                      <Tooltip title={req.error_message || req.status.replace(/_/g, " ")}>
+                        <Chip
+                          icon={statusIcons[req.status] as any}
+                          label={req.status.replace(/_/g, " ")}
+                          color={statusColors[req.status]}
+                          size="small"
+                        />
+                      </Tooltip>
+                    </Box>
+                  </TableCell>
+                  <TableCell>
+                    {(req.retry_count ?? 0) > 0 ? (
+                      <Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
+                        {req.retry_count}/{RETRY_MAX}
                      </Typography>
-                    </Box>
-                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
-                      <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
-                        <Tooltip title={req.error_message || req.status.replace(/_/g, " ")}>
-                          <Chip
-                            icon={statusIcons[req.status] as any}
-                            label={req.status.replace(/_/g, " ")}
-                            color={statusColors[req.status]}
-                            size="small"
-                          />
-                        </Tooltip>
-                      </Box>
-                    </Box>
-                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
-                      {(req.retry_count ?? 0) > 0 ? (
-                        <Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
-                          {req.retry_count}/{RETRY_MAX}
-                        </Typography>
-                      ) : (
-                        <Typography variant="body2" sx={{ fontSize: "0.8rem", color: "text.disabled" }}>
-                          \u2014
-                        </Typography>
-                      )}
-                    </Box>
-                    <Box component="td" sx={{ px: 2, py: 1.5, whiteSpace: "nowrap", fontSize: "0.8rem" }}>
-                      {formatDate(req.created_at)}
-                    </Box>
-                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
-                      <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
-                        {req.status === "paused" && (
-                          <Tooltip title="Resolve ambiguities">
-                            <IconButton
-                              size="small"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                navigate(`/fetch-requests/${req.id}`);
-                              }}
-                            >
-                              <WarningAmberIcon fontSize="small" color="warning" />
-                            </IconButton>
-                          </Tooltip>
-                        )}
-                        {req.status === "failed" && (req.retry_count ?? 0) < RETRY_MAX && (
-                          <Tooltip title="Retry">
-                            <IconButton
-                              size="small"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleRetry(req);
-                              }}
-                            >
-                              <ReplayIcon fontSize="small" />
-                            </IconButton>
-                          </Tooltip>
-                        )}
-                        <Tooltip title="Delete">
+                    ) : (
+                      <Typography variant="body2" sx={{ fontSize: "0.8rem", color: "text.disabled" }}>
+                        —
+                      </Typography>
+                    )}
+                  </TableCell>
+                  <TableCell sx={{ whiteSpace: "nowrap", fontSize: "0.8rem" }}>
+                    {formatDate(req.created_at)}
+                  </TableCell>
+                  <TableCell align="right">
+                    <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
+                      {req.status === "paused" && (
+                        <Tooltip title="Resolve ambiguities">
                          <IconButton
                            size="small"
                            onClick={(e) => {
                              e.stopPropagation();
-                              setDeleteTarget(req);
+                              navigate(`/fetch-requests/${req.id}`);
                            }}
                          >
-                            <DeleteIcon fontSize="small" />
+                            <WarningAmberIcon fontSize="small" color="warning" />
                          </IconButton>
                        </Tooltip>
-                      </Box>
+                      )}
+                      {req.status === "failed" && (req.retry_count ?? 0) < RETRY_MAX && (
+                        <Tooltip title="Retry">
+                          <IconButton
+                            size="small"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleRetry(req);
+                            }}
+                          >
+                            <ReplayIcon fontSize="small" />
+                          </IconButton>
+                        </Tooltip>
+                      )}
+                      <Tooltip title="Delete">
+                        <IconButton
+                          size="small"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setDeleteTarget(req);
+                          }}
+                        >
+                          <DeleteIcon fontSize="small" />
+                        </IconButton>
+                      </Tooltip>
                    </Box>
-                  </Box>
-                ))}
-              </Box>
-            </Box>
-          </Box>
-        </Paper>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
      )}

      <Snackbar
--- a/src/ReportSnapshots.tsx
+++ b/src/ReportSnapshots.tsx
@@ -4,7 +4,14 @@ import {
  Container,
  Paper,
  Typography,
+  TextField,
  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
  IconButton,
  CircularProgress,
  Alert,
@@ -14,28 +21,20 @@ import {
  DialogContent,
  DialogContentText,
  DialogActions,
+  Switch,
+  FormControlLabel,
  Chip,
 } from "@mui/material";
 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 type { ResourceField } from "../react-openapi";
-
-interface ReportSnapshotQuery {
-  accounts?: string[];
-  ignore_self?: boolean;
-  start_date?: string;
-  end_date?: string;
-}
-
-interface ReportSnapshot {
-  id: string;
-  snapshot_id: string;
-  created_at: string;
-  query?: ReportSnapshotQuery;
-}
+import {
+  useReportSnapshotsList,
+  useCreateSnapshot,
+  useDeleteSnapshot,
+} from "./features/report-snapshots";
+import type { ReportSnapshot } from "./features/report-snapshots";

 function formatDate(iso: string) {
  const d = new Date(iso);
@@ -52,32 +51,21 @@ 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 { data: listData, isLoading, isFetching, refetch } = useReportSnapshotsList();
+  const createMutation = useCreateSnapshot();
+  const deleteMutation = useDeleteSnapshot();

-  const { data: listData, isLoading, isFetching, refetch } = useList();
-  const createMutation = useCreate();
-  const deleteMutation = useDelete();
-
-  const config = useConfig();
-  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 snapshots = listData?.data ?? [];

  const handleCreate = async () => {
    try {
-      const payload: Record<string, any> = {};
-      if (ignoreSelf) payload.ignore_self = true;
-      if (startDate) payload.start_date = new Date(startDate).toISOString();
-      if (endDate) payload.end_date = new Date(endDate).toISOString();
-      if (minAmount) payload.min_amount = parseFloat(minAmount);
-      if (maxAmount) payload.max_amount = parseFloat(maxAmount);
-
-      const result = await createMutation.mutateAsync(payload);
+      const result = await createMutation.mutateAsync({
+        ignore_self: ignoreSelf || null,
+        start_date: startDate ? new Date(startDate).toISOString() : null,
+        end_date: endDate ? new Date(endDate).toISOString() : null,
+        min_amount: minAmount ? parseFloat(minAmount) : null,
+        max_amount: maxAmount ? parseFloat(maxAmount) : null,
+      });
      const snapshotId = (result as any)?.snapshot_id;
      if (snapshotId) {
        setCreatedSnapshotId(snapshotId);
@@ -92,7 +80,7 @@ export default function ReportSnapshots() {
  };

  const resetForm = () => {
-    setIgnoreSelf(true);
+    setIgnoreSelf(false);
    setStartDate("");
    setEndDate("");
    setMinAmount("");
@@ -122,59 +110,49 @@ export default function ReportSnapshots() {
        </Typography>

        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-          {ignoreSelfField && components?.FormField && (
-            <components.FormField
-              name="ignore_self"
-              field={ignoreSelfField}
-              value={ignoreSelf}
-              onChange={(val: boolean) => setIgnoreSelf(val)}
-            />
-          )}
+          <FormControlLabel
+            control={<Switch checked={ignoreSelf} onChange={(e) => setIgnoreSelf(e.target.checked)} />}
+            label="Ignore self-transfers"
+          />

          <Box sx={{ display: "flex", gap: 2 }}>
-            {startDateField && components?.datetime && (
-              <Box sx={{ flex: 1 }}>
-                <components.datetime
-                  name="start_date"
-                  field={startDateField}
-                  value={startDate}
-                  onChange={(val: string) => setStartDate(val)}
-                />
-              </Box>
-            )}
-            {endDateField && components?.datetime && (
-              <Box sx={{ flex: 1 }}>
-                <components.datetime
-                  name="end_date"
-                  field={endDateField}
-                  value={endDate}
-                  onChange={(val: string) => setEndDate(val)}
-                />
-              </Box>
-            )}
+            <TextField
+              label="Start Date"
+              type="datetime-local"
+              value={startDate}
+              onChange={(e) => setStartDate(e.target.value)}
+              size="small"
+              InputLabelProps={{ shrink: true }}
+              sx={{ flex: 1 }}
+            />
+            <TextField
+              label="End Date"
+              type="datetime-local"
+              value={endDate}
+              onChange={(e) => setEndDate(e.target.value)}
+              size="small"
+              InputLabelProps={{ shrink: true }}
+              sx={{ flex: 1 }}
+            />
          </Box>

          <Box sx={{ display: "flex", gap: 2 }}>
-            {minAmountField && components?.FormField && (
-              <Box sx={{ flex: 1 }}>
-                <components.FormField
-                  name="min_amount"
-                  field={minAmountField}
-                  value={minAmount}
-                  onChange={(val: string) => setMinAmount(val)}
-                />
-              </Box>
-            )}
-            {maxAmountField && components?.FormField && (
-              <Box sx={{ flex: 1 }}>
-                <components.FormField
-                  name="max_amount"
-                  field={maxAmountField}
-                  value={maxAmount}
-                  onChange={(val: string) => setMaxAmount(val)}
-                />
-              </Box>
-            )}
+            <TextField
+              label="Min Amount"
+              type="number"
+              value={minAmount}
+              onChange={(e) => setMinAmount(e.target.value)}
+              size="small"
+              sx={{ flex: 1 }}
+            />
+            <TextField
+              label="Max Amount"
+              type="number"
+              value={maxAmount}
+              onChange={(e) => setMaxAmount(e.target.value)}
+              size="small"
+              sx={{ flex: 1 }}
+            />
          </Box>

          <Button
@@ -213,29 +191,20 @@ export default function ReportSnapshots() {
            No snapshots yet
          </Box>
        ) : (
-          <Box sx={{ overflowX: "auto" }}>
-            <Box component="table" sx={{ width: "100%", borderCollapse: "collapse" }}>
-              <Box component="thead">
-                <Box component="tr" sx={{ borderBottom: 1, borderColor: "divider" }}>
-                  {["Snapshot ID", "Created", "Query", "Actions"].map((h) => (
-                    <Box
-                      key={h}
-                      component="th"
-                      sx={{ px: 2, py: 1.5, textAlign: h === "Actions" ? "right" : "left", fontWeight: 600, fontSize: "0.8rem", color: "text.secondary", whiteSpace: "nowrap" }}
-                    >
-                      {h}
-                    </Box>
-                  ))}
-                </Box>
-              </Box>
-              <Box component="tbody">
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Snapshot ID</TableCell>
+                  <TableCell>Created</TableCell>
+                  <TableCell>Query</TableCell>
+                  <TableCell align="right">Actions</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
                {snapshots.map((snap: ReportSnapshot) => (
-                  <Box
-                    key={snap.id}
-                    component="tr"
-                    sx={{ borderBottom: 1, borderColor: "divider", "&:last-child": { borderBottom: 0 }, "&:hover": { bgcolor: "action.hover" } }}
-                  >
-                    <Box component="td" sx={{ px: 2, py: 1.5, fontFamily: "monospace", fontSize: "0.8rem" }}>
+                  <TableRow key={snap.id}>
+                    <TableCell sx={{ fontFamily: "monospace", fontSize: "0.8rem" }}>
                      <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
                        {snap.snapshot_id}
                        <IconButton
@@ -249,11 +218,9 @@ export default function ReportSnapshots() {
                          <ContentCopyIcon sx={{ fontSize: 14 }} />
                        </IconButton>
                      </Box>
-                    </Box>
-                    <Box component="td" sx={{ px: 2, py: 1.5, fontSize: "0.875rem" }}>
-                      {formatDate(snap.created_at)}
-                    </Box>
-                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
+                    </TableCell>
+                    <TableCell>{formatDate(snap.created_at)}</TableCell>
+                    <TableCell>
                      {snap.query ? (
                        <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
                          {snap.query.accounts && <Chip label={`${snap.query.accounts.length} account(s)`} size="small" variant="outlined" />}
@@ -262,21 +229,19 @@ export default function ReportSnapshots() {
                          {snap.query.end_date && <Chip label="end" size="small" variant="outlined" />}
                        </Box>
                      ) : (
-                        <Typography variant="body2" color="text.secondary">\u2014</Typography>
+                        <Typography variant="body2" color="text.secondary">—</Typography>
                      )}
-                    </Box>
-                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
-                      <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
-                        <IconButton size="small" onClick={() => setDeleteTarget(snap)}>
-                          <DeleteIcon fontSize="small" />
-                        </IconButton>
-                      </Box>
-                    </Box>
-                  </Box>
+                    </TableCell>
+                    <TableCell align="right">
+                      <IconButton size="small" onClick={() => setDeleteTarget(snap)}>
+                        <DeleteIcon fontSize="small" />
+                      </IconButton>
+                    </TableCell>
+                  </TableRow>
                ))}
-              </Box>
-            </Box>
-          </Box>
+              </TableBody>
+            </Table>
+          </TableContainer>
        )}
      </Paper>

--- a/src/features/fetch-requests/index.ts
+++ b/src/features/fetch-requests/index.ts
@@ -17,6 +17,11 @@ export type {
 } from "./fetch-requests.models";
 export { RETRY_MAX, formatApiError } from "./fetch-requests.models";
 export {
+  useFetchRequestsList,
+  useFetchRequest,
+  useCreateFetchRequest,
+  useUpdateFetchRequest,
+  useDeleteFetchRequest,
  useUploadFile,
  useFetchRequestAmbiguities,
  useResolveAmbiguity,
--- a/src/features/report-snapshots/index.ts
+++ b/src/features/report-snapshots/index.ts
@@ -2,3 +2,8 @@ export type {
  ReportSnapshot,
  ReportQuery,
 } from "./report-snapshots.models";
+export {
+  useReportSnapshotsList,
+  useCreateSnapshot,
+  useDeleteSnapshot,
+} from "./useReportSnapshots";
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -15,7 +15,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 { Admin, AppProvider } from '../react-openapi';
 import { configuration, profileConfiguration } from './openapi-config';
 import { Buffer } from 'buffer';
 import process from 'process';
@@ -60,7 +60,7 @@ root.render(
                  path={path}
                  element={
                    path.startsWith("/admin") ? (
-                      <Component basePath="/admin" fieldComponents={{ ...defaultFieldComponents }} />
+                      <Component basePath="/admin" />
                    ) : (
                      <Component />
                    )
--- a/src/openapi-config.ts
+++ b/src/openapi-config.ts
@@ -1,4 +1,4 @@
-import { ResourceOverride } from "../react-openapi";
+import { ResourceOverride } from "../react-openapi/types/overrides";

 export const configuration: Record<string, ResourceOverride> = {
  expenses: {
@@ -8,22 +8,20 @@ export const configuration: Record<string, ResourceOverride> = {
    },
    fields: {
      payee: {
-        displayFormat: "{name}",
+        displayField: "name",
        filterType: "autocomplete",
      },
      payor: {
        display: false,
-        displayFormat: "{username}",
+        displayField: "username",
      },
      account: {
-        displayFormat: "{name}",
+        displayField: "name",
        filterType: "multiselect",
-        refers: "accounts"
      },
      tags: {
-        displayFormat: "{icon} {name}",
+        displayField: ["name", "icon"],
        filterType: "autocomplete",
-        refers: "tags"
      },
      occurred_at: {
        filterType: "date-range",
@@ -52,39 +50,6 @@ export const configuration: Record<string, ResourceOverride> = {
      }
    },
  },
-  'fetch-requests': {
-    fields: {
-      format: {
-        path: 'source.format',
-      },
-      // 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 = {