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>

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,
@@ -64,7 +63,7 @@ function Dashboard({ basePath }: { basePath: string }) {
 
 import ProfileView from "./components/ProfileView";
 
-function AdminApp({ basePath, fieldComponents }: { basePath: string; fieldComponents?: FieldComponents }) {
+function AdminApp({ basePath }: { basePath: string }) {
   const { currentUser, login, logout, loading, error } = useAuth();
   const config = React.useContext(ConfigContext);
   const navigate = useNavigate();
@@ -97,33 +96,32 @@ function AdminApp({ basePath, fieldComponents }: { basePath: string; fieldCompon
       <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>
     </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} />;
+  return <ResourceView config={selectedResource} />;
 }
 
 interface AdminProps {
   basePath?: string;
   resourceOverrides?: Record<string, any>;
   profileConfig?: any;
-  fieldComponents?: FieldComponents;
 }
 
-export default function Admin({ basePath = "/admin", resourceOverrides = {}, profileConfig = {}, fieldComponents = {} }: AdminProps) {
+export default function Admin({ basePath = "/admin", resourceOverrides = {}, profileConfig = {} }: AdminProps) {
   const existingConfig = React.useContext(ConfigContext);
   const [config, setConfig] = React.useState<AppConfig | null>(existingConfig);
 
@@ -153,7 +151,7 @@ export default function Admin({ basePath = "/admin", resourceOverrides = {}, pro
 
   const content = (
     <UploadProvider>
-      <AdminApp basePath={basePath} fieldComponents={fieldComponents} />
+      <AdminApp basePath={basePath} />
     </UploadProvider>
   );
 

react-openapi/components/EnhancedTable.tsx

@@ -31,7 +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 { getFieldOptions, toGridValueOptions, resolveTemplate } from '../utils/options';
 
 interface EnhancedTableProps {
   config: ResourceConfig;
@@ -96,8 +95,9 @@ export default function EnhancedTable({
         };
       }
 
-      if (muiType === 'singleSelect') {
-        col.valueOptions = toGridValueOptions(getFieldOptions(field));
+      if (muiType === 'singleSelect' && field.options) {
+        // @ts-ignore
+        col.valueOptions = field.options;
       }
 
       return col;
@@ -274,9 +274,8 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
     );
 }
 
-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)) {
@@ -298,7 +297,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
     // 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 
@@ -317,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">
@@ -326,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 }}
@@ -346,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') {
@@ -381,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 

react-openapi/components/FilterBar.tsx

@@ -11,7 +11,6 @@ import {
 import DoneIcon from "@mui/icons-material/Done";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import { ResourceField, ResourceMode } from "../types/config";
-import { getFieldOptions, resolveTemplate } from "../utils/options";
 
 function FilterAutocomplete({
   options,
@@ -111,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 => {
@@ -121,18 +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) return null;
+    if (!df) { debugger; return null; }
 
     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);
     }
-    const v = item[df];
-    if (v != null) return String(v);
 
+    debugger;
     return null;
   };
 

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);
@@ -120,7 +117,6 @@ export default function GenericForm({
           uploading={uploading}
           baseUrl={appConfig?.baseUrl || ""}
           relationDataMap={relationDataMap}
-          components={fieldComponents}
         />
       ))}
 

react-openapi/components/ResourceView.tsx

@@ -2,9 +2,7 @@ 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';
@@ -13,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(
@@ -67,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));
       }
@@ -84,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);
@@ -98,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();
@@ -210,7 +213,6 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon
             loading={createMutation.isPending || updateMutation.isPending}
             readOnly={isView}
             onEditClick={() => navigate(`/admin/${config.name}/edit/${id}`)}
-            fieldComponents={fieldComponents}
           />
         </Paper>
       )}

react-openapi/components/fields/BooleanField.tsx

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

react-openapi/components/fields/DateField.tsx

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

react-openapi/components/fields/DefaultFieldComponents.ts

@@ -1,20 +0,0 @@
-import { FieldComponents } 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';
-
-export const defaultFieldComponents: FieldComponents = {
-  string: TextFieldEntry,
-  markdown: TextFieldEntry,
-  number: NumberField,
-  boolean: BooleanField,
-  date: DateField,
-  datetime: DateField,
-  enum: EnumField,
-  image: ImageUploadField,
-  relation: RelationField,
-};

react-openapi/components/fields/EnumField.tsx

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

react-openapi/components/fields/FormField.tsx

@@ -1,9 +1,17 @@
 import * as React from 'react';
