feat(ausruestungsanfrage): add personal item tracking, catalog enforcement, and detail pages

frontend/src/pages/AusruestungsanfrageZuweisung.tsx

@@ -5,11 +5,12 @@ import {
   Stack, Divider, LinearProgress,
 } from '@mui/material';
 import { Assignment as AssignmentIcon } from '@mui/icons-material';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useParams, useNavigate } from 'react-router-dom';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import { PageHeader } from '../components/templates';
 import { useNotification } from '../contexts/NotificationContext';
+import { usePermissionContext } from '../contexts/PermissionContext';
 import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
 import { vehiclesApi } from '../services/vehicles';
 import { membersService } from '../services/members';
@@ -36,6 +37,13 @@ export default function AusruestungsanfrageZuweisung() {
   const navigate = useNavigate();
   const { showSuccess, showError } = useNotification();
   const anfrageId = Number(id);
+  const queryClient = useQueryClient();
+  const { hasPermission } = usePermissionContext();
+  const canManageCatalog = hasPermission('ausruestungsanfrage:manage_catalog');
+
+  const [createArtikelFor, setCreateArtikelFor] = useState<number | null>(null);
+  const [newArtikelBezeichnung, setNewArtikelBezeichnung] = useState('');
+  const [newArtikelSubmitting, setNewArtikelSubmitting] = useState(false);
 
   const { data: detail, isLoading, isError } = useQuery({
     queryKey: ['ausruestungsanfrage', 'request', anfrageId],
@@ -101,6 +109,22 @@ export default function AusruestungsanfrageZuweisung() {
     setAssignments(updated);
   };
 
+  const handleCreateArtikel = async (posId: number) => {
+    if (!newArtikelBezeichnung.trim()) return;
+    setNewArtikelSubmitting(true);
+    try {
+      const newArtikel = await ausruestungsanfrageApi.createItem({ bezeichnung: newArtikelBezeichnung.trim(), aktiv: true });
+      await ausruestungsanfrageApi.linkPositionToArtikel(posId, newArtikel.id);
+      queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage', 'request', anfrageId] });
+      setCreateArtikelFor(null);
+      showSuccess('Katalogartikel erstellt und Position verknüpft');
+    } catch {
+      showError('Fehler beim Erstellen des Katalogartikels');
+    } finally {
+      setNewArtikelSubmitting(false);
+    }
+  };
+
   const handleSubmit = async () => {
     if (!detail) return;
     setSubmitting(true);
@@ -161,12 +185,55 @@ export default function AusruestungsanfrageZuweisung() {
                       <Chip label={`${pos.menge}x`} size="small" variant="outlined" />
                     </Box>
 
+                    {!pos.artikel_id && (
+                      <Box sx={{ mb: 1 }}>
+                        <Chip label="Nicht im Katalog" color="warning" size="small" sx={{ mb: 1 }} />
+                        {canManageCatalog && createArtikelFor !== pos.id && (
+                          <Button
+                            size="small"
+                            variant="outlined"
+                            color="warning"
+                            sx={{ ml: 1 }}
+                            onClick={() => { setCreateArtikelFor(pos.id); setNewArtikelBezeichnung(pos.bezeichnung); }}
+                          >
+                            Als Katalogartikel anlegen
+                          </Button>
+                        )}
+                        {createArtikelFor === pos.id && (
+                          <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', mt: 1 }}>
+                            <TextField
+                              size="small"
+                              label="Bezeichnung"
+                              value={newArtikelBezeichnung}
+                              onChange={(e) => setNewArtikelBezeichnung(e.target.value)}
+                              sx={{ flex: 1 }}
+                            />
+                            <Button
+                              size="small"
+                              variant="contained"
+                              disabled={newArtikelSubmitting || !newArtikelBezeichnung.trim()}
+                              onClick={() => handleCreateArtikel(pos.id)}
+                            >
+                              Erstellen
+                            </Button>
+                            <Button
+                              size="small"
+                              onClick={() => setCreateArtikelFor(null)}
+                            >
+                              Abbrechen
+                            </Button>
+                          </Box>
+                        )}
+                      </Box>
+                    )}
+
                     <ToggleButtonGroup
                       value={a.typ}
                       exclusive
                       size="small"
                       onChange={(_e, val) => val && updateAssignment(pos.id, { typ: val })}
                       sx={{ mb: 1.5 }}
+                      disabled={!pos.artikel_id}
                     >
                       <ToggleButton value="ausruestung">Ausrüstung</ToggleButton>
                       <ToggleButton value="persoenlich">Persönlich</ToggleButton>