cleanup

- Replace manual axios auth client with createApiClient in auth context
- Decouple domain author logic from auth provider
- Make AuthorModel extend AuthUser explicitly
- Route login/register/logout exclusively through auth package
- Derive application-level currentUser from auth identity
- Fix provider hierarchy and hook usage across Blog and Profile
- Align main.jsx to use base AuthProvider + AuthorProvider layering

auth/src/axios.ts

@@ -5,9 +5,6 @@ export function attachAuthInterceptors(client: AxiosInstance) {
   client.interceptors.request.use((config) => {
     const token = tokenStore.get();
     if (token) {
-      if (!config.headers) {
-          (config as any).headers = {};
-      }
       config.headers.Authorization = `Bearer ${token}`;
     }
     return config;

auth/src/contexts.tsx

@@ -53,7 +53,6 @@ export function AuthProvider({
       setError(null);
 
       await auth.post("/register", { username, password });
-      await login(username, password);
     } catch (e: any) {
       setError(e.response?.data?.detail ?? "Registration failed");
     } finally {

package-lock.json

@@ -1,18 +1,17 @@
 {
   "name": "aetoskia-blog-app",
-  "version": "0.3.2",
+  "version": "0.3.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aetoskia-blog-app",
-      "version": "0.3.2",
+      "version": "0.2.1",
       "dependencies": {
         "@emotion/react": "latest",
         "@emotion/styled": "latest",
         "@mui/icons-material": "latest",
         "@mui/material": "latest",
-        "@tanstack/react-query": "^5.96.1",
         "axios": "latest",
         "markdown-to-jsx": "latest",
         "marked": "latest",
@@ -1409,30 +1408,6 @@
         "win32"
       ]
     },
-    "node_modules/@tanstack/query-core": {
-      "version": "5.96.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.96.1.tgz",
-      "integrity": "sha512-u1yBgtavSy+N8wgtW3PiER6UpxcplMje65yXnnVgiHTqiMwLlxiw4WvQDrXyn+UD6lnn8kHaxmerJUzQcV/MMg==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/react-query": {
-      "version": "5.96.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.96.1.tgz",
-      "integrity": "sha512-2X7KYK5KKWUKGeWCVcqxXAkYefJtrKB7tSKWgeG++b0H6BRHxQaLSSi8AxcgjmUnnosHuh9WsFZqvE16P1WCzA==",
-      "dependencies": {
-        "@tanstack/query-core": "5.96.1"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^18 || ^19"
-      }
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetoskia-blog-app",
-  "version": "0.3.2",
+  "version": "0.3.1",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -10,16 +10,15 @@
   "dependencies": {
     "@emotion/react": "latest",
     "@emotion/styled": "latest",
-    "@mui/icons-material": "latest",
     "@mui/material": "latest",
-    "@tanstack/react-query": "^5.96.1",
+    "@mui/icons-material": "latest",
-    "axios": "latest",
-    "markdown-to-jsx": "latest",
-    "marked": "latest",
     "react": "latest",
     "react-dom": "latest",
     "react-markdown": "latest",
-    "remark-gfm": "latest"
+    "markdown-to-jsx": "latest",
+    "remark-gfm": "latest",
+    "marked": "latest",
+    "axios": "latest"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "latest",

src_generic/App.tsx

@@ -1,160 +0,0 @@
-import * as React from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { AuthProvider, useAuth, AuthPage } from "../auth/src";
-import { UploadProvider } from "./providers/UploadProvider";
-import AdminLayout from "./components/AdminLayout";
-import ResourceView from "./components/ResourceView";
-import { getAppConfig } from "./config";
-import { initializeApiClients } from "./api/client";
-import { AppConfig } from "./types/config";
-import { Box, Typography, Paper, CircularProgress } from "@mui/material";
-import AppTheme from "../src/shared-theme/AppTheme";
-import {
-  BrowserRouter,
-  Routes,
-  Route,
-  useNavigate,
-  useParams,
-  Navigate,
-} from "react-router-dom";
-
-const queryClient = new QueryClient();
-
-// Create a context for the app config
-export const ConfigContext = React.createContext<AppConfig | null>(null);
-
-function Dashboard() {
-  const config = React.useContext(ConfigContext);
-  const navigate = useNavigate();
-  return (
-    <Box>
-      <Typography variant="h4" gutterBottom>
-        Welcome to the Admin Panel
-      </Typography>
-      <Typography variant="body1" sx={{ color: 'text.secondary' }}>
-        Select a resource from the sidebar to manage data.
-      </Typography>
-
-      <Box
-        sx={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
-          gap: 3,
-          mt: 4,
-        }}
-      >
-        {config?.resources.map((res) => (
-          <Paper 
-            key={res.name} 
-            sx={{ 
-                p: 3, 
-                textAlign: "center",
-                cursor: 'pointer',
-                transition: 'transform 0.2s',
-                '&:hover': { transform: 'translateY(-4px)', boxShadow: 4 }
-            }}
-            onClick={() => navigate(`/${res.name}`)}
-          >
-            <Typography variant="h6" color="primary">{res.pluralLabel}</Typography>
-            <Typography variant="body2" color="text.secondary">Manage {res.pluralLabel.toLowerCase()}</Typography>
-          </Paper>
-        ))}
-      </Box>
-    </Box>
-  );
-}
-
-import ProfileView from "./components/ProfileView";
-
-function AdminApp() {
-  const { currentUser, login, logout, loading, error } = useAuth();
-  const config = React.useContext(ConfigContext);
-  const navigate = useNavigate();
-
-  if (!currentUser) {
-    return (
-      <AuthPage
-        mode="login"
-        login={login}
-        register={async () => {}} // Disable registration for Admin
-        loading={loading}
-        error={error}
-        onSwitchMode={() => {}}
-        onBack={() => {}}
-        currentUser={null}
-      />
-    );
-  }
-
-  return (
-    <AdminLayout
-      username={currentUser.username}
-      onLogout={logout}
-      onSelectResource={(name) => navigate(`/${name}`)}
-      resources={config?.resources || []}
-    >
-      <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 />} />
-        <Route path="/:resourceName/edit/:id" element={<ResourceRouteWrapper />} />
-      </Routes>
-    </AdminLayout>
-  );
-}
-
-function ResourceRouteWrapper() {
-  const { resourceName } = useParams();
-  const config = React.useContext(ConfigContext);
-  const selectedResource = config?.resources.find((r) => r.name === resourceName);
-
-  if (!selectedResource) return <Typography>Resource not found</Typography>;
-
-  return <ResourceView config={selectedResource} />;
-}
-
-export default function App() {
-  const [config, setConfig] = React.useState<AppConfig | null>(null);
-
-  React.useEffect(() => {
-    getAppConfig().then((cfg) => {
-      initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
-      setConfig(cfg);
-    });
-  }, []);
-
-  if (!config) {
-    return (
-      <AppTheme>
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            height: "100vh",
-          }}
-        >
-          <CircularProgress />
-        </Box>
-      </AppTheme>
-    );
-  }
-
-  return (
-    <AppTheme>
-      <QueryClientProvider client={queryClient}>
-        <ConfigContext.Provider value={config}>
-          <AuthProvider authBaseUrl={config.authBaseUrl}>
-            <UploadProvider>
-              <BrowserRouter>
-                <AdminApp />
-              </BrowserRouter>
-            </UploadProvider>
-          </AuthProvider>
-        </ConfigContext.Provider>
-      </QueryClientProvider>
-    </AppTheme>
-  );
-}

src_generic/api/client.ts

@@ -1,43 +0,0 @@
-import axios, { AxiosInstance } from "axios";
-import { createApiClient } from "../../auth/src";
-
-/**
- * We expose a singleton-like getter/setter for the API clients
- */
-let _api: AxiosInstance | null = null;
-let _auth: AxiosInstance | null = null;
-
-export const api = {
-  get: (...args: Parameters<AxiosInstance["get"]>) => {
-    if (!_api) throw new Error("API client not initialized");
-    return _api.get(...args);
-  },
-  post: (...args: Parameters<AxiosInstance["post"]>) => {
-    if (!_api) throw new Error("API client not initialized");
-    return _api.post(...args);
-  },
-  put: (...args: Parameters<AxiosInstance["put"]>) => {
-    if (!_api) throw new Error("API client not initialized");
-    return _api.put(...args);
-  },
-  delete: (...args: Parameters<AxiosInstance["delete"]>) => {
-    if (!_api) throw new Error("API client not initialized");
-    return _api.delete(...args);
-  },
-};
-
-export const auth = {
-  post: (...args: Parameters<AxiosInstance["post"]>) => {
-    if (!_auth) throw new Error("Auth client not initialized");
-    return _auth.post(...args);
-  },
-  get: (...args: Parameters<AxiosInstance["get"]>) => {
-    if (!_auth) throw new Error("Auth client not initialized");
-    return _auth.get(...args);
-  },
-};
-
-export function initializeApiClients(baseUrl: string, authBaseUrl: string) {
-  _api = createApiClient(baseUrl);
-  _auth = createApiClient(authBaseUrl);
-}

src_generic/components/AdminLayout.tsx

@@ -1,261 +0,0 @@
-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>
-  );
-}

src_generic/components/EnhancedTable.tsx

@@ -1,369 +0,0 @@
-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;
-}

src_generic/components/GenericForm.tsx

@@ -1,138 +0,0 @@
-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 '../App';
-
-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>
-  );
-}

