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

feat: checklist multi-type assignments, tab layouts for Fahrzeuge/Ausruestung, admin cleanup

Browse Source 
- Migration 074: convert checklist vorlage single FK fields to junction tables
  (vorlage_fahrzeug_typen, vorlage_fahrzeuge, vorlage_ausruestung_typen, vorlage_ausruestungen)
- Backend checklist service: multi-type create/update/query with array fields
- Backend cleanup service: add checklist-history and reset-checklist-history targets
- Frontend types/service: singular FK fields replaced with arrays (fahrzeug_typ_ids, etc.)
- Frontend Checklisten.tsx: multi-select Autocomplete pickers for all assignment types
- Fahrzeuge.tsx/Ausruestung.tsx: add tab layout (Uebersicht + Einstellungen), inline type CRUD
- FahrzeugEinstellungen/AusruestungEinstellungen: replaced with redirects to tab URLs
- Sidebar: add Uebersicht sub-items, update Einstellungen paths to tab URLs
- DataManagementTab: add checklist-history cleanup and reset sections

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthias Hochmeister
2026-03-28 18:57:46 +01:00
parent 893fbe43a0
commit 4349de9bc9
14 changed files with 1078 additions and 1188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/admin/DataManagementTab.tsx
View File

@@ -24,6 +24,7 @@ const SECTIONS: CleanupSection[] = [
{ key: 'orders', label: 'Bestellungen', description: 'Abgeschlossene Bestellungen entfernen.', defaultDays: 365 },
{ key: 'vehicle-history', label: 'Fahrzeug-Wartungslog', description: 'Alte Fahrzeug-Wartungseintraege entfernen.', defaultDays: 730 },
{ key: 'equipment-history', label: 'Ausruestungs-Wartungslog', description: 'Alte Ausruestungs-Wartungseintraege entfernen.', defaultDays: 730 },
{ key: 'checklist-history', label: 'Checklisten-Historie', description: 'Alte Checklisten-Ausfuehrungen entfernen.', defaultDays: 365 },
];
interface ResetSection {
@@ -36,6 +37,7 @@ const RESET_SECTIONS: ResetSection[] = [
{ key: 'reset-bestellungen', label: 'Bestellungen zuruecksetzen', description: 'Alle Bestellungen, Positionen, Dateien, Erinnerungen und Historie loeschen und Nummern zuruecksetzen.' },
{ key: 'reset-ausruestung-anfragen', label: 'Interne Bestellungen zuruecksetzen', description: 'Alle internen Bestellungen und zugehoerige Positionen loeschen und Nummern zuruecksetzen.' },
{ key: 'reset-issues', label: 'Issues zuruecksetzen', description: 'Alle Issues und Kommentare loeschen und Nummern zuruecksetzen.' },
{ key: 'reset-checklist-history', label: 'Checklisten-Historie zuruecksetzen', description: 'Alle Checklisten-Ausfuehrungen und Faelligkeiten loeschen und Nummern zuruecksetzen.' },
];
interface SectionState {

21
frontend/src/components/shared/Sidebar.tsx
View File

@@ -193,12 +193,17 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
const vehicleSubItems: SubItem[] = useMemo(
() => {
const items: SubItem[] = (vehicleList ?? []).map((v) => ({
text: v.bezeichnung ?? v.kurzname,
path: `/fahrzeuge/${v.id}`,
}));
const items: SubItem[] = [
{ text: 'Übersicht', path: '/fahrzeuge?tab=0' },
];
(vehicleList ?? []).forEach((v) => {
items.push({
text: v.bezeichnung ?? v.kurzname,
path: `/fahrzeuge/${v.id}`,
});
});
if (hasPermission('fahrzeuge:edit')) {
items.push({ text: 'Einstellungen', path: '/fahrzeuge/einstellungen' });
items.push({ text: 'Einstellungen', path: '/fahrzeuge?tab=1' });
}
return items;
},
@@ -246,9 +251,11 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
.map((item) => {
if (item.path === '/fahrzeuge') return fahrzeugeItem;
if (item.path === '/ausruestung') {
const ausruestungSubs: SubItem[] = [];
const ausruestungSubs: SubItem[] = [
{ text: 'Übersicht', path: '/ausruestung?tab=0' },
];
if (hasPermission('ausruestung:manage_types')) {
ausruestungSubs.push({ text: 'Einstellungen', path: '/ausruestung/einstellungen' });
ausruestungSubs.push({ text: 'Einstellungen', path: '/ausruestung?tab=1' });
}
return ausruestungSubs.length > 0 ? { ...item, subItems: ausruestungSubs } : item;
}

601
frontend/src/pages/Ausruestung.tsx
View File

@@ -9,6 +9,11 @@ import {
Chip,
CircularProgress,
Container,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
FormControl,
FormControlLabel,
Grid,
@@ -16,30 +21,43 @@ 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,
Close,
Delete,
Edit,
Error as ErrorIcon,
LinkRounded,
PauseCircle,
RemoveCircle,
Save,
Search,
Settings,
Star,
Warning,
} from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { equipmentApi } from '../services/equipment';
import { ausruestungTypenApi } from '../services/ausruestungTypen';
import { ausruestungTypenApi, AusruestungTyp } from '../services/ausruestungTypen';
import {
AusruestungListItem,
AusruestungKategorie,
@@ -48,6 +66,7 @@ import {
EquipmentStats,
} from '../types/equipment.types';
import { usePermissions } from '../hooks/usePermissions';
import { useNotification } from '../contexts/NotificationContext';
import ChatAwareFab from '../components/shared/ChatAwareFab';
// ── Status chip config ────────────────────────────────────────────────────────
@@ -233,10 +252,248 @@ 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 */}
<Dialog open={dialogOpen} onClose={closeDialog} maxWidth="sm" fullWidth>
<DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
{editingTyp ? 'Typ bearbeiten' : 'Neuen Typ erstellen'}
<IconButton onClick={closeDialog} size="small"><Close /></IconButton>
</DialogTitle>
<DialogContent>
<TextField
label="Name *"
fullWidth
value={formName}
onChange={(e) => setFormName(e.target.value)}
sx={{ mt: 1, mb: 2 }}
inputProps={{ maxLength: 100 }}
/>
<TextField
label="Beschreibung"
fullWidth
multiline
rows={2}
value={formBeschreibung}
onChange={(e) => setFormBeschreibung(e.target.value)}
sx={{ mb: 2 }}
/>
<TextField
label="Icon (MUI Icon-Name)"
fullWidth
value={formIcon}
onChange={(e) => setFormIcon(e.target.value)}
placeholder="z.B. Build, LocalFireDepartment"
/>
</DialogContent>
<DialogActions>
<Button onClick={closeDialog}>Abbrechen</Button>
<Button
variant="contained"
onClick={handleSave}
disabled={isSaving || !formName.trim()}
startIcon={isSaving ? <CircularProgress size={16} /> : <Save />}
>
Speichern
</Button>
</DialogActions>
</Dialog>
{/* Delete confirmation dialog */}
<Dialog open={deleteDialogOpen} onClose={() => !deleteMutation.isPending && setDeleteDialogOpen(false)}>
<DialogTitle>Typ löschen</DialogTitle>
<DialogContent>
<DialogContentText>
Möchten Sie den Typ &quot;{deletingTyp?.name}&quot; wirklich löschen?
Geräte, denen dieser Typ zugeordnet ist, verlieren die Zuordnung.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => setDeleteDialogOpen(false)} disabled={deleteMutation.isPending}>
Abbrechen
</Button>
<Button
color="error"
variant="contained"
onClick={() => deletingTyp && deleteMutation.mutate(deletingTyp.id)}
disabled={deleteMutation.isPending}
startIcon={deleteMutation.isPending ? <CircularProgress size={16} /> : undefined}
>
Löschen
</Button>
</DialogActions>
</Dialog>
</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');
@@ -285,7 +542,6 @@ function Ausruestung() {
// Client-side filtering
const filtered = useMemo(() => {
return equipment.filter((item) => {
// Text search
if (search.trim()) {
const q = search.toLowerCase();
const matches =
@@ -295,37 +551,16 @@ function Ausruestung() {
(item.hersteller?.toLowerCase().includes(q) ?? false);
if (!matches) return false;
}
// Category filter
if (selectedCategory && item.kategorie_id !== selectedCategory) {
return false;
}
// Type filter
if (selectedCategory && item.kategorie_id !== selectedCategory) return false;
if (selectedTyp) {
const typId = parseInt(selectedTyp, 10);
if (!item.typen?.some((t) => t.id === typId)) {
return false;
}
if (!item.typen?.some((t) => t.id === typId)) return false;
}
// Status filter
if (selectedStatus && item.status !== selectedStatus) {
return false;
}
// Nur wichtige
if (nurWichtige && !item.ist_wichtig) {
return false;
}
// Prüfung fällig (within 30 days or overdue)
if (selectedStatus && item.status !== selectedStatus) return false;
if (nurWichtige && !item.ist_wichtig) return false;
if (pruefungFaellig) {
if (item.pruefung_tage_bis_faelligkeit === null || item.pruefung_tage_bis_faelligkeit > 30) {
return false;
}
if (item.pruefung_tage_bis_faelligkeit === null || item.pruefung_tage_bis_faelligkeit > 30) return false;
}
return true;
});
}, [equipment, search, selectedCategory, selectedTyp, selectedStatus, nurWichtige, pruefungFaellig]);
@@ -338,19 +573,12 @@ function Ausruestung() {
<DashboardLayout>
<Container maxWidth="lg">
{/* Header */}
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
<Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant="h4" gutterBottom sx={{ mb: 0 }}>
Ausrüstungsverwaltung
</Typography>
{canManageTypes && (
<Tooltip title="Einstellungen">
<IconButton onClick={() => navigate('/ausruestung/einstellungen')} size="small">
<Settings />
</IconButton>
</Tooltip>
)}
</Box>
{!loading && stats && (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 0.5 }}>
@@ -374,158 +602,175 @@ function Ausruestung() {
</Box>
</Box>
{/* Overdue alert */}
{hasOverdue && (
<Alert severity="error" sx={{ mb: 2 }} icon={<Warning />}>
<strong>Achtung:</strong> Mindestens eine Ausrüstung hat eine überfällige Prüfungsfrist.
</Alert>
)}
<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>
{/* Filter controls */}
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 3, alignItems: 'center' }}>
<TextField
placeholder="Suchen (Bezeichnung, Seriennr., Inventarnr., Hersteller...)"
value={search}
onChange={(e) => setSearch(e.target.value)}
size="small"
sx={{ minWidth: 280, flexGrow: 1, maxWidth: 480 }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search />
</InputAdornment>
),
}}
/>
{tab === 0 && (
<>
{/* Overdue alert */}
{hasOverdue && (
<Alert severity="error" sx={{ mb: 2 }} icon={<Warning />}>
<strong>Achtung:</strong> Mindestens eine Ausrüstung hat eine überfällige Prüfungsfrist.
</Alert>
)}
<FormControl size="small" sx={{ minWidth: 180 }}>
<InputLabel>Kategorie</InputLabel>
<Select
value={selectedCategory}
label="Kategorie"
onChange={(e) => setSelectedCategory(e.target.value)}
>
<MenuItem value="">Alle Kategorien</MenuItem>
{categories.map((cat) => (
<MenuItem key={cat.id} value={cat.id}>
{cat.name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl size="small" sx={{ minWidth: 160 }}>
<InputLabel>Typ</InputLabel>
<Select
value={selectedTyp}
label="Typ"
onChange={(e) => setSelectedTyp(e.target.value)}
>
<MenuItem value="">Alle Typen</MenuItem>
{typen.map((t) => (
<MenuItem key={t.id} value={String(t.id)}>
{t.name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl size="small" sx={{ minWidth: 160 }}>
<InputLabel>Status</InputLabel>
<Select
value={selectedStatus}
label="Status"
onChange={(e) => setSelectedStatus(e.target.value)}
>
<MenuItem value="">Alle Status</MenuItem>
{Object.values(AusruestungStatus).map((s) => (
<MenuItem key={s} value={s}>
{AusruestungStatusLabel[s]}
</MenuItem>
))}
</Select>
</FormControl>
<FormControlLabel
control={
<Switch
checked={nurWichtige}
onChange={(e) => setNurWichtige(e.target.checked)}
{/* Filter controls */}
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 3, alignItems: 'center' }}>
<TextField
placeholder="Suchen (Bezeichnung, Seriennr., Inventarnr., Hersteller...)"
value={search}
onChange={(e) => setSearch(e.target.value)}
size="small"
sx={{ minWidth: 280, flexGrow: 1, maxWidth: 480 }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search />
</InputAdornment>
),
}}
/>
}
label={<Typography variant="body2">Nur wichtige</Typography>}
/>
<FormControlLabel
control={
<Switch
checked={pruefungFaellig}
onChange={(e) => setPruefungFaellig(e.target.checked)}
size="small"
<FormControl size="small" sx={{ minWidth: 180 }}>
<InputLabel>Kategorie</InputLabel>
<Select
value={selectedCategory}
label="Kategorie"
onChange={(e) => setSelectedCategory(e.target.value)}
>
<MenuItem value="">Alle Kategorien</MenuItem>
{categories.map((cat) => (
<MenuItem key={cat.id} value={cat.id}>
{cat.name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl size="small" sx={{ minWidth: 160 }}>
<InputLabel>Typ</InputLabel>
<Select
value={selectedTyp}
label="Typ"
onChange={(e) => setSelectedTyp(e.target.value)}
>
<MenuItem value="">Alle Typen</MenuItem>
{typen.map((t) => (
<MenuItem key={t.id} value={String(t.id)}>
{t.name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl size="small" sx={{ minWidth: 160 }}>
<InputLabel>Status</InputLabel>
<Select
value={selectedStatus}
label="Status"
onChange={(e) => setSelectedStatus(e.target.value)}
>
<MenuItem value="">Alle Status</MenuItem>
{Object.values(AusruestungStatus).map((s) => (
<MenuItem key={s} value={s}>
{AusruestungStatusLabel[s]}
</MenuItem>
))}
</Select>
</FormControl>
<FormControlLabel
control={
<Switch
checked={nurWichtige}
onChange={(e) => setNurWichtige(e.target.checked)}
size="small"
/>
}
label={<Typography variant="body2">Nur wichtige</Typography>}
/>
}
label={<Typography variant="body2">Prüfung fällig</Typography>}
/>
</Box>
{/* Loading state */}
{loading && (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
<CircularProgress />
</Box>
)}
<FormControlLabel
control={
<Switch
checked={pruefungFaellig}
onChange={(e) => setPruefungFaellig(e.target.checked)}
size="small"
/>
}
label={<Typography variant="body2">Prüfung fällig</Typography>}
/>
</Box>
{/* Error state */}
{!loading && error && (
<Alert
severity="error"
sx={{ mb: 2 }}
action={
<Button color="inherit" size="small" onClick={fetchData}>
Erneut versuchen
</Button>
}
>
{error}
</Alert>
)}
{/* Loading state */}
{loading && (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
<CircularProgress />
</Box>
)}
{/* Empty states */}
{!loading && !error && filtered.length === 0 && (
<Box sx={{ textAlign: 'center', py: 8 }}>
<Build sx={{ fontSize: 64, color: 'text.disabled', mb: 2 }} />
<Typography variant="h6" color="text.secondary">
{equipment.length === 0
? 'Keine Ausrüstung vorhanden'
: 'Keine Ausrüstung gefunden'}
</Typography>
</Box>
)}
{/* Error state */}
{!loading && error && (
<Alert
severity="error"
sx={{ mb: 2 }}
action={
<Button color="inherit" size="small" onClick={fetchData}>
Erneut versuchen
</Button>
}
>
{error}
</Alert>
)}
{/* Equipment grid */}
{!loading && !error && filtered.length > 0 && (
<Grid container spacing={3}>
{filtered.map((item) => (
<Grid item key={item.id} xs={12} sm={6} md={4} lg={3}>
<EquipmentCard
item={item}
onClick={(id) => navigate(`/ausruestung/${id}`)}
/>
{/* Empty states */}
{!loading && !error && filtered.length === 0 && (
<Box sx={{ textAlign: 'center', py: 8 }}>
<Build sx={{ fontSize: 64, color: 'text.disabled', mb: 2 }} />
<Typography variant="h6" color="text.secondary">
{equipment.length === 0
? 'Keine Ausrüstung vorhanden'
: 'Keine Ausrüstung gefunden'}
</Typography>
</Box>
)}
{/* Equipment grid */}
{!loading && !error && filtered.length > 0 && (
<Grid container spacing={3}>
{filtered.map((item) => (
<Grid item key={item.id} xs={12} sm={6} md={4} lg={3}>
<EquipmentCard
item={item}
onClick={(id) => navigate(`/ausruestung/${id}`)}
/>
</Grid>
))}
</Grid>
))}
</Grid>
)}
{/* FAB for adding new equipment */}
{canManageEquipment && (
<ChatAwareFab
color="primary"
aria-label="Ausrüstung hinzufügen"
onClick={() => navigate('/ausruestung/neu')}
>
<Add />
</ChatAwareFab>
)}
</>
)}
{/* FAB for adding new equipment */}
{canManageEquipment && (
<ChatAwareFab
color="primary"
aria-label="Ausrüstung hinzufügen"
onClick={() => navigate('/ausruestung/neu')}
>
<Add />
</ChatAwareFab>
{tab === 1 && canManageTypes && (
<AusruestungTypenSettings />
)}
</Container>
</DashboardLayout>

436
frontend/src/pages/AusruestungEinstellungen.tsx
View File

@@ -1,434 +1,4 @@
import { useState } from 'react';
import {
Alert,
Autocomplete,
Box,
Button,
Chip,
CircularProgress,
Container,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
IconButton,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Tooltip,
Typography,
} from '@mui/material';
import { Add, ArrowBack, Delete, Edit, Save, Close } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { ausruestungTypenApi, AusruestungTyp } from '../services/ausruestungTypen';
import { equipmentApi } from '../services/equipment';
import { usePermissions } from '../hooks/usePermissions';
import { useNotification } from '../contexts/NotificationContext';
function AusruestungEinstellungen() {
const navigate = useNavigate();
const { hasPermission } = usePermissions();
const { showSuccess, showError } = useNotification();
const queryClient = useQueryClient();
const canManageTypes = hasPermission('ausruestung:manage_types');
// Data
const { data: typen = [], isLoading, isError } = useQuery({
queryKey: ['ausruestungTypen'],
queryFn: ausruestungTypenApi.getAll,
});
// Dialog state
const [dialogOpen, setDialogOpen] = useState(false);
const [editingTyp, setEditingTyp] = useState<AusruestungTyp | null>(null);
const [formName, setFormName] = useState('');
const [formBeschreibung, setFormBeschreibung] = useState('');
const [formIcon, setFormIcon] = useState('');
// Delete dialog state
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [deletingTyp, setDeletingTyp] = useState<AusruestungTyp | null>(null);
// Mutations
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;
// Permission guard
if (!canManageTypes) {
return (
<DashboardLayout>
<Container maxWidth="lg">
<Box sx={{ textAlign: 'center', py: 8 }}>
<Typography variant="h5" gutterBottom>Keine Berechtigung</Typography>
<Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
Sie haben nicht die erforderlichen Rechte, um Ausrüstungstypen zu verwalten.
</Typography>
<Button variant="contained" onClick={() => navigate('/ausruestung')}>
Zurück zur Ausrüstungsübersicht
</Button>
</Box>
</Container>
</DashboardLayout>
);
}
return (
<DashboardLayout>
<Container maxWidth="lg">
<Button
startIcon={<ArrowBack />}
onClick={() => navigate('/ausruestung')}
sx={{ mb: 2 }}
size="small"
>
Ausrüstungsübersicht
</Button>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
<Typography variant="h4">Ausrüstungs-Einstellungen</Typography>
</Box>
{/* Ausrüstungstypen Section */}
<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={<Add />} onClick={openAddDialog}>
Neuer Typ
</Button>
</Box>
</Paper>
)}
{/* Add/Edit dialog */}
<Dialog open={dialogOpen} onClose={closeDialog} maxWidth="sm" fullWidth>
<DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
{editingTyp ? 'Typ bearbeiten' : 'Neuen Typ erstellen'}
<IconButton onClick={closeDialog} size="small"><Close /></IconButton>
</DialogTitle>
<DialogContent>
<TextField
label="Name *"
fullWidth
value={formName}
onChange={(e) => setFormName(e.target.value)}
sx={{ mt: 1, mb: 2 }}
inputProps={{ maxLength: 100 }}
/>
<TextField
label="Beschreibung"
fullWidth
multiline
rows={2}
value={formBeschreibung}
onChange={(e) => setFormBeschreibung(e.target.value)}
sx={{ mb: 2 }}
/>
<TextField
label="Icon (MUI Icon-Name)"
fullWidth
value={formIcon}
onChange={(e) => setFormIcon(e.target.value)}
placeholder="z.B. Build, LocalFireDepartment"
/>
</DialogContent>
<DialogActions>
<Button onClick={closeDialog}>Abbrechen</Button>
<Button
variant="contained"
onClick={handleSave}
disabled={isSaving || !formName.trim()}
startIcon={isSaving ? <CircularProgress size={16} /> : <Save />}
>
Speichern
</Button>
</DialogActions>
</Dialog>
{/* Delete confirmation dialog */}
<Dialog open={deleteDialogOpen} onClose={() => !deleteMutation.isPending && setDeleteDialogOpen(false)}>
<DialogTitle>Typ löschen</DialogTitle>
<DialogContent>
<DialogContentText>
Möchten Sie den Typ &quot;{deletingTyp?.name}&quot; wirklich löschen?
Geräte, denen dieser Typ zugeordnet ist, verlieren die Zuordnung.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => setDeleteDialogOpen(false)} disabled={deleteMutation.isPending}>
Abbrechen
</Button>
<Button
color="error"
variant="contained"
onClick={() => deletingTyp && deleteMutation.mutate(deletingTyp.id)}
disabled={deleteMutation.isPending}
startIcon={deleteMutation.isPending ? <CircularProgress size={16} /> : undefined}
>
Löschen
</Button>
</DialogActions>
</Dialog>
<Divider sx={{ my: 4 }} />
<EquipmentTypeAssignment allTypes={typen} />
</Container>
</DashboardLayout>
);
}
export default AusruestungEinstellungen;
// ── Per-equipment type assignment ──────────────────────────────────────────────
function EquipmentTypeAssignment({ allTypes }: { allTypes: AusruestungTyp[] }) {
const { showSuccess, showError } = useNotification();
const { data: equipment = [], isLoading } = useQuery({
queryKey: ['equipment'],
queryFn: equipmentApi.getAll,
});
const [assignDialog, setAssignDialog] = useState<{ equipmentId: string; equipmentName: string } | null>(null);
const [selected, setSelected] = useState<AusruestungTyp[]>([]);
const [saving, setSaving] = useState(false);
const [equipmentTypesMap, setEquipmentTypesMap] = useState<Record<string, AusruestungTyp[]>>({});
const openAssign = async (equipmentId: string, equipmentName: string) => {
let current = equipmentTypesMap[equipmentId];
if (!current) {
try { current = await ausruestungTypenApi.getTypesForEquipment(equipmentId); }
catch { current = []; }
setEquipmentTypesMap((m) => ({ ...m, [equipmentId]: current }));
}
setSelected(current);
setAssignDialog({ equipmentId, equipmentName });
};
const handleSave = async () => {
if (!assignDialog) return;
try {
setSaving(true);
await ausruestungTypenApi.setTypesForEquipment(assignDialog.equipmentId, selected.map((t) => t.id));
setEquipmentTypesMap((m) => ({ ...m, [assignDialog.equipmentId]: selected }));
setAssignDialog(null);
showSuccess('Typen gespeichert');
} catch {
showError('Fehler beim Speichern');
} finally {
setSaving(false);
}
};
return (
<>
<Typography variant="h6" gutterBottom>Typzuweisung je Gerät</Typography>
{isLoading ? (
<CircularProgress size={24} />
) : (
<Paper variant="outlined">
<TableContainer>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>Gerät</TableCell>
<TableCell>Zugewiesene Typen</TableCell>
<TableCell align="right">Aktionen</TableCell>
</TableRow>
</TableHead>
<TableBody>
{equipment.map((e) => {
const types = equipmentTypesMap[e.id];
return (
<TableRow key={e.id} hover>
<TableCell>{e.bezeichnung}</TableCell>
<TableCell>
{types === undefined ? (
<Typography variant="body2" color="text.disabled">–</Typography>
) : types.length === 0 ? (
<Typography variant="body2" color="text.disabled">Keine</Typography>
) : (
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
{types.map((t) => <Chip key={t.id} label={t.name} size="small" variant="outlined" />)}
</Box>
)}
</TableCell>
<TableCell align="right">
<Tooltip title="Typen zuweisen">
<IconButton size="small" onClick={() => openAssign(e.id, e.bezeichnung)}>
<Edit fontSize="small" />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</Paper>
)}
<Dialog open={!!assignDialog} onClose={() => setAssignDialog(null)} maxWidth="sm" fullWidth>
<DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
Typen für {assignDialog?.equipmentName}
<IconButton size="small" onClick={() => setAssignDialog(null)}><Close /></IconButton>
</DialogTitle>
<DialogContent sx={{ mt: 1 }}>
<Autocomplete
multiple
options={allTypes}
getOptionLabel={(o) => o.name}
value={selected}
onChange={(_e, val) => setSelected(val)}
isOptionEqualToValue={(a, b) => a.id === b.id}
renderInput={(params) => <TextField {...params} label="Ausrüstungstypen" />}
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setAssignDialog(null)}>Abbrechen</Button>
<Button variant="contained" onClick={handleSave} disabled={saving}
startIcon={saving ? <CircularProgress size={16} /> : <Save />}>
Speichern
</Button>
</DialogActions>
</Dialog>
</>
);
import { Navigate } from 'react-router-dom';
export default function AusruestungEinstellungen() {
return <Navigate to="/ausruestung?tab=1" replace />;
}

85
frontend/src/pages/Checklisten.tsx
View File

@@ -93,18 +93,18 @@ const INTERVALL_LABELS: Record<string, string> = {
type AssignmentType = 'global' | 'fahrzeug_typ' | 'fahrzeug' | 'ausruestung_typ' | 'ausruestung';
function getAssignmentType(v: ChecklistVorlage): AssignmentType {
if (v.fahrzeug_id) return 'fahrzeug';
if (v.fahrzeug_typ_id) return 'fahrzeug_typ';
if (v.ausruestung_id) return 'ausruestung';
if (v.ausruestung_typ_id) return 'ausruestung_typ';
if (v.fahrzeug_ids?.length) return 'fahrzeug';
if (v.fahrzeug_typ_ids?.length) return 'fahrzeug_typ';
if (v.ausruestung_ids?.length) return 'ausruestung';
if (v.ausruestung_typ_ids?.length) return 'ausruestung_typ';
return 'global';
}
function getAssignmentLabel(v: ChecklistVorlage): string {
if (v.fahrzeug_id) return v.fahrzeug_name ? `Fahrzeug: ${v.fahrzeug_name}` : 'Fahrzeug (direkt)';
if (v.fahrzeug_typ_id) return v.fahrzeug_typ?.name ? `Fahrzeugtyp: ${v.fahrzeug_typ.name}` : 'Fahrzeugtyp';
if (v.ausruestung_id) return v.ausruestung_name ? `Ausrüstung: ${v.ausruestung_name}` : 'Ausrüstung (direkt)';
if (v.ausruestung_typ_id) return v.ausruestung_typ ? `Ausrüstungstyp: ${v.ausruestung_typ}` : 'Ausrüstungstyp';
if (v.fahrzeug_ids?.length) return v.fahrzeug_names?.length ? `Fahrzeug: ${v.fahrzeug_names.join(', ')}` : 'Fahrzeug (direkt)';
if (v.fahrzeug_typ_ids?.length) return v.fahrzeug_typ_names?.length ? `Fahrzeugtyp: ${v.fahrzeug_typ_names.join(', ')}` : 'Fahrzeugtyp';
if (v.ausruestung_ids?.length) return v.ausruestung_names?.length ? `Ausrüstung: ${v.ausruestung_names.join(', ')}` : 'Ausrüstung (direkt)';
if (v.ausruestung_typ_ids?.length) return v.ausruestung_typ_names?.length ? `Ausrüstungstyp: ${v.ausruestung_typ_names.join(', ')}` : 'Ausrüstungstyp';
return 'Global';
}
@@ -365,8 +365,8 @@ function VorlagenTab({ vorlagen, loading, fahrzeugTypen, queryClient, showSucces
const [assignmentType, setAssignmentType] = useState<AssignmentType>('global');
const emptyForm: CreateVorlagePayload = {
name: '', fahrzeug_typ_id: undefined, fahrzeug_id: undefined,
ausruestung_typ_id: undefined, ausruestung_id: undefined,
name: '', fahrzeug_typ_ids: [], fahrzeug_ids: [],
ausruestung_typ_ids: [], ausruestung_ids: [],
intervall: undefined, intervall_tage: undefined, beschreibung: '', aktiv: true,
};
const [form, setForm] = useState<CreateVorlagePayload>(emptyForm);
@@ -417,10 +417,10 @@ function VorlagenTab({ vorlagen, loading, fahrzeugTypen, queryClient, showSucces
setAssignmentType(getAssignmentType(v));
setForm({
name: v.name,
fahrzeug_typ_id: v.fahrzeug_typ_id,
fahrzeug_id: v.fahrzeug_id,
ausruestung_typ_id: v.ausruestung_typ_id,
ausruestung_id: v.ausruestung_id,
fahrzeug_typ_ids: v.fahrzeug_typ_ids ?? [],
fahrzeug_ids: v.fahrzeug_ids ?? [],
ausruestung_typ_ids: v.ausruestung_typ_ids ?? [],
ausruestung_ids: v.ausruestung_ids ?? [],
intervall: v.intervall,
intervall_tage: v.intervall_tage,
beschreibung: v.beschreibung ?? '',
@@ -438,10 +438,10 @@ function VorlagenTab({ vorlagen, loading, fahrzeugTypen, queryClient, showSucces
aktiv: form.aktiv,
};
switch (assignmentType) {
case 'fahrzeug_typ': return { ...base, fahrzeug_typ_id: form.fahrzeug_typ_id };
case 'fahrzeug': return { ...base, fahrzeug_id: form.fahrzeug_id };
case 'ausruestung_typ': return { ...base, ausruestung_typ_id: form.ausruestung_typ_id };
case 'ausruestung': return { ...base, ausruestung_id: form.ausruestung_id };
case 'fahrzeug_typ': return { ...base, fahrzeug_typ_ids: form.fahrzeug_typ_ids };
case 'fahrzeug': return { ...base, fahrzeug_ids: form.fahrzeug_ids };
case 'ausruestung_typ': return { ...base, ausruestung_typ_ids: form.ausruestung_typ_ids };
case 'ausruestung': return { ...base, ausruestung_ids: form.ausruestung_ids };
default: return base;
}
};
@@ -460,10 +460,10 @@ function VorlagenTab({ vorlagen, loading, fahrzeugTypen, queryClient, showSucces
setAssignmentType(newType);
setForm((f) => ({
...f,
fahrzeug_typ_id: undefined,
fahrzeug_id: undefined,
ausruestung_typ_id: undefined,
ausruestung_id: undefined,
fahrzeug_typ_ids: [],
fahrzeug_ids: [],
ausruestung_typ_ids: [],
ausruestung_ids: [],
}));
};
@@ -547,41 +547,46 @@ function VorlagenTab({ vorlagen, loading, fahrzeugTypen, queryClient, showSucces
{/* Assignment picker based on type */}
{assignmentType === 'fahrzeug_typ' && (
<FormControl fullWidth>
<InputLabel>Fahrzeugtyp</InputLabel>
<Select
label="Fahrzeugtyp"
value={form.fahrzeug_typ_id ?? ''}
onChange={(e) => setForm((f) => ({ ...f, fahrzeug_typ_id: e.target.value ? Number(e.target.value) : undefined }))}
>
{fahrzeugTypen.map((t) => <MenuItem key={t.id} value={t.id}>{t.name}</MenuItem>)}
</Select>
</FormControl>
<Autocomplete
multiple
options={fahrzeugTypen}
getOptionLabel={(t) => t.name}
value={fahrzeugTypen.filter((t) => form.fahrzeug_typ_ids?.includes(t.id))}
onChange={(_e, vals) => setForm((f) => ({ ...f, fahrzeug_typ_ids: vals.map((v) => v.id) }))}
isOptionEqualToValue={(a, b) => a.id === b.id}
renderInput={(params) => <TextField {...params} label="Fahrzeugtypen" />}
/>
)}
{assignmentType === 'fahrzeug' && (
<Autocomplete
multiple
options={vehiclesList}
getOptionLabel={(v) => v.bezeichnung ?? v.kurzname ?? String(v.id)}
value={vehiclesList.find((v) => v.id === form.fahrzeug_id) ?? null}
onChange={(_e, v) => setForm((f) => ({ ...f, fahrzeug_id: v?.id }))}
renderInput={(params) => <TextField {...params} label="Fahrzeug" />}
value={vehiclesList.filter((v) => form.fahrzeug_ids?.includes(v.id))}
onChange={(_e, vals) => setForm((f) => ({ ...f, fahrzeug_ids: vals.map((v) => v.id) }))}
isOptionEqualToValue={(a, b) => a.id === b.id}
renderInput={(params) => <TextField {...params} label="Fahrzeuge" />}
/>
)}
{assignmentType === 'ausruestung_typ' && (
<Autocomplete
multiple
options={ausruestungTypen}
getOptionLabel={(t: AusruestungTyp) => t.name}
value={ausruestungTypen.find((t: AusruestungTyp) => t.id === form.ausruestung_typ_id) ?? null}
onChange={(_e, t: AusruestungTyp | null) => setForm((f) => ({ ...f, ausruestung_typ_id: t?.id }))}
renderInput={(params) => <TextField {...params} label="Ausrüstungstyp" />}
value={ausruestungTypen.filter((t: AusruestungTyp) => form.ausruestung_typ_ids?.includes(t.id))}
onChange={(_e, vals: AusruestungTyp[]) => setForm((f) => ({ ...f, ausruestung_typ_ids: vals.map((v) => v.id) }))}
isOptionEqualToValue={(a: AusruestungTyp, b: AusruestungTyp) => a.id === b.id}
renderInput={(params) => <TextField {...params} label="Ausrüstungstypen" />}
/>
)}
{assignmentType === 'ausruestung' && (
<Autocomplete
multiple
options={equipmentList}
getOptionLabel={(eq) => eq.bezeichnung ?? String(eq.id)}
value={equipmentList.find((eq) => eq.id === form.ausruestung_id) ?? null}
onChange={(_e, eq) => setForm((f) => ({ ...f, ausruestung_id: eq?.id }))}
value={equipmentList.filter((eq) => form.ausruestung_ids?.includes(eq.id))}
onChange={(_e, vals) => setForm((f) => ({ ...f, ausruestung_ids: vals.map((v) => v.id) }))}
isOptionEqualToValue={(a, b) => a.id === b.id}
renderInput={(params) => <TextField {...params} label="Ausrüstung" />}
/>
)}

353
frontend/src/pages/FahrzeugEinstellungen.tsx
View File

@@ -1,353 +1,4 @@
import { useState } from 'react';
import {
Alert,
Autocomplete,
Box,
Button,
Chip,
CircularProgress,
Container,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Divider,
IconButton,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Typography,
} from '@mui/material';
import {
Add as AddIcon,
Delete as DeleteIcon,
Edit as EditIcon,
Settings,
} from '@mui/icons-material';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { usePermissionContext } from '../contexts/PermissionContext';
import { useNotification } from '../contexts/NotificationContext';
import { fahrzeugTypenApi } from '../services/fahrzeugTypen';
import { vehiclesApi } from '../services/vehicles';
import type { FahrzeugTyp } from '../types/checklist.types';
import { Navigate } from 'react-router-dom';
export default function FahrzeugEinstellungen() {
const queryClient = useQueryClient();
const { hasPermission } = usePermissionContext();
const { showSuccess, showError } = useNotification();
const canEdit = hasPermission('checklisten:manage_templates');
const { data: fahrzeugTypen = [], isLoading } = useQuery({
queryKey: ['fahrzeug-typen'],
queryFn: fahrzeugTypenApi.getAll,
});
const [dialogOpen, setDialogOpen] = useState(false);
const [editing, setEditing] = useState<FahrzeugTyp | null>(null);
const [form, setForm] = useState({ name: '', beschreibung: '', icon: '' });
const [deleteError, setDeleteError] = useState<string | null>(null);
const createMutation = useMutation({
mutationFn: (data: Partial<FahrzeugTyp>) => fahrzeugTypenApi.create(data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['fahrzeug-typen'] });
setDialogOpen(false);
showSuccess('Fahrzeugtyp erstellt');
},
onError: () => showError('Fehler beim Erstellen'),
});
const updateMutation = useMutation({
mutationFn: ({ id, data }: { id: number; data: Partial<FahrzeugTyp> }) =>
fahrzeugTypenApi.update(id, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['fahrzeug-typen'] });
setDialogOpen(false);
showSuccess('Fahrzeugtyp aktualisiert');
},
onError: () => showError('Fehler beim Aktualisieren'),
});
const deleteMutation = useMutation({
mutationFn: (id: number) => fahrzeugTypenApi.delete(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['fahrzeug-typen'] });
setDeleteError(null);
showSuccess('Fahrzeugtyp gelöscht');
},
onError: (err: any) => {
const msg = err?.response?.data?.message || 'Fehler beim Löschen — Typ ist möglicherweise noch in Verwendung.';
setDeleteError(msg);
},
});
const openCreate = () => {
setEditing(null);
setForm({ name: '', beschreibung: '', icon: '' });
setDialogOpen(true);
};
const openEdit = (t: FahrzeugTyp) => {
setEditing(t);
setForm({ name: t.name, beschreibung: t.beschreibung ?? '', icon: t.icon ?? '' });
setDialogOpen(true);
};
const handleSubmit = () => {
if (!form.name.trim()) return;
if (editing) {
updateMutation.mutate({ id: editing.id, data: form });
} else {
createMutation.mutate(form);
}
};
const isSaving = createMutation.isPending || updateMutation.isPending;
if (!canEdit) {
return (
<DashboardLayout>
<Container maxWidth="lg">
<Alert severity="error">Keine Berechtigung für diese Seite.</Alert>
</Container>
</DashboardLayout>
);
}
return (
<DashboardLayout>
<Container maxWidth="lg">
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 3 }}>
<Settings color="action" />
<Typography variant="h4" component="h1">
Fahrzeug-Einstellungen
</Typography>
</Box>
<Typography variant="h6" sx={{ mb: 2 }}>
Fahrzeugtypen
</Typography>
{deleteError && (
<Alert severity="error" sx={{ mb: 2 }} onClose={() => setDeleteError(null)}>
{deleteError}
</Alert>
)}
{isLoading ? (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
<CircularProgress />
</Box>
) : (
<>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
<Button variant="contained" startIcon={<AddIcon />} onClick={openCreate}>
Neuer Fahrzeugtyp
</Button>
</Box>
<TableContainer component={Paper}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Beschreibung</TableCell>
<TableCell>Icon</TableCell>
<TableCell align="right">Aktionen</TableCell>
</TableRow>
</TableHead>
<TableBody>
{fahrzeugTypen.length === 0 ? (
<TableRow>
<TableCell colSpan={4} align="center">
Keine Fahrzeugtypen vorhanden
</TableCell>
</TableRow>
) : (
fahrzeugTypen.map((t) => (
<TableRow key={t.id} hover>
<TableCell>{t.name}</TableCell>
<TableCell>{t.beschreibung ?? '–'}</TableCell>
<TableCell>{t.icon ?? '–'}</TableCell>
<TableCell align="right">
<IconButton size="small" onClick={() => openEdit(t)}>
<EditIcon fontSize="small" />
</IconButton>
<IconButton
size="small"
color="error"
onClick={() => deleteMutation.mutate(t.id)}
>
<DeleteIcon fontSize="small" />
</IconButton>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</TableContainer>
</>
)}
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
<DialogTitle>
{editing ? 'Fahrzeugtyp bearbeiten' : 'Neuer Fahrzeugtyp'}
</DialogTitle>
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
<TextField
label="Name *"
fullWidth
value={form.name}
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
/>
<TextField
label="Beschreibung"
fullWidth
value={form.beschreibung}
onChange={(e) => setForm((f) => ({ ...f, beschreibung: e.target.value }))}
/>
<TextField
label="Icon"
fullWidth
value={form.icon}
onChange={(e) => setForm((f) => ({ ...f, icon: e.target.value }))}
placeholder="z.B. fire_truck"
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setDialogOpen(false)}>Abbrechen</Button>
<Button
variant="contained"
onClick={handleSubmit}
disabled={isSaving || !form.name.trim()}
>
{isSaving ? <CircularProgress size={20} /> : 'Speichern'}
</Button>
</DialogActions>
</Dialog>
<Divider sx={{ my: 4 }} />
<VehicleTypeAssignment allTypes={fahrzeugTypen} />
</Container>
</DashboardLayout>
);
}
// ── Per-vehicle type assignment ────────────────────────────────────────────────
function VehicleTypeAssignment({ allTypes }: { allTypes: FahrzeugTyp[] }) {
const { showSuccess, showError } = useNotification();
const { data: vehicles = [], isLoading } = useQuery({
queryKey: ['vehicles'],
queryFn: vehiclesApi.getAll,
});
const [assignDialog, setAssignDialog] = useState<{ vehicleId: string; vehicleName: string; current: FahrzeugTyp[] } | null>(null);
const [selected, setSelected] = useState<FahrzeugTyp[]>([]);
const [saving, setSaving] = useState(false);
// cache of per-vehicle types: vehicleId → FahrzeugTyp[]
const [vehicleTypesMap, setVehicleTypesMap] = useState<Record<string, FahrzeugTyp[]>>({});
const openAssign = async (vehicleId: string, vehicleName: string) => {
let current = vehicleTypesMap[vehicleId];
if (!current) {
try { current = await fahrzeugTypenApi.getTypesForVehicle(vehicleId); }
catch { current = []; }
setVehicleTypesMap((m) => ({ ...m, [vehicleId]: current }));
}
setSelected(current);
setAssignDialog({ vehicleId, vehicleName, current });
};
const handleSave = async () => {
if (!assignDialog) return;
try {
setSaving(true);
await fahrzeugTypenApi.setTypesForVehicle(assignDialog.vehicleId, selected.map((t) => t.id));
setVehicleTypesMap((m) => ({ ...m, [assignDialog.vehicleId]: selected }));
setAssignDialog(null);
showSuccess('Typen gespeichert');
} catch {
showError('Fehler beim Speichern');
} finally {
setSaving(false);
}
};
return (
<>
<Typography variant="h6" sx={{ mb: 2 }}>Typzuweisung je Fahrzeug</Typography>
{isLoading ? (
<CircularProgress size={24} />
) : (
<TableContainer component={Paper}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>Fahrzeug</TableCell>
<TableCell>Zugewiesene Typen</TableCell>
<TableCell align="right">Aktionen</TableCell>
</TableRow>
</TableHead>
<TableBody>
{vehicles.map((v) => {
const types = vehicleTypesMap[v.id];
return (
<TableRow key={v.id} hover>
<TableCell>{v.bezeichnung ?? v.kurzname}</TableCell>
<TableCell>
{types === undefined ? (
<Typography variant="body2" color="text.disabled">–</Typography>
) : types.length === 0 ? (
<Typography variant="body2" color="text.disabled">Keine</Typography>
) : (
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
{types.map((t) => <Chip key={t.id} label={t.name} size="small" variant="outlined" />)}
</Box>
)}
</TableCell>
<TableCell align="right">
<IconButton size="small" onClick={() => openAssign(v.id, v.bezeichnung ?? v.kurzname ?? v.id)}>
<EditIcon fontSize="small" />
</IconButton>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)}
<Dialog open={!!assignDialog} onClose={() => setAssignDialog(null)} maxWidth="sm" fullWidth>
<DialogTitle>Typen für {assignDialog?.vehicleName}</DialogTitle>
<DialogContent sx={{ mt: 1 }}>
<Autocomplete
multiple
options={allTypes}
getOptionLabel={(o) => o.name}
value={selected}
onChange={(_e, val) => setSelected(val)}
isOptionEqualToValue={(a, b) => a.id === b.id}
renderInput={(params) => <TextField {...params} label="Fahrzeugtypen" />}
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setAssignDialog(null)}>Abbrechen</Button>
<Button variant="contained" onClick={handleSave} disabled={saving}>
{saving ? <CircularProgress size={20} /> : 'Speichern'}
</Button>
</DialogActions>
</Dialog>
</>
);
return <Navigate to="/fahrzeuge?tab=1" replace />;
}

366
frontend/src/pages/Fahrzeuge.tsx
View File

@@ -10,16 +10,33 @@ import {
Chip,
CircularProgress,
Container,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Grid,
IconButton,
InputAdornment,
Paper,
Tab,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Tabs,
TextField,
Tooltip,
Typography,
} from '@mui/material';
import {
Add,
Add as AddIcon,
CheckCircle,
Delete as DeleteIcon,
DirectionsCar,
Edit as EditIcon,
Error as ErrorIcon,
FileDownload,
PauseCircle,
@@ -28,11 +45,13 @@ import {
Warning,
ReportProblem,
} from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import ChatAwareFab from '../components/shared/ChatAwareFab';
import { vehiclesApi } from '../services/vehicles';
import { equipmentApi } from '../services/equipment';
import { fahrzeugTypenApi } from '../services/fahrzeugTypen';
import type { VehicleEquipmentWarning } from '../types/equipment.types';
import { AusruestungStatus, AusruestungStatusLabel } from '../types/equipment.types';
import {
@@ -40,7 +59,10 @@ import {
FahrzeugStatus,
FahrzeugStatusLabel,
} from '../types/vehicle.types';
import type { FahrzeugTyp } from '../types/checklist.types';
import { usePermissions } from '../hooks/usePermissions';
import { usePermissionContext } from '../contexts/PermissionContext';
import { useNotification } from '../contexts/NotificationContext';
// ── Status chip config ────────────────────────────────────────────────────────
@@ -284,17 +306,203 @@ const VehicleCard: React.FC<VehicleCardProps> = ({ vehicle, onClick, warnings =
);
};
// ── Fahrzeugtypen-Verwaltung (Einstellungen Tab) ─────────────────────────────
function FahrzeugTypenSettings() {
const queryClient = useQueryClient();
const { showSuccess, showError } = useNotification();
const { data: fahrzeugTypen = [], isLoading } = useQuery({
queryKey: ['fahrzeug-typen'],
queryFn: fahrzeugTypenApi.getAll,
});
const [dialogOpen, setDialogOpen] = useState(false);
const [editing, setEditing] = useState<FahrzeugTyp | null>(null);
const [form, setForm] = useState({ name: '', beschreibung: '', icon: '' });
const [deleteError, setDeleteError] = useState<string | null>(null);
const createMutation = useMutation({
mutationFn: (data: Partial<FahrzeugTyp>) => fahrzeugTypenApi.create(data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['fahrzeug-typen'] });
setDialogOpen(false);
showSuccess('Fahrzeugtyp erstellt');
},
onError: () => showError('Fehler beim Erstellen'),
});
const updateMutation = useMutation({
mutationFn: ({ id, data }: { id: number; data: Partial<FahrzeugTyp> }) =>
fahrzeugTypenApi.update(id, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['fahrzeug-typen'] });
setDialogOpen(false);
showSuccess('Fahrzeugtyp aktualisiert');
},
onError: () => showError('Fehler beim Aktualisieren'),
});
const deleteMutation = useMutation({
mutationFn: (id: number) => fahrzeugTypenApi.delete(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['fahrzeug-typen'] });
setDeleteError(null);
showSuccess('Fahrzeugtyp gelöscht');
},
onError: (err: any) => {
const msg = err?.response?.data?.message || 'Fehler beim Löschen — Typ ist möglicherweise noch in Verwendung.';
setDeleteError(msg);
},
});
const openCreate = () => {
setEditing(null);
setForm({ name: '', beschreibung: '', icon: '' });
setDialogOpen(true);
};
const openEdit = (t: FahrzeugTyp) => {
setEditing(t);
setForm({ name: t.name, beschreibung: t.beschreibung ?? '', icon: t.icon ?? '' });
setDialogOpen(true);
};
const handleSubmit = () => {
if (!form.name.trim()) return;
if (editing) {
updateMutation.mutate({ id: editing.id, data: form });
} else {
createMutation.mutate(form);
}
};
const isSaving = createMutation.isPending || updateMutation.isPending;
return (
<Box>
<Typography variant="h6" sx={{ mb: 2 }}>
Fahrzeugtypen
</Typography>
{deleteError && (
<Alert severity="error" sx={{ mb: 2 }} onClose={() => setDeleteError(null)}>
{deleteError}
</Alert>
)}
{isLoading ? (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
<CircularProgress />
</Box>
) : (
<>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
<Button variant="contained" startIcon={<AddIcon />} onClick={openCreate}>
Neuer Fahrzeugtyp
</Button>
</Box>
<TableContainer component={Paper}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Beschreibung</TableCell>
<TableCell>Icon</TableCell>
<TableCell align="right">Aktionen</TableCell>
</TableRow>
</TableHead>
<TableBody>
{fahrzeugTypen.length === 0 ? (
<TableRow>
<TableCell colSpan={4} align="center">
Keine Fahrzeugtypen vorhanden
</TableCell>
</TableRow>
) : (
fahrzeugTypen.map((t) => (
<TableRow key={t.id} hover>
<TableCell>{t.name}</TableCell>
<TableCell>{t.beschreibung ?? '–'}</TableCell>
<TableCell>{t.icon ?? '–'}</TableCell>
<TableCell align="right">
<IconButton size="small" onClick={() => openEdit(t)}>
<EditIcon fontSize="small" />
</IconButton>
<IconButton
size="small"
color="error"
onClick={() => deleteMutation.mutate(t.id)}
>
<DeleteIcon fontSize="small" />
</IconButton>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</TableContainer>
</>
)}
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
<DialogTitle>
{editing ? 'Fahrzeugtyp bearbeiten' : 'Neuer Fahrzeugtyp'}
</DialogTitle>
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
<TextField
label="Name *"
fullWidth
value={form.name}
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
/>
<TextField
label="Beschreibung"
fullWidth
value={form.beschreibung}
onChange={(e) => setForm((f) => ({ ...f, beschreibung: e.target.value }))}
/>
<TextField
label="Icon"
fullWidth
value={form.icon}
onChange={(e) => setForm((f) => ({ ...f, icon: e.target.value }))}
placeholder="z.B. fire_truck"
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setDialogOpen(false)}>Abbrechen</Button>
<Button
variant="contained"
onClick={handleSubmit}
disabled={isSaving || !form.name.trim()}
>
{isSaving ? <CircularProgress size={20} /> : 'Speichern'}
</Button>
</DialogActions>
</Dialog>
</Box>
);
}
// ── Main Page ─────────────────────────────────────────────────────────────────
function Fahrzeuge() {
const navigate = useNavigate();
const [searchParams, setSearchParams] = useSearchParams();
const tab = parseInt(searchParams.get('tab') ?? '0', 10);
const { isAdmin } = usePermissions();
const { hasPermission } = usePermissionContext();
const [vehicles, setVehicles] = useState<FahrzeugListItem[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [search, setSearch] = useState('');
const [equipmentWarnings, setEquipmentWarnings] = useState<Map<string, VehicleEquipmentWarning[]>>(new Map());
const canEditSettings = hasPermission('checklisten:manage_templates');
const fetchVehicles = useCallback(async () => {
try {
setLoading(true);
@@ -310,7 +518,6 @@ function Fahrzeuge() {
useEffect(() => { fetchVehicles(); }, [fetchVehicles]);
// Fetch equipment warnings separately — must not block or delay vehicle list rendering
useEffect(() => {
async function fetchWarnings() {
try {
@@ -323,7 +530,6 @@ function Fahrzeuge() {
});
setEquipmentWarnings(warningsMap);
} catch {
// Silently fail — equipment warnings are non-critical
setEquipmentWarnings(new Map());
}
}
@@ -361,7 +567,6 @@ function Fahrzeuge() {
const einsatzbereit = vehicles.filter((v) => v.status === FahrzeugStatus.Einsatzbereit).length;
// An overdue inspection exists if §57a OR Wartung is past due
const hasOverdue = vehicles.some(
(v) =>
(v.paragraph57a_tage_bis_faelligkeit !== null && v.paragraph57a_tage_bis_faelligkeit < 0) ||
@@ -371,7 +576,7 @@ function Fahrzeuge() {
return (
<DashboardLayout>
<Container maxWidth="xl">
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
<Box>
<Typography variant="h4" gutterBottom sx={{ mb: 0 }}>
Fahrzeugverwaltung
@@ -386,82 +591,101 @@ function Fahrzeuge() {
</Typography>
)}
</Box>
<Button
variant="outlined"
size="small"
startIcon={<FileDownload />}
onClick={handleExportAlerts}
>
Prüfungen CSV
</Button>
{tab === 0 && (
<Button
variant="outlined"
size="small"
startIcon={<FileDownload />}
onClick={handleExportAlerts}
>
Prüfungen CSV
</Button>
)}
</Box>
{hasOverdue && (
<Alert severity="error" sx={{ mb: 2 }} icon={<Warning />}>
<strong>Achtung:</strong> Mindestens ein Fahrzeug hat eine überfällige Prüfungs- oder Wartungsfrist.
</Alert>
)}
<Tabs
value={tab}
onChange={(_e, v) => setSearchParams({ tab: String(v) })}
sx={{ mb: 3, borderBottom: 1, borderColor: 'divider' }}
>
<Tab label="Übersicht" />
{canEditSettings && <Tab label="Einstellungen" />}
</Tabs>
<TextField
placeholder="Fahrzeug suchen (Bezeichnung, Kennzeichen, Hersteller…)"
value={search}
onChange={(e) => setSearch(e.target.value)}
fullWidth
size="small"
sx={{ mb: 3, maxWidth: 480 }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search />
</InputAdornment>
),
}}
/>
{tab === 0 && (
<>
{hasOverdue && (
<Alert severity="error" sx={{ mb: 2 }} icon={<Warning />}>
<strong>Achtung:</strong> Mindestens ein Fahrzeug hat eine überfällige Prüfungs- oder Wartungsfrist.
</Alert>
)}
{loading && (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
<CircularProgress />
</Box>
)}
<TextField
placeholder="Fahrzeug suchen (Bezeichnung, Kennzeichen, Hersteller…)"
value={search}
onChange={(e) => setSearch(e.target.value)}
fullWidth
size="small"
sx={{ mb: 3, maxWidth: 480 }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search />
</InputAdornment>
),
}}
/>
{!loading && error && (
<Alert severity="error" sx={{ mb: 2 }}>
{error}
</Alert>
)}
{loading && (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
<CircularProgress />
</Box>
)}
{!loading && !error && filtered.length === 0 && (
<Box sx={{ textAlign: 'center', py: 8 }}>
<DirectionsCar sx={{ fontSize: 64, color: 'text.disabled', mb: 2 }} />
<Typography variant="h6" color="text.secondary">
{vehicles.length === 0
? 'Noch keine Fahrzeuge erfasst'
: 'Kein Fahrzeug entspricht dem Suchbegriff'}
</Typography>
</Box>
)}
{!loading && error && (
<Alert severity="error" sx={{ mb: 2 }}>
{error}
</Alert>
)}
{!loading && !error && filtered.length > 0 && (
<Grid container spacing={3}>
{filtered.map((vehicle) => (
<Grid item key={vehicle.id} xs={12} sm={6} md={4} lg={3}>
<VehicleCard
vehicle={vehicle}
onClick={(id) => navigate(`/fahrzeuge/${id}`)}
warnings={equipmentWarnings.get(vehicle.id) || []}
/>
{!loading && !error && filtered.length === 0 && (
<Box sx={{ textAlign: 'center', py: 8 }}>
<DirectionsCar sx={{ fontSize: 64, color: 'text.disabled', mb: 2 }} />
<Typography variant="h6" color="text.secondary">
{vehicles.length === 0
? 'Noch keine Fahrzeuge erfasst'
: 'Kein Fahrzeug entspricht dem Suchbegriff'}
</Typography>
</Box>
)}
{!loading && !error && filtered.length > 0 && (
<Grid container spacing={3}>
{filtered.map((vehicle) => (
<Grid item key={vehicle.id} xs={12} sm={6} md={4} lg={3}>
<VehicleCard
vehicle={vehicle}
onClick={(id) => navigate(`/fahrzeuge/${id}`)}
warnings={equipmentWarnings.get(vehicle.id) || []}
/>
</Grid>
))}
</Grid>
))}
</Grid>
)}
{isAdmin && (
<ChatAwareFab
aria-label="Fahrzeug hinzufügen"
onClick={() => navigate('/fahrzeuge/neu')}
>
<Add />
</ChatAwareFab>
)}
</>
)}
{isAdmin && (
<ChatAwareFab
aria-label="Fahrzeug hinzufügen"
onClick={() => navigate('/fahrzeuge/neu')}
>
<Add />
</ChatAwareFab>
{tab === 1 && canEditSettings && (
<FahrzeugTypenSettings />
)}
</Container>
</DashboardLayout>

1
frontend/src/services/checklisten.ts
View File

@@ -27,7 +27,6 @@ export const checklistenApi = {
// ── Vorlagen (Templates) ──
getVorlagen: async (filter?: ChecklistVorlageFilter): Promise<ChecklistVorlage[]> => {
const params = new URLSearchParams();
if (filter?.fahrzeug_typ_id != null) params.set('fahrzeug_typ_id', String(filter.fahrzeug_typ_id));
if (filter?.aktiv != null) params.set('aktiv', String(filter.aktiv));
const qs = params.toString();
const r = await api.get(`/api/checklisten/vorlagen${qs ? `?${qs}` : ''}`);

33
frontend/src/types/checklist.types.ts
View File

@@ -26,14 +26,14 @@ export interface AusruestungTyp {
export interface ChecklistVorlage {
id: number;
name: string;
fahrzeug_typ_id?: number;
fahrzeug_typ?: FahrzeugTyp;
fahrzeug_id?: string;
fahrzeug_name?: string;
ausruestung_id?: string;
ausruestung_name?: string;
ausruestung_typ_id?: number;
ausruestung_typ?: string;
fahrzeug_typ_ids?: number[];
fahrzeug_ids?: string[];
ausruestung_typ_ids?: number[];
ausruestung_ids?: string[];
fahrzeug_typ_names?: string[];
fahrzeug_names?: string[];
ausruestung_typ_names?: string[];
ausruestung_names?: string[];
intervall?: 'weekly' | 'monthly' | 'quarterly' | 'halfyearly' | 'yearly' | 'custom' | null;
intervall_tage?: number;
beschreibung?: string;
@@ -114,7 +114,6 @@ export const CHECKLIST_STATUS_COLORS: Record<ChecklistAusfuehrungStatus, 'defaul
};
export interface ChecklistVorlageFilter {
fahrzeug_typ_id?: number;
aktiv?: boolean;
}
@@ -126,10 +125,10 @@ export interface ChecklistAusfuehrungFilter {
export interface CreateVorlagePayload {
name: string;
fahrzeug_typ_id?: number | null;
fahrzeug_id?: string | null;
ausruestung_typ_id?: number | null;
ausruestung_id?: string | null;
fahrzeug_typ_ids?: number[];
fahrzeug_ids?: string[];
ausruestung_typ_ids?: number[];
ausruestung_ids?: string[];
intervall?: 'weekly' | 'monthly' | 'quarterly' | 'halfyearly' | 'yearly' | 'custom' | null;
intervall_tage?: number | null;
beschreibung?: string | null;
@@ -138,10 +137,10 @@ export interface CreateVorlagePayload {
export interface UpdateVorlagePayload {
name?: string;
fahrzeug_typ_id?: number | null;
fahrzeug_id?: string | null;
ausruestung_typ_id?: number | null;
ausruestung_id?: string | null;
fahrzeug_typ_ids?: number[];
fahrzeug_ids?: string[];
ausruestung_typ_ids?: number[];
ausruestung_ids?: string[];
intervall?: 'weekly' | 'monthly' | 'quarterly' | 'halfyearly' | 'yearly' | 'custom' | null;
intervall_tage?: number | null;
beschreibung?: string | null;