add features

frontend/src/pages/Dashboard.tsx

@@ -10,7 +10,7 @@ import {
   People,
   Warning,
   EventNote,
-  LocalFireDepartment,
+  DirectionsCar,
 } from '@mui/icons-material';
 import { useAuth } from '../contexts/AuthContext';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
@@ -21,17 +21,27 @@ import VikunjaCard from '../components/dashboard/VikunjaCard';
 import BookstackCard from '../components/dashboard/BookstackCard';
 import StatsCard from '../components/dashboard/StatsCard';
 import ActivityFeed from '../components/dashboard/ActivityFeed';
+import InspectionAlerts from '../components/vehicles/InspectionAlerts';
+import { vehiclesApi } from '../services/vehicles';
+import type { VehicleStats } from '../types/vehicle.types';
 
 function Dashboard() {
   const { user } = useAuth();
   const [dataLoading, setDataLoading] = useState(true);
+  const [vehicleStats, setVehicleStats] = useState<VehicleStats | null>(null);
 
   useEffect(() => {
-    // Simulate loading data
     const timer = setTimeout(() => {
       setDataLoading(false);
     }, 800);
 
+    // Fetch live vehicle stats for the KPI strip
+    vehiclesApi.getStats()
+      .then((stats) => setVehicleStats(stats))
+      .catch(() => {
+        // Non-critical — KPI will fall back to placeholder
+      });
+
     return () => clearTimeout(timer);
   }, []);
 
@@ -118,6 +128,8 @@ function Dashboard() {
               </Fade>
             )}
           </Grid>
+
+          {/* Live vehicle KPI — einsatzbereit count from API */}
           <Grid item xs={12} sm={6} md={3}>
             {dataLoading ? (
               <SkeletonCard variant="basic" />
@@ -125,9 +137,13 @@ function Dashboard() {
               <Fade in={true} timeout={600} style={{ transitionDelay: '350ms' }}>
                 <Box>
                   <StatsCard
-                    title="Fahrzeuge"
-                    value="5"
-                    icon={LocalFireDepartment}
+                    title="Fahrzeuge einsatzbereit"
+                    value={
+                      vehicleStats
+                        ? `${vehicleStats.einsatzbereit}/${vehicleStats.total}`
+                        : '—'
+                    }
+                    icon={DirectionsCar}
                     color="success.main"
                   />
                 </Box>
@@ -135,6 +151,15 @@ function Dashboard() {
             )}
           </Grid>
 
+          {/* Inspection Alerts Panel — safety-critical, shown immediately */}
+          <Grid item xs={12}>
+            <Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '380ms' }}>
+              <Box>
+                <InspectionAlerts daysAhead={30} hideWhenEmpty={true} />
+              </Box>
+            </Fade>
+          </Grid>
+
           {/* Service Integration Cards */}
           <Grid item xs={12}>
             <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>