src_generic/components/ProfileView.tsx

@@ -1,83 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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>
-  );
-}

src_generic/components/fields/FormField.tsx

@@ -1,224 +0,0 @@
-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
-    />
-  );
-}

src_generic/components/fields/ImageUploadField.tsx

@@ -1,60 +0,0 @@
-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>
-  );
-}

src_generic/config.ts

@@ -1,14 +0,0 @@
-import { AppConfig } from "./types/config";
-import { loadConfigFromOpenApi } from "./utils/openapi_loader";
-
-export async function getAppConfig(): Promise<AppConfig> {
-  const baseUrl = import.meta.env.VITE_API_BASE_URL || "http://localhost:8000"
-  const config = await loadConfigFromOpenApi(baseUrl);
-
-  // You can still apply overrides here
-  return {
-    ...config,
-    authBaseUrl: import.meta.env.VITE_AUTH_BASE_URL || "http://localhost:8001",
-    baseUrl: import.meta.env.VITE_API_BASE_URL || config.baseUrl,
-  };
-}

src_generic/configuration.ts

@@ -1,50 +0,0 @@
-import { ResourceOverride } from "./types/overrides";
-
-export const configuration: Record<string, ResourceOverride> = {
-  expenses: {
-    fields: {
-      payee: {
-        displayField: "name",
-      },
-      payor: {
-        display: false,
-        displayField: "username",
-      },
-      account: {
-        displayField: "name",
-      },
-      tags: {
-        displayField: ["name", "icon"],
-      },
-      occurred_at: {
-        formatter: (val: string) => {
-            const date = new Date(val);
-            const day = date.getDate();
-            const month = date.toLocaleString('default', { month: 'long' });
-            const year = date.getFullYear();
-            const suffix = (day: number) => {
-                if (day > 3 && day < 21) return 'th';
-                switch (day % 10) {
-                    case 1: return "st";
-                    case 2: return "nd";
-                    case 3: return "rd";
-                    default: return "th";
-                }
-            };
-            return `${day}${suffix(day)} ${month} ${year}`;
-        }
-      },
-      created_at: {
-        display: false
-      }
-    },
-    pagination: true,
-  },
-};
-
-export const profileConfiguration = {
-  "extraFields": ['name'],
-  "resource": "payors",
-  // not in use
-  "hidden": true,
-};

