openapi-spec-reader (#10)

### Summary of Changes:
1.  **Spec-Driven Enums**:
    - Updated `openapi_loader.ts` to collect all standalone enum schemas (e.g., `FetchRequestStatus`) into the `AppConfig.enums` map.
    - Implemented `mergeProperties` and `oneOf`/`anyOf` resolution in `openapi_loader.ts` to ensure complex schemas like `FetchRequest` (using `allOf`) and `source` (using `oneOf`) are correctly parsed.
2.  **Customizable Labeling**:
    - Added `enumOption` (template-based) and `enumLabels` (mapping-based) to the config and field types.
    - Implemented `resolveTemplate` in `utils/options.ts` to handle placeholders like `'{name} {number}'` or plain field names.
3.  **UI Integration**:
    - **`FormField.tsx`**: Updated relation and enum selects to use `getFieldOptions()` for correct key/value pairs and labels. Added value normalization to extract keys from API objects.
    - **`EnhancedTable.tsx`**: Updated `valueOptions` to use key/value pairs for `singleSelect` and updated `FieldRenderer` to show the human-readable label for enums.
    - **`FilterBar.tsx`**: Updated `extractOptions` to use spec-driven labels for enum filters.
    - **`ResourceView.tsx`**: Centralized filter matching logic into a `getDisplayString` helper, ensuring filter comparisons use the same templates as the UI labels.
4. **App Fixes**:
    - `FetchRequests.tsx` and `FetchRequestDetail.tsx` now derive status and format options from the OpenAPI spec via `useConfig()` instead of using hardcoded arrays.

Reviewed-on: #10
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

react-openapi/components/EnhancedTable.tsx

@@ -31,6 +31,7 @@ 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;
@@ -95,9 +96,8 @@ export default function EnhancedTable({
         };
       }
 
-      if (muiType === 'singleSelect' && field.options) {
+      if (muiType === 'singleSelect') {
-        // @ts-ignore
+        col.valueOptions = toGridValueOptions(getFieldOptions(field));
-        col.valueOptions = field.options;
       }
 
       return col;
@@ -274,8 +274,9 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
     );
 }
 
