init

react-openapi/components/AdminLayout.tsx

@@ -0,0 +1,261 @@
+import * as React from 'react';
+import {
+  Box,
+  Drawer,
+  AppBar,
+  Toolbar,
+  List,
+  Typography,
+  Divider,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  CssBaseline,
+  Button,
+  IconButton,
+  Tooltip,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import TableViewIcon from '@mui/icons-material/TableView';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import LogoutIcon from '@mui/icons-material/Logout';
+import MenuIcon from '@mui/icons-material/Menu';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { ResourceConfig } from '../types/config';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const drawerWidth = 240;
+const collapsedWidth = 64;
+
+interface AdminLayoutProps {
+  children: React.ReactNode;
+  onSelectResource: (resourceName: string | null) => void;
+  onLogout: () => void;
+  username?: string;
+  resources: ResourceConfig[];
+}
+
+export default function AdminLayout({
+  children,
+  onSelectResource,
+  onLogout,
+  username,
+  resources,
+}: AdminLayoutProps) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const location = useLocation();
+  const navigate = useNavigate();
+  
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+
+  const activeResourceName = location.pathname.split('/')[1] || null;
+
+  // AUTO-TOGGLE LOGIC
+  React.useEffect(() => {
+    if (isMobile) {
+        setIsCollapsed(false); // Mobile drawer is never "mini"
+        setMobileOpen(false); // Close on navigation
+    } else {
+        if (location.pathname === '/' || location.pathname === '') {
+            setIsCollapsed(false);
+        } else {
+            setIsCollapsed(true);
+        }
+    }
+  }, [location.pathname, isMobile]);
+
+  const currentWidth = isMobile ? drawerWidth : (isCollapsed ? collapsedWidth : drawerWidth);
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen);
+  };
+
+  const handleSidebarToggle = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  const drawerContent = (
+    <Box sx={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {!isMobile && (
+        <>
+          <Box sx={{ display: 'flex', justifyContent: isCollapsed ? 'center' : 'flex-end', p: 1 }}>
+            <IconButton onClick={handleSidebarToggle}>
+                {isCollapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+            </IconButton>
+          </Box>
+          <Divider />
+        </>
+      )}
+      {isMobile && <Toolbar />}
+      
+      <List>
+        <ListItem disablePadding>
+          <Tooltip title={(isCollapsed && !isMobile) ? "Dashboard" : ""} placement="right">
+            <ListItemButton 
+                selected={location.pathname === '/'}
+                onClick={() => navigate('/')}
+                sx={{
+                    minHeight: 48,
+                    justifyContent: (isCollapsed && !isMobile) ? 'center' : 'initial',
+                    px: 2.5,
+                }}
+            >
+                <ListItemIcon sx={{
+                    minWidth: 0,
+                    mr: (isCollapsed && !isMobile) ? 0 : 3,
+                    justifyContent: 'center',
+                }}>
+                <DashboardIcon color={location.pathname === '/' ? 'primary' : 'inherit'} />
+                </ListItemIcon>
+                {(!isCollapsed || isMobile) && <ListItemText primary="Dashboard" />}
+            </ListItemButton>
+          </Tooltip>
+        </ListItem>
+      </List>
+      <Divider />
+      <List sx={{ flexGrow: 1 }}>
+        {resources.map((res) => (
+          <ListItem key={res.name} disablePadding>
+            <Tooltip title={(isCollapsed && !isMobile) ? res.pluralLabel : ""} placement="right">
+                <ListItemButton 
+                selected={activeResourceName === res.name}
+                onClick={() => onSelectResource(res.name)}
+                sx={{
+                    minHeight: 48,
+                    justifyContent: (isCollapsed && !isMobile) ? 'center' : 'initial',
+                    px: 2.5,
+                }}
+                >
+                <ListItemIcon sx={{
+                    minWidth: 0,
+                    mr: (isCollapsed && !isMobile) ? 0 : 3,
+                    justifyContent: 'center',
+                }}>
+                    <TableViewIcon color={activeResourceName === res.name ? 'primary' : 'inherit'} />
+                </ListItemIcon>
+                {(!isCollapsed || isMobile) && <ListItemText primary={res.pluralLabel} />}
+                </ListItemButton>
+            </Tooltip>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <CssBaseline />
+      <AppBar 
+        position="fixed" 
+        sx={{ 
+            zIndex: (theme) => theme.zIndex.drawer + 1,
+            backdropFilter: 'blur(8px)',
+            backgroundColor: 'rgba(255, 255, 255, 0.8)',
+            color: 'text.primary',
+            boxShadow: 'none',
+            borderBottom: '1px solid',
+            borderColor: 'divider',
+        }}
+      >
+        <Toolbar>
+          {isMobile && (
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              edge="start"
+              onClick={handleDrawerToggle}
+              sx={{ mr: 2 }}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
+          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1, fontWeight: 'bold' }}>
+            Admin Panel
+          </Typography>
+          <Box sx={{ display: { xs: 'none', sm: 'flex' }, alignItems: 'center', mr: 2 }}>
+            <Button 
+                color="inherit" 
+                onClick={() => navigate('/profile')}
+                sx={{ textTransform: 'none', fontWeight: 500 }}
+            >
+                {username}
+            </Button>
+          </Box>
+          <Tooltip title="Logout">
+            <IconButton color="inherit" onClick={onLogout}>
+                <LogoutIcon />
+            </IconButton>
+          </Tooltip>
+        </Toolbar>
+      </AppBar>
+
+      <Box
+        component="nav"
+        sx={{ width: { md: currentWidth }, flexShrink: { md: 0 } }}
+      >
+        {isMobile ? (
+          <Drawer
+            variant="temporary"
+            open={mobileOpen}
+            onClose={handleDrawerToggle}
+            ModalProps={{ keepMounted: true }} 
+            sx={{
+              display: { xs: 'block', md: 'none' },
+              '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+            }}
+          >
+            {drawerContent}
+          </Drawer>
+        ) : (
+          <Drawer
+            variant="permanent"
+            sx={{
+              display: { xs: 'none', md: 'block' },
+              width: currentWidth,
+              flexShrink: 0,
+              whiteSpace: 'nowrap',
+              boxSizing: 'border-box',
+              transition: (theme) => theme.transitions.create('width', {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.enteringScreen,
+              }),
+              [`& .MuiDrawer-paper`]: { 
+                width: currentWidth, 
+                boxSizing: 'border-box',
+                overflowX: 'hidden',
+                transition: (theme) => theme.transitions.create('width', {
+                    easing: theme.transitions.easing.sharp,
+                    duration: theme.transitions.duration.enteringScreen,
+                }),
+              },
+            }}
+            open
+          >
+            {drawerContent}
+          </Drawer>
+        )}
+      </Box>
+
+      <Box 
+        component="main" 
+        sx={{ 
+            flexGrow: 1, 
+            p: { xs: 2, md: 3 },
+            width: { xs: '100%', md: `calc(100% - ${currentWidth}px)` },
+            transition: (theme) => theme.transitions.create(['margin', 'width'], {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+        }}
+      >
+        <Toolbar />
+        {children}
+      </Box>
+    </Box>
+  );
+}

react-openapi/components/EnhancedTable.tsx

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

react-openapi/components/GenericForm.tsx

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

react-openapi/components/ProfileView.tsx

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

react-openapi/components/ResourceView.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { Box, Typography, Paper, CircularProgress } from '@mui/material';
+import { ResourceConfig } from '../types/config';
+import { useResource } from '../hooks/useResource';
+import GenericForm from './GenericForm';
+import EnhancedTable from './EnhancedTable';
+import { useParams, useLocation, useNavigate, Routes, Route } from 'react-router-dom';
+
+interface ResourceViewProps {
+  config: ResourceConfig;
+  onNavigateToResource?: (resourceName: string, id: string) => void;
+}
+
+import { GridPaginationModel } from '@mui/x-data-grid';
+
+export default function ResourceView({ config, onNavigateToResource }: ResourceViewProps) {
+  const { id } = useParams();
+  const location = useLocation();
+  const navigate = useNavigate();
+  
+  const isCreate = location.pathname.endsWith('/create');
+  const isEdit = location.pathname.includes('/edit/');
+  const isView = !!id && !isEdit;
+  const isList = !id && !isCreate;
+
+  const [paginationModel, setPaginationModel] = React.useState<GridPaginationModel>({
+    page: 0,
+    pageSize: 10,
+  });
+
+  const { useList, useRead, useCreate, useUpdate, useDelete } = useResource(config);
+
+  // Determine query parameters based on pagination config
+  const queryParams = React.useMemo(() => {
+    if (!config.pagination) return {};
+    return {
+      skip: paginationModel.page * paginationModel.pageSize,
+      limit: paginationModel.pageSize,
+    };
+  }, [config.pagination, paginationModel]);
+
+  const listQuery = useList(queryParams);
+  const itemQuery = useRead(id || "");
+  
+  const paginatedData = listQuery.data || { data: [], total: undefined };
+  const createMutation = useCreate();
+  const updateMutation = useUpdate();
+  const deleteMutation = useDelete();
+
+  const handleEdit = (item: any) => {
+    navigate(`/${config.name}/edit/${item[config.primaryKey]}`);
+  };
+
+  const handleCreate = () => {
+    navigate(`/${config.name}/create`);
+  };
+
+  const handleSave = async (formData: any) => {
+    try {
+      if (isEdit) {
+        await updateMutation.mutateAsync({ id: id!, data: formData });
+      } else {
+        await createMutation.mutateAsync(formData);
+      }
+      navigate(`/${config.name}`);
+    } catch (err) {
+      console.error('Save failed:', err);
+    }
+  };
+
+  const handleDelete = async (itemId: string) => {
+    if (window.confirm('Are you sure you want to delete this item?')) {
+      await deleteMutation.mutateAsync(itemId);
+    }
+  };
+
+  if (isList && listQuery.isLoading) return <CircularProgress />;
+  if ((isEdit || isView) && itemQuery.isLoading) return <CircularProgress />;
+
+  return (
+    <Box>
+      {isList ? (
+        <EnhancedTable
+          config={config}
+          data={paginatedData.data || []}
+          total={paginatedData.total}
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+          loading={listQuery.isFetching}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+          onCreate={handleCreate}
+          onNavigateToResource={(res, id) => navigate(`/${res}/${id}`)}
+        />
+      ) : (
+        <Paper sx={{ p: 4 }}>
+          <GenericForm
+            config={config}
+            initialData={isCreate ? null : itemQuery.data}
+            onSave={handleSave}
+            onCancel={() => navigate(`/${config.name}`)}
+            loading={createMutation.isPending || updateMutation.isPending}
+            readOnly={isView}
+            onEditClick={() => navigate(`/${config.name}/edit/${id}`)}
+          />
+        </Paper>
+      )}
+    </Box>
+  );
+}

react-openapi/components/fields/FormField.tsx

@@ -0,0 +1,224 @@
+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 ImageUploadField from './ImageUploadField';
+
+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[]>; // Map of relation name to data array
+}
+
+export default function FormField({
+  name,
+  field,
+  value,
+  onChange,
+  disabled,
+  uploadFile,
+  uploading,
+  baseUrl,
+  relationDataMap = {},
+}: FormFieldProps) {
+  const label = field.label;
+
+  // 1. Recursive Rendering for Objects (Not Relations)
+  if (field.type === 'object' && field.schema && !field.relation) {
+    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];
+    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}
+      />
+    );
+  }
+
+  // 4. Boolean Handling
+  if (field.type === 'boolean') {
+    return (
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={!!value}
+            onChange={(e) => onChange(e.target.checked)}
+            disabled={disabled}
+          />
+        }
+        label={label}
+      />
+    );
+  }
+
+  // 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>
+    );
+  }
+
+  // 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}
+      />
+    );
+  }
+
+  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/ImageUploadField.tsx

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