src_generic/hooks/useResource.ts

@@ -1,127 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { api } from "../api/client";
-import { ResourceConfig } from "../types/config";
-
-export function useResource<T = any>(config: ResourceConfig) {
-  const queryClient = useQueryClient();
-  const { name, endpoint, primaryKey } = config;
-
-  // --- READ ALL ---
-  const useList = (params?: any) => 
-    useQuery({
-      queryKey: [name, "list", params],
-      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 ONE ---
-  const useRead = (id: string | null) =>
-    useQuery({
-      queryKey: [name, "detail", id],
-      queryFn: async () => {
-        if (!id) return null;
-        // @ts-ignore
-        const res = await api.get<T>(`${endpoint}/${id}`);
-        return res.data;
-      },
-      enabled: !!id,
-    });
-
-  // --- CREATE ---
-  const useCreate = () =>
-    useMutation({
-      mutationFn: async (data: Partial<T>) => {
-        // @ts-ignore
-        const res = await api.post<T>(endpoint, data);
-        return res.data;
-      },
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: [name, "list"] });
-      },
-    });
-
-  // --- UPDATE ---
-  const useUpdate = () =>
-    useMutation({
-      mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
-        // @ts-ignore
-        const res = await api.put<T>(`${endpoint}/${id}`, data);
-        return res.data;
-      },
-      onSuccess: (updatedItem) => {
-        // @ts-ignore
-        const id = updatedItem[primaryKey];
-        queryClient.invalidateQueries({ queryKey: [name, "list"] });
-        queryClient.invalidateQueries({ queryKey: [name, "detail", id] });
-      },
-    });
-
-  // --- DELETE ---
-  const useDelete = () =>
-    useMutation({
-      mutationFn: async (id: string) => {
-        await api.delete(`${endpoint}/${id}`);
-        return id;
-      },
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: [name, "list"] });
-      },
-    });
-
-  // --- HELPERS FOR useQueries ---
-  const getListQueryOptions = (params?: any) => ({
-    queryKey: [name, "list", params],
-    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/main.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { Buffer } from 'buffer';
-import process from 'process';
-import App from './App';
-
-// Polyfill Node.js globals for browser environment (needed by SwaggerParser)
-window.Buffer = Buffer;
-window.process = process;
-
-const rootElement = document.getElementById('root');
-const root = createRoot(rootElement!);
-
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

src_generic/providers/UploadProvider.tsx

@@ -1,52 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-import { api } from "../api/client";
-
-export interface UploadContextModel {
-  uploadFile: (file: File) => Promise<string | null>;
-  uploading: boolean;
-  error: string | null;
-}
-
-const UploadContext = createContext<UploadContextModel | undefined>(undefined);
-
-export const UploadProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [uploading, setUploading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const uploadFile = async (file: File): Promise<string | null> => {
-    setUploading(true);
-    setError(null);
-
-    try {
-      const arrayBuffer = await file.arrayBuffer();
-      const binary = new Uint8Array(arrayBuffer);
-
-      const res = await api.post("/uploads", binary, {
-        headers: {
-          "Content-Type": file.type,
-          "Content-Disposition": `attachment; filename="${file.name}"`,
-        },
-      });
-
-      return res.data.url as string;
-    } catch (err: any) {
-      console.error("File upload failed:", err);
-      setError(err.response?.data?.detail || "Failed to upload file");
-      return null;
-    } finally {
-      setUploading(false);
-    }
-  };
-
-  return (
-    <UploadContext.Provider value={{ uploadFile, uploading, error }}>
-      {children}
-    </UploadContext.Provider>
-  );
-};
-
-export const useUpload = (): UploadContextModel => {
-  const ctx = useContext(UploadContext);
-  if (!ctx) throw new Error("useUpload must be used within UploadProvider");
-  return ctx;
-};

src_generic/types/config.ts

@@ -1,43 +0,0 @@
-export type FieldType =
-  | 'string'
-  | 'number'
-  | 'boolean'
-  | 'date'
-  | 'datetime'
-  | 'markdown'
-  | 'enum'
-  | 'image'
-  | 'object'
-  | 'array';
-
-export interface ResourceField {
-  type: FieldType;
-  label: string;
-  required?: boolean;
-  options?: string[];
-  readOnly?: boolean;
-  schema?: Record<string, ResourceField>;
-  displayField?: string | string[];
-  formatter?: (value: any) => string;
-  relation?: string; // Name of the target resource
-}
-
-export interface ResourceConfig {
-  name: string;
-  label: string;
-  pluralLabel: string;
-  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

@@ -1,15 +0,0 @@
-/**
- * This file contains application-specific overrides and configuration
- * for the generic Admin Panel.
- */
-
-export interface FieldOverride {
-  displayField?: string | string[];
-  display?: boolean;
-  formatter?: (value: any) => string;
-}
-
-export interface ResourceOverride {
-  fields?: Record<string, FieldOverride>;
-  pagination?: boolean;
-}

src_generic/utils/openapi_loader.ts

@@ -1,178 +0,0 @@
-import SwaggerParser from "@apidevtools/swagger-parser";
-import { AppConfig, ResourceConfig, ResourceField, FieldType } from "../types/config";
-import { configuration, profileConfiguration } from "../configuration";
-
-/**
- * Maps OpenAPI property types to our internal FieldType
- */
-function mapOpenApiType(prop: any): FieldType {
-  const type = prop.type;
-  const format = prop.format;
-
-  if (format === "date-time") return "datetime";
-  if (format === "date") return "date";
-  if (prop.enum) return "enum";
-  if (
-    type === "string" &&
-    (prop.description?.toLowerCase().includes("image") ||
-      prop.name?.toLowerCase().includes("icon"))
-  )
-    return "image";
-
-  switch (type) {
-    case "integer":
-    case "number":
-      return "number";
-    case "boolean":
-      return "boolean";
-    case "object":
-      return "object";
-    case "array":
-      return "array";
-    default:
-      return "string";
-  }
-}
-
-/**
- * Recursively converts OpenAPI schemas to ResourceField map
- */
-function parseSchemaFields(
-  schema: any,
-  resourceName: string,
-  schemaToResourceMap: Map<any, string>
-): Record<string, ResourceField> {
-  const fields: Record<string, ResourceField> = {};
-  const properties = schema.properties || {};
-  const required = schema.required || [];
-  const overrides = configuration[resourceName]?.fields || {};
-
-  for (const [key, prop] of Object.entries(properties) as [string, any]) {
-    const type = mapOpenApiType(prop);
-    const override = overrides[key];
-
-    // Explicitly skip 'id' as it's the primary key and handled elsewhere
-    if (key === "id" || override?.display === false) continue;
-
-    fields[key] = {
-      type,
-      label:
-        prop.title ||
-        key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " "),
-      required: required.includes(key),
-      options: prop.enum,
-      readOnly:
-        prop.readOnly ||
-        key === "created_at" ||
-        key === "updated_at",
-      ...override,
-    };
-
-    // 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;
-    if (type === "array" && prop.items) {
-      targetSchema = prop.items;
-    }
-
-    // Check if this schema object is registered as a resource
-    const relation = schemaToResourceMap.get(targetSchema);
-    if (relation) {
-      fields[key].relation = relation;
-    }
-
-    // Recursively parse nested objects (only if not a relation)
-    if (fields[key].type === "object" && prop.properties && !relation) {
-      fields[key].schema = parseSchemaFields(prop, resourceName, schemaToResourceMap);
-    }
-  }
-
-  return fields;
-}
-
-/**
- * Scans paths to identify resources and their basic configuration
- */
-export async function loadConfigFromOpenApi(baseUrl: string): Promise<AppConfig> {
-  // Use SwaggerParser to dereference the spec.
-  // Dereferencing preserves object identity for $ref targets.
-  const api = await SwaggerParser.dereference(
-    new URL("/openapi.json", baseUrl).href
-  );
-
-  const resources: ResourceConfig[] = [];
-  const paths = api.paths || {};
-
-  // Group paths by base resource name
-  const resourcePaths: Record<string, any> = {};
-  for (const path of Object.keys(paths)) {
-    const base = path.split("/")[1];
-    if (!base) continue;
-
-    if (!resourcePaths[base]) resourcePaths[base] = { path, methods: [] };
-    const methods = Object.keys(paths[path] || {});
-    resourcePaths[base].methods.push(...methods);
-
-    // Identify the list endpoint for this resource
-    if (!resourcePaths[base].listPath && !path.includes("{") && paths[path]?.get?.responses?.["200"]) {
-      resourcePaths[base].listPath = path;
-    }
-  }
-
-  // 1. Identify which schema objects correspond to which resources
-  const schemaToResourceMap = new Map<any, string>();
-  for (const [name, info] of Object.entries(resourcePaths)) {
-    const listPath = info.listPath || `/${name}`;
-    const listOp = paths[listPath]?.get;
-    if (!listOp) continue;
-
-    // @ts-ignore
-    const responseSchema = listOp.responses?.["200"]?.content?.["application/json"]?.schema;
-    let schemaObj = responseSchema;
-    if (responseSchema?.type === "array" && responseSchema.items) {
-      schemaObj = responseSchema.items;
-    }
-
-    if (schemaObj) {
-      schemaToResourceMap.set(schemaObj, name);
-      resourcePaths[name].schemaObj = schemaObj;
-    }
-  }
-
-  // 2. Generate ResourceConfig for each identified resource
-  for (const [name, info] of Object.entries(resourcePaths)) {
-    const listPath = info.listPath || `/${name}`;
-    const listOp = paths[listPath]?.get;
-    if (!listOp || !info.schemaObj) continue;
-
-    const schema = info.schemaObj;
-    const label = name.charAt(0).toUpperCase() + name.slice(1, -1);
-    const pluralLabel = name.charAt(0).toUpperCase() + name.slice(1);
-
-    const fields = parseSchemaFields(schema, name, schemaToResourceMap);
-
-    const resourceOverride = configuration[name] || {};
-
-    resources.push({
-      name,
-      label: schema.title || label,
-      pluralLabel: pluralLabel,
-      endpoint: listPath,
-      primaryKey: "id", // Strict default, no heuristics
-      fields,
-      pagination: resourceOverride.pagination,
-    });
-  }
-
-  // @ts-ignore
-  const serverBaseUrl = import.meta.env.VITE_API_BASE_URL || (api.servers?.[0]?.url ?? "")
-  // @ts-ignore
-  const authBaseUrl = import.meta.env.VITE_AUTH_BASE_URL || ""
-  return {
-    baseUrl: serverBaseUrl,
-    authBaseUrl: authBaseUrl,
-    resources,
-    profile: profileConfiguration,
-  };
-}