add features

frontend/src/components/shared/Header.tsx

@@ -1,7 +1,6 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import {
   AppBar,
-  Badge,
   Toolbar,
   Typography,
   IconButton,
@@ -21,7 +20,7 @@ import {
 } from '@mui/icons-material';
 import { useAuth } from '../../contexts/AuthContext';
 import { useNavigate } from 'react-router-dom';
-import { atemschutzApi } from '../../services/atemschutz';
+import NotificationBell from './NotificationBell';
 
 interface HeaderProps {
   onMenuClick: () => void;
@@ -31,22 +30,6 @@ 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);
@@ -103,30 +86,26 @@ function Header({ onMenuClick }: HeaderProps) {
 
         {user && (
           <>
+            <NotificationBell />
+
             <IconButton
               onClick={handleMenuOpen}
               size="small"
               aria-label="Benutzerkonto"
               aria-controls="user-menu"
               aria-haspopup="true"
+              sx={{ ml: 1 }}
             >
-              <Badge
-                badgeContent={warningCount}
-                color="error"
-                overlap="circular"
-                invisible={warningCount === 0}
+              <Avatar
+                sx={{
+                  bgcolor: 'secondary.main',
+                  width: 32,
+                  height: 32,
+                  fontSize: '0.875rem',
+                }}
               >
-                <Avatar
-                  sx={{
-                    bgcolor: 'secondary.main',
-                    width: 32,
-                    height: 32,
-                    fontSize: '0.875rem',
-                  }}
-                >
-                  {getInitials()}
-                </Avatar>
-              </Badge>
+                {getInitials()}
+              </Avatar>
             </IconButton>
 
             <Menu
@@ -154,11 +133,6 @@ 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}>