profile view

src_generic/components/AdminLayout.tsx

@@ -12,6 +12,7 @@ import {
   ListItemIcon,
   ListItemText,
   CssBaseline,
+  Button,
   IconButton,
   Tooltip,
   useMediaQuery,
@@ -176,9 +177,15 @@ export default function AdminLayout({
           <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1, fontWeight: 'bold' }}>
             Admin Panel
           </Typography>
-          <Typography variant="body1" sx={{ mr: 2, fontWeight: 500, display: { xs: 'none', sm: 'block' } }}>
-            {username}
-          </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 />

src_generic/components/ProfileView.tsx

@@ -0,0 +1,58 @@
+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) {
+    debugger;
+    return <Alert severity="error">Profile configuration not found.</Alert>;
+  }
+
+  const { useMe, useUpdate } = useResource(resourceConfig);
+  const { data: profile, isLoading, error } = useMe();
+  const updateMutation = useUpdate();
+
+  const handleSave = async (formData: any) => {
+    try {
+      const id = profile[resourceConfig.primaryKey];
+      await updateMutation.mutateAsync({ id, data: formData });
+    } 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={resourceConfig}
+          initialData={profile}
+          onSave={handleSave}
+          onCancel={() => window.history.back()}
+          loading={updateMutation.isPending}
+        />
+      </Paper>
+    </Box>
+  );
+}