featuer change for calendar

frontend/src/pages/Fahrzeuge.tsx

@@ -213,15 +213,53 @@ const VehicleCard: React.FC<VehicleCardProps> = ({ vehicle, onClick, warnings =
           )}
 
           {warnings.length > 0 && (
-            <Tooltip title={warnings.map(w => `${w.bezeichnung}: ${AusruestungStatusLabel[w.status]}`).join('\n')}>
-              <Chip
-                size="small"
-                icon={<Warning />}
-                label={`${warnings.length} Ausrüstung nicht bereit`}
-                color={warnings.some(w => w.status === AusruestungStatus.Beschaedigt) ? 'error' : 'warning'}
-                sx={{ mt: 0.5 }}
-              />
-            </Tooltip>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.5 }}>
+              {warnings.slice(0, warnings.length > 3 ? 2 : 3).map((w) => {
+                const isError =
+                  w.status === AusruestungStatus.Beschaedigt ||
+                  w.status === AusruestungStatus.AusserDienst;
+                return (
+                  <Tooltip
+                    key={w.ausruestung_id}
+                    title={`${w.kategorie_name}: ${AusruestungStatusLabel[w.status]}`}
+                  >
+                    <Chip
+                      size="small"
+                      icon={<ReportProblem />}
+                      label={w.bezeichnung}
+                      color={isError ? 'error' : 'warning'}
+                      sx={{ fontSize: '0.7rem', maxWidth: 160 }}
+                    />
+                  </Tooltip>
+                );
+              })}
+              {warnings.length > 3 && (
+                <Tooltip
+                  title={warnings
+                    .slice(2)
+                    .map((w) => `${w.bezeichnung}: ${AusruestungStatusLabel[w.status]}`)
+                    .join('\n')}
+                >
+                  <Chip
+                    size="small"
+                    icon={<Warning />}
+                    label={`+${warnings.length - 2} weitere`}
+                    color={
+                      warnings
+                        .slice(2)
+                        .some(
+                          (w) =>
+                            w.status === AusruestungStatus.Beschaedigt ||
+                            w.status === AusruestungStatus.AusserDienst
+                        )
+                        ? 'error'
+                        : 'warning'
+                    }
+                    sx={{ fontSize: '0.7rem' }}
+                  />
+                </Tooltip>
+              )}
+            </Box>
           )}
         </CardContent>
       </CardActionArea>