feat(admin): centralize tool & module settings in Werkzeuge tab with per-tool permissions, DB-backed config, connection tests, and cog-button navigation

frontend/src/pages/Ausruestung.tsx

@@ -16,41 +16,30 @@ import {
   InputAdornment,
   InputLabel,
   MenuItem,
-  Paper,
   Select,
   Switch,
-  Tab,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Tabs,
   TextField,
   Tooltip,
   Typography,
 } from '@mui/material';
 import {
   Add,
-  Add as AddIcon,
   Build,
   CheckCircle,
-  Delete,
-  Edit,
   Error as ErrorIcon,
   LinkRounded,
   PauseCircle,
   RemoveCircle,
   Search,
+  Settings as SettingsIcon,
   Star,
   Warning,
 } from '@mui/icons-material';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import { equipmentApi } from '../services/equipment';
-import { ausruestungTypenApi, AusruestungTyp } from '../services/ausruestungTypen';
+import { ausruestungTypenApi } from '../services/ausruestungTypen';
 import {
   AusruestungListItem,
   AusruestungKategorie,
@@ -59,9 +48,7 @@ import {
   EquipmentStats,
 } from '../types/equipment.types';
 import { usePermissions } from '../hooks/usePermissions';
-import { useNotification } from '../contexts/NotificationContext';
 import ChatAwareFab from '../components/shared/ChatAwareFab';
-import { ConfirmDialog, FormDialog } from '../components/templates';
 
 // ── Status chip config ────────────────────────────────────────────────────────
 
@@ -246,222 +233,11 @@ const EquipmentCard: React.FC<EquipmentCardProps> = ({ item, onClick }) => {
   );
 };
 
