new features, bookstack

frontend/src/pages/FahrzeugBuchungen.tsx

@@ -692,18 +692,33 @@ function FahrzeugBuchungen() {
                 InputLabelProps={{ shrink: true }}
               />
 
-              {availability !== null && (
-                <Chip
-                  icon={availability ? <CheckCircle /> : <Warning />}
-                  label={
-                    availability
-                      ? 'Fahrzeug verfügbar'
-                      : 'Konflikt: bereits gebucht'
-                  }
-                  color={availability ? 'success' : 'error'}
-                  size="small"
-                  sx={{ alignSelf: 'flex-start' }}
-                />
+              {/* Availability indicator */}
+              {form.fahrzeugId && form.beginn && form.ende ? (
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  {availability === null ? (
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <CircularProgress size={16} />
+                      <Typography variant="body2" color="text.secondary">
+                        Verfügbarkeit wird geprüft...
+                      </Typography>
+                    </Box>
+                  ) : (
+                    <Chip
+                      icon={availability ? <CheckCircle /> : <Warning />}
+                      label={
+                        availability
+                          ? 'Fahrzeug verfügbar'
+                          : 'Konflikt: bereits gebucht'
+                      }
+                      color={availability ? 'success' : 'error'}
+                      size="small"
+                    />
+                  )}
+                </Box>
+              ) : (
+                <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.75rem' }}>
+                  Wähle Fahrzeug und Zeitraum für Verfügbarkeitsprüfung
+                </Typography>
               )}
 
               <FormControl fullWidth size="small">
@@ -758,25 +773,43 @@ function FahrzeugBuchungen() {
           </DialogContent>
           <DialogActions>
             <Button onClick={() => setDialogOpen(false)}>Abbrechen</Button>
-            <Button
-              variant="contained"
-              onClick={handleSave}
-              disabled={
-                dialogLoading ||
-                !form.titel ||
-                !form.fahrzeugId ||
-                !form.beginn ||
-                !form.ende
+            <Tooltip
+              title={
+                dialogLoading || (form.titel && form.fahrzeugId && form.beginn && form.ende)
+                  ? ''
+                  : `Bitte fülle alle Pflichtfelder aus: ${[
+                      !form.titel && 'Titel',
+                      !form.fahrzeugId && 'Fahrzeug',
+                      !form.beginn && 'Beginn',
+                      !form.ende && 'Ende',
+                    ]
+                      .filter(Boolean)
+                      .join(', ')}`
               }
+              disableHoverListener={!!(form.titel && form.fahrzeugId && form.beginn && form.ende)}
             >
-              {dialogLoading ? (
-                <CircularProgress size={20} />
-              ) : editingBooking ? (
-                'Speichern'
-              ) : (
-                'Buchen'
-              )}
-            </Button>
+              <span>
+                <Button
+                  variant="contained"
+                  onClick={handleSave}
+                  disabled={
+                    dialogLoading ||
+                    !form.titel ||
+                    !form.fahrzeugId ||
+                    !form.beginn ||
+                    !form.ende
+                  }
+                >
+                  {dialogLoading ? (
+                    <CircularProgress size={20} />
+                  ) : editingBooking ? (
+                    'Speichern'
+                  ) : (
+                    'Buchen'
+                  )}
+                </Button>
+              </span>
+            </Tooltip>
           </DialogActions>
         </Dialog>