refine vehicle freatures
This commit is contained in:
Matthias Hochmeister
762
frontend/src/pages/AusruestungDetail.tsx
Normal file
762
frontend/src/pages/AusruestungDetail.tsx
Normal file
@@ -0,0 +1,762 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Container,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogTitle,
|
||||
Divider,
|
||||
Fab,
|
||||
FormControl,
|
||||
Grid,
|
||||
IconButton,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
Tab,
|
||||
Tabs,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Add,
|
||||
ArrowBack,
|
||||
Build,
|
||||
CheckCircle,
|
||||
DeleteOutline,
|
||||
Edit,
|
||||
Error as ErrorIcon,
|
||||
MoreHoriz,
|
||||
PauseCircle,
|
||||
RemoveCircle,
|
||||
Star,
|
||||
Verified,
|
||||
Warning,
|
||||
} from '@mui/icons-material';
|
||||
import { Link as RouterLink, useNavigate, useParams } from 'react-router-dom';
|
||||
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||
import { equipmentApi } from '../services/equipment';
|
||||
import {
|
||||
AusruestungDetail,
|
||||
AusruestungWartungslog,
|
||||
AusruestungWartungslogArt,
|
||||
AusruestungStatus,
|
||||
AusruestungStatusLabel,
|
||||
UpdateAusruestungStatusPayload,
|
||||
CreateAusruestungWartungslogPayload,
|
||||
} from '../types/equipment.types';
|
||||
import { usePermissions } from '../hooks/usePermissions';
|
||||
import { useNotification } from '../contexts/NotificationContext';
|
||||
|
||||
// -- Tab Panel ----------------------------------------------------------------
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
index: number;
|
||||
value: number;
|
||||
}
|
||||
|
||||
const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => (
|
||||
<div role="tabpanel" hidden={value !== index}>
|
||||
{value === index && <Box sx={{ pt: 3 }}>{children}</Box>}
|
||||
</div>
|
||||
);
|
||||
|
||||
// -- Status config ------------------------------------------------------------
|
||||
|
||||
const STATUS_ICONS: Record<AusruestungStatus, React.ReactElement> = {
|
||||
[AusruestungStatus.Einsatzbereit]: <CheckCircle color="success" />,
|
||||
[AusruestungStatus.Beschaedigt]: <ErrorIcon color="error" />,
|
||||
[AusruestungStatus.InWartung]: <PauseCircle color="warning" />,
|
||||
[AusruestungStatus.AusserDienst]: <RemoveCircle color="action" />,
|
||||
};
|
||||
|
||||
const STATUS_CHIP_COLOR: Record<AusruestungStatus, 'success' | 'error' | 'warning' | 'default'> = {
|
||||
[AusruestungStatus.Einsatzbereit]: 'success',
|
||||
[AusruestungStatus.Beschaedigt]: 'error',
|
||||
[AusruestungStatus.InWartung]: 'warning',
|
||||
[AusruestungStatus.AusserDienst]: 'default',
|
||||
};
|
||||
|
||||
// -- Date helpers -------------------------------------------------------------
|
||||
|
||||
function fmtDate(iso: string | null | undefined): string {
|
||||
if (!iso) return '---';
|
||||
return new Date(iso).toLocaleDateString('de-DE', {
|
||||
day: '2-digit', month: '2-digit', year: 'numeric',
|
||||
});
|
||||
}
|
||||
|
||||
// -- Wartungslog Art config ---------------------------------------------------
|
||||
|
||||
const WARTUNG_ART_CHIP_COLOR: Record<AusruestungWartungslogArt, 'info' | 'warning' | 'default'> = {
|
||||
'Prüfung': 'info',
|
||||
'Reparatur': 'warning',
|
||||
'Sonstiges': 'default',
|
||||
};
|
||||
|
||||
const WARTUNG_ART_ICONS: Record<string, React.ReactElement> = {
|
||||
'Prüfung': <Verified color="info" />,
|
||||
'Reparatur': <Build color="warning" />,
|
||||
'Sonstiges': <MoreHoriz color="action" />,
|
||||
default: <Build color="action" />,
|
||||
};
|
||||
|
||||
const ERGEBNIS_CHIP_COLOR: Record<string, 'success' | 'warning' | 'error'> = {
|
||||
bestanden: 'success',
|
||||
bestanden_mit_maengeln: 'warning',
|
||||
nicht_bestanden: 'error',
|
||||
};
|
||||
|
||||
const ERGEBNIS_LABEL: Record<string, string> = {
|
||||
bestanden: 'Bestanden',
|
||||
bestanden_mit_maengeln: 'Bestanden (mit Mängeln)',
|
||||
nicht_bestanden: 'Nicht bestanden',
|
||||
};
|
||||
|
||||
// -- Uebersicht Tab -----------------------------------------------------------
|
||||
|
||||
interface UebersichtTabProps {
|
||||
equipment: AusruestungDetail;
|
||||
onStatusUpdated: () => void;
|
||||
canChangeStatus: boolean;
|
||||
}
|
||||
|
||||
const UebersichtTab: React.FC<UebersichtTabProps> = ({ equipment, onStatusUpdated, canChangeStatus }) => {
|
||||
const [statusDialogOpen, setStatusDialogOpen] = useState(false);
|
||||
const [newStatus, setNewStatus] = useState<AusruestungStatus>(equipment.status);
|
||||
const [bemerkung, setBemerkung] = useState(equipment.status_bemerkung ?? '');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
|
||||
const openDialog = () => {
|
||||
setNewStatus(equipment.status);
|
||||
setBemerkung(equipment.status_bemerkung ?? '');
|
||||
setSaveError(null);
|
||||
setStatusDialogOpen(true);
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
setSaveError(null);
|
||||
setStatusDialogOpen(false);
|
||||
};
|
||||
|
||||
const handleSaveStatus = async () => {
|
||||
try {
|
||||
setSaving(true);
|
||||
setSaveError(null);
|
||||
const payload: UpdateAusruestungStatusPayload = { status: newStatus, bemerkung };
|
||||
await equipmentApi.updateStatus(equipment.id, payload);
|
||||
setStatusDialogOpen(false);
|
||||
onStatusUpdated();
|
||||
} catch {
|
||||
setSaveError('Status konnte nicht gespeichert werden.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const isBeschaedigt = equipment.status === AusruestungStatus.Beschaedigt;
|
||||
|
||||
// Inspection deadline
|
||||
const pruefTage = equipment.pruefung_tage_bis_faelligkeit;
|
||||
|
||||
// Data grid fields
|
||||
const dataFields: { label: string; value: React.ReactNode }[] = [
|
||||
{ label: 'Kategorie', value: equipment.kategorie_name },
|
||||
{ label: 'Seriennummer', value: equipment.seriennummer ?? '---' },
|
||||
{ label: 'Inventarnummer', value: equipment.inventarnummer ?? '---' },
|
||||
{ label: 'Hersteller', value: equipment.hersteller ?? '---' },
|
||||
{ label: 'Baujahr', value: equipment.baujahr ?? '---' },
|
||||
{
|
||||
label: 'Fahrzeug',
|
||||
value: equipment.fahrzeug_id ? (
|
||||
<Typography
|
||||
component={RouterLink}
|
||||
to={`/fahrzeuge/${equipment.fahrzeug_id}`}
|
||||
variant="body1"
|
||||
sx={{ color: 'primary.main', textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }}
|
||||
>
|
||||
{equipment.fahrzeug_bezeichnung}
|
||||
</Typography>
|
||||
) : '---',
|
||||
},
|
||||
...(!equipment.fahrzeug_id ? [{ label: 'Standort', value: equipment.standort || '---' }] : []),
|
||||
{
|
||||
label: 'Wichtig',
|
||||
value: equipment.ist_wichtig ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Star fontSize="small" color="warning" /> Ja
|
||||
</Box>
|
||||
) : 'Nein',
|
||||
},
|
||||
{
|
||||
label: 'Prüfintervall',
|
||||
value: equipment.pruef_intervall_monate
|
||||
? `${equipment.pruef_intervall_monate} Monate`
|
||||
: '---',
|
||||
},
|
||||
{ label: 'Letzte Prüfung', value: fmtDate(equipment.letzte_pruefung_am) },
|
||||
{
|
||||
label: 'Nächste Prüfung',
|
||||
value: equipment.naechste_pruefung_am ? (
|
||||
<Box>
|
||||
<Typography variant="body1">{fmtDate(equipment.naechste_pruefung_am)}</Typography>
|
||||
{pruefTage !== null && pruefTage < 0 && (
|
||||
<Chip
|
||||
size="small"
|
||||
color="error"
|
||||
icon={<Warning fontSize="small" />}
|
||||
label={`${Math.abs(pruefTage)} Tage überfällig`}
|
||||
sx={{ mt: 0.5 }}
|
||||
/>
|
||||
)}
|
||||
{pruefTage !== null && pruefTage >= 0 && pruefTage <= 30 && (
|
||||
<Chip
|
||||
size="small"
|
||||
color="warning"
|
||||
label={`in ${pruefTage} Tagen`}
|
||||
sx={{ mt: 0.5 }}
|
||||
/>
|
||||
)}
|
||||
{pruefTage !== null && pruefTage > 30 && (
|
||||
<Chip
|
||||
size="small"
|
||||
color="success"
|
||||
label={`in ${pruefTage} Tagen`}
|
||||
sx={{ mt: 0.5 }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
<Chip size="small" color="default" label="Nicht festgelegt" />
|
||||
),
|
||||
},
|
||||
{ label: 'Bemerkung', value: equipment.bemerkung ?? '---' },
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{isBeschaedigt && (
|
||||
<Alert severity="error" icon={<ErrorIcon />} sx={{ mb: 2 }}>
|
||||
<strong>Beschädigt</strong> --- dieses Gerät ist nicht einsatzbereit.
|
||||
{equipment.status_bemerkung && ` Bemerkung: ${equipment.status_bemerkung}`}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Status panel */}
|
||||
<Paper variant="outlined" sx={{ p: 2, mb: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
{STATUS_ICONS[equipment.status]}
|
||||
<Box>
|
||||
<Typography variant="subtitle1" fontWeight={600}>Aktueller Status</Typography>
|
||||
<Chip
|
||||
label={AusruestungStatusLabel[equipment.status]}
|
||||
color={STATUS_CHIP_COLOR[equipment.status]}
|
||||
size="small"
|
||||
/>
|
||||
{equipment.status_bemerkung && (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
|
||||
{equipment.status_bemerkung}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
{canChangeStatus && (
|
||||
<Button variant="outlined" size="small" onClick={openDialog}>
|
||||
Status ändern
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Equipment data grid */}
|
||||
<Grid container spacing={2}>
|
||||
{dataFields.map(({ label, value }) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={label}>
|
||||
<Typography variant="caption" color="text.secondary" textTransform="uppercase">
|
||||
{label}
|
||||
</Typography>
|
||||
{typeof value === 'string' || typeof value === 'number' ? (
|
||||
<Typography variant="body1">{value}</Typography>
|
||||
) : (
|
||||
<Box>{value}</Box>
|
||||
)}
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Status change dialog */}
|
||||
<Dialog open={statusDialogOpen} onClose={closeDialog} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Gerätestatus ändern</DialogTitle>
|
||||
<DialogContent>
|
||||
{saveError && <Alert severity="error" sx={{ mb: 2 }}>{saveError}</Alert>}
|
||||
<FormControl fullWidth sx={{ mb: 2, mt: 1 }}>
|
||||
<InputLabel id="status-select-label">Neuer Status</InputLabel>
|
||||
<Select
|
||||
labelId="status-select-label"
|
||||
label="Neuer Status"
|
||||
value={newStatus}
|
||||
onChange={(e) => setNewStatus(e.target.value as AusruestungStatus)}
|
||||
>
|
||||
{Object.values(AusruestungStatus).map((s) => (
|
||||
<MenuItem key={s} value={s}>{AusruestungStatusLabel[s]}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
label="Bemerkung (optional)"
|
||||
fullWidth
|
||||
multiline
|
||||
rows={3}
|
||||
value={bemerkung}
|
||||
onChange={(e) => setBemerkung(e.target.value)}
|
||||
placeholder="z.B. Gerät zur Reparatur eingeschickt, voraussichtlich ab 01.03. wieder einsatzbereit"
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={closeDialog}>Abbrechen</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleSaveStatus}
|
||||
disabled={saving}
|
||||
startIcon={saving ? <CircularProgress size={16} /> : undefined}
|
||||
>
|
||||
Speichern
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
// -- Wartung Tab --------------------------------------------------------------
|
||||
|
||||
interface WartungTabProps {
|
||||
equipmentId: string;
|
||||
wartungslog: AusruestungWartungslog[];
|
||||
onAdded: () => void;
|
||||
canWrite: boolean;
|
||||
}
|
||||
|
||||
const WartungTab: React.FC<WartungTabProps> = ({ equipmentId, wartungslog, onAdded, canWrite }) => {
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
|
||||
const emptyForm: CreateAusruestungWartungslogPayload = {
|
||||
datum: '',
|
||||
art: 'Prüfung' as AusruestungWartungslogArt,
|
||||
beschreibung: '',
|
||||
ergebnis: undefined,
|
||||
kosten: undefined,
|
||||
pruefende_stelle: undefined,
|
||||
};
|
||||
|
||||
const [form, setForm] = useState<CreateAusruestungWartungslogPayload>(emptyForm);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!form.datum || !form.art || !form.beschreibung.trim()) {
|
||||
setSaveError('Datum, Art und Beschreibung sind erforderlich.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setSaving(true);
|
||||
setSaveError(null);
|
||||
await equipmentApi.addWartungslog(equipmentId, {
|
||||
...form,
|
||||
pruefende_stelle: form.pruefende_stelle || undefined,
|
||||
ergebnis: form.ergebnis || undefined,
|
||||
});
|
||||
setDialogOpen(false);
|
||||
setForm(emptyForm);
|
||||
onAdded();
|
||||
} catch {
|
||||
setSaveError('Wartungseintrag konnte nicht gespeichert werden.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Sort wartungslog by datum DESC
|
||||
const sorted = [...wartungslog].sort(
|
||||
(a, b) => new Date(b.datum).getTime() - new Date(a.datum).getTime()
|
||||
);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{sorted.length === 0 ? (
|
||||
<Typography color="text.secondary">Keine Wartungseinträge vorhanden.</Typography>
|
||||
) : (
|
||||
<Stack divider={<Divider />} spacing={0}>
|
||||
{sorted.map((entry) => {
|
||||
const artIcon = WARTUNG_ART_ICONS[entry.art ?? ''] ?? WARTUNG_ART_ICONS.default;
|
||||
const ergebnisColor = entry.ergebnis ? ERGEBNIS_CHIP_COLOR[entry.ergebnis] : undefined;
|
||||
const ergebnisLabel = entry.ergebnis ? ERGEBNIS_LABEL[entry.ergebnis] : undefined;
|
||||
return (
|
||||
<Box key={entry.id} sx={{ py: 2, display: 'flex', gap: 2, alignItems: 'flex-start' }}>
|
||||
<Box sx={{ mt: 0.25 }}>{artIcon}</Box>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25, flexWrap: 'wrap' }}>
|
||||
<Typography variant="subtitle2">{fmtDate(entry.datum)}</Typography>
|
||||
{entry.art && (
|
||||
<Chip
|
||||
label={entry.art}
|
||||
size="small"
|
||||
color={WARTUNG_ART_CHIP_COLOR[entry.art] ?? 'default'}
|
||||
variant="outlined"
|
||||
/>
|
||||
)}
|
||||
{ergebnisLabel && ergebnisColor && (
|
||||
<Chip
|
||||
label={ergebnisLabel}
|
||||
size="small"
|
||||
color={ergebnisColor}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<Typography variant="body2">{entry.beschreibung}</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.25 }}>
|
||||
{[
|
||||
entry.kosten != null && `${entry.kosten.toFixed(2)} EUR`,
|
||||
entry.pruefende_stelle && entry.pruefende_stelle,
|
||||
].filter(Boolean).join(' · ')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{canWrite && (
|
||||
<Fab
|
||||
color="primary"
|
||||
size="small"
|
||||
aria-label="Wartung eintragen"
|
||||
sx={{ position: 'fixed', bottom: 32, right: 32 }}
|
||||
onClick={() => { setForm(emptyForm); setSaveError(null); setDialogOpen(true); }}
|
||||
>
|
||||
<Add />
|
||||
</Fab>
|
||||
)}
|
||||
|
||||
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Wartung / Prüfung eintragen</DialogTitle>
|
||||
<DialogContent>
|
||||
{saveError && <Alert severity="error" sx={{ mb: 2 }}>{saveError}</Alert>}
|
||||
<Grid container spacing={2} sx={{ mt: 0.5 }}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
label="Datum *"
|
||||
type="date"
|
||||
fullWidth
|
||||
value={form.datum}
|
||||
onChange={(e) => setForm((f) => ({ ...f, datum: e.target.value }))}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Art *</InputLabel>
|
||||
<Select
|
||||
label="Art *"
|
||||
value={form.art ?? ''}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({
|
||||
...f,
|
||||
art: (e.target.value || undefined) as AusruestungWartungslogArt,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<MenuItem value="">--- Bitte wählen ---</MenuItem>
|
||||
{(['Prüfung', 'Reparatur', 'Sonstiges'] as AusruestungWartungslogArt[]).map((a) => (
|
||||
<MenuItem key={a} value={a}>{a}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
label="Beschreibung *"
|
||||
fullWidth
|
||||
multiline
|
||||
rows={3}
|
||||
value={form.beschreibung}
|
||||
onChange={(e) => setForm((f) => ({ ...f, beschreibung: e.target.value }))}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Ergebnis</InputLabel>
|
||||
<Select
|
||||
label="Ergebnis"
|
||||
value={form.ergebnis ?? ''}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({
|
||||
...f,
|
||||
ergebnis: e.target.value || undefined,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<MenuItem value="">--- Kein Ergebnis ---</MenuItem>
|
||||
<MenuItem value="bestanden">Bestanden</MenuItem>
|
||||
<MenuItem value="bestanden_mit_maengeln">Bestanden (mit Mängeln)</MenuItem>
|
||||
<MenuItem value="nicht_bestanden">Nicht bestanden</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
label="Kosten (EUR)"
|
||||
type="number"
|
||||
fullWidth
|
||||
value={form.kosten ?? ''}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({
|
||||
...f,
|
||||
kosten: e.target.value ? Number(e.target.value) : undefined,
|
||||
}))
|
||||
}
|
||||
inputProps={{ min: 0, step: 0.01 }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
label="Prüfende Stelle"
|
||||
fullWidth
|
||||
value={form.pruefende_stelle ?? ''}
|
||||
onChange={(e) => setForm((f) => ({ ...f, pruefende_stelle: e.target.value }))}
|
||||
placeholder="Name der prüfenden Stelle oder Person"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDialogOpen(false)}>Abbrechen</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleSubmit}
|
||||
disabled={saving}
|
||||
startIcon={saving ? <CircularProgress size={16} /> : undefined}
|
||||
>
|
||||
Speichern
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
// -- Main Page ----------------------------------------------------------------
|
||||
|
||||
function AusruestungDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { isAdmin, canChangeStatus } = usePermissions();
|
||||
const notification = useNotification();
|
||||
|
||||
const [equipment, setEquipment] = useState<AusruestungDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [deleteLoading, setDeleteLoading] = useState(false);
|
||||
|
||||
const fetchEquipment = useCallback(async () => {
|
||||
if (!id) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const data = await equipmentApi.getById(id);
|
||||
setEquipment(data);
|
||||
} catch {
|
||||
setError('Gerät konnte nicht geladen werden.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => { fetchEquipment(); }, [fetchEquipment]);
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!id) return;
|
||||
try {
|
||||
setDeleteLoading(true);
|
||||
await equipmentApi.delete(id);
|
||||
notification.showSuccess('Gerät wurde erfolgreich gelöscht.');
|
||||
navigate('/ausruestung');
|
||||
} catch {
|
||||
notification.showError('Gerät konnte nicht gelöscht werden.');
|
||||
setDeleteDialogOpen(false);
|
||||
setDeleteLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !equipment) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Container maxWidth="lg">
|
||||
<Alert severity="error">{error ?? 'Gerät nicht gefunden.'}</Alert>
|
||||
<Button startIcon={<ArrowBack />} onClick={() => navigate('/ausruestung')} sx={{ mt: 2 }}>
|
||||
Zurück zur Übersicht
|
||||
</Button>
|
||||
</Container>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
const hasOverdue =
|
||||
equipment.pruefung_tage_bis_faelligkeit !== null &&
|
||||
equipment.pruefung_tage_bis_faelligkeit < 0;
|
||||
|
||||
const subtitle = [
|
||||
equipment.kategorie_name,
|
||||
equipment.seriennummer ? `SN: ${equipment.seriennummer}` : null,
|
||||
].filter(Boolean).join(' · ');
|
||||
|
||||
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', gap: 2, mb: 1 }}>
|
||||
<Build sx={{ fontSize: 36, color: 'text.secondary' }} />
|
||||
<Box>
|
||||
<Typography variant="h4" component="h1">
|
||||
{equipment.bezeichnung}
|
||||
</Typography>
|
||||
{subtitle && (
|
||||
<Typography variant="subtitle1" color="text.secondary">
|
||||
{subtitle}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Chip
|
||||
icon={STATUS_ICONS[equipment.status]}
|
||||
label={AusruestungStatusLabel[equipment.status]}
|
||||
color={STATUS_CHIP_COLOR[equipment.status]}
|
||||
/>
|
||||
{canChangeStatus && (
|
||||
<Tooltip title="Gerät bearbeiten">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => navigate(`/ausruestung/${equipment.id}/bearbeiten`)}
|
||||
aria-label="Gerät bearbeiten"
|
||||
>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<Tooltip title="Gerät löschen">
|
||||
<IconButton
|
||||
size="small"
|
||||
color="error"
|
||||
onClick={() => setDeleteDialogOpen(true)}
|
||||
aria-label="Gerät löschen"
|
||||
>
|
||||
<DeleteOutline />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider', mt: 2 }}>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(_, v) => setActiveTab(v)}
|
||||
aria-label="Ausrüstung Detailansicht"
|
||||
>
|
||||
<Tab label="Übersicht" />
|
||||
<Tab
|
||||
label={
|
||||
hasOverdue
|
||||
? <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
Wartung <Warning color="error" fontSize="small" />
|
||||
</Box>
|
||||
: 'Wartung'
|
||||
}
|
||||
/>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
<TabPanel value={activeTab} index={0}>
|
||||
<UebersichtTab
|
||||
equipment={equipment}
|
||||
onStatusUpdated={fetchEquipment}
|
||||
canChangeStatus={canChangeStatus}
|
||||
/>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={activeTab} index={1}>
|
||||
<WartungTab
|
||||
equipmentId={equipment.id}
|
||||
wartungslog={equipment.wartungslog ?? []}
|
||||
onAdded={fetchEquipment}
|
||||
canWrite={canChangeStatus}
|
||||
/>
|
||||
</TabPanel>
|
||||
|
||||
{/* Delete confirmation dialog */}
|
||||
<Dialog open={deleteDialogOpen} onClose={() => !deleteLoading && setDeleteDialogOpen(false)}>
|
||||
<DialogTitle>Gerät löschen</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Möchten Sie '{equipment.bezeichnung}' wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={() => setDeleteDialogOpen(false)}
|
||||
disabled={deleteLoading}
|
||||
autoFocus
|
||||
>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button
|
||||
color="error"
|
||||
variant="contained"
|
||||
onClick={handleDelete}
|
||||
disabled={deleteLoading}
|
||||
startIcon={deleteLoading ? <CircularProgress size={16} /> : undefined}
|
||||
>
|
||||
Löschen
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Container>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default AusruestungDetailPage;
|
||||
Reference in New Issue
Block a user