fixes

src_generic/App.tsx

@@ -64,6 +64,8 @@ function Dashboard() {
   );
 }
 
+import ProfileView from "./components/ProfileView";
+
 function AdminApp() {
   const { currentUser, login, logout, loading, error } = useAuth();
   const config = React.useContext(ConfigContext);
@@ -93,6 +95,7 @@ function AdminApp() {
     >
       <Routes>
         <Route path="/" element={<Dashboard />} />
+        <Route path="/profile" element={<ProfileView />} />
         <Route path="/:resourceName" element={<ResourceRouteWrapper />} />
         <Route path="/:resourceName/:id" element={<ResourceRouteWrapper />} />
         <Route path="/:resourceName/create" element={<ResourceRouteWrapper />} />

src_generic/components/AdminLayout.tsx

@@ -12,6 +12,7 @@ import {
   ListItemIcon,
   ListItemText,
   CssBaseline,
+  Button,
   IconButton,
   Tooltip,
   useMediaQuery,
@@ -176,9 +177,15 @@ export default function AdminLayout({
           <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1, fontWeight: 'bold' }}>
             Admin Panel
           </Typography>
-          <Typography variant="body1" sx={{ mr: 2, fontWeight: 500, display: { xs: 'none', sm: 'block' } }}>
+          <Box sx={{ display: { xs: 'none', sm: 'flex' }, alignItems: 'center', mr: 2 }}>
+            <Button 
+                color="inherit" 
+                onClick={() => navigate('/profile')}
+                sx={{ textTransform: 'none', fontWeight: 500 }}
+            >
                 {username}
-          </Typography>
+            </Button>
+          </Box>
           <Tooltip title="Logout">
             <IconButton color="inherit" onClick={onLogout}>
                 <LogoutIcon />

src_generic/components/EnhancedTable.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import {
   Box,
   Typography,
   Button,
   IconButton,
-  Link,
   Tooltip,
   Card,
   CardContent,
@@ -15,12 +15,15 @@ import {
   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';
@@ -32,6 +35,10 @@ 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;
@@ -41,6 +48,10 @@ interface EnhancedTableProps {
 export default function EnhancedTable({
   config,
   data,
+  total,
+  paginationModel,
+  onPaginationModelChange,
+  loading = false,
   onEdit,
   onDelete,
   onCreate,
@@ -52,13 +63,35 @@ export default function EnhancedTable({
   
   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;
     });
 
@@ -98,9 +131,9 @@ export default function EnhancedTable({
             Add
           </Button>
         </Box>
-        <Grid container spacing={2}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
           {data.map((row) => (
-            <Grid item xs={12} key={row[config.primaryKey] || Math.random()}>
+            <Box key={row[config.primaryKey] || Math.random()}>
               <MobileCardRow 
                 row={row} 
                 config={config} 
@@ -109,9 +142,9 @@ export default function EnhancedTable({
                 onNavigate={onNavigateToResource}
                 navigate={navigate}
               />
-            </Grid>
+            </Box>
           ))}
-        </Grid>
+        </Box>
       </Box>
     );
   }
@@ -128,6 +161,23 @@ export default function EnhancedTable({
         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];
@@ -138,11 +188,6 @@ export default function EnhancedTable({
             return `temp-id-${data.indexOf(row)}`;
         }}
         disableRowSelectionOnClick
-        initialState={{
-          pagination: {
-            paginationModel: { page: 0, pageSize: 10 },
-          },
-        }}
         pageSizeOptions={[10, 25, 50]}
         sx={{
             border: 'none',
@@ -183,18 +228,18 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
                     </Menu>
                 </Box>
                 <Divider sx={{ mb: 2 }} />
-                <Grid container spacing={1}>
+                <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 2 }}>
                     {Object.entries(config.fields).slice(0, 5).map(([key, field]: [string, any]) => (
-                        <Grid item xs={6} key={key}>
+                        <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>
-                        </Grid>
+                        </Box>
                     ))}
-                </Grid>
+                </Box>
             </CardContent>
             <CardActions sx={{ justifyContent: 'flex-end', px: 2, pb: 2 }}>
                  <Button size="small" onClick={() => navigate(`/${config.name}/${id}`)}>View Details</Button>
@@ -203,46 +248,120 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
     );
 }
 
+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);
 
-    if (field.relation && 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 = typeof value === "object" ? 
-            ((field?.displayField && (value as Record<string, any>)[field.displayField]) || (value as any).id || (value as any)._id || (value as any).pk) : value;
+        const displayValue = getFormattedDisplayValue(value, field.displayField);
         
-        if (relationId) {
         return (
-                <Link component="button" variant="body2" sx={{ fontWeight: 'inherit', textAlign: 'left' }} onClick={(e) => { e.stopPropagation(); onNavigate?.(field.relation!, String(relationId)); }}>
-                    {displayValue}
-                </Link>
+            <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)) {
-        if (field.displayField) {
-            return value.map((item) => (typeof item === 'object' ? item[field.displayField!] : item)).filter(Boolean).join(', ');
+        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));
                                 }
-        return `${value.length} items`;
+                            }}
+                        />
+                    ))}
+                </Stack>
+            </Tooltip>
+        );
     }
 
+    // 3. Simple Objects
     if (field.type === 'object' && value) {
-        if (field.displayField && value[field.displayField]) return value[field.displayField];
-        return isMobile ? 'Object' : JSON.stringify(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 === 'boolean') return value ? 'Yes' : 'No';
     if (field.type === 'datetime' || field.type === 'date') return value ? new Date(value).toLocaleString() : '';
 
     if (isPk && !isMobile) {
         return (
-            <Link component="button" variant="body2" sx={{ fontWeight: 'inherit' }} onClick={(e) => { e.stopPropagation(); navigate(`/${config.name}/${params.row[config.primaryKey]}`); }}>
-                {value}
-            </Link>
+            <Chip 
+                label={value} 
+                size="small" 
+                color="primary"
+                onClick={(e) => { e.stopPropagation(); navigate(`/${config.name}/${params.row[config.primaryKey]}`); }}
+                sx={{ cursor: 'pointer', fontWeight: 'bold' }}
+            />
         );
     }
 

src_generic/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 '../App';
+
+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>
+  );
+}

