fixes

package-lock.json

@@ -1,17 +1,18 @@
 {
   "name": "aetoskia-blog-app",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aetoskia-blog-app",
-      "version": "0.2.1",
+      "version": "0.3.2",
       "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",
@@ -1408,6 +1409,30 @@
         "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

@@ -10,15 +10,16 @@
   "dependencies": {
     "@emotion/react": "latest",
     "@emotion/styled": "latest",
-    "@mui/material": "latest",
     "@mui/icons-material": "latest",
+    "@mui/material": "latest",
+    "@tanstack/react-query": "^5.96.1",
+    "axios": "latest",
+    "markdown-to-jsx": "latest",
+    "marked": "latest",
     "react": "latest",
     "react-dom": "latest",
     "react-markdown": "latest",
-    "markdown-to-jsx": "latest",
-    "remark-gfm": "latest",
-    "marked": "latest",
-    "axios": "latest"
+    "remark-gfm": "latest"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "latest",

src_generic/App.tsx

@@ -0,0 +1,143 @@
+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";
+
+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);
+  return (
+    <Box>
+      <Typography variant="h4" gutterBottom>
+        Welcome to the Admin Panel
+      </Typography>
+      <Typography variant="body1">
+        Select a resource from the sidebar to manage data.
+      </Typography>
+
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+          gap: 3,
+          mt: 4,
+        }}
+      >
+        {config?.resources.map((res) => (
+          <Paper key={res.name} sx={{ p: 3, textAlign: "center" }}>
+            <Typography variant="h6">{res.pluralLabel}</Typography>
+          </Paper>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+function AdminApp() {
+  const { currentUser, login, logout, loading, error } = useAuth();
+  const config = React.useContext(ConfigContext);
+  const [selectedResourceName, setSelectedResourceName] = React.useState<
+    string | null
+  >(null);
+  const [selectedItemId, setSelectedItemId] = React.useState<string | null>(null);
+
+  const handleNavigateToResource = (resourceName: string, id: string) => {
+    setSelectedResourceName(resourceName);
+    setSelectedItemId(id);
+  };
+
+  if (!currentUser) {
+    return (
+      <AuthPage
+        mode="login"
+        login={login}
+        register={async () => {}} // Disable registration for Admin
+        loading={loading}
+        error={error}
+        onSwitchMode={() => {}}
+        onBack={() => {}}
+        currentUser={null}
+      />
+    );
+  }
+
+  const selectedResource = config?.resources.find(
+    (r) => r.name === selectedResourceName
+  );
+
+  return (
+    <AdminLayout
+      username={currentUser.username}
+      onLogout={logout}
+      selectedResourceName={selectedResourceName}
+      onSelectResource={(name) => {
+        setSelectedResourceName(name);
+        setSelectedItemId(null);
+      }}
+      resources={config?.resources || []}
+    >
+      {selectedResource ? (
+        <ResourceView 
+            key={`${selectedResource.name}-${selectedItemId}`} 
+            config={selectedResource} 
+            onNavigateToResource={handleNavigateToResource}
+        />
+      ) : (
+        <Dashboard />
+      )}
+    </AdminLayout>
+  );
+}
+
+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>
+              <AdminApp />
+            </UploadProvider>
+          </AuthProvider>
+        </ConfigContext.Provider>
+      </QueryClientProvider>
+    </AppTheme>
+  );
+}

src_generic/api/client.ts

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

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import {
+  Box,
+  Drawer,
+  AppBar,
+  Toolbar,
+  List,
+  Typography,
+  Divider,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  CssBaseline,
+  IconButton
+} 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 { ResourceConfig } from '../types/config';
+
+const drawerWidth = 240;
+
+interface AdminLayoutProps {
+  children: React.ReactNode;
+  onSelectResource: (resourceName: string | null) => void;
+  selectedResourceName: string | null;
+  onLogout: () => void;
+  username?: string;
+  resources: ResourceConfig[];
+}
+
+export default function AdminLayout({
+  children,
+  onSelectResource,
+  selectedResourceName,
+  onLogout,
+  username,
+  resources,
+}: AdminLayoutProps) {
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <CssBaseline />
+      <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
+        <Toolbar>
+          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
+            Admin Panel
+          </Typography>
+          <Typography variant="body1" sx={{ mr: 2 }}>
+            {username}
+          </Typography>
+          <IconButton color="inherit" onClick={onLogout}>
+            <LogoutIcon />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        variant="permanent"
+        sx={{
+          width: drawerWidth,
+          flexShrink: 0,
+          [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
+        }}
+      >
+        <Toolbar />
+        <Box sx={{ overflow: 'auto' }}>
+          <List>
+            <ListItem disablePadding>
+              <ListItemButton 
+                selected={selectedResourceName === null}
+                onClick={() => onSelectResource(null)}
+              >
+                <ListItemIcon>
+                  <DashboardIcon />
+                </ListItemIcon>
+                <ListItemText primary="Dashboard" />
+              </ListItemButton>
+            </ListItem>
+          </List>
+          <Divider />
+          <List>
+            {resources.map((res) => (
+              <ListItem key={res.name} disablePadding>
+                <ListItemButton 
+                  selected={selectedResourceName === res.name}
+                  onClick={() => onSelectResource(res.name)}
+                >
+                  <ListItemIcon>
+                    <TableViewIcon />
+                  </ListItemIcon>
+                  <ListItemText primary={res.pluralLabel} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+          <Divider />
+        </Box>
+      </Drawer>
+      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+        <Toolbar />
+        {children}
+      </Box>
+    </Box>
+  );
+}

src_generic/components/EnhancedTable.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import {
+  Box,
+  Typography,
+  Button,
+  IconButton,
+  Link,
+  Tooltip,
+} from '@mui/material';
+import {
+  DataGrid,
+  GridColDef,
+  GridActionsCellItem,
+  GridRenderCellParams,
+} from '@mui/x-data-grid';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { ResourceConfig, ResourceField } from '../types/config';
+
+interface EnhancedTableProps {
+  config: ResourceConfig;
+  data: any[];
+  onEdit: (item: any) => void;
+  onDelete: (id: string) => void;
+  onCreate: () => void;
+  onNavigateToResource?: (resourceName: string, id: string) => void;
+}
+
+export default function EnhancedTable({
+  config,
+  data,
+  onEdit,
+  onDelete,
+  onCreate,
+  onNavigateToResource,
+}: EnhancedTableProps) {
+  
+  const columns: GridColDef[] = React.useMemo(() => {
+    const cols: GridColDef[] = Object.entries(config.fields).map(([key, field]) => {
+      const col: GridColDef = {
+        field: key,
+        headerName: field.label,
+        flex: 1,
+        minWidth: 150,
+        renderCell: (params: GridRenderCellParams) => {
+          const value = params.value;
+          
+          // 1. Custom Formatter
+          if (field.formatter) {
+            return field.formatter(value);
+          }
+
+          // 2. Relational Link
+          if (field.relation && value) {
+            const relationId = typeof value === 'object' ? value.id : value;
+            if (relationId) {
+                return (
+                    <Link
+                      component="button"
+                      variant="body2"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onNavigateToResource?.(field.relation!, relationId);
+                      }}
+                    >
+                      {relationId}
+                    </Link>
+                  );
+            }
+          }
+
+          // 3. Nested Object / Array Display
+          if (field.type === 'array' && Array.isArray(value)) {
+            if (field.displayField) {
+              return value
+                .map((item) => (typeof item === 'object' ? item[field.displayField!] : item))
+                .filter(Boolean)
+                .join(', ');
+            }
+            return `${value.length} items`;
+          }
+
+          if (field.type === 'object' && value) {
+            if (field.displayField && value[field.displayField]) {
+                return value[field.displayField];
+            }
+            return JSON.stringify(value);
+          }
+
+          // 4. Default renderings
+          if (field.type === 'boolean') return value ? 'Yes' : 'No';
+          if (field.type === 'datetime' || field.type === 'date') {
+            return new Date(value).toLocaleString();
+          }
+
+          return value;
+        }
+      };
+      return col;
+    });
+
+    cols.push({
+      field: 'actions',
+      type: 'actions',
+      headerName: 'Actions',
+      width: 100,
+      getActions: (params) => [
+        <GridActionsCellItem
+          icon={<EditIcon />}
+          label="Edit"
+          onClick={() => onEdit(params.row)}
+        />,
+        <GridActionsCellItem
+          icon={<DeleteIcon />}
+          label="Delete"
+          onClick={() => onDelete(params.id as string)}
+        />,
+      ],
+    });
+
+    return cols;
+  }, [config, onEdit, onDelete, onNavigateToResource]);
+
+  return (
+    <Box sx={{ height: 600, width: '100%' }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3, alignItems: 'center' }}>
+        <Typography variant="h5">{config.pluralLabel}</Typography>
+        <Button variant="contained" color="primary" onClick={onCreate}>
+          Add {config.label}
+        </Button>
+      </Box>
+      <DataGrid
+        rows={data || []}
+        columns={columns}
+        getRowId={(row) => {
+            const pk = config.primaryKey;
+            if (row[pk] !== undefined && row[pk] !== null) return row[pk];
+            // Fallback: search for common ID fields
+            const fallbackKeys = ['id', 'uuid', 'pk'];
+            for (const key of fallbackKeys) {
+                if (row[key] !== undefined && row[key] !== null) return row[key];
+            }
+            debugger;
+
+            // Absolute fallback: index (not ideal but avoids crash)
+            return `temp-id-${data.indexOf(row)}`;
+        }}
+        disableRowSelectionOnClick
+        initialState={{
+          pagination: {
+            paginationModel: { page: 0, pageSize: 10 },
+          },
+        }}
+        pageSizeOptions={[5, 10, 25]}
+      />
+    </Box>
+  );
+}

src_generic/components/GenericForm.tsx

@@ -0,0 +1,203 @@
+import * as React from 'react';
+import {
+  Box,
+  TextField,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  FormControlLabel,
+  Checkbox,
+  Typography,
+  Divider,
+} from '@mui/material';
+import { ResourceConfig, ResourceField } from '../types/config';
+import { useUpload } from '../providers/UploadProvider';
+import ImageUploadField from './fields/ImageUploadField';
+
+interface GenericFormProps {
+  config: ResourceConfig;
+  initialData?: any;
+  onSave: (data: any) => Promise<void>;
+  onCancel: () => void;
+  loading?: boolean;
+}
+
+import { ConfigContext } from '../App';
+
+export default function GenericForm({
+  config,
+  initialData = {},
+  onSave,
+  onCancel,
+  loading: saving,
+}: GenericFormProps) {
+  initialData = initialData || {};
+  const [formData, setFormData] = React.useState(initialData);
+  const { uploadFile, uploading } = useUpload();
+  const appConfig = React.useContext(ConfigContext);
+
+  const handleChange = (key: string, value: any) => {
+    setFormData((prev: any) => ({ ...prev, [key]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave(formData);
+  };
+
+  return (
+    <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+      <Typography variant="h5">
+        {initialData[config.primaryKey] ? `Edit ${config.label}` : `New ${config.label}`}
+      </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={field.readOnly}
+          uploadFile={uploadFile}
+          uploading={uploading}
+          baseUrl={appConfig?.baseUrl || ""}
+        />
+      ))}
+
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 4 }}>
+        <Button variant="outlined" onClick={onCancel} disabled={saving}>
+          Cancel
+        </Button>
+        <Button variant="contained" type="submit" loading={saving} disabled={saving || uploading}>
+          Save {config.label}
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
+function FormField({ name, field, value, onChange, disabled, uploadFile, uploading, baseUrl }: any) {
+  const label = field.label;
+
+  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}
+      />
+    );
+  }
+
+  if (field.type === 'boolean') {
+    return (
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={!!value}
+            onChange={(e) => onChange(e.target.checked)}
+            disabled={disabled}
+          />
+        }
+        label={label}
+      />
+    );
+  }
+
+  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>
+    );
+  }
+
+  if (field.type === 'datetime') {
+    return (
+      <TextField
+        fullWidth
+        label={label}
+        type="datetime-local"
+        InputLabelProps={{ shrink: true }}
+        value={value ? new Date(value).toISOString().slice(0, 16) : ''}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        required={field.required}
+      />
+    );
+  }
+
+  if (field.type === 'date') {
+    return (
+      <TextField
+        fullWidth
+        label={label}
+        type="date"
+        InputLabelProps={{ shrink: true }}
+        value={value ? new Date(value).toISOString().split('T')[0] : ''}
+        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 || 0}
+        onChange={(e) => onChange(Number(e.target.value))}
+        disabled={disabled}
+        required={field.required}
+      />
+    );
+  }
+
+  return (
+    <TextField
+      fullWidth
+      label={label}
+      value={JSON.stringify(value)}
+      disabled
+    />
+  );
+}

