featuer change for calendar

frontend/src/pages/Dashboard.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import {
+  Alert,
   Container,
   Box,
   Typography,
@@ -116,11 +117,27 @@ function Dashboard() {
                     icon={DirectionsCar}
                     color="success.main"
                   />
-                  {vehicleWarnings.length > 0 && (
-                    <Typography variant="caption" color="warning.main" sx={{ mt: 0.5, display: 'block', textAlign: 'center' }}>
-                      {new Set(vehicleWarnings.map(w => w.fahrzeug_id)).size} Fzg. mit Ausrüstungsmangel
-                    </Typography>
-                  )}
+                  {vehicleWarnings.length > 0 && (() => {
+                    const errorCount = vehicleWarnings.filter(w =>
+                      w.status === 'beschaedigt' || w.status === 'ausser_dienst'
+                    ).length;
+                    const warnCount = vehicleWarnings.filter(w =>
+                      w.status === 'in_wartung'
+                    ).length;
+                    const vehicleCount = new Set(vehicleWarnings.map(w => w.fahrzeug_id)).size;
+                    const severity = errorCount > 0 ? 'error' : 'warning';
+                    return (
+                      <Alert
+                        severity={severity}
+                        variant="outlined"
+                        sx={{ mt: 1, py: 0.5, '& .MuiAlert-message': { fontSize: '0.8rem' } }}
+                      >
+                        {vehicleCount} Fahrzeug{vehicleCount \!== 1 ? 'e' : ''} mit Ausrüstungsmangel
+                        {errorCount > 0 && }
+                        {warnCount > 0 && errorCount === 0 && }
+                      </Alert>
+                    );
+                  })()}
                 </Box>
               </Fade>
             )}