enumOptions and enum reader

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 } from '../utils/options';
 
 interface EnhancedTableProps {
   config: ResourceConfig;
@@ -96,8 +97,7 @@ export default function EnhancedTable({
       }
 
       if (muiType === 'singleSelect' && field.options) {
-        // @ts-ignore
-        col.valueOptions = field.options;
+        col.valueOptions = toGridValueOptions(getFieldOptions(field));
       }
 
       return col;
@@ -379,6 +379,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' && field.options) {
+      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 } 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' && field.options) {
+    return getFieldOptions(field).map(o => o.key);
+  }
   if (!data) return [];
 
   const pull = (item: any): string | null => {

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';
-    
-    // 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 options = getFieldOptions(field, relationData);
+    const keyField = field.enumOption?.key ?? 'id';
 
-    const getOptionValue = (option: any) => {
-        // Return the whole object to maintain identity
-        return option;
-    };
+    // Normalize value: API returns whole objects on GET, but form uses key strings
+    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>{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) => (
-            <MenuItem key={option.id || JSON.stringify(option)} value={getOptionValue(option)}>
-              {getOptionLabel(option)}
+          {options.map((opt) => (
+            <MenuItem key={opt.key} value={opt.key}>
+              {opt.value}
             </MenuItem>
           ))}
         </Select>
@@ -149,6 +150,7 @@ export default function FormField({
 
   // 5. Enum Handling
   if (field.type === 'enum' && field.options) {
+    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) => (
-            <MenuItem key={opt} value={opt}>
-              {opt}
+          {options.map((opt) => (
+            <MenuItem key={opt.key} value={opt.key}>
+              {opt.value}
             </MenuItem>
           ))}
         </Select>