src_generic/components/ResourceView.tsx

@@ -0,0 +1,81 @@
+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';
+
+interface ResourceViewProps {
+  config: ResourceConfig;
+  onNavigateToResource?: (resourceName: string, id: string) => void;
+}
+
+export default function ResourceView({ config, onNavigateToResource }: ResourceViewProps) {
+  const [view, setView] = React.useState<'list' | 'create' | 'edit'>('list');
+  const [selectedItem, setSelectedItem] = React.useState<any>(null);
+
+  const { useList, useCreate, useUpdate, useDelete } = useResource(config);
+
+  const { data, isLoading, error } = useList();
+  const createMutation = useCreate();
+  const updateMutation = useUpdate();
+  const deleteMutation = useDelete();
+
+  const handleEdit = (item: any) => {
+    setSelectedItem(item);
+    setView('edit');
+  };
+
+  const handleCreate = () => {
+    setSelectedItem(null);
+    setView('create');
+  };
+
+  const handleSave = async (formData: any) => {
+    try {
+      if (view === 'edit') {
+        const id = formData[config.primaryKey];
+        await updateMutation.mutateAsync({ id, data: formData });
+      } else {
+        await createMutation.mutateAsync(formData);
+      }
+      setView('list');
+    } catch (err) {
+      console.error('Save failed:', err);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (window.confirm('Are you sure you want to delete this item?')) {
+      await deleteMutation.mutateAsync(id);
+    }
+  };
+
+  if (isLoading) return <CircularProgress />;
+  if (error) return <Typography color="error">Error loading {config.pluralLabel}</Typography>;
+
+  return (
+    <Box>
+      {view === 'list' ? (
+        <EnhancedTable
+          config={config}
+          data={data || []}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+          onCreate={handleCreate}
+          onNavigateToResource={onNavigateToResource}
+        />
+      ) : (
+        <Paper sx={{ p: 4 }}>
+          <GenericForm
+            config={config}
+            initialData={selectedItem}
+            onSave={handleSave}
+            onCancel={() => setView('list')}
+            loading={createMutation.isPending || updateMutation.isPending}
+          />
+        </Paper>
+      )}
+    </Box>
+  );
+}

src_generic/components/fields/ImageUploadField.tsx

@@ -0,0 +1,56 @@
+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;
+}
+
+export default function ImageUploadField({
+  label = "Upload Image",
+  value,
+  uploading = false,
+  onUpload,
+  size = 64,
+  baseUrl,
+}: 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 }}
+        />
+
+        <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

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

