add now features

frontend/src/pages/Dashboard.tsx

@@ -7,9 +7,6 @@ import {
   Fade,
 } from '@mui/material';
 import {
-  People,
-  Warning,
-  EventNote,
   DirectionsCar,
 } from '@mui/icons-material';
 import { useAuth } from '../contexts/AuthContext';
@@ -23,13 +20,18 @@ import NextcloudTalkWidget from '../components/dashboard/NextcloudTalkWidget';
 import StatsCard from '../components/dashboard/StatsCard';
 import ActivityFeed from '../components/dashboard/ActivityFeed';
 import InspectionAlerts from '../components/vehicles/InspectionAlerts';
+import EquipmentAlerts from '../components/equipment/EquipmentAlerts';
+import AtemschutzDashboardCard from '../components/atemschutz/AtemschutzDashboardCard';
 import { vehiclesApi } from '../services/vehicles';
+import { equipmentApi } from '../services/equipment';
 import type { VehicleStats } from '../types/vehicle.types';
+import type { VehicleEquipmentWarning } from '../types/equipment.types';
 
 function Dashboard() {
   const { user } = useAuth();
   const [dataLoading, setDataLoading] = useState(true);
   const [vehicleStats, setVehicleStats] = useState<VehicleStats | null>(null);
+  const [vehicleWarnings, setVehicleWarnings] = useState<VehicleEquipmentWarning[]>([]);
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -43,6 +45,13 @@ function Dashboard() {
         // Non-critical — KPI will fall back to placeholder
       });
 
+    // Fetch vehicle equipment warnings
+    equipmentApi.getVehicleWarnings()
+      .then((w) => setVehicleWarnings(w))
+      .catch(() => {
+        // Non-critical — warning indicator simply won't appear
+      });
+
     return () => clearTimeout(timer);
   }, []);
 
@@ -80,62 +89,12 @@ function Dashboard() {
             </Grid>
           )}
 
-          {/* Stats Cards Row */}
-          <Grid item xs={12} sm={6} md={3}>
-            {dataLoading ? (
-              <SkeletonCard variant="basic" />
-            ) : (
-              <Fade in={true} timeout={600} style={{ transitionDelay: '200ms' }}>
-                <Box>
-                  <StatsCard
-                    title="Aktive Mitglieder"
-                    value="24"
-                    icon={People}
-                    color="primary.main"
-                  />
-                </Box>
-              </Fade>
-            )}
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
-            {dataLoading ? (
-              <SkeletonCard variant="basic" />
-            ) : (
-              <Fade in={true} timeout={600} style={{ transitionDelay: '250ms' }}>
-                <Box>
-                  <StatsCard
-                    title="Einsätze (Jahr)"
-                    value="18"
-                    icon={Warning}
-                    color="error.main"
-                  />
-                </Box>
-              </Fade>
-            )}
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
-            {dataLoading ? (
-              <SkeletonCard variant="basic" />
-            ) : (
-              <Fade in={true} timeout={600} style={{ transitionDelay: '300ms' }}>
-                <Box>
-                  <StatsCard
-                    title="Offene Aufgaben"
-                    value="7"
-                    icon={EventNote}
-                    color="warning.main"
-                  />
-                </Box>
-              </Fade>
-            )}
-          </Grid>
-
           {/* Live vehicle KPI — einsatzbereit count from API */}
           <Grid item xs={12} sm={6} md={3}>
             {dataLoading ? (
               <SkeletonCard variant="basic" />
             ) : (
-              <Fade in={true} timeout={600} style={{ transitionDelay: '350ms' }}>
+              <Fade in={true} timeout={600} style={{ transitionDelay: '200ms' }}>
                 <Box>
                   <StatsCard
                     title="Fahrzeuge einsatzbereit"
@@ -147,6 +106,11 @@ 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>
+                  )}
                 </Box>
               </Fade>
             )}
@@ -161,6 +125,24 @@ function Dashboard() {
             </Fade>
           </Grid>
 
+          {/* Equipment Alerts Panel */}
+          <Grid item xs={12}>
+            <Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '400ms' }}>
+              <Box>
+                <EquipmentAlerts daysAhead={30} hideWhenEmpty={true} />
+              </Box>
+            </Fade>
+          </Grid>
+
+          {/* Atemschutz Status Card */}
+          <Grid item xs={12} md={6}>
+            <Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '420ms' }}>
+              <Box>
+                <AtemschutzDashboardCard />
+              </Box>
+            </Fade>
+          </Grid>
+
           {/* Service Integration Cards */}
           <Grid item xs={12}>
             <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>