featuer change for calendar

frontend/src/components/shared/Header.tsx

@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
   AppBar,
+  Badge,
   Toolbar,
   Typography,
   IconButton,
@@ -20,6 +21,7 @@ import {
 } from '@mui/icons-material';
 import { useAuth } from '../../contexts/AuthContext';
 import { useNavigate } from 'react-router-dom';
+import { atemschutzApi } from '../../services/atemschutz';
 
 interface HeaderProps {
   onMenuClick: () => void;
@@ -29,6 +31,22 @@ function Header({ onMenuClick }: HeaderProps) {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [warningCount, setWarningCount] = useState(0);
+
+  // Fetch personal warning count for badge
+  useEffect(() => {
+    if (\!user) return;
+    atemschutzApi.getMyStatus()
+      .then((record) => {
+        if (\!record) return;
+        let count = 0;
+        const THRESHOLD = 60;
+        if (record.untersuchung_tage_rest \!== null && record.untersuchung_tage_rest <= THRESHOLD) count++;
+        if (record.leistungstest_tage_rest \!== null && record.leistungstest_tage_rest <= THRESHOLD) count++;
+        setWarningCount(count);
+      })
+      .catch(() => { /* non-critical */ });
+  }, [user]);
 
   const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -55,7 +73,7 @@ function Header({ onMenuClick }: HeaderProps) {
 
   // Get initials for avatar
   const getInitials = () => {
-    if (!user) return '?';
+    if (\!user) return '?';
     const initials = (user.given_name?.[0] || '') + (user.family_name?.[0] || '');
     return initials || user.name?.[0] || '?';
   };
@@ -70,7 +88,7 @@ function Header({ onMenuClick }: HeaderProps) {
       <Toolbar>
         <IconButton
           color="inherit"
-          aria-label="Menü öffnen"
+          aria-label="Men� �ffnen"
           edge="start"
           onClick={onMenuClick}
           sx={{ mr: 2, display: { sm: 'none' } }}
@@ -92,16 +110,23 @@ function Header({ onMenuClick }: HeaderProps) {
               aria-controls="user-menu"
               aria-haspopup="true"
             >
-              <Avatar
-                sx={{
-                  bgcolor: 'secondary.main',
-                  width: 32,
-                  height: 32,
-                  fontSize: '0.875rem',
-                }}
+              <Badge
+                badgeContent={warningCount}
+                color="error"
+                overlap="circular"
+                invisible={warningCount === 0}
               >
-                {getInitials()}
-              </Avatar>
+                <Avatar
+                  sx={{
+                    bgcolor: 'secondary.main',
+                    width: 32,
+                    height: 32,
+                    fontSize: '0.875rem',
+                  }}
+                >
+                  {getInitials()}
+                </Avatar>
+              </Badge>
             </IconButton>
 
             <Menu
@@ -129,6 +154,11 @@ function Header({ onMenuClick }: HeaderProps) {
                 <Typography variant="body2" color="text.secondary">
                   {user.email}
                 </Typography>
+                {warningCount > 0 && (
+                  <Typography variant="caption" color="error.main" sx={{ display: 'block', mt: 0.5 }}>
+                    {warningCount} persönliche{warningCount !== 1 ? ' Warnungen' : ' Warnung'}
+                  </Typography>
+                )}
               </Box>
               <Divider />
               <MenuItem onClick={handleProfile}>