@@ -0,0 +1,42 @@
+import { ResourceOverride } from "./utils/overrides";
+
+export const configuration: Record<string, ResourceOverride> = {
+  expenses: {
+    fields: {
+      payee: {
+        displayField: "name",
+      },
+      payor: {
+        display: false,
+        displayField: "username",
+      },
+      account: {
+        displayField: "name",
+      },
+      tags: {
+        displayField: "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
+      }
+    },
+  },
+};

src_generic/hooks/useResource.ts

@@ -0,0 +1,77 @@
+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 () => {
+        const res = await api.get<T[]>(endpoint, { params });
+        return res.data;
+      }
+    });
+
+  // --- READ ONE ---
+  const useOne = (id: string | null) =>
+    useQuery({
+      queryKey: [name, "detail", id],
+      queryFn: async () => {
+        if (!id) return null;
+        const res = await api.get<T>(`${endpoint}/${id}`);
+        return res.data;
+      },
+      enabled: !!id,
+    });
+
+  // --- CREATE ---
+  const useCreate = () =>
+    useMutation({
+      mutationFn: async (data: Partial<T>) => {
+        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> }) => {
+        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"] });
+      },
+    });
+
+  return {
+    useList,
+    useOne,
+    useCreate,
+    useUpdate,
+    useDelete,
+  };
+}

