feat: widget icons, dark theme tables, breadcrumb removal, bookkeeping rework, personal equipment pages, PDF/order improvements

2026-04-14 10:35:40 +02:00
parent 4c4fb01e68
commit 4fbea8af81
41 changed files with 679 additions and 659 deletions
--- a/frontend/src/pages/PersoenlicheAusruestungNeu.tsx
+++ b/frontend/src/pages/PersoenlicheAusruestungNeu.tsx
@@ -0,0 +1,200 @@
+import { useState, useMemo } from 'react';
+import {
+  Autocomplete,
+  Box,
+  Container,
+  MenuItem,
+  Stack,
+  TextField,
+  Button,
+} from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import DashboardLayout from '../components/dashboard/DashboardLayout';
+import { personalEquipmentApi } from '../services/personalEquipment';
+import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
+import { membersService } from '../services/members';
+import { usePermissionContext } from '../contexts/PermissionContext';
+import { useNotification } from '../contexts/NotificationContext';
+import { PageHeader } from '../components/templates';
+import { ZUSTAND_LABELS } from '../types/personalEquipment.types';
+import type {
+  PersoenlicheAusruestungZustand,
+  CreatePersoenlicheAusruestungPayload,
+} from '../types/personalEquipment.types';
+import type { AusruestungArtikel } from '../types/ausruestungsanfrage.types';
+
+const ZUSTAND_OPTIONS = Object.entries(ZUSTAND_LABELS) as [PersoenlicheAusruestungZustand, string][];
+
+export default function PersoenlicheAusruestungNeu() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { hasPermission } = usePermissionContext();
+  const { showSuccess, showError } = useNotification();
+
+  const canViewAll = hasPermission('persoenliche_ausruestung:view_all');
+
+  const [formBezeichnung, setFormBezeichnung] = useState<string | AusruestungArtikel | null>(null);
+  const [formKategorie, setFormKategorie] = useState('');
+  const [formUserId, setFormUserId] = useState<{ id: string; name: string } | null>(null);
+  const [formBenutzerName, setFormBenutzerName] = useState('');
+  const [formGroesse, setFormGroesse] = useState('');
+  const [formZustand, setFormZustand] = useState<PersoenlicheAusruestungZustand>('gut');
+  const [formNotizen, setFormNotizen] = useState('');
+
+  const { data: catalogItems } = useQuery({
+    queryKey: ['ausruestungsanfrage-items-catalog'],
+    queryFn: () => ausruestungsanfrageApi.getItems(),
+    staleTime: 10 * 60 * 1000,
+  });
+
+  const { data: membersList } = useQuery({
+    queryKey: ['members-list-compact'],
+    queryFn: () => membersService.getMembers({ pageSize: 500 }),
+    staleTime: 5 * 60 * 1000,
+    enabled: canViewAll,
+  });
+
+  const memberOptions = useMemo(() => {
+    return (membersList?.items ?? []).map((m) => ({
+      id: m.id,
+      name: [m.given_name, m.family_name].filter(Boolean).join(' ') || m.email,
+    }));
+  }, [membersList]);
+
+  const createMutation = useMutation({
+    mutationFn: (data: CreatePersoenlicheAusruestungPayload) => personalEquipmentApi.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['persoenliche-ausruestung'] });
+      showSuccess('Persönliche Ausrüstung erstellt');
+      navigate('/persoenliche-ausruestung');
+    },
+    onError: () => {
+      showError('Fehler beim Erstellen');
+    },
+  });
+
+  const handleCreate = () => {
+    const bezeichnung = typeof formBezeichnung === 'string'
+      ? formBezeichnung
+      : formBezeichnung?.bezeichnung ?? '';
+    if (!bezeichnung.trim()) return;
+
+    const payload: CreatePersoenlicheAusruestungPayload = {
+      bezeichnung: bezeichnung.trim(),
+      kategorie: formKategorie || undefined,
+      artikel_id: typeof formBezeichnung === 'object' && formBezeichnung ? formBezeichnung.id : undefined,
+      user_id: formUserId?.id || undefined,
+      benutzer_name: formBenutzerName || undefined,
+      groesse: formGroesse || undefined,
+      zustand: formZustand,
+      notizen: formNotizen || undefined,
+    };
+    createMutation.mutate(payload);
+  };
+
+  return (
+    <DashboardLayout>
+      <Container maxWidth="sm">
+        <PageHeader
+          title="Neue Ausrüstung zuweisen"
+          backTo="/persoenliche-ausruestung"
+        />
+
+        <Stack spacing={2}>
+          <Autocomplete
+            freeSolo
+            options={catalogItems ?? []}
+            getOptionLabel={(o) => typeof o === 'string' ? o : o.bezeichnung}
+            value={formBezeichnung}
+            onChange={(_e, v) => {
+              setFormBezeichnung(v);
+              if (v && typeof v !== 'string' && v.kategorie) {
+                setFormKategorie(v.kategorie);
+              }
+            }}
+            onInputChange={(_e, v) => {
+              if (typeof formBezeichnung === 'string' || formBezeichnung === null) {
+                setFormBezeichnung(v);
+              }
+            }}
+            renderInput={(params) => (
+              <TextField {...params} label="Bezeichnung" required size="small" />
+            )}
+            size="small"
+          />
+
+          {canViewAll && (
+            <Autocomplete
+              options={memberOptions}
+              getOptionLabel={(o) => o.name}
+              value={formUserId}
+              onChange={(_e, v) => setFormUserId(v)}
+              renderInput={(params) => (
+                <TextField {...params} label="Benutzer" size="small" />
+              )}
+              size="small"
+            />
+          )}
+
+          {!canViewAll && (
+            <TextField
+              label="Benutzer (Name)"
+              size="small"
+              value={formBenutzerName}
+              onChange={(e) => setFormBenutzerName(e.target.value)}
+            />
+          )}
+
+          <TextField
+            label="Kategorie"
+            size="small"
+            value={formKategorie}
+            onChange={(e) => setFormKategorie(e.target.value)}
+          />
+
+          <TextField
+            label="Größe"
+            size="small"
+            value={formGroesse}
+            onChange={(e) => setFormGroesse(e.target.value)}
+          />
+
+          <TextField
+            label="Zustand"
+            select
+            size="small"
+            value={formZustand}
+            onChange={(e) => setFormZustand(e.target.value as PersoenlicheAusruestungZustand)}
+          >
+            {ZUSTAND_OPTIONS.map(([key, label]) => (
+              <MenuItem key={key} value={key}>{label}</MenuItem>
+            ))}
+          </TextField>
+
+          <TextField
+            label="Notizen"
+            size="small"
+            multiline
+            rows={2}
+            value={formNotizen}
+            onChange={(e) => setFormNotizen(e.target.value)}
+          />
+
+          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', mt: 1 }}>
+            <Button onClick={() => navigate('/persoenliche-ausruestung')}>
+              Abbrechen
+            </Button>
+            <Button
+              variant="contained"
+              onClick={handleCreate}
+              disabled={createMutation.isPending || !(typeof formBezeichnung === 'string' ? formBezeichnung.trim() : formBezeichnung?.bezeichnung?.trim())}
+            >
+              Erstellen
+            </Button>
+          </Box>
+        </Stack>
+      </Container>
+    </DashboardLayout>
+  );
+}