rework vehicle handling

frontend/src/pages/FahrzeugDetail.tsx

@@ -22,13 +22,6 @@ import {
   Tab,
   Tabs,
   TextField,
-  Timeline,
-  TimelineConnector,
-  TimelineContent,
-  TimelineDot,
-  TimelineItem,
-  TimelineOppositeContent,
-  TimelineSeparator,
   Tooltip,
   Typography,
 } from '@mui/material';
@@ -39,6 +32,7 @@ import {
   Build,
   CheckCircle,
   DirectionsCar,
+  Edit,
   Error as ErrorIcon,
   LocalFireDepartment,
   PauseCircle,
@@ -51,16 +45,12 @@ import DashboardLayout from '../components/dashboard/DashboardLayout';
 import { vehiclesApi } from '../services/vehicles';
 import {
   FahrzeugDetail,
-  FahrzeugPruefung,
   FahrzeugWartungslog,
   FahrzeugStatus,
   FahrzeugStatusLabel,
-  PruefungArt,
-  PruefungArtLabel,
-  CreatePruefungPayload,
   CreateWartungslogPayload,
+  UpdateStatusPayload,
   WartungslogArt,
-  PruefungErgebnis,
 } from '../types/vehicle.types';
 import { usePermissions } from '../hooks/usePermissions';
 
@@ -125,11 +115,24 @@ const UebersichtTab: React.FC<UebersichtTabProps> = ({ vehicle, onStatusUpdated,
   const [saving, setSaving]                     = useState(false);
   const [saveError, setSaveError]               = useState<string | null>(null);
 
+  const openDialog = () => {
+    setNewStatus(vehicle.status);
+    setBemerkung(vehicle.status_bemerkung ?? '');
+    setSaveError(null);
+    setStatusDialogOpen(true);
+  };
+
+  const closeDialog = () => {
+    setSaveError(null);
+    setStatusDialogOpen(false);
+  };
+
   const handleSaveStatus = async () => {
     try {
       setSaving(true);
       setSaveError(null);
-      await vehiclesApi.updateStatus(vehicle.id, { status: newStatus, bemerkung });
+      const payload: UpdateStatusPayload = { status: newStatus, bemerkung };
+      await vehiclesApi.updateStatus(vehicle.id, payload);
       setStatusDialogOpen(false);
       onStatusUpdated();
     } catch {
@@ -141,6 +144,12 @@ const UebersichtTab: React.FC<UebersichtTabProps> = ({ vehicle, onStatusUpdated,
 
   const isSchaden = vehicle.status === FahrzeugStatus.AusserDienstSchaden;
 
+  // Inspection deadline badges
+  const inspItems: { label: string; faelligAm: string | null; tage: number | null }[] = [
+    { label: '§57a Periodische Prüfung', faelligAm: vehicle.paragraph57a_faellig_am, tage: vehicle.paragraph57a_tage_bis_faelligkeit },
+    { label: 'Nächste Wartung / Service', faelligAm: vehicle.naechste_wartung_am,    tage: vehicle.wartung_tage_bis_faelligkeit },
+  ];
+
   return (
     <Box>
       {isSchaden && (
@@ -156,9 +165,7 @@ const UebersichtTab: React.FC<UebersichtTabProps> = ({ vehicle, onStatusUpdated,
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
             {STATUS_ICONS[vehicle.status]}
             <Box>
-              <Typography variant="subtitle1" fontWeight={600}>
-                Aktueller Status
-              </Typography>
+              <Typography variant="subtitle1" fontWeight={600}>Aktueller Status</Typography>
               <Chip
                 label={FahrzeugStatusLabel[vehicle.status]}
                 color={STATUS_CHIP_COLOR[vehicle.status]}
@@ -171,18 +178,11 @@ const UebersichtTab: React.FC<UebersichtTabProps> = ({ vehicle, onStatusUpdated,
               )}
             </Box>
           </Box>
-          <Button
-            variant="outlined"
-            size="small"
-            onClick={() => {
-              setNewStatus(vehicle.status);
-              setBemerkung(vehicle.status_bemerkung ?? '');
-              setStatusDialogOpen(true);
-            }}
-            sx={{ display: canChangeStatus ? undefined : 'none' }}
-          >
-            Status ändern
-          </Button>
+          {canChangeStatus && (
+            <Button variant="outlined" size="small" onClick={openDialog}>
+              Status ändern
+            </Button>
+          )}
         </Box>
       </Paper>
 
@@ -198,8 +198,6 @@ const UebersichtTab: React.FC<UebersichtTabProps> = ({ vehicle, onStatusUpdated,
           { label: 'Typ (DIN 14502)',  value: vehicle.typ_schluessel },
           { label: 'Besatzung (Soll)', value: vehicle.besatzung_soll },
           { label: 'Standort',         value: vehicle.standort },
-          { label: '§57a fällig am',   value: fmtDate(vehicle.paragraph57a_faellig_am) !== '—' ? fmtDate(vehicle.paragraph57a_faellig_am) : null },
-          { label: 'Nächste Wartung',  value: fmtDate(vehicle.naechste_wartung_am) !== '—' ? fmtDate(vehicle.naechste_wartung_am) : null },
         ].map(({ label, value }) => (
           <Grid item xs={12} sm={6} md={4} key={label}>
             <Typography variant="caption" color="text.secondary" textTransform="uppercase">
@@ -210,48 +208,40 @@ const UebersichtTab: React.FC<UebersichtTabProps> = ({ vehicle, onStatusUpdated,
         ))}
       </Grid>
 
-      {/* Inspection status quick view */}
+      {/* Inspection deadline quick view */}
       <Typography variant="h6" sx={{ mt: 3, mb: 1.5 }}>
-        Prüffristen Übersicht
+        Prüf- und Wartungsfristen
       </Typography>
       <Grid container spacing={1.5}>
-        {Object.entries(vehicle.pruefstatus).map(([key, ps]) => {
-          const art = key.toUpperCase() as PruefungArt;
-          const label = PruefungArtLabel[art] ?? key;
-          const color = inspectionBadgeColor(ps.tage_bis_faelligkeit);
+        {inspItems.map(({ label, faelligAm, tage }) => {
+          const color = inspectionBadgeColor(tage);
           return (
-            <Grid item xs={12} sm={6} md={3} key={key}>
+            <Grid item xs={12} sm={6} key={label}>
               <Paper variant="outlined" sx={{ p: 1.5 }}>
                 <Typography variant="caption" color="text.secondary" textTransform="uppercase">
                   {label}
                 </Typography>
-                {ps.faellig_am ? (
+                {faelligAm ? (
                   <>
                     <Chip
                       size="small"
                       color={color}
                       label={
-                        ps.tage_bis_faelligkeit !== null && ps.tage_bis_faelligkeit < 0
-                          ? `ÜBERFÄLLIG (${fmtDate(ps.faellig_am)})`
-                          : `Fällig: ${fmtDate(ps.faellig_am)}`
-                      }
-                      icon={
-                        ps.tage_bis_faelligkeit !== null && ps.tage_bis_faelligkeit < 0
-                          ? <Warning fontSize="small" />
-                          : undefined
+                        tage !== null && tage < 0
+                          ? `ÜBERFÄLLIG (${fmtDate(faelligAm)})`
+                          : `Fällig: ${fmtDate(faelligAm)}`
                       }
+                      icon={tage !== null && tage < 0 ? <Warning fontSize="small" /> : undefined}
                       sx={{ mt: 0.5 }}
                     />
-                    {ps.tage_bis_faelligkeit !== null && ps.tage_bis_faelligkeit >= 0 && (
+                    {tage !== null && tage >= 0 && (
                       <Typography variant="caption" display="block" color="text.secondary">
-                        in {ps.tage_bis_faelligkeit} Tagen
+                        in {tage} Tagen
                       </Typography>
                     )}
                   </>
                 ) : (
-                  <Typography variant="body2" color="text.disabled">
-                    Keine Daten
-                  </Typography>
+                  <Typography variant="body2" color="text.disabled">Kein Datum erfasst</Typography>
                 )}
               </Paper>
             </Grid>
@@ -260,12 +250,7 @@ const UebersichtTab: React.FC<UebersichtTabProps> = ({ vehicle, onStatusUpdated,
       </Grid>
 
       {/* Status change dialog */}
-      <Dialog
-        open={statusDialogOpen}
-        onClose={() => setStatusDialogOpen(false)}
-        maxWidth="sm"
-        fullWidth
-      >
+      <Dialog open={statusDialogOpen} onClose={closeDialog} maxWidth="sm" fullWidth>
         <DialogTitle>Fahrzeugstatus ändern</DialogTitle>
         <DialogContent>
           {saveError && <Alert severity="error" sx={{ mb: 2 }}>{saveError}</Alert>}
@@ -278,9 +263,7 @@ const UebersichtTab: React.FC<UebersichtTabProps> = ({ vehicle, onStatusUpdated,
               onChange={(e) => setNewStatus(e.target.value as FahrzeugStatus)}
             >
               {Object.values(FahrzeugStatus).map((s) => (
-                <MenuItem key={s} value={s}>
-                  {FahrzeugStatusLabel[s]}
-                </MenuItem>
+                <MenuItem key={s} value={s}>{FahrzeugStatusLabel[s]}</MenuItem>
               ))}
             </Select>
           </FormControl>
@@ -295,7 +278,7 @@ const UebersichtTab: React.FC<UebersichtTabProps> = ({ vehicle, onStatusUpdated,
           />
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => setStatusDialogOpen(false)}>Abbrechen</Button>
+          <Button onClick={closeDialog}>Abbrechen</Button>
           <Button
             variant="contained"
             onClick={handleSaveStatus}
@@ -310,247 +293,6 @@ const UebersichtTab: React.FC<UebersichtTabProps> = ({ vehicle, onStatusUpdated,
   );
 };
 
-// ── Prüfungen Tab ─────────────────────────────────────────────────────────────
-
-interface PruefungenTabProps {
-  fahrzeugId: string;
-  pruefungen: FahrzeugPruefung[];
-  onAdded: () => void;
-  canWrite: boolean;
-}
-
-const ERGEBNIS_LABELS: Record<PruefungErgebnis, string> = {
-  bestanden:              'Bestanden',
-  bestanden_mit_maengeln: 'Bestanden mit Mängeln',
-  nicht_bestanden:        'Nicht bestanden',
-  ausstehend:             'Ausstehend',
-};
-
-const ERGEBNIS_COLORS: Record<PruefungErgebnis, 'success' | 'warning' | 'error' | 'default'> = {
-  bestanden:              'success',
-  bestanden_mit_maengeln: 'warning',
-  nicht_bestanden:        'error',
-  ausstehend:             'default',
-};
-
-const PruefungenTab: React.FC<PruefungenTabProps> = ({ fahrzeugId, pruefungen, onAdded, canWrite }) => {
-  const [dialogOpen, setDialogOpen]   = useState(false);
-  const [saving, setSaving]           = useState(false);
-  const [saveError, setSaveError]     = useState<string | null>(null);
-
-  const emptyForm: CreatePruefungPayload = {
-    pruefung_art:  PruefungArt.HU,
-    faellig_am:    '',
-    durchgefuehrt_am: '',
-    ergebnis:      'ausstehend',
-    pruefende_stelle: '',
-    kosten:        undefined,
-    bemerkung:     '',
-  };
-
-  const [form, setForm] = useState<CreatePruefungPayload>(emptyForm);
-
-  const handleSubmit = async () => {
-    if (!form.faellig_am) {
-      setSaveError('Fälligkeitsdatum ist erforderlich.');
-      return;
-    }
-    try {
-      setSaving(true);
-      setSaveError(null);
-      const payload: CreatePruefungPayload = {
-        ...form,
-        durchgefuehrt_am: form.durchgefuehrt_am || undefined,
-        kosten: form.kosten !== undefined && form.kosten !== null ? Number(form.kosten) : undefined,
-      };
-      await vehiclesApi.addPruefung(fahrzeugId, payload);
-      setDialogOpen(false);
-      setForm(emptyForm);
-      onAdded();
-    } catch {
-      setSaveError('Prüfung konnte nicht gespeichert werden.');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return (
-    <Box>
-      {pruefungen.length === 0 ? (
-        <Typography color="text.secondary">Noch keine Prüfungen erfasst.</Typography>
-      ) : (
-        <Stack divider={<Divider />} spacing={0}>
-          {pruefungen.map((p) => {
-            const ergebnis = (p.ergebnis ?? 'ausstehend') as PruefungErgebnis;
-            const isFaellig = !p.durchgefuehrt_am && new Date(p.faellig_am) < new Date();
-            return (
-              <Box key={p.id} sx={{ py: 2, display: 'flex', gap: 2, alignItems: 'flex-start' }}>
-                <Box sx={{ minWidth: 140 }}>
-                  <Typography variant="caption" color="text.secondary">
-                    {PruefungArtLabel[p.pruefung_art] ?? p.pruefung_art}
-                  </Typography>
-                  <Typography variant="body2" fontWeight={600}>
-                    Fällig: {fmtDate(p.faellig_am)}
-                  </Typography>
-                  {isFaellig && !p.durchgefuehrt_am && (
-                    <Chip label="ÜBERFÄLLIG" color="error" size="small" sx={{ mt: 0.5 }} />
-                  )}
-                </Box>
-                <Box sx={{ flexGrow: 1 }}>
-                  <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mb: 0.5 }}>
-                    <Chip
-                      label={ERGEBNIS_LABELS[ergebnis]}
-                      color={ERGEBNIS_COLORS[ergebnis]}
-                      size="small"
-                    />
-                    {p.durchgefuehrt_am && (
-                      <Chip
-                        label={`Durchgeführt: ${fmtDate(p.durchgefuehrt_am)}`}
-                        variant="outlined"
-                        size="small"
-                      />
-                    )}
-                    {p.naechste_faelligkeit && (
-                      <Chip
-                        label={`Nächste: ${fmtDate(p.naechste_faelligkeit)}`}
-                        variant="outlined"
-                        size="small"
-                      />
-                    )}
-                  </Box>
-                  {p.pruefende_stelle && (
-                    <Typography variant="body2" color="text.secondary">
-                      {p.pruefende_stelle}
-                      {p.kosten != null && ` · ${p.kosten.toFixed(2)} €`}
-                    </Typography>
-                  )}
-                  {p.bemerkung && (
-                    <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
-                      {p.bemerkung}
-                    </Typography>
-                  )}
-                </Box>
-              </Box>
-            );
-          })}
-        </Stack>
-      )}
-
-      {/* FAB */}
-      {canWrite && (
-        <Fab
-          color="primary"
-          size="small"
-          aria-label="Prüfung hinzufügen"
-          sx={{ position: 'fixed', bottom: 32, right: 32 }}
-          onClick={() => { setForm(emptyForm); setDialogOpen(true); }}
-        >
-          <Add />
-        </Fab>
-      )}
-
-      {/* Add inspection dialog */}
-      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
-        <DialogTitle>Prüfung erfassen</DialogTitle>
-        <DialogContent>
-          {saveError && <Alert severity="error" sx={{ mb: 2 }}>{saveError}</Alert>}
-
-          <Grid container spacing={2} sx={{ mt: 0.5 }}>
-            <Grid item xs={12} sm={6}>
-              <FormControl fullWidth>
-                <InputLabel>Prüfungsart</InputLabel>
-                <Select
-                  label="Prüfungsart"
-                  value={form.pruefung_art}
-                  onChange={(e) => setForm((f) => ({ ...f, pruefung_art: e.target.value as PruefungArt }))}
-                >
-                  {Object.values(PruefungArt).map((art) => (
-                    <MenuItem key={art} value={art}>{PruefungArtLabel[art]}</MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <FormControl fullWidth>
-                <InputLabel>Ergebnis</InputLabel>
-                <Select
-                  label="Ergebnis"
-                  value={form.ergebnis ?? 'ausstehend'}
-                  onChange={(e) => setForm((f) => ({ ...f, ergebnis: e.target.value as PruefungErgebnis }))}
-                >
-                  {(Object.keys(ERGEBNIS_LABELS) as PruefungErgebnis[]).map((e) => (
-                    <MenuItem key={e} value={e}>{ERGEBNIS_LABELS[e]}</MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                label="Fällig am *"
-                type="date"
-                fullWidth
-                value={form.faellig_am}
-                onChange={(e) => setForm((f) => ({ ...f, faellig_am: e.target.value }))}
-                InputLabelProps={{ shrink: true }}
-              />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                label="Durchgeführt am"
-                type="date"
-                fullWidth
-                value={form.durchgefuehrt_am ?? ''}
-                onChange={(e) => setForm((f) => ({ ...f, durchgefuehrt_am: e.target.value }))}
-                InputLabelProps={{ shrink: true }}
-              />
-            </Grid>
-            <Grid item xs={12} sm={8}>
-              <TextField
-                label="Prüfende Stelle"
-                fullWidth
-                value={form.pruefende_stelle ?? ''}
-                onChange={(e) => setForm((f) => ({ ...f, pruefende_stelle: e.target.value }))}
-                placeholder="z.B. TÜV Süd Stuttgart"
-              />
-            </Grid>
-            <Grid item xs={12} sm={4}>
-              <TextField
-                label="Kosten (€)"
-                type="number"
-                fullWidth
-                value={form.kosten ?? ''}
-                onChange={(e) => setForm((f) => ({ ...f, kosten: e.target.value ? Number(e.target.value) : undefined }))}
-                inputProps={{ min: 0, step: 0.01 }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                label="Bemerkung"
-                fullWidth
-                multiline
-                rows={2}
-                value={form.bemerkung ?? ''}
-                onChange={(e) => setForm((f) => ({ ...f, bemerkung: e.target.value }))}
-              />
-            </Grid>
-          </Grid>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setDialogOpen(false)}>Abbrechen</Button>
-          <Button
-            variant="contained"
-            onClick={handleSubmit}
-            disabled={saving}
-            startIcon={saving ? <CircularProgress size={16} /> : undefined}
-          >
-            Speichern
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </Box>
-  );
-};
-
 // ── Wartung Tab ───────────────────────────────────────────────────────────────
 
 interface WartungTabProps {
@@ -561,11 +303,11 @@ interface WartungTabProps {
 }
 
 const WARTUNG_ART_ICONS: Record<string, React.ReactElement> = {
-  Kraftstoff:       <LocalFireDepartment color="action" />,
-  Reparatur:        <Build color="warning" />,
-  Inspektion:       <Assignment color="primary" />,
-  Hauptuntersuchung:<CheckCircle color="success" />,
-  default:          <Build color="action" />,
+  Kraftstoff:        <LocalFireDepartment color="action" />,
+  Reparatur:         <Build color="warning" />,
+  Inspektion:        <Assignment color="primary" />,
+  Hauptuntersuchung: <CheckCircle color="success" />,
+  default:           <Build color="action" />,
 };
 
 const WartungTab: React.FC<WartungTabProps> = ({ fahrzeugId, wartungslog, onAdded, canWrite }) => {
@@ -612,8 +354,6 @@ const WartungTab: React.FC<WartungTabProps> = ({ fahrzeugId, wartungslog, onAdde
       {wartungslog.length === 0 ? (
         <Typography color="text.secondary">Noch keine Wartungseinträge erfasst.</Typography>
       ) : (
-        // MUI Timeline is available via @mui/lab — using Paper list as fallback
-        // since @mui/lab is not in current package.json
         <Stack divider={<Divider />} spacing={0}>
           {wartungslog.map((entry) => {
             const artIcon = WARTUNG_ART_ICONS[entry.art ?? ''] ?? WARTUNG_ART_ICONS.default;
@@ -623,9 +363,7 @@ const WartungTab: React.FC<WartungTabProps> = ({ fahrzeugId, wartungslog, onAdde
                 <Box sx={{ flexGrow: 1 }}>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25 }}>
                     <Typography variant="subtitle2">{fmtDate(entry.datum)}</Typography>
-                    {entry.art && (
-                      <Chip label={entry.art} size="small" variant="outlined" />
-                    )}
+                    {entry.art && <Chip label={entry.art} size="small" variant="outlined" />}
                   </Box>
                   <Typography variant="body2">{entry.beschreibung}</Typography>
                   <Typography variant="body2" color="text.secondary" sx={{ mt: 0.25 }}>
@@ -795,11 +533,7 @@ function FahrzeugDetail() {
       <DashboardLayout>
         <Container maxWidth="lg">
           <Alert severity="error">{error ?? 'Fahrzeug nicht gefunden.'}</Alert>
-          <Button
-            startIcon={<ArrowBack />}
-            onClick={() => navigate('/fahrzeuge')}
-            sx={{ mt: 2 }}
-          >
+          <Button startIcon={<ArrowBack />} onClick={() => navigate('/fahrzeuge')} sx={{ mt: 2 }}>
             Zurück zur Übersicht
           </Button>
         </Container>
@@ -807,10 +541,13 @@ function FahrzeugDetail() {
     );
   }
 
+  const hasOverdue =
+    (vehicle.paragraph57a_tage_bis_faelligkeit !== null && vehicle.paragraph57a_tage_bis_faelligkeit < 0) ||
+    (vehicle.wartung_tage_bis_faelligkeit !== null && vehicle.wartung_tage_bis_faelligkeit < 0);
+
   return (
     <DashboardLayout>
       <Container maxWidth="lg">
-        {/* Breadcrumb / back */}
         <Button
           startIcon={<ArrowBack />}
           onClick={() => navigate('/fahrzeuge')}
@@ -820,7 +557,6 @@ function FahrzeugDetail() {
           Fahrzeugübersicht
         </Button>
 
-        {/* Page title */}
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
           <DirectionsCar sx={{ fontSize: 36, color: 'text.secondary' }} />
           <Box>
@@ -839,16 +575,26 @@ function FahrzeugDetail() {
               </Typography>
             )}
           </Box>
-          <Box sx={{ ml: 'auto' }}>
+          <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 1 }}>
             <Chip
               icon={STATUS_ICONS[vehicle.status]}
               label={FahrzeugStatusLabel[vehicle.status]}
               color={STATUS_CHIP_COLOR[vehicle.status]}
             />
+            {isAdmin && (
+              <Tooltip title="Fahrzeug bearbeiten">
+                <IconButton
+                  size="small"
+                  onClick={() => navigate(`/fahrzeuge/${vehicle.id}/bearbeiten`)}
+                  aria-label="Fahrzeug bearbeiten"
+                >
+                  <Edit />
+                </IconButton>
+              </Tooltip>
+            )}
           </Box>
         </Box>
 
-        {/* Tabs */}
         <Box sx={{ borderBottom: 1, borderColor: 'divider', mt: 2 }}>
           <Tabs
             value={activeTab}
@@ -858,42 +604,35 @@ function FahrzeugDetail() {
             <Tab label="Übersicht" />
             <Tab
               label={
-                vehicle.naechste_pruefung_tage !== null && vehicle.naechste_pruefung_tage < 0
+                hasOverdue
                   ? <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                      Prüfungen <Warning color="error" fontSize="small" />
+                      Wartung <Warning color="error" fontSize="small" />
                     </Box>
-                  : 'Prüfungen'
+                  : 'Wartung'
               }
             />
-            <Tab label="Wartung" />
             <Tab label="Einsätze" />
           </Tabs>
         </Box>
 
-        {/* Tab content */}
         <TabPanel value={activeTab} index={0}>
-          <UebersichtTab vehicle={vehicle} onStatusUpdated={fetchVehicle} canChangeStatus={canChangeStatus} />
-        </TabPanel>
-
-        <TabPanel value={activeTab} index={1}>
-          <PruefungenTab
-            fahrzeugId={vehicle.id}
-            pruefungen={vehicle.pruefungen}
-            onAdded={fetchVehicle}
-            canWrite={isAdmin}
+          <UebersichtTab
+            vehicle={vehicle}
+            onStatusUpdated={fetchVehicle}
+            canChangeStatus={canChangeStatus}
           />
         </TabPanel>
 
-        <TabPanel value={activeTab} index={2}>
+        <TabPanel value={activeTab} index={1}>
           <WartungTab
             fahrzeugId={vehicle.id}
             wartungslog={vehicle.wartungslog}
             onAdded={fetchVehicle}
-            canWrite={isAdmin}
+            canWrite={canChangeStatus}
           />
         </TabPanel>
 
-        <TabPanel value={activeTab} index={3}>
+        <TabPanel value={activeTab} index={2}>
           <Box sx={{ textAlign: 'center', py: 8 }}>
             <LocalFireDepartment sx={{ fontSize: 64, color: 'text.disabled', mb: 2 }} />
             <Typography variant="h6" color="text.secondary">