src_generic/main.tsx

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

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

@@ -0,0 +1,38 @@
+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;
+  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>;
+}
+
+export interface AppConfig {
+  baseUrl: string;
+  authBaseUrl: string;
+  resources: ResourceConfig[];
+}

src_generic/utils/openapi_loader.ts

@@ -0,0 +1,165 @@
+import SwaggerParser from "@apidevtools/swagger-parser";
+import { AppConfig, ResourceConfig, ResourceField, FieldType } from "../types/config";
+import { configuration } 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,
+  allResources: 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 any) {
+    const type = mapOpenApiType(prop);
+    const override = overrides[key];
+
+    console.log("key", key, "type", type, "prop", prop, "override", override);
+    if (key !== "id" && override?.display !== false) {
+      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,
+      };
+    } else continue;
+
+    // Schema-based Relation Detection
+    // If it's an object/string and matches a resource name, it might be a relation
+    const potentialRelation = allResources.find(
+      (res) =>
+        key === res ||
+        key === `${res}_id` ||
+        prop.title?.toLowerCase() === res ||
+        prop["x-resource"] === res
+    );
+
+    if (potentialRelation) {
+      if (type === "string" || (type === "object" && prop.properties?.id)) {
+        fields[key].relation = potentialRelation;
+      }
+    }
+
+    if (fields[key].type === "object" && prop.properties) {
+      fields[key].schema = parseSchemaFields(prop, resourceName, allResources);
+    }
+  }
+
+  return fields;
+}
+
+/**
+ * Scans paths to identify resources and their basic configuration
+ */
+export async function loadConfigFromOpenApi(baseUrl: string): Promise<AppConfig> {
+  // 1. Parse and dereference the spec (handles all $ref)
+  const api = await SwaggerParser.dereference(
+    new URL("/openapi.json", baseUrl).href
+  );
+
+  const resources: ResourceConfig[] = [];
+  const paths = api.paths || {};
+
+  // Group paths by base resource name (e.g., /expenses, /expenses/{id} -> expenses)
+  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);
+
+    // We prefer the plural GET path for schema extraction
+    if (!path.includes("{") && paths[path]?.get?.responses?.["200"]) {
+      resourcePaths[base].listPath = path;
+    }
+  }
+
+  const allResourceNames = Object.keys(resourcePaths);
+
+  // Generate ResourceConfig for each identified base path
+  for (const [name, info] of Object.entries(resourcePaths)) {
+    const listPath = info.listPath || `/${name}`;
+    const listOp = paths[listPath]?.get;
+    if (!listOp) continue;
+
+    // Use common naming conventions or metadata from the spec
+    const label = name.charAt(0).toUpperCase() + name.slice(1, -1); // naive singularization
+    const pluralLabel = name.charAt(0).toUpperCase() + name.slice(1);
+
+    // Extract schema from the 200 response of the list endpoint
+    let schema: any = null;
+    const responseSchema =
+      listOp.responses?.["200"]?.content?.["application/json"]?.schema;
+
+    if (responseSchema?.type === "array" && responseSchema.items) {
+      schema = responseSchema.items;
+    } else {
+      schema = responseSchema;
+    }
+
+    if (schema) {
+      resources.push({
+        name,
+        label: schema.title || label,
+        pluralLabel: pluralLabel,
+        endpoint: listPath,
+        primaryKey: "id", // assume 'id' as default or look for 'required' + 'unique'
+        fields: parseSchemaFields(schema, name, allResourceNames),
+      });
+    }
+  }
+
+  return {
+    baseUrl:
+      import.meta.env.VITE_API_BASE_URL || (api.servers?.[0]?.url ?? ""),
+    authBaseUrl: import.meta.env.VITE_AUTH_BASE_URL || "",
+    resources,
+  };
+}

src_generic/utils/overrides.ts

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