-import { TextField as MuiTextField } from '@mui/material';
+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 { defaultFieldComponents } from './DefaultFieldComponents';
-import ObjectField from './ObjectField';
 import ImageUploadField from './ImageUploadField';
 
 interface FormFieldProps {
@@ -15,19 +23,7 @@ interface FormFieldProps {
   uploadFile: (file: File) => Promise<string | null>;
   uploading: boolean;
   baseUrl: string;
-  relationDataMap?: Record<string, any[]>;
-  components?: FieldComponents;
-}
-
-function FallbackField({ field, value }: FieldComponentProps) {
-  return (
-    <MuiTextField
-      fullWidth
-      label={field.label}
-      value={typeof value === 'object' ? JSON.stringify(value) : value || ''}
-      disabled
-    />
-  );
+  relationDataMap?: Record<string, any[]>; // Map of relation name to data array
 }
 
 export default function FormField({
@@ -40,62 +36,189 @@ export default function FormField({
   uploading,
   baseUrl,
   relationDataMap = {},
-  components: componentsProp,
 }: FormFieldProps) {
-  const components = React.useMemo(
-    () => ({ ...defaultFieldComponents, ...componentsProp }),
-    [componentsProp],
-  );
+  const label = field.label;
 
-  const fieldProps: FieldComponentProps = {
-    name,
-    field,
-    value,
-    onChange,
-    disabled,
-    baseUrl,
-    relationDataMap,
-    uploadFile,
-    uploading,
-  };
-
-  // 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={componentsProp}
+    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 || ImageUploadField;
-    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 || defaultFieldComponents.relation!;
-    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];
-  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}
+      />
+    );
   }
 
-  // 5. Fallback for unknown types
-  return <FallbackField {...fieldProps} />;
+  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
+    />
+  );
 }

react-openapi/components/fields/NumberField.tsx

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

react-openapi/components/fields/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>
-  );
-}

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].data;
-  const isArrayRelation = field.type === 'array';
-  const options = getFieldOptions(field, relationData);
-  const keyField = field.enumOption?.key ?? 'id';
-
-  const normalizedValue = (() => {
-    if (isArrayRelation && Array.isArray(value)) {
-      return value.map((v: any) => (v != null && typeof v === 'object' ? String(v[keyField] ?? '') : String(v)));
-    }
-    if (value != null && typeof value === 'object') {
-      return String(value[keyField] ?? '');
-    }
-    return value ?? (isArrayRelation ? [] : "");
-  })();
-
-  return (
-    <FormControl fullWidth>
-      <InputLabel shrink>{field.label}</InputLabel>
-      <Select
-        multiple={isArrayRelation}
-        value={normalizedValue}
-        label={field.label}
-        displayEmpty
-        onChange={(e) => onChange(e.target.value)}
-        disabled={disabled}
-        renderValue={(selected: any) => {
-          if (isArrayRelation) {
-            return (selected as string[]).map(k => options.find(o => o.key === k)?.value ?? k).join(', ');
-          }
-          return options.find(o => o.key === selected)?.value ?? selected;
-        }}
-      >
-        {options.map((opt) => (
-          <MenuItem key={opt.key} value={opt.key}>
-            {opt.value}
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
-  );
-}

react-openapi/components/fields/TextField.tsx

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

react-openapi/components/fields/index.ts

@@ -1,11 +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 { defaultFieldComponents } from './DefaultFieldComponents';
-export type { ObjectFieldProps } from './ObjectField';

react-openapi/hooks/useResource.ts

@@ -4,10 +4,7 @@ import { ResourceConfig } from "../types/config";
 import { ConfigContext } from "../providers/ConfigContext";
 import * as React from "react";
 
-import { FieldComponents } from "../types/overrides";
-import { defaultFieldComponents } from "../components/fields/DefaultFieldComponents";
-
-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
@@ -150,11 +147,6 @@ export function useResource<T = any>(config: ResourceConfig | undefined, options
       },
     });
 
-  const components = {
-    ...defaultFieldComponents,
-    ...options?.fieldComponents,
-  };
-
   return {
     useList,
     useRead,
@@ -165,13 +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);
 }
 

react-openapi/index.ts

@@ -2,20 +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 } from "./types/overrides";
 export { AppProvider } from "./providers/AppProvider";
 export { ConfigContext, useConfig } from "./providers/ConfigContext";
 export { useResource, useResourceByName } from "./hooks/useResource";
 export { default as FilterBar } from "./components/FilterBar";
