add features

frontend/src/components/dashboard/UserProfile.tsx

@@ -1,139 +1,52 @@
 import React from 'react';
-import {
-  Card,
-  CardContent,
-  Avatar,
-  Typography,
-  Box,
-  Chip,
-} from '@mui/material';
+import { Avatar, Box, Paper, Typography } from '@mui/material';
 import { User } from '../../types/auth.types';
 
 interface UserProfileProps {
   user: User;
 }
 
-const UserProfile: React.FC<UserProfileProps> = ({ user }) => {
-  // Get first letter of name for avatar
-  const getInitials = (name: string): string => {
-    return name.charAt(0).toUpperCase();
-  };
+function getGreeting(): string {
+  const h = new Date().getHours();
+  if (h >= 5  && h <= 10) return 'Guten Morgen';
+  if (h >= 11 && h <= 13) return 'Mahlzeit';
+  if (h >= 14 && h <= 16) return 'Guten Nachmittag';
+  if (h >= 17 && h <= 21) return 'Guten Abend';
+  return 'Gute Nacht';
+}
 
-  // Format date (placeholder until we have actual dates)
-  const formatDate = (date?: string): string => {
-    if (!date) return 'Nicht verfügbar';
-    return new Date(date).toLocaleDateString('de-DE', {
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric',
-    });
-  };
+const UserProfile: React.FC<UserProfileProps> = ({ user }) => {
+  const firstName = user.given_name || user.name.split(' ')[0];
+  const initials  = (user.given_name?.[0] || '') + (user.family_name?.[0] || '') || user.name?.[0] || '?';
 
   return (
-    <Card
+    <Paper
+      elevation={0}
       sx={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
         color: 'white',
+        borderRadius: 2,
+        px: 3,
+        py: 1.5,
       }}
     >
-      <CardContent>
-        <Box
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        <Avatar
           sx={{
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: { xs: 'column', sm: 'row' },
-            gap: 3,
+            width: 40,
+            height: 40,
+            bgcolor: 'rgba(255,255,255,0.2)',
+            fontSize: '1rem',
+            fontWeight: 'bold',
           }}
         >
-          {/* Avatar */}
-          <Avatar
-            sx={{
-              width: 80,
-              height: 80,
-              bgcolor: 'rgba(255, 255, 255, 0.2)',
-              fontSize: '2rem',
-              fontWeight: 'bold',
-            }}
-          >
-            {getInitials(user.name)}
-          </Avatar>
-
-          {/* User Info */}
-          <Box sx={{ flex: 1, textAlign: { xs: 'center', sm: 'left' } }}>
-            <Typography variant="h5" component="div" gutterBottom>
-              Willkommen zurück, {user.given_name || user.name.split(' ')[0]}!
-            </Typography>
-            <Typography variant="body2" sx={{ opacity: 0.75, mb: 0.5 }}>
-              {user.name}
-            </Typography>
-            <Typography variant="body2" sx={{ opacity: 0.9 }}>
-              {user.email}
-            </Typography>
-            {user.preferred_username && (
-              <Typography variant="body2" sx={{ opacity: 0.9 }}>
-                @{user.preferred_username}
-              </Typography>
-            )}
-
-            <Box
-              sx={{
-                display: 'flex',
-                gap: 1,
-                mt: 2,
-                flexWrap: 'wrap',
-                justifyContent: { xs: 'center', sm: 'flex-start' },
-              }}
-            >
-              <Chip
-                label="Aktiv"
-                size="small"
-                sx={{
-                  bgcolor: 'rgba(255, 255, 255, 0.2)',
-                  color: 'white',
-                }}
-              />
-              {user.groups && user.groups.length > 0 && (
-                <Chip
-                  label={`${user.groups.length} Gruppe${user.groups.length > 1 ? 'n' : ''}`}
-                  size="small"
-                  sx={{
-                    bgcolor: 'rgba(255, 255, 255, 0.2)',
-                    color: 'white',
-                  }}
-                />
-              )}
-            </Box>
-          </Box>
-
-          {/* Additional Info */}
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 1,
-              textAlign: { xs: 'center', sm: 'right' },
-            }}
-          >
-            <Box>
-              <Typography variant="caption" sx={{ opacity: 0.8 }}>
-                Letzter Login
-              </Typography>
-              <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
-                Heute
-              </Typography>
-            </Box>
-            <Box>
-              <Typography variant="caption" sx={{ opacity: 0.8 }}>
-                Mitglied seit
-              </Typography>
-              <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
-                {formatDate()}
-              </Typography>
-            </Box>
-          </Box>
-        </Box>
-      </CardContent>
-    </Card>
+          {initials.toUpperCase()}
+        </Avatar>
+        <Typography variant="h6" sx={{ fontWeight: 500 }}>
+          {getGreeting()}, {firstName}!
+        </Typography>
+      </Box>
+    </Paper>
   );
 };