-function getFormattedDisplayValue(item: any, displayField?: string | string[]) {
+function getFormattedDisplayValue(item: any, displayField?: string | string[], enumValue?: 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)) {
@@ -297,7 +298,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);
+        const displayValue = getFormattedDisplayValue(value, field.displayField, field.enumOption?.value);
         
         return (
             <Chip 
@@ -316,7 +317,8 @@ 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 tooltipTitle = value.map((item) => getFormattedDisplayValue(item, field.displayField)).join(', ');
+        const enumValue = field.enumOption?.value;
+        const tooltipTitle = value.map((item) => getFormattedDisplayValue(item, field.displayField, enumValue)).join(', ');
 
         return (
             <Tooltip title={tooltipTitle} arrow placement="top">
@@ -324,7 +326,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
                     {value.map((item, idx) => (
                         <Chip
                             key={idx}
-                            label={getFormattedDisplayValue(item, field.displayField)}
+                            label={getFormattedDisplayValue(item, field.displayField, enumValue)}
                             size="small"
                             variant="filled"
                             sx={{ maxWidth: 120 }}
@@ -344,7 +346,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
 
     // 3. Simple Objects
     if (field.type === 'object' && value) {
-        return getFormattedDisplayValue(value, field.displayField) || (isMobile ? 'Object' : JSON.stringify(value));
+        return getFormattedDisplayValue(value, field.displayField, field.enumOption?.value) || (isMobile ? 'Object' : JSON.stringify(value));
     }
 
     if (field.type === 'number' && typeof value === 'number') {
@@ -379,6 +381,11 @@ 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,6 +11,7 @@ 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,
@@ -110,7 +111,9 @@ function extractOptions(
 ): string[] {
   const values = new Set<string>();
 
-  if (field.options) return field.options;
+  if (field.type === 'enum') {
+    return getFieldOptions(field).map(o => o.value);
+  }
   if (!data) return [];
 
   const pull = (item: any): string | null => {
@@ -118,18 +121,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; }
+    if (!df) 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);
-    }
 
-    debugger;
     return null;
   };
 

react-openapi/components/ResourceView.tsx

@@ -3,6 +3,7 @@ import { Box, Paper, CircularProgress } from '@mui/material';
 import { ResourceConfig } from '../types/config';
 import type { ResourceField } from '../types/config';
 import { useResource } from '../hooks/useResource';
+import { resolveTemplate } from '../utils/options';
 import GenericForm from './GenericForm';
 import EnhancedTable from './EnhancedTable';
 import FilterBar from './FilterBar';
@@ -15,11 +16,16 @@ interface ResourceViewProps {
 
 import { GridPaginationModel } from '@mui/x-data-grid';
 
-function getFilterDisplayFields(field: ResourceField): string[] {
+function getDisplayString(item: any, field: ResourceField): string {
-  if (!field.displayField) return [];
+  if (item == null || typeof item !== 'object') return String(item ?? '');
-  return (Array.isArray(field.displayField) ? field.displayField : [field.displayField]).filter(
+  if (field.enumOption?.value) return resolveTemplate(field.enumOption.value, item);
-    (df): df is string => !!df
+  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 applyClientFilters(
@@ -59,18 +65,12 @@ function applyClientFilters(
 
       if (Array.isArray(filterValue)) {
         if (field.type === "array" && Array.isArray(itemValue)) {
-          return itemValue.some((el: any) => {
+          return itemValue.some((el: any) =>
-            if (el != null && typeof el === "object") {
+            filterValue.includes(getDisplayString(el, field))
-              const dispFields = getFilterDisplayFields(field);
+          );
-              return dispFields.some((df) => filterValue.includes(String(el[df])));
-            }
-            return filterValue.includes(String(el));
-          });
         }
         if (itemValue && typeof itemValue === "object") {
-          const dispFields = getFilterDisplayFields(field);
+          return filterValue.includes(getDisplayString(itemValue, field));
-          const itemDisplay = dispFields.map((df) => itemValue[df]).filter((v) => v != null).join(" ");
-          return filterValue.includes(itemDisplay);
         }
         return filterValue.includes(String(itemValue));
       }
@@ -82,18 +82,13 @@ function applyClientFilters(
       }
 
       if (field.type === "array" && Array.isArray(itemValue)) {
-        return itemValue.some((el: any) => {
+        return itemValue.some((el: any) =>
-          if (el != null && typeof el === "object") {
+          getDisplayString(el, field) === String(filterValue)
-            const dispFields = getFilterDisplayFields(field);
+        );
-            return dispFields.some((df) => String(el[df]) === String(filterValue));
-          }
-          return String(el) === String(filterValue);
-        });
       }
 
       if (itemValue && typeof itemValue === "object") {
-        const dispFields = getFilterDisplayFields(field);
+        return getDisplayString(itemValue, field) === String(filterValue);
-        return dispFields.some((df) => String(itemValue[df]) === String(filterValue));
       }
 
       return String(itemValue) === String(filterValue);

react-openapi/components/fields/FormField.tsx

@@ -12,6 +12,7 @@ import {
   Divider,
 } from '@mui/material';
 import { ResourceField } from '../../types/config';
+import { getFieldOptions } from '../../utils/options';
 import ImageUploadField from './ImageUploadField';
 
 interface FormFieldProps {
@@ -73,40 +74,40 @@ export default function FormField({
   if (field.relation && relationDataMap[field.relation]) {
     const relationData = relationDataMap[field.relation].data;
     const isArrayRelation = field.type === 'array';
+    const options = getFieldOptions(field, relationData);
+    const keyField = field.enumOption?.key ?? 'id';
 
-    // Determine how to display the related item
+    // Normalize value: API returns whole objects on GET, but form uses key strings
-    const getOptionLabel = (option: any) => {
+    const normalizedValue = (() => {
-        if (!option) return "";
+      if (isArrayRelation && Array.isArray(value)) {
-        if (field.displayField && option[field.displayField]) return option[field.displayField];
+        return value.map((v: any) => (v != null && typeof v === 'object' ? String(v[keyField] ?? '') : String(v)));
-        // Standard naming fields
+      }
-        return option.name || option.title || option.label || option.id || JSON.stringify(option);
+      if (value != null && typeof value === 'object') {
-    };
+        return String(value[keyField] ?? '');
-
+      }
-    const getOptionValue = (option: any) => {
+      return value ?? (isArrayRelation ? [] : "");
-        // Return the whole object to maintain identity
+    })();
-        return option;
-    };
 
     return (
       <FormControl fullWidth>
         <InputLabel shrink>{label}</InputLabel>
         <Select
           multiple={isArrayRelation}
-          value={value || (isArrayRelation ? [] : "")}
+          value={normalizedValue}
           label={label}
           displayEmpty
           onChange={(e) => onChange(e.target.value)}
           disabled={disabled}
           renderValue={(selected: any) => {
             if (isArrayRelation) {
-              return (selected as any[]).map(getOptionLabel).join(', ');
+              return (selected as string[]).map(k => options.find(o => o.key === k)?.value ?? k).join(', ');
             }
-            return getOptionLabel(selected);
+            return options.find(o => o.key === selected)?.value ?? selected;
           }}
         >
-          {relationData.map((option) => (
+          {options.map((opt) => (
-            <MenuItem key={option.id || JSON.stringify(option)} value={getOptionValue(option)}>
+            <MenuItem key={opt.key} value={opt.key}>
-              {getOptionLabel(option)}
+              {opt.value}
             </MenuItem>
           ))}
         </Select>
@@ -148,7 +149,8 @@ export default function FormField({
   }
 
   // 5. Enum Handling
-  if (field.type === 'enum' && field.options) {
+  if (field.type === 'enum') {
+    const options = getFieldOptions(field);
     return (
       <FormControl fullWidth>
         <InputLabel>{label}</InputLabel>
@@ -158,9 +160,9 @@ export default function FormField({
           onChange={(e) => onChange(e.target.value)}
           disabled={disabled}
         >
-          {field.options.map((opt: string) => (
+          {options.map((opt) => (
-            <MenuItem key={opt} value={opt}>
+            <MenuItem key={opt.key} value={opt.key}>
-              {opt}
+              {opt.value}
             </MenuItem>
           ))}
         </Select>

react-openapi/types/config.ts

@@ -10,6 +10,16 @@ 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;
@@ -19,8 +29,10 @@ export interface ResourceField {
   schema?: Record<string, ResourceField>;
   displayField?: string | string[];
   formatter?: (value: any) => string;
-  relation?: string; // Name of the target resource
+  relation?: string;
   filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
+  enumOption?: EnumOption;
+  enumLabels?: Record<string, string>;
 }
 
 export type ResourceMode = "server" | "client";
@@ -38,12 +50,14 @@ 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,13 +1,14 @@
-/**
+export interface EnumOption {
- * This file contains application-specific overrides and configuration
+  key: string;
- * for the generic Admin Panel.
+  value: string;
- */
+}
 
 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 {
@@ -18,4 +19,5 @@ export interface ResourceOverride {
     mode?: "server" | "client";
     fields?: string[];
   };
+  enumOption?: EnumOption;
 }

react-openapi/utils/openapi_loader.ts

@@ -36,6 +36,26 @@ 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,
@@ -43,12 +63,19 @@ function parseSchemaFields(
   configuration: Record<string, any> = {}
 ): Record<string, ResourceField> {
   const fields: Record<string, ResourceField> = {};
-  const properties = schema.properties || {};
+  const { properties, required } = mergeProperties(schema);
-  const required = schema.required || [];
   const overrides = configuration[resourceName]?.fields || {};
 
   for (const [key, prop] of Object.entries(properties) as [string, any]) {
-    const type = mapOpenApiType(prop);
+    // 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 override = overrides[key];
 
     // Explicitly skip 'id' as it's the primary key and handled elsewhere
@@ -57,12 +84,12 @@ function parseSchemaFields(
     fields[key] = {
       type,
       label:
-        prop.title ||
+        resolvedProp.title ||
         key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " "),
       required: required.includes(key),
-      options: prop.enum,
+      options: resolvedProp.enum,
       readOnly:
-        prop.readOnly ||
+        resolvedProp.readOnly ||
         key === "created_at" ||
         key === "updated_at",
       ...override,
@@ -71,20 +98,35 @@ 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 = prop;
+    let targetSchema = resolvedProp;
-    if (type === "array" && prop.items) {
+    if (type === "array" && resolvedProp.items) {
-      targetSchema = prop.items;
+      targetSchema = resolvedProp.items;
     }
 
     // Check if this schema object is registered as a resource
     const relation = schemaToResourceMap.get(targetSchema);
     if (relation) {
       fields[key].relation = relation;
+
+      // Propagate enumOption from target resource config, or derive from target schema
+      const explicitEnumOption = configuration[relation]?.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" && prop.properties && !relation) {
+    if (fields[key].type === "object" && resolvedProp.properties && !relation) {
-      fields[key].schema = parseSchemaFields(prop, resourceName, schemaToResourceMap, configuration);
+      fields[key].schema = parseSchemaFields(resolvedProp, resourceName, schemaToResourceMap, configuration);
     }
   }
 
@@ -172,6 +214,16 @@ 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
@@ -180,6 +232,7 @@ export async function loadConfigFromOpenApi(baseUrl: string, configuration: Reco
     baseUrl: serverBaseUrl,
     authBaseUrl: authBaseUrl,
     resources,
+    enums,
     profile: profileConfiguration,
   };
 }

react-openapi/utils/options.ts

@@ -0,0 +1,33 @@
+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[]) ?? ["axis", "icici_ocr"];
+  const formatOptions: string[] = fetchRes?.fields?.source?.schema?.format?.options as string[] ?? [];
 
   const createMutation = useCreateFetchRequest();
   const updateMutation = useUpdateFetchRequest();
@@ -345,7 +345,7 @@ export default function FetchRequests() {
               input={<OutlinedInput label="Status" />}
               renderValue={(selected) => (selected as string[]).join(", ")}
             >
-              {["pending", "processing", "paused", "raw_expenses_done", "enriched_done", "completed", "failed"].map((s) => (
+              {(config?.enums?.FetchRequestStatus ?? []).map((s: string) => (
                 <MenuItem key={s} value={s}>{s.replace(/_/g, " ")}</MenuItem>
               ))}
             </Select>

src/openapi-config.ts

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