-export {
-  defaultFieldComponents,
-  FormField,
-  TextField,
-  NumberField,
-  BooleanField,
-  DateField,
-  EnumField,
-  RelationField,
-  ObjectField,
-  ImageUploadField,
-} from "./components/fields";

react-openapi/types/config.ts

@@ -10,16 +10,6 @@ export type FieldType =
   | 'object'
   | 'array';
 
-export interface SelectOption {
-  key: string;
-  value: string;
-}
-
-export interface EnumOption {
-  key: string;
-  value: string;
-}
-
 export interface ResourceField {
   type: FieldType;
   label: string;
@@ -29,10 +19,8 @@ export interface ResourceField {
   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>;

react-openapi/types/overrides.ts

@@ -1,16 +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 {
   displayField?: string | string[];
   display?: boolean;
   formatter?: (value: any) => string;
   filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
-  enumLabels?: Record<string, string>;
 }
 
 export interface ResourceOverride {
@@ -21,25 +18,4 @@ export interface ResourceOverride {
     mode?: "server" | "client";
     fields?: string[];
   };
-  enumOption?: EnumOption;
 }
-
-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;
-};

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,19 +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 || {};
 
   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);
+    const type = mapOpenApiType(prop);
     const override = overrides[key];
 
     // Explicitly skip 'id' as it's the primary key and handled elsewhere
@@ -84,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,
@@ -98,35 +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]?.enumOption;
-      if (explicitEnumOption) {
-        fields[key].enumOption = explicitEnumOption;
-      } else {
-        const targetProps = targetSchema.properties || {};
-        const valueField = Object.entries(targetProps).find(
-          ([name, p]: [string, any]) => name !== 'id' && p.type === 'string'
-        )?.[0];
-        fields[key].enumOption = {
-          key: 'id',
-          value: valueField ?? 'id',
-        };
-      }
     }
 
     // Recursively parse nested objects (only if not a relation)
-    if (fields[key].type === "object" && resolvedProp.properties && !relation) {
-      fields[key].schema = parseSchemaFields(resolvedProp, resourceName, schemaToResourceMap, configuration);
+    if (fields[key].type === "object" && prop.properties && !relation) {
+      fields[key].schema = parseSchemaFields(prop, resourceName, schemaToResourceMap, configuration);
     }
   }
 
@@ -214,16 +172,6 @@ export async function loadConfigFromOpenApi(baseUrl: string, configuration: Reco
     });
   }
 
-  // Collect standalone enum schemas (e.g. FetchRequestStatus, AccountType, etc.)
-  const enums: Record<string, string[]> = {};
-  if (api.components?.schemas) {
-    for (const [name, schema] of Object.entries(api.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
@@ -232,7 +180,6 @@ export async function loadConfigFromOpenApi(baseUrl: string, configuration: Reco
     baseUrl: serverBaseUrl,
     authBaseUrl: authBaseUrl,
     resources,
-    enums,
     profile: profileConfiguration,
   };
 }

react-openapi/utils/options.ts

@@ -1,33 +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 ?? { key: 'id', value: 'name' };
-
-    return data.map(item => ({
-      key: String(item[enumOption.key] ?? ''),
-      value: resolveTemplate(enumOption.value, item),
-    }));
-  }
-
-  return [];
-}
-
-export function toGridValueOptions(options: SelectOption[]): { value: string; label: string }[] {
-  return options.map(opt => ({ value: opt.key, label: opt.value }));
-}

src/FetchRequests.tsx

@@ -129,7 +129,7 @@ export default function FetchRequests() {
 
   const config = useConfig();
   const fetchRes = config?.resources.find((r: any) => r.name === "fetch-requests");
-  const formatOptions: string[] = fetchRes?.fields?.source?.schema?.format?.options as string[] ?? [];
+  const formatOptions: string[] = (fetchRes?.fields?.source?.schema?.format?.options as string[]) ?? ["axis", "icici_ocr"];
 
   const createMutation = useCreateFetchRequest();
   const updateMutation = useUpdateFetchRequest();
@@ -345,7 +345,7 @@ 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>

src/openapi-config.ts

@@ -50,18 +50,6 @@ export const configuration: Record<string, ResourceOverride> = {
       }
     },
   },
-  accounts: {
-    enumOption: {
-      key: 'id',
-      value: '{name} - XXXX{number}'
-    }
-  },
-  tags: {
-    enumOption: {
-      key: 'id',
-      value: '{icon} {name}'
-    }
-  },
 };
 
 export const profileConfiguration = {