matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-04-14 10:35:40 +02:00
parent 4c4fb01e68
commit 4fbea8af81
41 changed files with 679 additions and 659 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/App.tsx
View File

@@ -21,6 +21,7 @@ import AusruestungForm from './pages/AusruestungForm';
import AusruestungDetail from './pages/AusruestungDetail';
import AusruestungEinstellungen from './pages/AusruestungEinstellungen';
import PersoenlicheAusruestung from './pages/PersoenlicheAusruestung';
import PersoenlicheAusruestungNeu from './pages/PersoenlicheAusruestungNeu';
import Atemschutz from './pages/Atemschutz';
import Mitglieder from './pages/Mitglieder';
import MitgliedDetail from './pages/MitgliedDetail';
@@ -38,6 +39,7 @@ import AusruestungsanfrageDetail from './pages/AusruestungsanfrageDetail';
import AusruestungsanfrageZuBestellung from './pages/AusruestungsanfrageZuBestellung';
import AusruestungsanfrageArtikelDetail from './pages/AusruestungsanfrageArtikelDetail';
import AusruestungsanfrageNeu from './pages/AusruestungsanfrageNeu';
import AusruestungsanfrageZuweisung from './pages/AusruestungsanfrageZuweisung';
import Checklisten from './pages/Checklisten';
import Buchhaltung from './pages/Buchhaltung';
import BuchhaltungKontoDetail from './pages/BuchhaltungKontoDetail';
@@ -193,6 +195,14 @@ function App() {
</ProtectedRoute>
}
/>
<Route
path="/persoenliche-ausruestung/neu"
element={
<ProtectedRoute>
<PersoenlicheAusruestungNeu />
</ProtectedRoute>
}
/>
<Route
path="/persoenliche-ausruestung"
element={
@@ -353,6 +363,14 @@ function App() {
</ProtectedRoute>
}
/>
<Route
path="/ausruestungsanfrage/:id/zuweisung"
element={
<ProtectedRoute>
<AusruestungsanfrageZuweisung />
</ProtectedRoute>
}
/>
<Route
path="/ausruestungsanfrage/:id"
element={

3
frontend/src/components/common/index.ts
View File

@@ -1,2 +1 @@
export { PageBreadcrumbs } from './PageBreadcrumbs';
export type { BreadcrumbItem } from './PageBreadcrumbs';

1
frontend/src/components/dashboard/index.ts
View File

@@ -25,4 +25,3 @@ export { default as IssueOverviewWidget } from './IssueOverviewWidget';
export { default as ChecklistWidget } from './ChecklistWidget';
export { default as SortableWidget } from './SortableWidget';
export { default as BuchhaltungWidget } from './BuchhaltungWidget';
export { default as PersoenlicheAusruestungWidget } from './PersoenlicheAusruestungWidget';

5
frontend/src/components/templates/DetailLayout.tsx
View File

@@ -3,7 +3,6 @@ import { Box, Tab, Tabs } from '@mui/material';
import { useSearchParams } from 'react-router-dom';
import { PageHeader } from './PageHeader';
import { TabPanel } from './TabPanel';
import type { BreadcrumbItem } from './PageHeader';
export interface TabDef {
label: React.ReactNode;
@@ -14,7 +13,6 @@ export interface TabDef {
export interface DetailLayoutProps {
title: string;
breadcrumbs?: BreadcrumbItem[];
actions?: React.ReactNode;
tabs: TabDef[];
backTo?: string;
@@ -25,7 +23,6 @@ export interface DetailLayoutProps {
/** Detail page layout with PageHeader and tab navigation synced to URL. */
export const DetailLayout: React.FC<DetailLayoutProps> = ({
title,
breadcrumbs,
actions,
tabs,
backTo,
@@ -50,7 +47,7 @@ export const DetailLayout: React.FC<DetailLayoutProps> = ({
return (
<Box>
<PageHeader title={title} breadcrumbs={breadcrumbs} actions={actions} backTo={backTo} />
<PageHeader title={title} actions={actions} backTo={backTo} />
{isLoading ? (
skeleton
) : (

33
frontend/src/components/templates/PageHeader.tsx
View File

@@ -1,31 +1,23 @@
import React from 'react';
import {
Box,
Breadcrumbs,
IconButton,
Typography,
} from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { Link, useNavigate } from 'react-router-dom';
export interface BreadcrumbItem {
label: string;
href?: string;
}
import { useNavigate } from 'react-router-dom';
export interface PageHeaderProps {
title: string;
subtitle?: string;
breadcrumbs?: BreadcrumbItem[];
actions?: React.ReactNode;
backTo?: string;
}
/** Page title bar with optional breadcrumbs, back button, and action slot. */
/** Page title bar with optional back button and action slot. */
export const PageHeader: React.FC<PageHeaderProps> = ({
title,
subtitle,
breadcrumbs,
actions,
backTo,
}) => {
@@ -33,27 +25,6 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
return (
<Box>
{breadcrumbs && breadcrumbs.length > 0 && (
<Breadcrumbs sx={{ mb: 1 }}>
{breadcrumbs.map((item, i) =>
item.href && i < breadcrumbs.length - 1 ? (
<Link
key={i}
to={item.href}
style={{ textDecoration: 'none', color: 'inherit' }}
>
<Typography variant="body2" color="text.secondary" sx={{ '&:hover': { textDecoration: 'underline' } }}>
{item.label}
</Typography>
</Link>
) : (
<Typography key={i} variant="body2" color="text.primary">
{item.label}
</Typography>
)
)}
</Breadcrumbs>
)}
<Box display="flex" alignItems="center" justifyContent="space-between" mb={3}>
<Box display="flex" alignItems="center" gap={1}>
{backTo && (

11
frontend/src/components/templates/WidgetCard.tsx
View File

@@ -59,7 +59,16 @@ export const WidgetCard: React.FC<WidgetCardProps> = ({
>
<Box display="flex" alignItems="center" gap={0.75}>
{icon && (
<Box sx={{ color: 'text.secondary', display: 'flex', alignItems: 'center', '& > *': { fontSize: '1.1rem' } }}>
<Box sx={{
bgcolor: 'primary.main',
borderRadius: 1.5,
p: 0.5,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
'& > *': { fontSize: '1rem' },
}}>
{icon}
</Box>
)}

2
frontend/src/components/templates/index.ts
View File

@@ -7,7 +7,7 @@ export type { ListCardProps } from './ListCard';
export { FormCard } from './FormCard';
export type { FormCardProps } from './FormCard';
export { PageHeader } from './PageHeader';
export type { PageHeaderProps, BreadcrumbItem } from './PageHeader';
export type { PageHeaderProps } from './PageHeader';
export { PageContainer } from './PageContainer';
export type { PageContainerProps } from './PageContainer';
export { FormLayout } from './FormLayout';

1
frontend/src/constants/widgets.ts
View File

@@ -19,7 +19,6 @@ export const WIDGETS = [
{ key: 'issueOverview', label: 'Issue Übersicht', defaultVisible: true },
{ key: 'checklistOverdue', label: 'Checklisten', defaultVisible: true },
{ key: 'buchhaltung', label: 'Buchhaltung', defaultVisible: true },
{ key: 'persoenlicheAusruestung', label: 'Pers. Ausrüstung', defaultVisible: true },
] as const;
export type WidgetKey = typeof WIDGETS[number]['key'];

5
frontend/src/pages/AdminSettings.tsx
View File

@@ -32,7 +32,6 @@ import {
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Navigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageBreadcrumbs } from '../components/common';
import { usePermissionContext } from '../contexts/PermissionContext';
import { useNotification } from '../contexts/NotificationContext';
import { settingsApi } from '../services/settings';
@@ -294,10 +293,6 @@ function AdminSettings() {
return (
<DashboardLayout>
<Container maxWidth="lg">
<PageBreadcrumbs items={[
{ label: 'Admin', href: '/admin' },
{ label: 'Einstellungen' },
]} />
<Typography variant="h4" gutterBottom sx={{ mb: 4 }}>
Admin-Einstellungen
</Typography>

4
frontend/src/pages/AusruestungDetail.tsx
View File

@@ -779,10 +779,6 @@ function AusruestungDetailPage() {
<DetailLayout
title={equipment.bezeichnung}
backTo="/ausruestung"
breadcrumbs={[
{ label: 'Ausrüstung', href: '/ausruestung' },
{ label: equipment.bezeichnung },
]}
tabs={tabs}
actions={
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>

5
frontend/src/pages/AusruestungForm.tsx
View File

@@ -304,11 +304,6 @@ function AusruestungForm() {
<Container maxWidth="md">
<PageHeader
title={isEditMode ? 'Gerät bearbeiten' : 'Neues Gerät anlegen'}
breadcrumbs={[
{ label: 'Ausrüstung', href: '/ausruestung' },
...(isEditMode && id ? [{ label: 'Detail', href: `/ausruestung/${id}` }] : []),
{ label: isEditMode ? 'Bearbeiten' : 'Neu' },
]}
backTo={isEditMode && id ? `/ausruestung/${id}` : '/ausruestung'}
/>

5
frontend/src/pages/AusruestungsanfrageArtikelDetail.tsx
View File

@@ -11,7 +11,6 @@ import {
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useParams, useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageBreadcrumbs } from '../components/common';
import { useNotification } from '../contexts/NotificationContext';
import { usePermissionContext } from '../contexts/PermissionContext';
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
@@ -286,10 +285,6 @@ export default function AusruestungsanfrageArtikelDetail() {
return (
<DashboardLayout>
<PageBreadcrumbs items={[
{ label: 'Ausrüstungsanfragen', href: '/ausruestungsanfrage' },
{ label: isCreate ? 'Neuer Katalogartikel' : (artikel?.bezeichnung ?? 'Artikel') },
]} />
{/* Header */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
<IconButton onClick={() => navigate('/ausruestungsanfrage?tab=2')}>

260
frontend/src/pages/AusruestungsanfrageDetail.tsx
View File

@@ -5,7 +5,6 @@ import {
Dialog, DialogTitle, DialogContent, DialogActions, TextField,
MenuItem, Select, FormControl, InputLabel, Autocomplete,
Checkbox, LinearProgress, Switch, FormControlLabel, Alert,
ToggleButton, ToggleButtonGroup, Stack, Divider,
} from '@mui/material';
import {
ArrowBack, Add as AddIcon, Delete as DeleteIcon, Edit as EditIcon,
@@ -15,13 +14,10 @@ import {
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useParams, useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageBreadcrumbs } from '../components/common';
import { useNotification } from '../contexts/NotificationContext';
import { usePermissionContext } from '../contexts/PermissionContext';
import { useAuth } from '../contexts/AuthContext';
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
import { vehiclesApi } from '../services/vehicles';
import { membersService } from '../services/members';
import { AUSRUESTUNG_STATUS_LABELS, AUSRUESTUNG_STATUS_COLORS } from '../types/ausruestungsanfrage.types';
import type {
AusruestungAnfrage, AusruestungAnfrageDetailResponse,
@@ -40,223 +36,10 @@ function formatOrderId(r: AusruestungAnfrage): string {
// ── Helpers ──
type AssignmentTyp = 'ausruestung' | 'persoenlich' | 'keine';
interface PositionAssignment {
typ: AssignmentTyp;
fahrzeugId?: string;
standort?: string;
userId?: string;
benutzerName?: string;
groesse?: string;
kategorie?: string;
}
function getUnassignedPositions(positions: AusruestungAnfragePosition[]): AusruestungAnfragePosition[] {
return positions.filter((p) => p.geliefert && !p.zuweisung_typ);
}
// ══════════════════════════════════════════════════════════════════════════════
// ItemAssignmentDialog
// ══════════════════════════════════════════════════════════════════════════════
interface ItemAssignmentDialogProps {
open: boolean;
onClose: () => void;
anfrage: AusruestungAnfrage;
positions: AusruestungAnfragePosition[];
onSuccess: () => void;
}
function ItemAssignmentDialog({ open, onClose, anfrage, positions, onSuccess }: ItemAssignmentDialogProps) {
const { showSuccess, showError } = useNotification();
const unassigned = getUnassignedPositions(positions);
const [assignments, setAssignments] = useState<Record<number, PositionAssignment>>(() => {
const init: Record<number, PositionAssignment> = {};
for (const p of unassigned) {
init[p.id] = { typ: 'persoenlich' };
}
return init;
});
const { data: vehicleList } = useQuery({
queryKey: ['vehicles', 'sidebar'],
queryFn: () => vehiclesApi.getAll(),
staleTime: 2 * 60 * 1000,
enabled: open,
});
const { data: membersList } = useQuery({
queryKey: ['members-list-compact'],
queryFn: () => membersService.getMembers({ pageSize: 500 }),
staleTime: 5 * 60 * 1000,
enabled: open,
});
const memberOptions = (membersList?.items ?? []).map((m) => ({
id: m.id,
name: [m.given_name, m.family_name].filter(Boolean).join(' ') || m.email,
}));
const vehicleOptions = (vehicleList ?? []).map((v) => ({
id: v.id,
name: v.bezeichnung ?? v.kurzname,
}));
const [submitting, setSubmitting] = useState(false);
const updateAssignment = (posId: number, patch: Partial<PositionAssignment>) => {
setAssignments((prev) => ({
...prev,
[posId]: { ...prev[posId], ...patch },
}));
};
const handleSkipAll = () => {
const updated: Record<number, PositionAssignment> = {};
for (const p of unassigned) {
updated[p.id] = { typ: 'keine' };
}
setAssignments(updated);
};
const handleSubmit = async () => {
setSubmitting(true);
try {
const payload = Object.entries(assignments).map(([posId, a]) => ({
positionId: Number(posId),
typ: a.typ,
fahrzeugId: a.typ === 'ausruestung' ? a.fahrzeugId : undefined,
standort: a.typ === 'ausruestung' ? a.standort : undefined,
userId: a.typ === 'persoenlich' ? a.userId : undefined,
benutzerName: a.typ === 'persoenlich' ? (a.benutzerName || anfrage.fuer_benutzer_name || anfrage.anfrager_name) : undefined,
groesse: a.typ === 'persoenlich' ? a.groesse : undefined,
kategorie: a.typ === 'persoenlich' ? a.kategorie : undefined,
}));
await ausruestungsanfrageApi.assignItems(anfrage.id, payload);
showSuccess('Gegenstände zugewiesen');
onSuccess();
onClose();
} catch {
showError('Fehler beim Zuweisen');
} finally {
setSubmitting(false);
}
};
if (unassigned.length === 0) return null;
return (
<Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
<DialogTitle>Gegenstände zuweisen</DialogTitle>
<DialogContent>
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
Wähle für jeden gelieferten Gegenstand, wie er erfasst werden soll.
</Typography>
<Stack spacing={3} divider={<Divider />}>
{unassigned.map((pos) => {
const a = assignments[pos.id] ?? { typ: 'persoenlich' as const };
return (
<Box key={pos.id}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
<Typography variant="body2" fontWeight={600}>
{pos.bezeichnung}
</Typography>
<Chip label={`${pos.menge}x`} size="small" variant="outlined" />
</Box>
<ToggleButtonGroup
value={a.typ}
exclusive
size="small"
onChange={(_e, val) => val && updateAssignment(pos.id, { typ: val })}
sx={{ mb: 1.5 }}
>
<ToggleButton value="ausruestung">Ausrüstung</ToggleButton>
<ToggleButton value="persoenlich">Persönlich</ToggleButton>
<ToggleButton value="keine">Nicht erfassen</ToggleButton>
</ToggleButtonGroup>
{a.typ === 'ausruestung' && (
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
<Autocomplete
size="small"
options={vehicleOptions}
getOptionLabel={(o) => o.name}
value={vehicleOptions.find((v) => v.id === a.fahrzeugId) ?? null}
onChange={(_e, v) => updateAssignment(pos.id, { fahrzeugId: v?.id })}
renderInput={(params) => <TextField {...params} label="Fahrzeug" />}
sx={{ minWidth: 200, flex: 1 }}
/>
<TextField
size="small"
label="Standort"
value={a.standort ?? ''}
onChange={(e) => updateAssignment(pos.id, { standort: e.target.value })}
sx={{ minWidth: 160, flex: 1 }}
/>
</Box>
)}
{a.typ === 'persoenlich' && (
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
<Autocomplete
size="small"
options={memberOptions}
getOptionLabel={(o) => o.name}
value={memberOptions.find((m) => m.id === a.userId) ?? null}
onChange={(_e, v) => updateAssignment(pos.id, { userId: v?.id, benutzerName: v?.name })}
renderInput={(params) => (
<TextField
{...params}
label="Benutzer"
placeholder={anfrage.fuer_benutzer_name || anfrage.anfrager_name || ''}
/>
)}
sx={{ minWidth: 200, flex: 1 }}
/>
<TextField
size="small"
label="Größe"
value={a.groesse ?? ''}
onChange={(e) => updateAssignment(pos.id, { groesse: e.target.value })}
sx={{ minWidth: 100 }}
/>
<TextField
size="small"
label="Kategorie"
value={a.kategorie ?? ''}
onChange={(e) => updateAssignment(pos.id, { kategorie: e.target.value })}
sx={{ minWidth: 140 }}
/>
</Box>
)}
</Box>
);
})}
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleSkipAll} color="inherit">
Alle überspringen
</Button>
<Box sx={{ flex: 1 }} />
<Button onClick={onClose}>Abbrechen</Button>
<Button
variant="contained"
onClick={handleSubmit}
disabled={submitting}
startIcon={<AssignmentIcon />}
>
Zuweisen
</Button>
</DialogActions>
</Dialog>
);
}
// ══════════════════════════════════════════════════════════════════════════════
// Component
// ══════════════════════════════════════════════════════════════════════════════
@@ -282,9 +65,6 @@ export default function AusruestungsanfrageDetail() {
const [adminNotizen, setAdminNotizen] = useState('');
const [statusChangeValue, setStatusChangeValue] = useState('');
// Assignment dialog state
const [assignmentOpen, setAssignmentOpen] = useState(false);
// Eigenschaften state for edit mode
const [editItemEigenschaften, setEditItemEigenschaften] = useState<Record<number, AusruestungEigenschaft[]>>({});
const [editItemEigenschaftValues, setEditItemEigenschaftValues] = useState<Record<number, Record<number, string>>>({});
@@ -337,11 +117,11 @@ export default function AusruestungsanfrageDetail() {
setActionDialog(null);
setAdminNotizen('');
setStatusChangeValue('');
// Auto-open assignment dialog when status changes to 'erledigt' and unassigned positions exist
// Auto-navigate to assignment page when status changes to 'erledigt' and unassigned positions exist
if (variables.status === 'erledigt' && detail) {
const unassigned = getUnassignedPositions(detail.positionen);
if (unassigned.length > 0) {
setAssignmentOpen(true);
navigate(`/ausruestungsanfrage/${requestId}/zuweisung`);
}
}
},
@@ -427,10 +207,6 @@ export default function AusruestungsanfrageDetail() {
return (
<DashboardLayout>
<PageBreadcrumbs items={[
{ label: 'Ausrüstungsanfragen', href: '/ausruestungsanfrage' },
{ label: anfrage ? `Anfrage ${formatOrderId(anfrage)}` : 'Anfrage' },
]} />
{/* Header */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
<IconButton onClick={() => navigate('/ausruestungsanfrage')}>
@@ -441,10 +217,15 @@ export default function AusruestungsanfrageDetail() {
{anfrage?.bezeichnung && ` — ${anfrage.bezeichnung}`}
</Typography>
{anfrage && (
<Chip
label={AUSRUESTUNG_STATUS_LABELS[anfrage.status]}
color={AUSRUESTUNG_STATUS_COLORS[anfrage.status]}
/>
<>
{detail?.im_haus && (
<Chip label="Im Haus" color="success" />
)}
<Chip
label={AUSRUESTUNG_STATUS_LABELS[anfrage.status]}
color={AUSRUESTUNG_STATUS_COLORS[anfrage.status]}
/>
</>
)}
</Box>
@@ -645,6 +426,9 @@ export default function AusruestungsanfrageDetail() {
{p.ist_ersatz && (
<Chip label="Ersatzbeschaffung" size="small" color="warning" variant="outlined" />
)}
{p.geliefert && detail?.im_haus && (
<Chip label="Im Haus" size="small" color="success" />
)}
{p.eigenschaften && p.eigenschaften.length > 0 && p.eigenschaften.map(e => (
<Chip key={e.eigenschaft_id} label={`${e.eigenschaft_name}: ${e.wert}`} size="small" variant="outlined" />
))}
@@ -743,7 +527,7 @@ export default function AusruestungsanfrageDetail() {
<Button
variant="outlined"
startIcon={<AssignmentIcon />}
onClick={() => setAssignmentOpen(true)}
onClick={() => navigate(`/ausruestungsanfrage/${requestId}/zuweisung`)}
>
Zuweisen
</Button>
@@ -786,20 +570,6 @@ export default function AusruestungsanfrageDetail() {
</DialogActions>
</Dialog>
{/* Assignment dialog */}
{detail && anfrage && (
<ItemAssignmentDialog
open={assignmentOpen}
onClose={() => setAssignmentOpen(false)}
anfrage={anfrage}
positions={detail.positionen}
onSuccess={() => {
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
queryClient.invalidateQueries({ queryKey: ['persoenliche-ausruestung'] });
}}
/>
)}
</DashboardLayout>
);
}

5
frontend/src/pages/AusruestungsanfrageNeu.tsx
View File

@@ -7,7 +7,6 @@ import { ArrowBack, Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-mate
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageBreadcrumbs } from '../components/common';
import { useNotification } from '../contexts/NotificationContext';
import { usePermissionContext } from '../contexts/PermissionContext';
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
@@ -169,10 +168,6 @@ export default function AusruestungsanfrageNeu() {
return (
<DashboardLayout>
<PageBreadcrumbs items={[
{ label: 'Ausrüstungsanfragen', href: '/ausruestungsanfrage' },
{ label: 'Neue Bestellung' },
]} />
{/* Header */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
<IconButton onClick={() => navigate('/ausruestungsanfrage')}>

6
frontend/src/pages/AusruestungsanfrageZuBestellung.tsx
View File

@@ -14,7 +14,6 @@ import {
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageBreadcrumbs } from '../components/common';
import { useNotification } from '../contexts/NotificationContext';
import { usePermissionContext } from '../contexts/PermissionContext';
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
@@ -237,11 +236,6 @@ export default function AusruestungsanfrageZuBestellung() {
return (
<DashboardLayout>
<Box sx={{ maxWidth: 960, mx: 'auto', px: 2, py: 3 }}>
<PageBreadcrumbs items={[
{ label: 'Ausrüstungsanfragen', href: '/ausruestungsanfrage' },
{ label: anfrage.bezeichnung || `Anfrage ${formatOrderId(anfrage)}`, href: `/ausruestungsanfrage/${requestId}` },
{ label: 'Bestellen' },
]} />
{/* ── Header ── */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 3 }}>

254
frontend/src/pages/AusruestungsanfrageZuweisung.tsx Normal file
View File

@@ -0,0 +1,254 @@
import { useState, useMemo } from 'react';
import {
Box, Typography, Container, Button, Chip,
TextField, Autocomplete, ToggleButton, ToggleButtonGroup,
Stack, Divider, LinearProgress,
} from '@mui/material';
import { Assignment as AssignmentIcon } from '@mui/icons-material';
import { useQuery } 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 { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
import { vehiclesApi } from '../services/vehicles';
import { membersService } from '../services/members';
import type { AusruestungAnfragePosition } from '../types/ausruestungsanfrage.types';
type AssignmentTyp = 'ausruestung' | 'persoenlich' | 'keine';
interface PositionAssignment {
typ: AssignmentTyp;
fahrzeugId?: string;
standort?: string;
userId?: string;
benutzerName?: string;
groesse?: string;
kategorie?: string;
}
function getUnassignedPositions(positions: AusruestungAnfragePosition[]): AusruestungAnfragePosition[] {
return positions.filter((p) => p.geliefert && !p.zuweisung_typ);
}
export default function AusruestungsanfrageZuweisung() {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const { showSuccess, showError } = useNotification();
const anfrageId = Number(id);
const { data: detail, isLoading, isError } = useQuery({
queryKey: ['ausruestungsanfrage', 'request', anfrageId],
queryFn: () => ausruestungsanfrageApi.getRequest(anfrageId),
enabled: !isNaN(anfrageId),
retry: 1,
});
const unassigned = useMemo(() => {
if (!detail) return [];
return getUnassignedPositions(detail.positionen);
}, [detail]);
const [assignments, setAssignments] = useState<Record<number, PositionAssignment>>({});
// Initialize assignments when unassigned positions load
useMemo(() => {
if (unassigned.length > 0 && Object.keys(assignments).length === 0) {
const init: Record<number, PositionAssignment> = {};
for (const p of unassigned) {
init[p.id] = { typ: 'persoenlich' };
}
setAssignments(init);
}
}, [unassigned]);
const { data: vehicleList } = useQuery({
queryKey: ['vehicles', 'sidebar'],
queryFn: () => vehiclesApi.getAll(),
staleTime: 2 * 60 * 1000,
});
const { data: membersList } = useQuery({
queryKey: ['members-list-compact'],
queryFn: () => membersService.getMembers({ pageSize: 500 }),
staleTime: 5 * 60 * 1000,
});
const memberOptions = (membersList?.items ?? []).map((m) => ({
id: m.id,
name: [m.given_name, m.family_name].filter(Boolean).join(' ') || m.email,
}));
const vehicleOptions = (vehicleList ?? []).map((v) => ({
id: v.id,
name: v.bezeichnung ?? v.kurzname,
}));
const [submitting, setSubmitting] = useState(false);
const updateAssignment = (posId: number, patch: Partial<PositionAssignment>) => {
setAssignments((prev) => ({
...prev,
[posId]: { ...prev[posId], ...patch },
}));
};
const handleSkipAll = () => {
const updated: Record<number, PositionAssignment> = {};
for (const p of unassigned) {
updated[p.id] = { typ: 'keine' };
}
setAssignments(updated);
};
const handleSubmit = async () => {
if (!detail) return;
setSubmitting(true);
try {
const anfrage = detail.anfrage;
const payload = Object.entries(assignments).map(([posId, a]) => ({
positionId: Number(posId),
typ: a.typ,
fahrzeugId: a.typ === 'ausruestung' ? a.fahrzeugId : undefined,
standort: a.typ === 'ausruestung' ? a.standort : undefined,
userId: a.typ === 'persoenlich' ? a.userId : undefined,
benutzerName: a.typ === 'persoenlich' ? (a.benutzerName || anfrage.fuer_benutzer_name || anfrage.anfrager_name) : undefined,
groesse: a.typ === 'persoenlich' ? a.groesse : undefined,
kategorie: a.typ === 'persoenlich' ? a.kategorie : undefined,
}));
await ausruestungsanfrageApi.assignItems(anfrageId, payload);
showSuccess('Gegenstände zugewiesen');
navigate(`/ausruestungsanfrage/${id}`);
} catch {
showError('Fehler beim Zuweisen');
} finally {
setSubmitting(false);
}
};
const backPath = `/ausruestungsanfrage/${id}`;
return (
<DashboardLayout>
<Container maxWidth="md">
<PageHeader
title="Gegenstände zuweisen"
subtitle={detail?.anfrage.bezeichnung || undefined}
backTo={backPath}
/>
{isLoading ? (
<LinearProgress />
) : isError || !detail ? (
<Typography color="error">Fehler beim Laden der Anfrage.</Typography>
) : unassigned.length === 0 ? (
<Typography color="text.secondary">Keine unzugewiesenen Positionen vorhanden.</Typography>
) : (
<>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
Wähle für jeden gelieferten Gegenstand, wie er erfasst werden soll.
</Typography>
<Stack spacing={3} divider={<Divider />}>
{unassigned.map((pos) => {
const a = assignments[pos.id] ?? { typ: 'persoenlich' as const };
return (
<Box key={pos.id}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
<Typography variant="body2" fontWeight={600}>
{pos.bezeichnung}
</Typography>
<Chip label={`${pos.menge}x`} size="small" variant="outlined" />
</Box>
<ToggleButtonGroup
value={a.typ}
exclusive
size="small"
onChange={(_e, val) => val && updateAssignment(pos.id, { typ: val })}
sx={{ mb: 1.5 }}
>
<ToggleButton value="ausruestung">Ausrüstung</ToggleButton>
<ToggleButton value="persoenlich">Persönlich</ToggleButton>
<ToggleButton value="keine">Nicht erfassen</ToggleButton>
</ToggleButtonGroup>
{a.typ === 'ausruestung' && (
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
<Autocomplete
size="small"
options={vehicleOptions}
getOptionLabel={(o) => o.name}
value={vehicleOptions.find((v) => v.id === a.fahrzeugId) ?? null}
onChange={(_e, v) => updateAssignment(pos.id, { fahrzeugId: v?.id })}
renderInput={(params) => <TextField {...params} label="Fahrzeug" />}
sx={{ minWidth: 200, flex: 1 }}
/>
<TextField
size="small"
label="Standort"
value={a.standort ?? ''}
onChange={(e) => updateAssignment(pos.id, { standort: e.target.value })}
sx={{ minWidth: 160, flex: 1 }}
/>
</Box>
)}
{a.typ === 'persoenlich' && (
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
<Autocomplete
size="small"
options={memberOptions}
getOptionLabel={(o) => o.name}
value={memberOptions.find((m) => m.id === a.userId) ?? null}
onChange={(_e, v) => updateAssignment(pos.id, { userId: v?.id, benutzerName: v?.name })}
renderInput={(params) => (
<TextField
{...params}
label="Benutzer"
placeholder={detail.anfrage.fuer_benutzer_name || detail.anfrage.anfrager_name || ''}
/>
)}
sx={{ minWidth: 200, flex: 1 }}
/>
<TextField
size="small"
label="Größe"
value={a.groesse ?? ''}
onChange={(e) => updateAssignment(pos.id, { groesse: e.target.value })}
sx={{ minWidth: 100 }}
/>
<TextField
size="small"
label="Kategorie"
value={a.kategorie ?? ''}
onChange={(e) => updateAssignment(pos.id, { kategorie: e.target.value })}
sx={{ minWidth: 140 }}
/>
</Box>
)}
</Box>
);
})}
</Stack>
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', mt: 4 }}>
<Button onClick={handleSkipAll} color="inherit">
Alle überspringen
</Button>
<Button onClick={() => navigate(backPath)}>Abbrechen</Button>
<Button
variant="contained"
onClick={handleSubmit}
disabled={submitting}
startIcon={<AssignmentIcon />}
>
Zuweisen
</Button>
</Box>
</>
)}
</Container>
</DashboardLayout>
);
}

32
frontend/src/pages/BestellungDetail.tsx
View File

@@ -474,11 +474,20 @@ export default function BestellungDetail() {
doc.text('Bestellinformationen', 10, curY);
curY += 5;
row('Bezeichnung', bestellung.bezeichnung);
row('Status', BESTELLUNG_STATUS_LABELS[bestellung.status]);
row('Erstellt am', formatDate(bestellung.erstellt_am));
if (bestellung.bestellt_am) row('Bestelldatum', formatDate(bestellung.bestellt_am));
curY += 5;
// ── Place and date ──
doc.setFontSize(10);
doc.setFont('helvetica', 'normal');
const pageWidth = doc.internal.pageSize.width;
const dateStr = bestellung.bestellt_am
? new Date(bestellung.bestellt_am).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
: new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
doc.text(`St. Valentin, am ${dateStr}`, pageWidth - 10, curY, { align: 'right' });
curY += 8;
// ── Line items table ──
const steuersatz = (parseFloat(String(bestellung.steuersatz)) || 20) / 100;
const hasPrices = positionen.some((p) => p.einzelpreis != null && p.einzelpreis > 0);
@@ -619,13 +628,6 @@ export default function BestellungDetail() {
doc.setFont('helvetica', 'normal');
doc.setTextColor(0, 0, 0);
// Place and date (right-aligned, above signature line)
const today = new Date();
const dd = String(today.getDate()).padStart(2, '0');
const mm = String(today.getMonth() + 1).padStart(2, '0');
const yyyy = today.getFullYear();
doc.text(`St. Valentin, am ${dd}.${mm}.${yyyy}`, 200, curY - 6, { align: 'right' });
// Signature line (right)
doc.line(120, curY, 200, curY);
@@ -673,22 +675,20 @@ export default function BestellungDetail() {
<PageHeader
title={bestellung.bezeichnung}
backTo="/bestellungen"
breadcrumbs={[
{ label: 'Bestellungen', href: '/bestellungen' },
{ label: bestellung.bezeichnung },
]}
actions={
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{canExport && !editMode && (
<Tooltip title={bestellung.status === 'entwurf' || bestellung.status === 'wartet_auf_genehmigung' ? 'Export erst nach Genehmigung verfügbar' : 'PDF Export'}>
<span>
<IconButton
<Button
variant="outlined"
size="small"
startIcon={<PdfIcon />}
onClick={generateBestellungDetailPdf}
color="primary"
disabled={bestellung.status === 'entwurf' || bestellung.status === 'wartet_auf_genehmigung'}
>
<PdfIcon />
</IconButton>
Export
</Button>
</span>
</Tooltip>
)}

4
frontend/src/pages/BestellungNeu.tsx
View File

@@ -77,10 +77,6 @@ export default function BestellungNeu() {
<DashboardLayout>
<PageHeader
title="Neue Bestellung"
breadcrumbs={[
{ label: 'Bestellungen', href: '/bestellungen' },
{ label: 'Neue Bestellung' },
]}
backTo="/bestellungen"
/>

4
frontend/src/pages/BookingFormPage.tsx
View File

@@ -244,10 +244,6 @@ function BookingFormPage() {
<Container maxWidth="md" sx={{ py: 3 }}>
<PageHeader
title={isEdit ? 'Buchung bearbeiten' : 'Neue Buchung'}
breadcrumbs={[
{ label: 'Fahrzeugbuchungen', href: '/fahrzeugbuchungen' },
{ label: isEdit ? 'Bearbeiten' : 'Neue Buchung' },
]}
backTo="/fahrzeugbuchungen"
/>

77
frontend/src/pages/Buchhaltung.tsx
View File

@@ -1164,7 +1164,7 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
const stornoMut = useMutation({
mutationFn: (id: number) => buchhaltungApi.stornoTransaktion(id),
onSuccess: () => { qc.invalidateQueries({ queryKey: ['buchhaltung-transaktionen'] }); qc.invalidateQueries({ queryKey: ['buchhaltung-stats'] }); showSuccess('Transaktion storniert'); },
onSuccess: () => { qc.invalidateQueries({ queryKey: ['buchhaltung-transaktionen'] }); qc.invalidateQueries({ queryKey: ['buchhaltung-stats'] }); setTxSubTab(0); showSuccess('Transaktion storniert'); },
onError: () => showError('Storno fehlgeschlagen'),
});
@@ -1264,16 +1264,23 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
return sortDir === 'asc' ? cmp : -cmp;
});
const subTabTransaktionen = sortedTransaktionen.filter(t => {
if (txSubTab === 0) return t.status === 'entwurf';
if (txSubTab === 1) return t.status === 'gebucht' || t.status === 'freigegeben';
return false;
});
return (
<Box>
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
<Tabs value={txSubTab} onChange={(_, v) => setTxSubTab(v)}>
<Tab label="Transaktionen" />
<Tab label="Offene Buchungen" />
<Tab label="Gebuchte Buchungen" />
<Tab label="Wiederkehrende Buchungen" />
</Tabs>
</Box>
{txSubTab === 0 && (
{(txSubTab === 0 || txSubTab === 1) && (
<Box>
{/* Filters */}
<Paper variant="outlined" sx={{ p: 1.5, mb: 2 }}>
@@ -1286,14 +1293,6 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
{haushaltsjahre.map(hj => <MenuItem key={hj.id} value={hj.id}>{hj.bezeichnung}</MenuItem>)}
</Select>
</FormControl>
<FormControl size="small" sx={{ minWidth: 140 }}>
<InputLabel>Status</InputLabel>
<Select size="small" value={filters.status ?? ''} label="Status"
onChange={e => setFilters(f => ({ ...f, status: (e.target.value as TransaktionStatus) || undefined }))}>
<MenuItem value=""><em>Alle</em></MenuItem>
{(Object.entries(TRANSAKTION_STATUS_LABELS) as [TransaktionStatus, string][]).map(([v, l]) => <MenuItem key={v} value={v}>{l}</MenuItem>)}
</Select>
</FormControl>
<FormControl size="small" sx={{ minWidth: 130 }}>
<InputLabel>Typ</InputLabel>
<Select size="small" value={filters.typ ?? ''} label="Typ"
@@ -1362,15 +1361,14 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
Betrag
</TableSortLabel>
</TableCell>
<TableCell>Status</TableCell>
<TableCell>Aktionen</TableCell>
</TableRow>
</TableHead>
<TableBody>
{sortedTransaktionen.length === 0 && (
<TableRow><TableCell colSpan={8} align="center"><Typography color="text.secondary">Keine Transaktionen</Typography></TableCell></TableRow>
{subTabTransaktionen.length === 0 && (
<TableRow><TableCell colSpan={7} align="center"><Typography color="text.secondary">Keine Transaktionen</Typography></TableCell></TableRow>
)}
{sortedTransaktionen.map((t: Transaktion) => (
{subTabTransaktionen.map((t: Transaktion) => (
<TableRow key={t.id} hover>
<TableCell>{t.laufende_nummer ?? `E${t.id}`}</TableCell>
<TableCell>{fmtDate(t.datum)}</TableCell>
@@ -1394,44 +1392,35 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
{t.typ === 'ausgabe' ? '-' : t.typ === 'einnahme' ? '+' : ''}{fmtEur(t.betrag)}
</TableCell>
<TableCell>
<StatusChip status={t.status} labelMap={TRANSAKTION_STATUS_LABELS} colorMap={TRANSAKTION_STATUS_COLORS} />
</TableCell>
<TableCell>
<Stack direction="row" spacing={0.5}>
<Stack direction="row" spacing={0.5} flexWrap="wrap">
{t.status === 'entwurf' && hasPermission('buchhaltung:edit') && (
<Tooltip title="Buchen">
<IconButton size="small" color="primary" onClick={() => buchenMut.mutate(t.id)}>
<BookmarkAdd fontSize="small" />
</IconButton>
<Tooltip title={!t.konto_id ? 'Kein Konto ausgewählt' : ''}>
<span>
<Button size="small" variant="outlined" startIcon={<BookmarkAdd fontSize="small" />} disabled={!t.konto_id} onClick={() => buchenMut.mutate(t.id)}>
Buchen
</Button>
</span>
</Tooltip>
)}
{t.status === 'gebucht' && hasPermission('buchhaltung:edit') && (
<Tooltip title="Freigabe anfordern">
<IconButton size="small" color="info" onClick={() => freigabeMut.mutate(t.id)}>
<HowToReg fontSize="small" />
</IconButton>
</Tooltip>
<Button size="small" variant="outlined" color="info" startIcon={<HowToReg fontSize="small" />} onClick={() => freigabeMut.mutate(t.id)}>
Freigabe
</Button>
)}
{t.status === 'freigegeben' && hasPermission('buchhaltung:manage_accounts') && (
<>
<Tooltip title="Genehmigen">
<IconButton size="small" color="success" onClick={() => approveMut.mutate(t.id)}>
<ThumbUp fontSize="small" />
</IconButton>
</Tooltip>
<Tooltip title="Ablehnen">
<IconButton size="small" color="error" onClick={() => rejectMut.mutate(t.id)}>
<ThumbDown fontSize="small" />
</IconButton>
</Tooltip>
<Button size="small" variant="outlined" color="success" startIcon={<ThumbUp fontSize="small" />} onClick={() => approveMut.mutate(t.id)}>
Genehmigen
</Button>
<Button size="small" variant="outlined" color="error" startIcon={<ThumbDown fontSize="small" />} onClick={() => rejectMut.mutate(t.id)}>
Ablehnen
</Button>
</>
)}
{(t.status === 'gebucht' || t.status === 'freigegeben') && hasPermission('buchhaltung:edit') && (
<Tooltip title="Stornieren">
<IconButton size="small" color="warning" onClick={() => stornoMut.mutate(t.id)}>
<Cancel fontSize="small" />
</IconButton>
</Tooltip>
<Button size="small" variant="outlined" color="warning" startIcon={<Cancel fontSize="small" />} onClick={() => stornoMut.mutate(t.id)}>
Stornieren
</Button>
)}
{t.status === 'entwurf' && hasPermission('buchhaltung:delete') && (
<Tooltip title="Löschen">
@@ -1483,7 +1472,7 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
</Box>
)}
{txSubTab === 1 && (
{txSubTab === 2 && (
<Box>
<Box sx={{ mb: 2, display: 'flex', justifyContent: 'flex-end' }}>
{canManage && <Button variant="contained" startIcon={<AddIcon />} onClick={() => setWiederkehrendDialog({ open: true })}>Anlegen</Button>}

5
frontend/src/pages/BuchhaltungBankkontoDetail.tsx
View File

@@ -23,7 +23,6 @@ import { ArrowBack } from '@mui/icons-material';
import { useQuery } from '@tanstack/react-query';
import { useParams, useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageBreadcrumbs } from '../components/common';
import { buchhaltungApi } from '../services/buchhaltung';
import { TRANSAKTION_TYP_LABELS } from '../types/buchhaltung.types';
import type { BankkontoStatementRow } from '../types/buchhaltung.types';
@@ -62,10 +61,6 @@ export default function BuchhaltungBankkontoDetail() {
return (
<DashboardLayout>
<PageBreadcrumbs items={[
{ label: 'Buchhaltung', href: '/buchhaltung' },
{ label: data?.bankkonto?.bezeichnung || 'Bankkonto' },
]} />
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
<Tooltip title="Zurueck">
<IconButton onClick={() => navigate('/buchhaltung?tab=2')}>

5
frontend/src/pages/BuchhaltungKontoDetail.tsx
View File

@@ -9,7 +9,6 @@ import {
} from '@mui/material';
import { ArrowBack, KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageBreadcrumbs } from '../components/common';
import { buchhaltungApi } from '../services/buchhaltung';
import { AUSGABEN_TYP_LABELS } from '../types/buchhaltung.types';
import type { AusgabenTyp, BuchhaltungAudit } from '../types/buchhaltung.types';
@@ -133,10 +132,6 @@ export default function BuchhaltungKontoDetail() {
return (
<DashboardLayout>
<Box sx={{ p: 3 }}>
<PageBreadcrumbs items={[
{ label: 'Buchhaltung', href: '/buchhaltung' },
{ label: `${konto.kontonummer} — ${konto.bezeichnung}` },
]} />
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
<Button startIcon={<ArrowBack />} onClick={() => navigate('/buchhaltung')}>
Zurück

6
frontend/src/pages/BuchhaltungKontoManage.tsx
View File

@@ -8,7 +8,6 @@ import {
} from '@mui/material';
import { ArrowBack, Delete, Edit, Save, Cancel } from '@mui/icons-material';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageBreadcrumbs } from '../components/common';
import { buchhaltungApi } from '../services/buchhaltung';
import { useNotification } from '../contexts/NotificationContext';
import type { KontoFormData, BudgetTyp } from '../types/buchhaltung.types';
@@ -173,11 +172,6 @@ export default function BuchhaltungKontoManage() {
return (
<DashboardLayout>
<PageBreadcrumbs items={[
{ label: 'Buchhaltung', href: '/buchhaltung' },
{ label: `${konto.kontonummer} — ${konto.bezeichnung}`, href: `/buchhaltung/konto/${id}` },
{ label: 'Verwalten' },
]} />
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
<Button startIcon={<ArrowBack />} onClick={() => navigate('/buchhaltung?tab=2')}>
Zurück

5
frontend/src/pages/ChecklistAusfuehrung.tsx
View File

@@ -19,7 +19,6 @@ import { ArrowBack, CheckCircle, Cancel, RemoveCircle } from '@mui/icons-materia
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageBreadcrumbs } from '../components/common';
import { usePermissionContext } from '../contexts/PermissionContext';
import { useNotification } from '../contexts/NotificationContext';
import { checklistenApi } from '../services/checklisten';
@@ -244,10 +243,6 @@ export default function ChecklistAusfuehrung() {
return (
<DashboardLayout>
<PageBreadcrumbs items={[
{ label: 'Checklisten', href: '/checklisten' },
{ label: execution.vorlage_name ?? 'Checkliste' },
]} />
<Button startIcon={<ArrowBack />} onClick={() => navigate('/checklisten')} sx={{ mb: 2 }} size="small">
Checklisten
</Button>

13
frontend/src/pages/Dashboard.tsx
View File

@@ -62,7 +62,6 @@ import IssueQuickAddWidget from '../components/dashboard/IssueQuickAddWidget';
import IssueOverviewWidget from '../components/dashboard/IssueOverviewWidget';
import ChecklistWidget from '../components/dashboard/ChecklistWidget';
import BuchhaltungWidget from '../components/dashboard/BuchhaltungWidget';
import PersoenlicheAusruestungWidget from '../components/dashboard/PersoenlicheAusruestungWidget';
import { preferencesApi } from '../services/settings';
import { configApi } from '../services/config';
import { WidgetKey } from '../constants/widgets';
@@ -86,7 +85,7 @@ const BUILTIN_GROUPS: { name: string; title: string }[] = [
// Default widget order per group (used when no preference is set)
const DEFAULT_ORDER: Record<string, string[]> = {
status: ['vehicles', 'equipment', 'atemschutz', 'adminStatus', 'bestellungen', 'ausruestungsanfragen', 'issueOverview', 'checklistOverdue', 'buchhaltung', 'persoenlicheAusruestung'],
status: ['vehicles', 'equipment', 'atemschutz', 'adminStatus', 'bestellungen', 'ausruestungsanfragen', 'issueOverview', 'checklistOverdue', 'buchhaltung'],
kalender: ['events', 'vehicleBookingList', 'vehicleBooking', 'eventQuickAdd'],
dienste: ['bookstackRecent', 'bookstackSearch', 'vikunjaTasks', 'vikunjaQuickAdd', 'issueQuickAdd'],
information: ['links', 'bannerWidget'],
@@ -139,7 +138,6 @@ function Dashboard() {
{ key: 'issueOverview', widgetKey: 'issueOverview', permission: 'issues:view_all', component: <IssueOverviewWidget /> },
{ key: 'checklistOverdue', widgetKey: 'checklistOverdue', permission: 'checklisten:widget', component: <ChecklistWidget /> },
{ key: 'buchhaltung', widgetKey: 'buchhaltung', permission: 'buchhaltung:widget', component: <BuchhaltungWidget /> },
{ key: 'persoenlicheAusruestung', widgetKey: 'persoenlicheAusruestung', permission: 'persoenliche_ausruestung:view', component: <PersoenlicheAusruestungWidget /> },
],
kalender: [
{ key: 'events', widgetKey: 'events', permission: 'kalender:view', component: <UpcomingEventsWidget /> },
@@ -176,13 +174,20 @@ function Dashboard() {
if (preferences?.widgetOrder) {
setLocalOrder((prev) => {
const merged = { ...prev };
// Build a set of all widget keys that are explicitly placed in some saved group
const allSavedKeys = new Set<string>();
for (const groupKeys of Object.values(preferences.widgetOrder)) {
for (const k of (groupKeys as string[])) allSavedKeys.add(k);
}
for (const group of Object.keys(DEFAULT_ORDER)) {
if (preferences.widgetOrder[group]) {
// Merge: saved order first, then any new widgets not in saved order
const saved = preferences.widgetOrder[group] as string[];
const allKeys = DEFAULT_ORDER[group];
const ordered = saved.filter((k: string) => allKeys.includes(k));
const remaining = allKeys.filter((k) => !ordered.includes(k));
const remaining = allKeys.filter((k) => !allSavedKeys.has(k));
merged[group] = [...ordered, ...remaining];
}
}

4
frontend/src/pages/EinsatzDetail.tsx
View File

@@ -284,10 +284,6 @@ function EinsatzDetail() {
title={`Einsatz ${einsatz.einsatz_nr}`}
subtitle={address || undefined}
backTo="/einsaetze"
breadcrumbs={[
{ label: 'Einsätze', href: '/einsaetze' },
{ label: `Einsatz ${einsatz.einsatz_nr}` },
]}
actions={
<Stack direction="row" spacing={1} alignItems="center">
<Chip

4
frontend/src/pages/FahrzeugDetail.tsx
View File

@@ -1006,10 +1006,6 @@ function FahrzeugDetail() {
<DetailLayout
title={titleText}
backTo="/fahrzeuge"
breadcrumbs={[
{ label: 'Fahrzeuge', href: '/fahrzeuge' },
{ label: titleText },
]}
tabs={tabs}
actions={
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>

5
frontend/src/pages/FahrzeugForm.tsx
View File

@@ -246,11 +246,6 @@ function FahrzeugForm() {
<Container maxWidth="md">
<PageHeader
title={isEditMode ? 'Fahrzeug bearbeiten' : 'Neues Fahrzeug erfassen'}
breadcrumbs={[
{ label: 'Fahrzeuge', href: '/fahrzeuge' },
...(isEditMode && id ? [{ label: 'Detail', href: `/fahrzeuge/${id}` }] : []),
{ label: isEditMode ? 'Bearbeiten' : 'Neu' },
]}
backTo={isEditMode && id ? `/fahrzeuge/${id}` : '/fahrzeuge'}
/>

5
frontend/src/pages/HaushaltsplanDetail.tsx
View File

@@ -1,6 +1,5 @@
import { useState } from 'react';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageBreadcrumbs } from '../components/common';
import {
Alert,
Box,
@@ -144,10 +143,6 @@ export default function HaushaltsplanDetail() {
return (
<DashboardLayout>
<PageBreadcrumbs items={[
{ label: 'Haushaltsplan', href: '/haushaltsplan' },
{ label: planung.bezeichnung },
]} />
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
<IconButton onClick={() => navigate('/haushaltsplan')}><ArrowBack /></IconButton>
<Typography variant="h4" sx={{ flexGrow: 1 }}>{planung.bezeichnung}</Typography>

4
frontend/src/pages/IssueDetail.tsx
View File

@@ -264,10 +264,6 @@ export default function IssueDetail() {
<PageHeader
title={`${formatIssueId(issue)} — ${issue.titel}`}
backTo="/issues"
breadcrumbs={[
{ label: 'Issues', href: '/issues' },
{ label: `${formatIssueId(issue)} — ${issue.titel}` },
]}
actions={
<Chip
label={getStatusLabel(statuses, issue.status)}

4
frontend/src/pages/IssueNeu.tsx
View File

@@ -55,10 +55,6 @@ export default function IssueNeu() {
<DashboardLayout>
<PageHeader
title="Neues Issue"
breadcrumbs={[
{ label: 'Issues', href: '/issues' },
{ label: 'Neues Issue' },
]}
backTo="/issues"
/>

5
frontend/src/pages/LieferantDetail.tsx
View File

@@ -162,11 +162,6 @@ export default function LieferantDetail() {
{/* ── Header ── */}
<PageHeader
title={isNew ? 'Neuer Lieferant' : vendor!.name}
breadcrumbs={[
{ label: 'Bestellungen', href: '/bestellungen' },
{ label: 'Lieferanten', href: '/bestellungen?tab=1' },
{ label: isNew ? 'Neu' : vendor!.name },
]}
backTo="/bestellungen?tab=1"
actions={
<>

77
frontend/src/pages/MitgliedDetail.tsx
View File

@@ -439,10 +439,6 @@ function MitgliedDetail() {
<PageHeader
title={displayName}
backTo="/mitglieder"
breadcrumbs={[
{ label: 'Mitglieder', href: '/mitglieder' },
{ label: displayName },
]}
/>
{/* Header card */}
@@ -820,7 +816,7 @@ function MitgliedDetail() {
</Card>
</Grid>
{/* Uniform sizing */}
{/* Uniform sizing + Personal equipment (merged) */}
<Grid item xs={12} md={6}>
<Card>
<CardHeader
@@ -858,48 +854,43 @@ function MitgliedDetail() {
<FieldRow label="Schuhgröße" value={profile?.schuhgroesse ?? null} />
</>
)}
{(hasPermission('persoenliche_ausruestung:view') || hasPermission('persoenliche_ausruestung:view_all')) && (
<>
<Divider sx={{ my: 1.5 }} />
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
Persönliche Ausrüstung
</Typography>
{personalEquipmentLoading ? (
<CircularProgress size={24} />
) : personalEquipment.length === 0 ? (
<Typography color="text.secondary" variant="body2">
Keine persönlichen Gegenstände erfasst
</Typography>
) : (
personalEquipment.map((item) => (
<Box key={item.id} sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
<Box>
<Typography variant="body2" fontWeight={500}>{item.bezeichnung}</Typography>
{item.kategorie && (
<Typography variant="caption" color="text.secondary">{item.kategorie}</Typography>
)}
</Box>
<Chip
label={ZUSTAND_LABELS[item.zustand]}
color={ZUSTAND_COLORS[item.zustand]}
size="small"
variant="outlined"
/>
</Box>
))
)}
</>
)}
</CardContent>
</Card>
</Grid>
{/* Personal equipment */}
{(hasPermission('persoenliche_ausruestung:view') || hasPermission('persoenliche_ausruestung:view_all')) && (
<Grid item xs={12} md={6}>
<Card>
<CardHeader
avatar={<SecurityIcon color="primary" />}
title="Persönliche Ausrüstung"
/>
<CardContent>
{personalEquipmentLoading ? (
<CircularProgress size={24} />
) : personalEquipment.length === 0 ? (
<Typography color="text.secondary" variant="body2">
Keine persönlichen Gegenstände erfasst
</Typography>
) : (
personalEquipment.map((item) => (
<Box key={item.id} sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
<Box>
<Typography variant="body2" fontWeight={500}>{item.bezeichnung}</Typography>
{item.kategorie && (
<Typography variant="caption" color="text.secondary">{item.kategorie}</Typography>
)}
</Box>
<Chip
label={ZUSTAND_LABELS[item.zustand]}
color={ZUSTAND_COLORS[item.zustand]}
size="small"
variant="outlined"
/>
</Box>
))
)}
</CardContent>
</Card>
</Grid>
)}
{/* Driving licenses */}
<Grid item xs={12} md={6}>
<Card>

186
frontend/src/pages/PersoenlicheAusruestung.tsx
View File

@@ -5,55 +5,42 @@ import {
Chip,
Container,
MenuItem,
Stack,
Tab,
Tabs,
TextField,
Typography,
} from '@mui/material';
import { Add as AddIcon } from '@mui/icons-material';
import CheckroomIcon from '@mui/icons-material/Checkroom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useQuery } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
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 ChatAwareFab from '../components/shared/ChatAwareFab';
import { FormDialog, PageHeader } from '../components/templates';
import { PageHeader } from '../components/templates';
import { KatalogTab } from '../components/shared/KatalogTab';
import {
ZUSTAND_LABELS,
ZUSTAND_COLORS,
} from '../types/personalEquipment.types';
import type {
PersoenlicheAusruestungZustand,
CreatePersoenlicheAusruestungPayload,
} from '../types/personalEquipment.types';
import type { AusruestungArtikel } from '../types/ausruestungsanfrage.types';
import type { PersoenlicheAusruestungZustand } from '../types/personalEquipment.types';
const ZUSTAND_OPTIONS = Object.entries(ZUSTAND_LABELS) as [PersoenlicheAusruestungZustand, string][];
function PersoenlicheAusruestungPage() {
const queryClient = useQueryClient();
const navigate = useNavigate();
const { hasPermission } = usePermissionContext();
const { showSuccess, showError } = useNotification();
const canViewAll = hasPermission('persoenliche_ausruestung:view_all');
const canCreate = hasPermission('persoenliche_ausruestung:create');
const [dialogOpen, setDialogOpen] = useState(false);
const [activeTab, setActiveTab] = useState(0);
const [filterZustand, setFilterZustand] = useState<string>('');
const [filterUser, setFilterUser] = useState<string>('');
const [search, setSearch] = useState('');
// Form state
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('');
// Data queries
const { data: items, isLoading } = useQuery({
queryKey: ['persoenliche-ausruestung', 'all'],
@@ -61,12 +48,6 @@ function PersoenlicheAusruestungPage() {
staleTime: 2 * 60 * 1000,
});
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 }),
@@ -81,48 +62,6 @@ function PersoenlicheAusruestungPage() {
}));
}, [membersList]);
const createMutation = useMutation({
mutationFn: (data: CreatePersoenlicheAusruestungPayload) => personalEquipmentApi.create(data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['persoenliche-ausruestung'] });
showSuccess('Persönliche Ausrüstung erstellt');
setDialogOpen(false);
resetForm();
},
onError: () => {
showError('Fehler beim Erstellen');
},
});
const resetForm = () => {
setFormBezeichnung(null);
setFormKategorie('');
setFormUserId(null);
setFormBenutzerName('');
setFormGroesse('');
setFormZustand('gut');
setFormNotizen('');
};
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);
};
// Filter logic
const filtered = useMemo(() => {
let result = items ?? [];
@@ -148,9 +87,15 @@ function PersoenlicheAusruestungPage() {
<Container maxWidth="lg">
<PageHeader
title="Persönliche Ausrüstung"
breadcrumbs={[{ label: 'Persönliche Ausrüstung' }]}
/>
<Tabs value={activeTab} onChange={(_e, v) => setActiveTab(v)} sx={{ mb: 3 }}>
<Tab label="Zuweisungen" />
<Tab label="Katalog" />
</Tabs>
{activeTab === 0 && (
<>
{/* Filters */}
<Box sx={{ display: 'flex', gap: 2, mb: 3, flexWrap: 'wrap', alignItems: 'center' }}>
<TextField
@@ -293,108 +238,21 @@ function PersoenlicheAusruestungPage() {
</tbody>
</Box>
</Box>
</>
)}
{activeTab === 1 && <KatalogTab />}
</Container>
{/* FAB */}
{canCreate && (
{canCreate && activeTab === 0 && (
<ChatAwareFab
onClick={() => setDialogOpen(true)}
onClick={() => navigate('/persoenliche-ausruestung/neu')}
aria-label="Persönliche Ausrüstung hinzufügen"
>
<AddIcon />
</ChatAwareFab>
)}
{/* Create Dialog */}
<FormDialog
open={dialogOpen}
onClose={() => { setDialogOpen(false); resetForm(); }}
title="Persönliche Ausrüstung hinzufügen"
onSubmit={handleCreate}
submitLabel="Erstellen"
isSubmitting={createMutation.isPending}
>
<Stack spacing={2} sx={{ mt: 1 }}>
<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)}
/>
</Stack>
</FormDialog>
</DashboardLayout>
);
}

200
frontend/src/pages/PersoenlicheAusruestungNeu.tsx Normal file
View File

@@ -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>
);
}

5
frontend/src/pages/UebungDetail.tsx
View File

@@ -42,7 +42,6 @@ import {
} from '@mui/icons-material';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageBreadcrumbs } from '../components/common';
import { usePermissionContext } from '../contexts/PermissionContext';
import { trainingApi } from '../services/training';
import type { TeilnahmeStatus, UebungTyp, Teilnahme } from '../types/training.types';
@@ -333,10 +332,6 @@ export default function UebungDetail() {
return (
<DashboardLayout>
<Box sx={{ maxWidth: 720, mx: 'auto' }}>
<PageBreadcrumbs items={[
{ label: 'Kalender', href: '/kalender' },
{ label: event.titel || 'Übung' },
]} />
{/* Back button */}
<Button
startIcon={<BackIcon />}

5
frontend/src/pages/VeranstaltungKategorien.tsx
View File

@@ -34,7 +34,6 @@ import {
Category as CategoryIcon,
} from '@mui/icons-material';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageBreadcrumbs } from '../components/common';
import { usePermissionContext } from '../contexts/PermissionContext';
import { useNotification } from '../contexts/NotificationContext';
import { eventsApi } from '../services/events';
@@ -340,10 +339,6 @@ export default function VeranstaltungKategorien() {
return (
<DashboardLayout>
<Container maxWidth="lg" sx={{ py: 3 }}>
<PageBreadcrumbs items={[
{ label: 'Veranstaltungen', href: '/veranstaltungen' },
{ label: 'Kategorien' },
]} />
{/* Header */}
<Box
sx={{

54
frontend/src/theme/theme.ts
View File

@@ -295,6 +295,60 @@ const darkThemeOptions: ThemeOptions = {
main: '#22c55e',
},
},
components: {
...lightThemeOptions.components,
MuiTableHead: {
styleOverrides: {
root: {
'& .MuiTableCell-head': {
textTransform: 'uppercase',
fontSize: '0.6875rem',
fontWeight: 600,
letterSpacing: '0.06em',
color: 'rgba(255, 255, 255, 0.5)',
borderBottom: '2px solid rgba(255, 255, 255, 0.08)',
},
},
},
},
MuiTableRow: {
styleOverrides: {
root: {
'&.MuiTableRow-hover:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.04)',
},
},
},
},
MuiTableCell: {
styleOverrides: {
root: {
borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
},
},
},
MuiCard: {
styleOverrides: {
root: {
borderRadius: 14,
border: '1px solid rgba(255, 255, 255, 0.06)',
boxShadow: '0 1px 2px rgba(0,0,0,0.2)',
transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
'&:hover': {
borderColor: 'rgba(255, 255, 255, 0.12)',
boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
},
},
},
},
MuiDivider: {
styleOverrides: {
root: {
borderColor: 'rgba(255, 255, 255, 0.08)',
},
},
},
},
};
export const lightTheme = createTheme(lightThemeOptions);

1
frontend/src/types/ausruestungsanfrage.types.ts
View File

@@ -131,6 +131,7 @@ export interface AusruestungAnfrageDetailResponse {
anfrage: AusruestungAnfrage;
positionen: AusruestungAnfragePosition[];
linked_bestellungen?: { id: number; bezeichnung: string; status: string }[];
im_haus?: boolean;
}
// ── Overview ──