-// ── Ausrüstungstypen-Verwaltung (Einstellungen Tab) ──────────────────────────
-
-function AusruestungTypenSettings() {
-  const { showSuccess, showError } = useNotification();
-  const queryClient = useQueryClient();
-
-  const { data: typen = [], isLoading, isError } = useQuery({
-    queryKey: ['ausruestungTypen'],
-    queryFn: ausruestungTypenApi.getAll,
-  });
-
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [editingTyp, setEditingTyp] = useState<AusruestungTyp | null>(null);
-  const [formName, setFormName] = useState('');
-  const [formBeschreibung, setFormBeschreibung] = useState('');
-  const [formIcon, setFormIcon] = useState('');
-
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [deletingTyp, setDeletingTyp] = useState<AusruestungTyp | null>(null);
-
-  const createMutation = useMutation({
-    mutationFn: (data: { name: string; beschreibung?: string; icon?: string }) =>
-      ausruestungTypenApi.create(data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['ausruestungTypen'] });
-      showSuccess('Typ erstellt');
-      closeDialog();
-    },
-    onError: () => showError('Typ konnte nicht erstellt werden'),
-  });
-
-  const updateMutation = useMutation({
-    mutationFn: ({ id, data }: { id: number; data: Partial<{ name: string; beschreibung: string; icon: string }> }) =>
-      ausruestungTypenApi.update(id, data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['ausruestungTypen'] });
-      showSuccess('Typ aktualisiert');
-      closeDialog();
-    },
-    onError: () => showError('Typ konnte nicht aktualisiert werden'),
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: (id: number) => ausruestungTypenApi.delete(id),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['ausruestungTypen'] });
-      showSuccess('Typ gelöscht');
-      setDeleteDialogOpen(false);
-      setDeletingTyp(null);
-    },
-    onError: () => showError('Typ konnte nicht gelöscht werden. Möglicherweise ist er noch Geräten zugeordnet.'),
-  });
-
-  const openAddDialog = () => {
-    setEditingTyp(null);
-    setFormName('');
-    setFormBeschreibung('');
-    setFormIcon('');
-    setDialogOpen(true);
-  };
-
-  const openEditDialog = (typ: AusruestungTyp) => {
-    setEditingTyp(typ);
-    setFormName(typ.name);
-    setFormBeschreibung(typ.beschreibung ?? '');
-    setFormIcon(typ.icon ?? '');
-    setDialogOpen(true);
-  };
-
-  const closeDialog = () => {
-    setDialogOpen(false);
-    setEditingTyp(null);
-  };
-
-  const handleSave = () => {
-    if (!formName.trim()) return;
-    const data = {
-      name: formName.trim(),
-      beschreibung: formBeschreibung.trim() || undefined,
-      icon: formIcon.trim() || undefined,
-    };
-    if (editingTyp) {
-      updateMutation.mutate({ id: editingTyp.id, data });
-    } else {
-      createMutation.mutate(data);
-    }
-  };
-
-  const openDeleteDialog = (typ: AusruestungTyp) => {
-    setDeletingTyp(typ);
-    setDeleteDialogOpen(true);
-  };
-
-  const isSaving = createMutation.isPending || updateMutation.isPending;
-
-  return (
-    <Box>
-      <Typography variant="h6" gutterBottom>Ausrüstungstypen</Typography>
-
-      {isLoading && (
-        <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
-          <CircularProgress />
-        </Box>
-      )}
-
-      {isError && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          Typen konnten nicht geladen werden.
-        </Alert>
-      )}
-
-      {!isLoading && !isError && (
-        <Paper variant="outlined">
-          <TableContainer>
-            <Table size="small">
-              <TableHead>
-                <TableRow>
-                  <TableCell>Name</TableCell>
-                  <TableCell>Beschreibung</TableCell>
-                  <TableCell>Icon</TableCell>
-                  <TableCell align="right">Aktionen</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {typen.length === 0 && (
-                  <TableRow>
-                    <TableCell colSpan={4} align="center">
-                      <Typography variant="body2" color="text.secondary" sx={{ py: 2 }}>
-                        Noch keine Typen vorhanden.
-                      </Typography>
-                    </TableCell>
-                  </TableRow>
-                )}
-                {typen.map((typ) => (
-                  <TableRow key={typ.id}>
-                    <TableCell>{typ.name}</TableCell>
-                    <TableCell>{typ.beschreibung || '---'}</TableCell>
-                    <TableCell>{typ.icon || '---'}</TableCell>
-                    <TableCell align="right">
-                      <Tooltip title="Bearbeiten">
-                        <IconButton size="small" onClick={() => openEditDialog(typ)}>
-                          <Edit fontSize="small" />
-                        </IconButton>
-                      </Tooltip>
-                      <Tooltip title="Löschen">
-                        <IconButton size="small" color="error" onClick={() => openDeleteDialog(typ)}>
-                          <Delete fontSize="small" />
-                        </IconButton>
-                      </Tooltip>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-          <Box sx={{ p: 1.5, display: 'flex', justifyContent: 'flex-end' }}>
-            <Button variant="contained" size="small" startIcon={<AddIcon />} onClick={openAddDialog}>
-              Neuer Typ
-            </Button>
-          </Box>
-        </Paper>
-      )}
-
-      {/* Add/Edit dialog */}
-      <FormDialog
-        open={dialogOpen}
-        onClose={closeDialog}
-        onSubmit={handleSave}
-        title={editingTyp ? 'Typ bearbeiten' : 'Neuen Typ erstellen'}
-        isSubmitting={isSaving}
-      >
-          <TextField
-            label="Name *"
-            fullWidth
-            value={formName}
-            onChange={(e) => setFormName(e.target.value)}
-            inputProps={{ maxLength: 100 }}
-          />
-          <TextField
-            label="Beschreibung"
-            fullWidth
-            multiline
-            rows={2}
-            value={formBeschreibung}
-            onChange={(e) => setFormBeschreibung(e.target.value)}
-          />
-          <TextField
-            label="Icon (MUI Icon-Name)"
-            fullWidth
-            value={formIcon}
-            onChange={(e) => setFormIcon(e.target.value)}
-            placeholder="z.B. Build, LocalFireDepartment"
-          />
-      </FormDialog>
-
-      {/* Delete confirmation dialog */}
-      <ConfirmDialog
-        open={deleteDialogOpen}
-        onClose={() => setDeleteDialogOpen(false)}
-        onConfirm={() => deletingTyp && deleteMutation.mutate(deletingTyp.id)}
-        title="Typ löschen"
-        message={<>Möchten Sie den Typ &quot;{deletingTyp?.name}&quot; wirklich löschen? Geräte, denen dieser Typ zugeordnet ist, verlieren die Zuordnung.</>}
-        confirmLabel="Löschen"
-        confirmColor="error"
-        isLoading={deleteMutation.isPending}
-      />
-    </Box>
-  );
-}
 
 // ── Main Page ─────────────────────────────────────────────────────────────────
 
 function Ausruestung() {
   const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const tab = parseInt(searchParams.get('tab') ?? '0', 10);
   const { canManageEquipment, hasPermission } = usePermissions();
   const canManageTypes = hasPermission('ausruestung:manage_types');
 
@@ -568,18 +344,15 @@ function Ausruestung() {
               </Box>
             )}
           </Box>
+          {canManageTypes && (
+            <Tooltip title="Einstellungen">
+              <IconButton onClick={() => navigate('/admin/settings?tab=1&subtab=ausruestung-typen')}>
+                <SettingsIcon />
+              </IconButton>
+            </Tooltip>
+          )}
         </Box>
 
-        <Tabs
-          value={tab}
-          onChange={(_e, v) => setSearchParams({ tab: String(v) })}
-          sx={{ mb: 3, borderBottom: 1, borderColor: 'divider' }}
-        >
-          <Tab label="Übersicht" />
-          {canManageTypes && <Tab label="Einstellungen" />}
-        </Tabs>
-
-        {tab === 0 && (
           <>
             {/* Overdue alert */}
             {hasOverdue && (
@@ -735,11 +508,7 @@ function Ausruestung() {
               </ChatAwareFab>
             )}
           </>
-        )}
 
-        {tab === 1 && canManageTypes && (
-          <AusruestungTypenSettings />
-        )}
       </Container>
     </DashboardLayout>
   );