src_generic/components/ResourceView.tsx

@@ -11,6 +11,8 @@ interface ResourceViewProps {
   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();
@@ -21,11 +23,26 @@ export default function ResourceView({ config, onNavigateToResource }: ResourceV
   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);
 
-  const listQuery = useList();
+  // 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();
@@ -65,7 +82,11 @@ export default function ResourceView({ config, onNavigateToResource }: ResourceV
       {isList ? (
         <EnhancedTable
           config={config}
-          data={listQuery.data || []}
+          data={paginatedData.data || []}
+          total={paginatedData.total}
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+          loading={listQuery.isFetching}
           onEdit={handleEdit}
           onDelete={handleDelete}
           onCreate={handleCreate}

src_generic/configuration.ts

@@ -14,7 +14,7 @@ export const configuration: Record<string, ResourceOverride> = {
         displayField: "name",
       },
       tags: {
-        displayField: "icon",
+        displayField: ["name", "icon"],
       },
       occurred_at: {
         formatter: (val: string) => {
@@ -38,5 +38,13 @@ export const configuration: Record<string, ResourceOverride> = {
         display: false
       }
     },
+    pagination: true,
   },
 };
+
+export const profileConfiguration = {
+  "extraFields": ['name'],
+  "resource": "payors",
+  // not in use
+  "hidden": true,
+};

src_generic/hooks/useResource.ts

@@ -13,7 +13,11 @@ export function useResource<T = any>(config: ResourceConfig) {
       queryFn: async () => {
         // @ts-ignore
         const res = await api.get<T[]>(endpoint, { params });
-        return res.data;
+        const total = res.headers ? parseInt(res.headers['x-total-count'] || res.headers['X-Total-Count']) : undefined;
+        return { 
+            data: res.data, 
+            total: isNaN(total as any) ? undefined : total 
+        };
       }
     });
 
@@ -77,15 +81,46 @@ export function useResource<T = any>(config: ResourceConfig) {
     queryFn: async () => {
       // @ts-ignore
       const res = await api.get<T[]>(endpoint, { params });
+      const total = res.headers ? parseInt(res.headers['x-total-count'] || res.headers['X-Total-Count']) : undefined;
+      return { 
+          data: res.data, 
+          total: isNaN(total as any) ? undefined : total 
+      };
+    },
+  });
+
+  // --- READ ME ---
+  const useMe = () =>
+    useQuery({
+      queryKey: [name, "me"],
+      queryFn: async () => {
+        // @ts-ignore
+        const res = await api.get<T>(`${endpoint}/me`);
         return res.data;
       },
     });
 
+  // --- UPDATE ME ---
+  const useUpdateMe = () =>
+    useMutation({
+      mutationFn: async (data: Partial<T>) => {
+        // @ts-ignore
+        const res = await api.put<T>(`${endpoint}/me`, data);
+        return res.data;
+      },
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: [name, "me"] });
+        queryClient.invalidateQueries({ queryKey: [name, "list"] });
+      },
+    });
+
   return {
     useList,
     useRead,
+    useMe,
     useCreate,
     useUpdate,
+    useUpdateMe,
     useDelete,
     getListQueryOptions,
   };

src_generic/types/config.ts

@@ -17,7 +17,7 @@ export interface ResourceField {
   options?: string[];
   readOnly?: boolean;
   schema?: Record<string, ResourceField>;
-  displayField?: string;
+  displayField?: string | string[];
   formatter?: (value: any) => string;
   relation?: string; // Name of the target resource
 }
@@ -29,10 +29,15 @@ export interface ResourceConfig {
   endpoint: string;
   primaryKey: string;
   fields: Record<string, ResourceField>;
+  pagination?: boolean;
 }
 
 export interface AppConfig {
   baseUrl: string;
   authBaseUrl: string;
   resources: ResourceConfig[];
+  profile?: {
+    resource: string;
+    extraFields?: Record<string, any>;
+  };
 }

src_generic/types/overrides.ts

@@ -4,11 +4,12 @@
  */
 
 export interface FieldOverride {
-  displayField?: string;
+  displayField?: string | string[];
   display?: boolean;
   formatter?: (value: any) => string;
 }
 
 export interface ResourceOverride {
   fields?: Record<string, FieldOverride>;
+  pagination?: boolean;
 }

src_generic/utils/openapi_loader.ts

@@ -1,6 +1,6 @@
 import SwaggerParser from "@apidevtools/swagger-parser";
 import { AppConfig, ResourceConfig, ResourceField, FieldType } from "../types/config";
-import { configuration } from "../configuration";
+import { configuration, profileConfiguration } from "../configuration";
 
 /**
  * Maps OpenAPI property types to our internal FieldType
@@ -115,7 +115,7 @@ export async function loadConfigFromOpenApi(baseUrl: string): Promise<AppConfig>
     resourcePaths[base].methods.push(...methods);
 
     // Identify the list endpoint for this resource
-    if (!path.includes("{") && paths[path]?.get?.responses?.["200"]) {
+    if (!resourcePaths[base].listPath && !path.includes("{") && paths[path]?.get?.responses?.["200"]) {
       resourcePaths[base].listPath = path;
     }
   }
@@ -152,6 +152,8 @@ export async function loadConfigFromOpenApi(baseUrl: string): Promise<AppConfig>
 
     const fields = parseSchemaFields(schema, name, schemaToResourceMap);
 
+    const resourceOverride = configuration[name] || {};
+
     resources.push({
       name,
       label: schema.title || label,
@@ -159,6 +161,7 @@ export async function loadConfigFromOpenApi(baseUrl: string): Promise<AppConfig>
       endpoint: listPath,
       primaryKey: "id", // Strict default, no heuristics
       fields,
+      pagination: resourceOverride.pagination,
     });
   }
 
@@ -170,5 +173,6 @@ export async function loadConfigFromOpenApi(baseUrl: string): Promise<AppConfig>
     baseUrl: serverBaseUrl,
     authBaseUrl: authBaseUrl,
     resources,
+    profile: profileConfiguration,
   };
 }