feat: add issue kanban/attachments/deadlines, dashboard widget DnD, and checklisten system
This commit is contained in:
Matthias Hochmeister
314
frontend/src/pages/ChecklistAusfuehrung.tsx
Normal file
314
frontend/src/pages/ChecklistAusfuehrung.tsx
Normal file
@@ -0,0 +1,314 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Divider,
|
||||
Paper,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
FormControlLabel,
|
||||
TextField,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { ArrowBack, CheckCircle, Cancel, RemoveCircle } from '@mui/icons-material';
|
||||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||
import { usePermissionContext } from '../contexts/PermissionContext';
|
||||
import { useNotification } from '../contexts/NotificationContext';
|
||||
import { checklistenApi } from '../services/checklisten';
|
||||
import { CHECKLIST_STATUS_LABELS, CHECKLIST_STATUS_COLORS } from '../types/checklist.types';
|
||||
import type { ChecklistAusfuehrungItem } from '../types/checklist.types';
|
||||
|
||||
// ── Helpers ──
|
||||
|
||||
const formatDate = (iso?: string) =>
|
||||
iso ? new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '\u2013';
|
||||
|
||||
const ERGEBNIS_ICONS: Record<string, JSX.Element> = {
|
||||
ok: <CheckCircle fontSize="small" color="success" />,
|
||||
nok: <Cancel fontSize="small" color="error" />,
|
||||
na: <RemoveCircle fontSize="small" color="disabled" />,
|
||||
};
|
||||
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
// Component
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
export default function ChecklistAusfuehrung() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { hasPermission } = usePermissionContext();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
|
||||
const isNew = id === 'new';
|
||||
const canApprove = hasPermission('checklisten:approve');
|
||||
|
||||
// ── Start new execution ──
|
||||
const [startingExecution, setStartingExecution] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isNew || startingExecution) return;
|
||||
const fahrzeugId = searchParams.get('fahrzeug');
|
||||
const vorlageId = searchParams.get('vorlage');
|
||||
if (!fahrzeugId || !vorlageId) {
|
||||
showError('Fahrzeug und Vorlage sind erforderlich');
|
||||
navigate('/checklisten');
|
||||
return;
|
||||
}
|
||||
setStartingExecution(true);
|
||||
checklistenApi.startExecution(fahrzeugId, Number(vorlageId))
|
||||
.then((exec) => navigate(`/checklisten/ausfuehrung/${exec.id}`, { replace: true }))
|
||||
.catch(() => { showError('Checkliste konnte nicht gestartet werden'); navigate('/checklisten'); });
|
||||
}, [isNew, searchParams, navigate, showError, startingExecution]);
|
||||
|
||||
// ── Fetch existing execution ──
|
||||
const { data: execution, isLoading, isError } = useQuery({
|
||||
queryKey: ['checklisten-ausfuehrung', id],
|
||||
queryFn: () => checklistenApi.getExecution(id!),
|
||||
enabled: !isNew && !!id,
|
||||
});
|
||||
|
||||
// ── Item state ──
|
||||
const [itemResults, setItemResults] = useState<Record<number, { ergebnis: 'ok' | 'nok' | 'na'; kommentar: string }>>({});
|
||||
const [notizen, setNotizen] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!execution?.items) return;
|
||||
const results: Record<number, { ergebnis: 'ok' | 'nok' | 'na'; kommentar: string }> = {};
|
||||
for (const item of execution.items) {
|
||||
results[item.id] = { ergebnis: item.ergebnis ?? 'ok', kommentar: item.kommentar ?? '' };
|
||||
}
|
||||
setItemResults(results);
|
||||
setNotizen(execution.notizen ?? '');
|
||||
}, [execution]);
|
||||
|
||||
const setItemResult = (itemId: number, ergebnis: 'ok' | 'nok' | 'na') => {
|
||||
setItemResults((prev) => ({ ...prev, [itemId]: { ...prev[itemId], ergebnis } }));
|
||||
};
|
||||
|
||||
const setItemComment = (itemId: number, kommentar: string) => {
|
||||
setItemResults((prev) => ({ ...prev, [itemId]: { ...prev[itemId], kommentar } }));
|
||||
};
|
||||
|
||||
// ── Submit ──
|
||||
const submitMutation = useMutation({
|
||||
mutationFn: () => checklistenApi.submitExecution(id!, {
|
||||
items: Object.entries(itemResults).map(([itemId, r]) => ({ itemId: Number(itemId), ergebnis: r.ergebnis, kommentar: r.kommentar || undefined })),
|
||||
notizen: notizen || undefined,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['checklisten-ausfuehrung', id] });
|
||||
queryClient.invalidateQueries({ queryKey: ['checklisten-ausfuehrungen'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['checklisten-faellig'] });
|
||||
showSuccess('Checkliste abgeschlossen');
|
||||
},
|
||||
onError: () => showError('Fehler beim Abschlie\u00dfen'),
|
||||
});
|
||||
|
||||
// ── Approve ──
|
||||
const approveMutation = useMutation({
|
||||
mutationFn: () => checklistenApi.approveExecution(id!),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['checklisten-ausfuehrung', id] });
|
||||
queryClient.invalidateQueries({ queryKey: ['checklisten-ausfuehrungen'] });
|
||||
showSuccess('Checkliste freigegeben');
|
||||
},
|
||||
onError: () => showError('Fehler bei der Freigabe'),
|
||||
});
|
||||
|
||||
// ── Loading states ──
|
||||
if (isNew || startingExecution) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}><CircularProgress /></Box>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}><CircularProgress /></Box>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError || !execution) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Alert severity="error">Checkliste konnte nicht geladen werden.</Alert>
|
||||
<Button startIcon={<ArrowBack />} onClick={() => navigate('/checklisten')} sx={{ mt: 2 }}>Zur\u00fcck</Button>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
const isReadOnly = execution.status === 'abgeschlossen' || execution.status === 'freigegeben';
|
||||
const items = execution.items ?? [];
|
||||
const vorlageItems = items.filter((i) => i.vorlage_item_id != null);
|
||||
const vehicleItems = items.filter((i) => i.fahrzeug_item_id != null);
|
||||
|
||||
const renderItemGroup = (groupItems: ChecklistAusfuehrungItem[], title: string) => {
|
||||
if (groupItems.length === 0) return null;
|
||||
return (
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 1 }}>{title}</Typography>
|
||||
{groupItems.map((item) => {
|
||||
const result = itemResults[item.id];
|
||||
return (
|
||||
<Paper key={item.id} variant="outlined" sx={{ p: 2, mb: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 500, flexGrow: 1 }}>
|
||||
{item.bezeichnung}
|
||||
{/* Indicate pflicht with asterisk - we don't have pflicht on ausfuehrung items directly but could check */}
|
||||
</Typography>
|
||||
{isReadOnly && result?.ergebnis && ERGEBNIS_ICONS[result.ergebnis]}
|
||||
</Box>
|
||||
{isReadOnly ? (
|
||||
<Box>
|
||||
<Chip
|
||||
label={result?.ergebnis === 'ok' ? 'OK' : result?.ergebnis === 'nok' ? 'Nicht OK' : 'N/A'}
|
||||
color={result?.ergebnis === 'ok' ? 'success' : result?.ergebnis === 'nok' ? 'error' : 'default'}
|
||||
size="small"
|
||||
/>
|
||||
{result?.kommentar && (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>{result.kommentar}</Typography>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
<Box>
|
||||
<RadioGroup
|
||||
row
|
||||
value={result?.ergebnis ?? ''}
|
||||
onChange={(e) => setItemResult(item.id, e.target.value as 'ok' | 'nok' | 'na')}
|
||||
>
|
||||
<FormControlLabel value="ok" control={<Radio size="small" />} label="OK" />
|
||||
<FormControlLabel value="nok" control={<Radio size="small" />} label="Nicht OK" />
|
||||
<FormControlLabel value="na" control={<Radio size="small" />} label="N/A" />
|
||||
</RadioGroup>
|
||||
<TextField
|
||||
size="small"
|
||||
placeholder="Kommentar (optional)"
|
||||
fullWidth
|
||||
value={result?.kommentar ?? ''}
|
||||
onChange={(e) => setItemComment(item.id, e.target.value)}
|
||||
sx={{ mt: 0.5 }}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Button startIcon={<ArrowBack />} onClick={() => navigate('/checklisten')} sx={{ mb: 2 }} size="small">
|
||||
Checklisten
|
||||
</Button>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
|
||||
<Box>
|
||||
<Typography variant="h4">
|
||||
{execution.vorlage_name ?? 'Checkliste'}
|
||||
</Typography>
|
||||
<Typography variant="subtitle1" color="text.secondary">
|
||||
{execution.fahrzeug_name ?? '\u2013'} · {formatDate(execution.ausgefuehrt_am ?? execution.created_at)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Chip
|
||||
label={CHECKLIST_STATUS_LABELS[execution.status]}
|
||||
color={CHECKLIST_STATUS_COLORS[execution.status]}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{execution.status === 'unvollstaendig' && (
|
||||
<Alert severity="warning" sx={{ mb: 2 }}>
|
||||
Diese Checkliste wurde als unvollst\u00e4ndig abgeschlossen. Einige Pflicht-Items wurden nicht mit "OK" bewertet.
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<CardContent>
|
||||
{renderItemGroup(vorlageItems, 'Vorlage-Items')}
|
||||
{vorlageItems.length > 0 && vehicleItems.length > 0 && <Divider sx={{ my: 2 }} />}
|
||||
{renderItemGroup(vehicleItems, 'Fahrzeugspezifische Items')}
|
||||
|
||||
{items.length === 0 && (
|
||||
<Typography color="text.secondary">Keine Items in dieser Checkliste.</Typography>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Notes */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<CardContent>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 1 }}>Notizen</Typography>
|
||||
{isReadOnly ? (
|
||||
<Typography variant="body2" color="text.secondary">{execution.notizen || 'Keine Notizen'}</Typography>
|
||||
) : (
|
||||
<TextField
|
||||
fullWidth
|
||||
multiline
|
||||
rows={3}
|
||||
placeholder="Zus\u00e4tzliche Notizen..."
|
||||
value={notizen}
|
||||
onChange={(e) => setNotizen(e.target.value)}
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Actions */}
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
{execution.status === 'offen' && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => submitMutation.mutate()}
|
||||
disabled={submitMutation.isPending}
|
||||
startIcon={submitMutation.isPending ? <CircularProgress size={16} /> : undefined}
|
||||
>
|
||||
Abschlie\u00dfen
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{canApprove && execution.status === 'abgeschlossen' && (
|
||||
<Button
|
||||
variant="contained"
|
||||
color="success"
|
||||
onClick={() => approveMutation.mutate()}
|
||||
disabled={approveMutation.isPending}
|
||||
startIcon={approveMutation.isPending ? <CircularProgress size={16} /> : undefined}
|
||||
>
|
||||
Freigeben
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Metadata */}
|
||||
{(execution.ausgefuehrt_von_name || execution.freigegeben_von_name) && (
|
||||
<Paper variant="outlined" sx={{ p: 2, mt: 3 }}>
|
||||
{execution.ausgefuehrt_von_name && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Ausgef\u00fchrt von: {execution.ausgefuehrt_von_name} am {formatDate(execution.ausgefuehrt_am)}
|
||||
</Typography>
|
||||
)}
|
||||
{execution.freigegeben_von_name && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Freigegeben von: {execution.freigegeben_von_name} am {formatDate(execution.freigegeben_am)}
|
||||
</Typography>
|
||||
)}
|
||||
</Paper>
|
||||
)}
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
649
frontend/src/pages/Checklisten.tsx
Normal file
649
frontend/src/pages/Checklisten.tsx
Normal file
@@ -0,0 +1,649 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Paper,
|
||||
Select,
|
||||
Switch,
|
||||
Tab,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Tabs,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Add as AddIcon,
|
||||
CheckCircle,
|
||||
Delete as DeleteIcon,
|
||||
Edit as EditIcon,
|
||||
PlayArrow,
|
||||
Schedule,
|
||||
Warning,
|
||||
} from '@mui/icons-material';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||
import { usePermissionContext } from '../contexts/PermissionContext';
|
||||
import { useNotification } from '../contexts/NotificationContext';
|
||||
import { checklistenApi } from '../services/checklisten';
|
||||
import { fahrzeugTypenApi } from '../services/fahrzeugTypen';
|
||||
import { vehiclesApi } from '../services/vehicles';
|
||||
import {
|
||||
CHECKLIST_STATUS_LABELS,
|
||||
CHECKLIST_STATUS_COLORS,
|
||||
} from '../types/checklist.types';
|
||||
import type {
|
||||
ChecklistVorlage,
|
||||
ChecklistAusfuehrung,
|
||||
ChecklistFaelligkeit,
|
||||
FahrzeugTyp,
|
||||
CreateVorlagePayload,
|
||||
UpdateVorlagePayload,
|
||||
CreateVorlageItemPayload,
|
||||
} from '../types/checklist.types';
|
||||
|
||||
// ── Helpers ──
|
||||
|
||||
const formatDate = (iso?: string) =>
|
||||
iso ? new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }) : '\u2013';
|
||||
|
||||
const INTERVALL_LABELS: Record<string, string> = {
|
||||
weekly: 'W\u00f6chentlich',
|
||||
monthly: 'Monatlich',
|
||||
yearly: 'J\u00e4hrlich',
|
||||
custom: 'Benutzerdefiniert',
|
||||
};
|
||||
|
||||
// ── Tab Panel ──
|
||||
|
||||
interface TabPanelProps { children: React.ReactNode; index: number; value: number }
|
||||
function TabPanel({ children, value, index }: TabPanelProps) {
|
||||
if (value !== index) return null;
|
||||
return <Box sx={{ pt: 3 }}>{children}</Box>;
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
// Component
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
export default function Checklisten() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const queryClient = useQueryClient();
|
||||
const { hasPermission } = usePermissionContext();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
|
||||
const canManageTemplates = hasPermission('checklisten:manage_templates');
|
||||
const canExecute = hasPermission('checklisten:execute');
|
||||
|
||||
// Tabs: 0=\u00dcbersicht, 1=Vorlagen (if perm), 2=Fahrzeugtypen (if perm), 3=Historie
|
||||
const manageTabs = canManageTemplates ? 2 : 0;
|
||||
const TAB_COUNT = 2 + manageTabs;
|
||||
|
||||
const [tab, setTab] = useState(() => {
|
||||
const t = Number(searchParams.get('tab'));
|
||||
return t >= 0 && t < TAB_COUNT ? t : 0;
|
||||
});
|
||||
useEffect(() => {
|
||||
const t = Number(searchParams.get('tab'));
|
||||
if (t >= 0 && t < TAB_COUNT) setTab(t);
|
||||
}, [searchParams, TAB_COUNT]);
|
||||
|
||||
// ── Queries ──
|
||||
const { data: vehicles = [], isLoading: vehiclesLoading } = useQuery({
|
||||
queryKey: ['vehicles', 'checklisten-overview'],
|
||||
queryFn: () => vehiclesApi.getAll(),
|
||||
});
|
||||
|
||||
const { data: overdue = [] } = useQuery({
|
||||
queryKey: ['checklisten-faellig'],
|
||||
queryFn: checklistenApi.getOverdue,
|
||||
refetchInterval: 5 * 60 * 1000,
|
||||
});
|
||||
|
||||
const { data: vorlagen = [], isLoading: vorlagenLoading } = useQuery({
|
||||
queryKey: ['checklisten-vorlagen'],
|
||||
queryFn: () => checklistenApi.getVorlagen(),
|
||||
enabled: canManageTemplates,
|
||||
});
|
||||
|
||||
const { data: fahrzeugTypen = [] } = useQuery({
|
||||
queryKey: ['fahrzeug-typen'],
|
||||
queryFn: fahrzeugTypenApi.getAll,
|
||||
enabled: canManageTemplates,
|
||||
});
|
||||
|
||||
const { data: executions = [], isLoading: executionsLoading } = useQuery({
|
||||
queryKey: ['checklisten-ausfuehrungen'],
|
||||
queryFn: () => checklistenApi.getExecutions(),
|
||||
});
|
||||
|
||||
// Build overdue lookup: fahrzeugId -> ChecklistFaelligkeit[]
|
||||
const overdueByVehicle = overdue.reduce<Record<string, ChecklistFaelligkeit[]>>((acc, f) => {
|
||||
if (!acc[f.fahrzeug_id]) acc[f.fahrzeug_id] = [];
|
||||
acc[f.fahrzeug_id].push(f);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// ── Tab indices ──
|
||||
const vorlagenTabIdx = canManageTemplates ? 1 : -1;
|
||||
const typenTabIdx = canManageTemplates ? 2 : -1;
|
||||
const historieTabIdx = canManageTemplates ? 3 : 1;
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Typography variant="h4" sx={{ mb: 3 }}>Checklisten</Typography>
|
||||
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Tabs
|
||||
value={tab}
|
||||
onChange={(_e, v) => { setTab(v); navigate(`/checklisten?tab=${v}`, { replace: true }); }}
|
||||
variant="scrollable"
|
||||
scrollButtons="auto"
|
||||
>
|
||||
<Tab label="\u00dcbersicht" />
|
||||
{canManageTemplates && <Tab label="Vorlagen" />}
|
||||
{canManageTemplates && <Tab label="Fahrzeugtypen" />}
|
||||
<Tab label="Historie" />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{/* Tab 0: \u00dcbersicht */}
|
||||
<TabPanel value={tab} index={0}>
|
||||
{vehiclesLoading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>
|
||||
) : vehicles.length === 0 ? (
|
||||
<Typography color="text.secondary">Keine Fahrzeuge vorhanden.</Typography>
|
||||
) : (
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 2 }}>
|
||||
{vehicles.map((v) => {
|
||||
const vOverdue = overdueByVehicle[v.id] || [];
|
||||
return (
|
||||
<Card key={v.id} variant="outlined">
|
||||
<CardContent>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
|
||||
<Typography variant="h6">{v.bezeichnung ?? v.kurzname}</Typography>
|
||||
{vOverdue.length > 0 && (
|
||||
<Chip
|
||||
icon={<Warning />}
|
||||
label={`${vOverdue.length} f\u00e4llig`}
|
||||
color="error"
|
||||
size="small"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
{vOverdue.length > 0 ? (
|
||||
vOverdue.map((f) => {
|
||||
const days = Math.ceil((Date.now() - new Date(f.naechste_faellig_am).getTime()) / 86400000);
|
||||
return (
|
||||
<Box key={f.vorlage_id} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', py: 0.5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Warning fontSize="small" color="error" />
|
||||
<Typography variant="body2">{f.vorlage_name}</Typography>
|
||||
<Typography variant="caption" color="error.main">
|
||||
({days > 0 ? `${days}d \u00fcberf\u00e4llig` : 'heute f\u00e4llig'})
|
||||
</Typography>
|
||||
</Box>
|
||||
{canExecute && (
|
||||
<Tooltip title="Checkliste starten">
|
||||
<IconButton
|
||||
size="small"
|
||||
color="primary"
|
||||
onClick={() => navigate(`/checklisten/ausfuehrung/new?fahrzeug=${v.id}&vorlage=${f.vorlage_id}`)}
|
||||
>
|
||||
<PlayArrow fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<CheckCircle fontSize="small" color="success" />
|
||||
<Typography variant="body2" color="text.secondary">Alle Checklisten aktuell</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
</TabPanel>
|
||||
|
||||
{/* Tab 1: Vorlagen (templates) */}
|
||||
{canManageTemplates && (
|
||||
<TabPanel value={tab} index={vorlagenTabIdx}>
|
||||
<VorlagenTab
|
||||
vorlagen={vorlagen}
|
||||
loading={vorlagenLoading}
|
||||
fahrzeugTypen={fahrzeugTypen}
|
||||
queryClient={queryClient}
|
||||
showSuccess={showSuccess}
|
||||
showError={showError}
|
||||
/>
|
||||
</TabPanel>
|
||||
)}
|
||||
|
||||
{/* Tab 2: Fahrzeugtypen */}
|
||||
{canManageTemplates && (
|
||||
<TabPanel value={tab} index={typenTabIdx}>
|
||||
<FahrzeugTypenTab
|
||||
fahrzeugTypen={fahrzeugTypen}
|
||||
queryClient={queryClient}
|
||||
showSuccess={showSuccess}
|
||||
showError={showError}
|
||||
/>
|
||||
</TabPanel>
|
||||
)}
|
||||
|
||||
{/* Tab 3: Historie */}
|
||||
<TabPanel value={tab} index={historieTabIdx}>
|
||||
<HistorieTab
|
||||
executions={executions}
|
||||
loading={executionsLoading}
|
||||
navigate={navigate}
|
||||
/>
|
||||
</TabPanel>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
// Vorlagen Tab
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
interface VorlagenTabProps {
|
||||
vorlagen: ChecklistVorlage[];
|
||||
loading: boolean;
|
||||
fahrzeugTypen: FahrzeugTyp[];
|
||||
queryClient: ReturnType<typeof useQueryClient>;
|
||||
showSuccess: (msg: string) => void;
|
||||
showError: (msg: string) => void;
|
||||
}
|
||||
|
||||
function VorlagenTab({ vorlagen, loading, fahrzeugTypen, queryClient, showSuccess, showError }: VorlagenTabProps) {
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editingVorlage, setEditingVorlage] = useState<ChecklistVorlage | null>(null);
|
||||
const [expandedVorlageId, setExpandedVorlageId] = useState<number | null>(null);
|
||||
|
||||
const emptyForm: CreateVorlagePayload = { name: '', fahrzeug_typ_id: undefined, intervall: undefined, intervall_tage: undefined, beschreibung: '', aktiv: true };
|
||||
const [form, setForm] = useState<CreateVorlagePayload>(emptyForm);
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: CreateVorlagePayload) => checklistenApi.createVorlage(data),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['checklisten-vorlagen'] }); setDialogOpen(false); showSuccess('Vorlage erstellt'); },
|
||||
onError: () => showError('Fehler beim Erstellen der Vorlage'),
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: number; data: UpdateVorlagePayload }) => checklistenApi.updateVorlage(id, data),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['checklisten-vorlagen'] }); setDialogOpen(false); showSuccess('Vorlage aktualisiert'); },
|
||||
onError: () => showError('Fehler beim Aktualisieren der Vorlage'),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => checklistenApi.deleteVorlage(id),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['checklisten-vorlagen'] }); showSuccess('Vorlage gel\u00f6scht'); },
|
||||
onError: () => showError('Fehler beim L\u00f6schen der Vorlage'),
|
||||
});
|
||||
|
||||
const openCreate = () => { setEditingVorlage(null); setForm(emptyForm); setDialogOpen(true); };
|
||||
const openEdit = (v: ChecklistVorlage) => {
|
||||
setEditingVorlage(v);
|
||||
setForm({ name: v.name, fahrzeug_typ_id: v.fahrzeug_typ_id, intervall: v.intervall, intervall_tage: v.intervall_tage, beschreibung: v.beschreibung ?? '', aktiv: v.aktiv });
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!form.name.trim()) return;
|
||||
if (editingVorlage) {
|
||||
updateMutation.mutate({ id: editingVorlage.id, data: form });
|
||||
} else {
|
||||
createMutation.mutate(form);
|
||||
}
|
||||
};
|
||||
|
||||
const isSaving = createMutation.isPending || updateMutation.isPending;
|
||||
|
||||
if (loading) return <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
|
||||
<Button variant="contained" startIcon={<AddIcon />} onClick={openCreate}>Neue Vorlage</Button>
|
||||
</Box>
|
||||
|
||||
<TableContainer component={Paper}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Fahrzeugtyp</TableCell>
|
||||
<TableCell>Intervall</TableCell>
|
||||
<TableCell>Aktiv</TableCell>
|
||||
<TableCell align="right">Aktionen</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{vorlagen.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={5} align="center">Keine Vorlagen vorhanden</TableCell></TableRow>
|
||||
) : (
|
||||
vorlagen.map((v) => (
|
||||
<React.Fragment key={v.id}>
|
||||
<TableRow hover sx={{ cursor: 'pointer' }} onClick={() => setExpandedVorlageId(expandedVorlageId === v.id ? null : v.id)}>
|
||||
<TableCell>{v.name}</TableCell>
|
||||
<TableCell>{v.fahrzeug_typ?.name ?? '\u2013'}</TableCell>
|
||||
<TableCell>
|
||||
{v.intervall ? INTERVALL_LABELS[v.intervall] || v.intervall : '\u2013'}
|
||||
{v.intervall === 'custom' && v.intervall_tage ? ` (${v.intervall_tage} Tage)` : ''}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Chip label={v.aktiv ? 'Aktiv' : 'Inaktiv'} color={v.aktiv ? 'success' : 'default'} size="small" />
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton size="small" onClick={(e) => { e.stopPropagation(); openEdit(v); }}><EditIcon fontSize="small" /></IconButton>
|
||||
<IconButton size="small" color="error" onClick={(e) => { e.stopPropagation(); deleteMutation.mutate(v.id); }}><DeleteIcon fontSize="small" /></IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{expandedVorlageId === v.id && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} sx={{ p: 2, bgcolor: 'action.hover' }}>
|
||||
<VorlageItemsSection vorlageId={v.id} queryClient={queryClient} showSuccess={showSuccess} showError={showError} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
{/* Create/Edit Dialog */}
|
||||
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>{editingVorlage ? 'Vorlage bearbeiten' : 'Neue Vorlage'}</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 }))} />
|
||||
<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 }))}>
|
||||
<MenuItem value="">Alle (global)</MenuItem>
|
||||
{fahrzeugTypen.map((t) => <MenuItem key={t.id} value={t.id}>{t.name}</MenuItem>)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Intervall</InputLabel>
|
||||
<Select label="Intervall" value={form.intervall ?? ''} onChange={(e) => setForm((f) => ({ ...f, intervall: (e.target.value || undefined) as CreateVorlagePayload['intervall'] }))}>
|
||||
<MenuItem value="">Kein Intervall</MenuItem>
|
||||
<MenuItem value="weekly">W\u00f6chentlich</MenuItem>
|
||||
<MenuItem value="monthly">Monatlich</MenuItem>
|
||||
<MenuItem value="yearly">J\u00e4hrlich</MenuItem>
|
||||
<MenuItem value="custom">Benutzerdefiniert</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
{form.intervall === 'custom' && (
|
||||
<TextField label="Intervall (Tage)" type="number" fullWidth value={form.intervall_tage ?? ''} onChange={(e) => setForm((f) => ({ ...f, intervall_tage: e.target.value ? Number(e.target.value) : undefined }))} inputProps={{ min: 1 }} />
|
||||
)}
|
||||
<TextField label="Beschreibung" fullWidth multiline rows={2} value={form.beschreibung ?? ''} onChange={(e) => setForm((f) => ({ ...f, beschreibung: e.target.value }))} />
|
||||
<FormControlLabel control={<Switch checked={form.aktiv !== false} onChange={(e) => setForm((f) => ({ ...f, aktiv: e.target.checked }))} />} label="Aktiv" />
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Vorlage Items Sub-section ──
|
||||
|
||||
function VorlageItemsSection({ vorlageId, queryClient, showSuccess, showError }: { vorlageId: number; queryClient: ReturnType<typeof useQueryClient>; showSuccess: (msg: string) => void; showError: (msg: string) => void }) {
|
||||
const { data: items = [], isLoading } = useQuery({
|
||||
queryKey: ['checklisten-vorlage-items', vorlageId],
|
||||
queryFn: () => checklistenApi.getVorlageItems(vorlageId),
|
||||
});
|
||||
|
||||
const [newItem, setNewItem] = useState<CreateVorlageItemPayload>({ bezeichnung: '', pflicht: false, sort_order: 0 });
|
||||
|
||||
const addMutation = useMutation({
|
||||
mutationFn: (data: CreateVorlageItemPayload) => checklistenApi.addVorlageItem(vorlageId, data),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['checklisten-vorlage-items', vorlageId] }); setNewItem({ bezeichnung: '', pflicht: false, sort_order: 0 }); showSuccess('Item hinzugef\u00fcgt'); },
|
||||
onError: () => showError('Fehler beim Hinzuf\u00fcgen'),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => checklistenApi.deleteVorlageItem(id),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['checklisten-vorlage-items', vorlageId] }); showSuccess('Item entfernt'); },
|
||||
onError: () => showError('Fehler beim Entfernen'),
|
||||
});
|
||||
|
||||
if (isLoading) return <CircularProgress size={20} />;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="subtitle2" sx={{ mb: 1 }}>Checklisten-Items</Typography>
|
||||
{items.map((item) => (
|
||||
<Box key={item.id} sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
|
||||
<Typography variant="body2" sx={{ flexGrow: 1 }}>
|
||||
{item.bezeichnung} {item.pflicht && <Chip label="Pflicht" size="small" color="warning" sx={{ ml: 0.5 }} />}
|
||||
</Typography>
|
||||
<IconButton size="small" color="error" onClick={() => deleteMutation.mutate(item.id)}><DeleteIcon fontSize="small" /></IconButton>
|
||||
</Box>
|
||||
))}
|
||||
<Box sx={{ display: 'flex', gap: 1, mt: 1, alignItems: 'center' }}>
|
||||
<TextField size="small" placeholder="Neues Item..." value={newItem.bezeichnung} onChange={(e) => setNewItem((n) => ({ ...n, bezeichnung: e.target.value }))} sx={{ flexGrow: 1 }} />
|
||||
<FormControlLabel control={<Switch size="small" checked={newItem.pflicht} onChange={(e) => setNewItem((n) => ({ ...n, pflicht: e.target.checked }))} />} label="Pflicht" />
|
||||
<Button size="small" variant="outlined" disabled={!newItem.bezeichnung.trim() || addMutation.isPending} onClick={() => addMutation.mutate(newItem)}>
|
||||
Hinzuf\u00fcgen
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
// Fahrzeugtypen Tab
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
interface FahrzeugTypenTabProps {
|
||||
fahrzeugTypen: FahrzeugTyp[];
|
||||
queryClient: ReturnType<typeof useQueryClient>;
|
||||
showSuccess: (msg: string) => void;
|
||||
showError: (msg: string) => void;
|
||||
}
|
||||
|
||||
function FahrzeugTypenTab({ fahrzeugTypen, queryClient, showSuccess, showError }: FahrzeugTypenTabProps) {
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<FahrzeugTyp | null>(null);
|
||||
const [form, setForm] = useState({ name: '', beschreibung: '', icon: '' });
|
||||
|
||||
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'] }); showSuccess('Fahrzeugtyp gel\u00f6scht'); },
|
||||
onError: () => showError('Fehler beim L\u00f6schen'),
|
||||
});
|
||||
|
||||
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>
|
||||
<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 ?? '\u2013'}</TableCell>
|
||||
<TableCell>{t.icon ?? '\u2013'}</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>
|
||||
);
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
// Historie Tab
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
interface HistorieTabProps {
|
||||
executions: ChecklistAusfuehrung[];
|
||||
loading: boolean;
|
||||
navigate: ReturnType<typeof useNavigate>;
|
||||
}
|
||||
|
||||
function HistorieTab({ executions, loading, navigate }: HistorieTabProps) {
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
const [vehicleFilter, setVehicleFilter] = useState<string>('');
|
||||
|
||||
const filtered = executions.filter((e) => {
|
||||
if (statusFilter && e.status !== statusFilter) return false;
|
||||
if (vehicleFilter && e.fahrzeug_name !== vehicleFilter) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
const uniqueVehicles = [...new Set(executions.map((e) => e.fahrzeug_name).filter(Boolean))] as string[];
|
||||
|
||||
if (loading) return <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
|
||||
<FormControl size="small" sx={{ minWidth: 160 }}>
|
||||
<InputLabel>Status</InputLabel>
|
||||
<Select label="Status" value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}>
|
||||
<MenuItem value="">Alle</MenuItem>
|
||||
{Object.entries(CHECKLIST_STATUS_LABELS).map(([key, label]) => (
|
||||
<MenuItem key={key} value={key}>{label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl size="small" sx={{ minWidth: 160 }}>
|
||||
<InputLabel>Fahrzeug</InputLabel>
|
||||
<Select label="Fahrzeug" value={vehicleFilter} onChange={(e) => setVehicleFilter(e.target.value)}>
|
||||
<MenuItem value="">Alle</MenuItem>
|
||||
{uniqueVehicles.map((v) => <MenuItem key={v} value={v}>{v}</MenuItem>)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
||||
<TableContainer component={Paper}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Fahrzeug</TableCell>
|
||||
<TableCell>Vorlage</TableCell>
|
||||
<TableCell>Datum</TableCell>
|
||||
<TableCell>Status</TableCell>
|
||||
<TableCell>Ausgef\u00fchrt von</TableCell>
|
||||
<TableCell>Freigegeben von</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{filtered.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={6} align="center">Keine Eintr\u00e4ge</TableCell></TableRow>
|
||||
) : (
|
||||
filtered.map((e) => (
|
||||
<TableRow key={e.id} hover sx={{ cursor: 'pointer' }} onClick={() => navigate(`/checklisten/ausfuehrung/${e.id}`)}>
|
||||
<TableCell>{e.fahrzeug_name ?? '\u2013'}</TableCell>
|
||||
<TableCell>{e.vorlage_name ?? '\u2013'}</TableCell>
|
||||
<TableCell>{formatDate(e.ausgefuehrt_am ?? e.created_at)}</TableCell>
|
||||
<TableCell>
|
||||
<Chip label={CHECKLIST_STATUS_LABELS[e.status]} color={CHECKLIST_STATUS_COLORS[e.status]} size="small" />
|
||||
</TableCell>
|
||||
<TableCell>{e.ausgefuehrt_von_name ?? '\u2013'}</TableCell>
|
||||
<TableCell>{e.freigegeben_von_name ?? '\u2013'}</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,26 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import {
|
||||
Container,
|
||||
Box,
|
||||
Fade,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
} from '@mui/material';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Edit as EditIcon, Check as CheckIcon } from '@mui/icons-material';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
DndContext,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
closestCenter,
|
||||
} from '@dnd-kit/core';
|
||||
import type { DragEndEvent } from '@dnd-kit/core';
|
||||
import {
|
||||
SortableContext,
|
||||
rectSortingStrategy,
|
||||
arrayMove,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { usePermissionContext } from '../contexts/PermissionContext';
|
||||
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||
@@ -28,18 +44,52 @@ import EventQuickAddWidget from '../components/dashboard/EventQuickAddWidget';
|
||||
import LinksWidget from '../components/dashboard/LinksWidget';
|
||||
import BannerWidget from '../components/dashboard/BannerWidget';
|
||||
import WidgetGroup from '../components/dashboard/WidgetGroup';
|
||||
import SortableWidget from '../components/dashboard/SortableWidget';
|
||||
import BestellungenWidget from '../components/dashboard/BestellungenWidget';
|
||||
import AusruestungsanfrageWidget from '../components/dashboard/AusruestungsanfrageWidget';
|
||||
import IssueQuickAddWidget from '../components/dashboard/IssueQuickAddWidget';
|
||||
import IssueOverviewWidget from '../components/dashboard/IssueOverviewWidget';
|
||||
import ChecklistWidget from '../components/dashboard/ChecklistWidget';
|
||||
import { preferencesApi } from '../services/settings';
|
||||
import { configApi } from '../services/config';
|
||||
import { WidgetKey } from '../constants/widgets';
|
||||
|
||||
// ── Widget definitions per group ──
|
||||
|
||||
interface WidgetDef {
|
||||
key: string;
|
||||
widgetKey?: WidgetKey;
|
||||
permission?: string;
|
||||
component: React.ReactNode;
|
||||
}
|
||||
|
||||
type GroupName = 'status' | 'kalender' | 'dienste' | 'information';
|
||||
|
||||
const GROUP_ORDER: { name: GroupName; title: string }[] = [
|
||||
{ name: 'status', title: 'Status' },
|
||||
{ name: 'kalender', title: 'Kalender' },
|
||||
{ name: 'dienste', title: 'Dienste' },
|
||||
{ name: 'information', title: 'Information' },
|
||||
];
|
||||
|
||||
// Default widget order per group (used when no preference is set)
|
||||
const DEFAULT_ORDER: Record<GroupName, string[]> = {
|
||||
status: ['vehicles', 'equipment', 'atemschutz', 'adminStatus', 'bestellungen', 'ausruestungsanfragen', 'issueOverview', 'checklistOverdue'],
|
||||
kalender: ['events', 'vehicleBookingList', 'vehicleBooking', 'eventQuickAdd'],
|
||||
dienste: ['bookstackRecent', 'bookstackSearch', 'vikunjaTasks', 'vikunjaQuickAdd', 'issueQuickAdd'],
|
||||
information: ['links', 'bannerWidget'],
|
||||
};
|
||||
|
||||
function Dashboard() {
|
||||
const { user } = useAuth();
|
||||
const { hasPermission } = usePermissionContext();
|
||||
const queryClient = useQueryClient();
|
||||
const [dataLoading, setDataLoading] = useState(true);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
);
|
||||
|
||||
const { data: preferences } = useQuery({
|
||||
queryKey: ['user-preferences'],
|
||||
@@ -60,203 +110,214 @@ function Dashboard() {
|
||||
return preferences?.widgets?.[key] !== false;
|
||||
};
|
||||
|
||||
// Build widget definitions for each group
|
||||
const widgetDefs: Record<GroupName, WidgetDef[]> = useMemo(() => ({
|
||||
status: [
|
||||
{ key: 'vehicles', widgetKey: 'vehicles', permission: 'fahrzeuge:widget', component: <VehicleDashboardCard /> },
|
||||
{ key: 'equipment', widgetKey: 'equipment', permission: 'ausruestung:widget', component: <EquipmentDashboardCard /> },
|
||||
{ key: 'atemschutz', widgetKey: 'atemschutz', permission: 'atemschutz:widget', component: <AtemschutzDashboardCard /> },
|
||||
{ key: 'adminStatus', widgetKey: 'adminStatus', permission: 'admin:view', component: <AdminStatusWidget /> },
|
||||
{ key: 'bestellungen', widgetKey: 'bestellungen', permission: 'bestellungen:widget', component: <BestellungenWidget /> },
|
||||
{ key: 'ausruestungsanfragen', widgetKey: 'ausruestungsanfragen', permission: 'ausruestungsanfrage:widget', component: <AusruestungsanfrageWidget /> },
|
||||
{ key: 'issueOverview', widgetKey: 'issueOverview', permission: 'issues:view_all', component: <IssueOverviewWidget /> },
|
||||
{ key: 'checklistOverdue', widgetKey: 'checklistOverdue', permission: 'checklisten:widget', component: <ChecklistWidget /> },
|
||||
],
|
||||
kalender: [
|
||||
{ key: 'events', widgetKey: 'events', permission: 'kalender:view', component: <UpcomingEventsWidget /> },
|
||||
{ key: 'vehicleBookingList', widgetKey: 'vehicleBookingList', permission: 'fahrzeugbuchungen:view', component: <VehicleBookingListWidget /> },
|
||||
{ key: 'vehicleBooking', widgetKey: 'vehicleBooking', permission: 'fahrzeugbuchungen:manage', component: <VehicleBookingQuickAddWidget /> },
|
||||
{ key: 'eventQuickAdd', widgetKey: 'eventQuickAdd', permission: 'kalender:create', component: <EventQuickAddWidget /> },
|
||||
],
|
||||
dienste: [
|
||||
{ key: 'bookstackRecent', widgetKey: 'bookstackRecent', permission: 'wissen:view', component: <BookStackRecentWidget /> },
|
||||
{ key: 'bookstackSearch', widgetKey: 'bookstackSearch', permission: 'wissen:view', component: <BookStackSearchWidget /> },
|
||||
{ key: 'vikunjaTasks', widgetKey: 'vikunjaTasks', permission: 'vikunja:widget_tasks', component: <VikunjaMyTasksWidget /> },
|
||||
{ key: 'vikunjaQuickAdd', widgetKey: 'vikunjaQuickAdd', permission: 'vikunja:widget_quick_add', component: <VikunjaQuickAddWidget /> },
|
||||
{ key: 'issueQuickAdd', widgetKey: 'issueQuickAdd', permission: 'issues:widget', component: <IssueQuickAddWidget /> },
|
||||
],
|
||||
information: [
|
||||
// Links are handled specially (dynamic collections), but we keep a placeholder
|
||||
{ key: 'links', widgetKey: 'links', permission: 'dashboard:widget_links', component: null },
|
||||
{ key: 'bannerWidget', permission: 'dashboard:widget_banner', component: <BannerWidget /> },
|
||||
],
|
||||
}), []);
|
||||
|
||||
// Widget order from preferences, falling back to defaults
|
||||
const [localOrder, setLocalOrder] = useState<Record<GroupName, string[]>>(DEFAULT_ORDER);
|
||||
|
||||
useEffect(() => {
|
||||
if (preferences?.widgetOrder) {
|
||||
setLocalOrder((prev) => {
|
||||
const merged = { ...prev };
|
||||
for (const group of Object.keys(DEFAULT_ORDER) as GroupName[]) {
|
||||
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));
|
||||
merged[group] = [...ordered, ...remaining];
|
||||
}
|
||||
}
|
||||
return merged;
|
||||
});
|
||||
}
|
||||
}, [preferences?.widgetOrder]);
|
||||
|
||||
// Get sorted + filtered widgets for a group
|
||||
const getVisibleWidgets = useCallback((group: GroupName) => {
|
||||
const order = localOrder[group];
|
||||
const defs = widgetDefs[group];
|
||||
return order
|
||||
.map((key) => defs.find((d) => d.key === key))
|
||||
.filter((d): d is WidgetDef => {
|
||||
if (!d) return false;
|
||||
if (d.permission && !hasPermission(d.permission)) return false;
|
||||
if (d.widgetKey && !widgetVisible(d.widgetKey)) return false;
|
||||
return true;
|
||||
});
|
||||
}, [localOrder, widgetDefs, hasPermission, preferences]);
|
||||
|
||||
const handleDragEnd = useCallback((event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
// Find which group both items belong to
|
||||
for (const group of Object.keys(localOrder) as GroupName[]) {
|
||||
const order = localOrder[group];
|
||||
const oldIndex = order.indexOf(active.id as string);
|
||||
const newIndex = order.indexOf(over.id as string);
|
||||
if (oldIndex !== -1 && newIndex !== -1) {
|
||||
const newOrder = arrayMove(order, oldIndex, newIndex);
|
||||
setLocalOrder((prev) => ({ ...prev, [group]: newOrder }));
|
||||
// Persist
|
||||
const updatedOrder = { ...localOrder, [group]: newOrder };
|
||||
preferencesApi.update({ widgetOrder: updatedOrder }).then(() => {
|
||||
queryClient.invalidateQueries({ queryKey: ['user-preferences'] });
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, [localOrder, queryClient]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDataLoading(false);
|
||||
}, 800);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const baseDelay = 300;
|
||||
let delayCounter = 0;
|
||||
const nextDelay = () => `${baseDelay + (delayCounter++) * 40}ms`;
|
||||
|
||||
// Render a group's widgets
|
||||
const renderGroup = (group: GroupName) => {
|
||||
const visible = getVisibleWidgets(group);
|
||||
const keys = visible.map((d) => d.key);
|
||||
|
||||
// Special handling for information group (links are dynamic)
|
||||
if (group === 'information') {
|
||||
const linksVisible = visible.some((d) => d.key === 'links');
|
||||
const bannerVisible = visible.some((d) => d.key === 'bannerWidget');
|
||||
const hasContent = (linksVisible && linkCollections.length > 0) || bannerVisible;
|
||||
if (!hasContent) return null;
|
||||
|
||||
return (
|
||||
<WidgetGroup title="Information" gridColumn="1 / -1" key="information">
|
||||
{linksVisible && linkCollections.map((collection) => (
|
||||
<Fade key={collection.id} in={!dataLoading} timeout={600} style={{ transitionDelay: nextDelay() }}>
|
||||
<Box>
|
||||
<LinksWidget collection={collection} />
|
||||
</Box>
|
||||
</Fade>
|
||||
))}
|
||||
{bannerVisible && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: nextDelay() }}>
|
||||
<Box>
|
||||
<BannerWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
</WidgetGroup>
|
||||
);
|
||||
}
|
||||
|
||||
if (keys.length === 0) return null;
|
||||
|
||||
return (
|
||||
<WidgetGroup
|
||||
title={GROUP_ORDER.find((g) => g.name === group)!.title}
|
||||
gridColumn="1 / -1"
|
||||
key={group}
|
||||
>
|
||||
<SortableContext items={keys} strategy={rectSortingStrategy}>
|
||||
{visible.map((def) => {
|
||||
const delay = nextDelay();
|
||||
return (
|
||||
<SortableWidget key={def.key} id={def.key} editMode={editMode}>
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: delay }}>
|
||||
<Box>{def.component}</Box>
|
||||
</Fade>
|
||||
</SortableWidget>
|
||||
);
|
||||
})}
|
||||
</SortableContext>
|
||||
</WidgetGroup>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
{/* Vikunja — Overdue Notifier (invisible, polling component — outside grid) */}
|
||||
<VikunjaOverdueNotifier />
|
||||
{/* Atemschutz — Expiry Notifier (invisible, polling component — outside grid) */}
|
||||
<AtemschutzExpiryNotifier />
|
||||
|
||||
{/* Edit mode toggle */}
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 1, px: 1 }}>
|
||||
<Tooltip title={editMode ? 'Bearbeitung beenden' : 'Widgets anordnen'}>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => setEditMode((prev) => !prev)}
|
||||
color={editMode ? 'primary' : 'default'}
|
||||
>
|
||||
{editMode ? <CheckIcon /> : <EditIcon />}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
|
||||
<Container maxWidth={false} disableGutters>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
|
||||
gap: 2.5,
|
||||
alignItems: 'start',
|
||||
}}
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
{/* Announcement Banner — spans full width, renders null when no banners */}
|
||||
<AnnouncementBanner gridColumn="1 / -1" />
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
|
||||
gap: 2.5,
|
||||
alignItems: 'start',
|
||||
}}
|
||||
>
|
||||
<AnnouncementBanner gridColumn="1 / -1" />
|
||||
|
||||
{/* User Profile Card — full width, contains welcome greeting */}
|
||||
{user && (
|
||||
<Box sx={{ gridColumn: '1 / -1' }}>
|
||||
{dataLoading ? (
|
||||
<SkeletonCard variant="detailed" />
|
||||
) : (
|
||||
<Fade in={true} timeout={600} style={{ transitionDelay: '100ms' }}>
|
||||
<Box>
|
||||
<UserProfile user={user} />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Status Group */}
|
||||
<WidgetGroup title="Status" gridColumn="1 / -1">
|
||||
{hasPermission('fahrzeuge:widget') && widgetVisible('vehicles') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '300ms' }}>
|
||||
<Box>
|
||||
<VehicleDashboardCard />
|
||||
</Box>
|
||||
</Fade>
|
||||
{user && (
|
||||
<Box sx={{ gridColumn: '1 / -1' }}>
|
||||
{dataLoading ? (
|
||||
<SkeletonCard variant="detailed" />
|
||||
) : (
|
||||
<Fade in={true} timeout={600} style={{ transitionDelay: '100ms' }}>
|
||||
<Box>
|
||||
<UserProfile user={user} />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{hasPermission('ausruestung:widget') && widgetVisible('equipment') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '350ms' }}>
|
||||
<Box>
|
||||
<EquipmentDashboardCard />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
|
||||
{hasPermission('atemschutz:widget') && widgetVisible('atemschutz') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '400ms' }}>
|
||||
<Box>
|
||||
<AtemschutzDashboardCard />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
|
||||
{hasPermission('admin:view') && widgetVisible('adminStatus') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '440ms' }}>
|
||||
<Box>
|
||||
<AdminStatusWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
|
||||
{hasPermission('bestellungen:widget') && widgetVisible('bestellungen') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '460ms' }}>
|
||||
<Box>
|
||||
<BestellungenWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
|
||||
{hasPermission('ausruestungsanfrage:widget') && widgetVisible('ausruestungsanfragen') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '470ms' }}>
|
||||
<Box>
|
||||
<AusruestungsanfrageWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
|
||||
{hasPermission('issues:view_all') && widgetVisible('issueOverview') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '480ms' }}>
|
||||
<Box>
|
||||
<IssueOverviewWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
</WidgetGroup>
|
||||
|
||||
{/* Kalender Group */}
|
||||
<WidgetGroup title="Kalender" gridColumn="1 / -1">
|
||||
{hasPermission('kalender:view') && widgetVisible('events') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '480ms' }}>
|
||||
<Box>
|
||||
<UpcomingEventsWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
|
||||
{hasPermission('fahrzeugbuchungen:view') && widgetVisible('vehicleBookingList') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '520ms' }}>
|
||||
<Box>
|
||||
<VehicleBookingListWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
|
||||
{hasPermission('fahrzeugbuchungen:manage') && widgetVisible('vehicleBooking') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '560ms' }}>
|
||||
<Box>
|
||||
<VehicleBookingQuickAddWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
|
||||
{hasPermission('kalender:create') && widgetVisible('eventQuickAdd') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '600ms' }}>
|
||||
<Box>
|
||||
<EventQuickAddWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
</WidgetGroup>
|
||||
|
||||
{/* Dienste Group */}
|
||||
<WidgetGroup title="Dienste" gridColumn="1 / -1">
|
||||
{hasPermission('wissen:view') && widgetVisible('bookstackRecent') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '600ms' }}>
|
||||
<Box>
|
||||
<BookStackRecentWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
|
||||
{hasPermission('wissen:view') && widgetVisible('bookstackSearch') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '640ms' }}>
|
||||
<Box>
|
||||
<BookStackSearchWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
|
||||
{hasPermission('vikunja:widget_tasks') && widgetVisible('vikunjaTasks') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '680ms' }}>
|
||||
<Box>
|
||||
<VikunjaMyTasksWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
|
||||
{hasPermission('vikunja:widget_quick_add') && widgetVisible('vikunjaQuickAdd') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '720ms' }}>
|
||||
<Box>
|
||||
<VikunjaQuickAddWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
|
||||
{hasPermission('issues:widget') && widgetVisible('issueQuickAdd') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '760ms' }}>
|
||||
<Box>
|
||||
<IssueQuickAddWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
</WidgetGroup>
|
||||
|
||||
{/* Information Group */}
|
||||
<WidgetGroup title="Information" gridColumn="1 / -1">
|
||||
{hasPermission('dashboard:widget_links') && widgetVisible('links') && linkCollections.map((collection, idx) => (
|
||||
<Fade key={collection.id} in={!dataLoading} timeout={600} style={{ transitionDelay: `${760 + idx * 40}ms` }}>
|
||||
<Box>
|
||||
<LinksWidget collection={collection} />
|
||||
</Box>
|
||||
</Fade>
|
||||
))}
|
||||
|
||||
{hasPermission('dashboard:widget_banner') && (
|
||||
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: `${760 + linkCollections.length * 40}ms` }}>
|
||||
<Box>
|
||||
<BannerWidget />
|
||||
</Box>
|
||||
</Fade>
|
||||
)}
|
||||
</WidgetGroup>
|
||||
</Box>
|
||||
{GROUP_ORDER.map((g) => renderGroup(g.name))}
|
||||
</Box>
|
||||
</DndContext>
|
||||
</Container>
|
||||
</DashboardLayout>
|
||||
);
|
||||
|
||||
@@ -77,7 +77,9 @@ import {
|
||||
import type { AusruestungListItem } from '../types/equipment.types';
|
||||
import { AusruestungStatus, AusruestungStatusLabel } from '../types/equipment.types';
|
||||
import { usePermissions } from '../hooks/usePermissions';
|
||||
import { usePermissionContext } from '../contexts/PermissionContext';
|
||||
import { useNotification } from '../contexts/NotificationContext';
|
||||
import FahrzeugChecklistTab from '../components/fahrzeuge/FahrzeugChecklistTab';
|
||||
|
||||
// ── Tab Panel ─────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -880,6 +882,7 @@ function FahrzeugDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { isAdmin, canChangeStatus, canManageMaintenance } = usePermissions();
|
||||
const { hasPermission } = usePermissionContext();
|
||||
const notification = useNotification();
|
||||
|
||||
const [vehicle, setVehicle] = useState<FahrzeugDetailType | null>(null);
|
||||
@@ -1035,6 +1038,7 @@ function FahrzeugDetail() {
|
||||
/>
|
||||
<Tab label="Einsätze" />
|
||||
<Tab label={`Ausrüstung${vehicleEquipment.length > 0 ? ` (${vehicleEquipment.length})` : ''}`} />
|
||||
{hasPermission('checklisten:view') && <Tab label="Checklisten" />}
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
@@ -1071,6 +1075,12 @@ function FahrzeugDetail() {
|
||||
<AusruestungTab equipment={vehicleEquipment} vehicleId={vehicle.id} />
|
||||
</TabPanel>
|
||||
|
||||
{hasPermission('checklisten:view') && (
|
||||
<TabPanel value={activeTab} index={4}>
|
||||
<FahrzeugChecklistTab fahrzeugId={vehicle.id} />
|
||||
</TabPanel>
|
||||
)}
|
||||
|
||||
{/* Delete confirmation dialog */}
|
||||
<Dialog open={deleteDialogOpen} onClose={() => !deleteLoading && setDeleteDialogOpen(false)}>
|
||||
<DialogTitle>Fahrzeug löschen</DialogTitle>
|
||||
|
||||
@@ -3,11 +3,14 @@ import {
|
||||
Box, Typography, Paper, Chip, IconButton, Button, Dialog, DialogTitle,
|
||||
DialogContent, DialogActions, TextField, MenuItem, Select, FormControl,
|
||||
InputLabel, Divider, CircularProgress, Autocomplete, Grid, Card, CardContent,
|
||||
List, ListItem, ListItemIcon, ListItemText, ListItemSecondaryAction,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
ArrowBack, Delete as DeleteIcon,
|
||||
BugReport, FiberNew, HelpOutline, Send as SendIcon,
|
||||
Circle as CircleIcon, Refresh as RefreshIcon, History,
|
||||
AttachFile as AttachFileIcon, InsertDriveFile as FileIcon,
|
||||
Upload as UploadIcon,
|
||||
} from '@mui/icons-material';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
@@ -16,13 +19,29 @@ import { useNotification } from '../contexts/NotificationContext';
|
||||
import { usePermissionContext } from '../contexts/PermissionContext';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { issuesApi } from '../services/issues';
|
||||
import type { Issue, IssueComment, UpdateIssuePayload, AssignableMember, IssueStatusDef, IssuePriorityDef, IssueHistorie } from '../types/issue.types';
|
||||
import type { Issue, IssueComment, UpdateIssuePayload, AssignableMember, IssueStatusDef, IssuePriorityDef, IssueHistorie, IssueDatei } from '../types/issue.types';
|
||||
|
||||
// ── Helpers (copied from Issues.tsx) ──
|
||||
|
||||
const formatDate = (iso?: string) =>
|
||||
iso ? new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '-';
|
||||
|
||||
const formatDateOnly = (iso?: string | null) =>
|
||||
iso ? new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }) : '-';
|
||||
|
||||
const toInputDate = (iso?: string | null) => {
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso);
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number | null) => {
|
||||
if (!bytes) return '';
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
const formatIssueId = (issue: Issue) =>
|
||||
`${new Date(issue.created_at).getFullYear()}/${issue.id}`;
|
||||
|
||||
@@ -123,6 +142,12 @@ export default function IssueDetail() {
|
||||
enabled: !isNaN(issueId),
|
||||
});
|
||||
|
||||
const { data: files = [] } = useQuery<IssueDatei[]>({
|
||||
queryKey: ['issues', issueId, 'files'],
|
||||
queryFn: () => issuesApi.getFiles(issueId),
|
||||
enabled: !isNaN(issueId),
|
||||
});
|
||||
|
||||
// ── Permissions ──
|
||||
const isOwner = issue?.erstellt_von === userId;
|
||||
const isAssignee = issue?.zugewiesen_an === userId;
|
||||
@@ -175,6 +200,30 @@ export default function IssueDetail() {
|
||||
onError: () => showError('Kommentar konnte nicht erstellt werden'),
|
||||
});
|
||||
|
||||
const uploadFileMut = useMutation({
|
||||
mutationFn: (file: File) => issuesApi.uploadFile(issueId, file),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['issues', issueId, 'files'] });
|
||||
showSuccess('Datei hochgeladen');
|
||||
},
|
||||
onError: () => showError('Datei konnte nicht hochgeladen werden'),
|
||||
});
|
||||
|
||||
const deleteFileMut = useMutation({
|
||||
mutationFn: (fileId: string) => issuesApi.deleteFile(fileId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['issues', issueId, 'files'] });
|
||||
showSuccess('Datei gelöscht');
|
||||
},
|
||||
onError: () => showError('Datei konnte nicht gelöscht werden'),
|
||||
});
|
||||
|
||||
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) uploadFileMut.mutate(file);
|
||||
e.target.value = '';
|
||||
};
|
||||
|
||||
const handleReopen = () => {
|
||||
updateMut.mutate({ status: initialStatusKey, kommentar: reopenComment.trim() }, {
|
||||
onSuccess: () => {
|
||||
@@ -275,6 +324,20 @@ export default function IssueDetail() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={4} md={2}>
|
||||
<Card variant="outlined" sx={issue.faellig_am && new Date(issue.faellig_am) < new Date() ? { borderColor: 'error.main' } : undefined}>
|
||||
<CardContent sx={{ py: 1.5, '&:last-child': { pb: 1.5 } }}>
|
||||
<Typography variant="caption" color="text.secondary">Fällig am</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mt: 0.5 }}
|
||||
color={issue.faellig_am && new Date(issue.faellig_am) < new Date() ? 'error' : 'text.primary'}
|
||||
>
|
||||
{formatDateOnly(issue.faellig_am)}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Description */}
|
||||
@@ -285,6 +348,57 @@ export default function IssueDetail() {
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
{/* Attachments */}
|
||||
<Paper variant="outlined" sx={{ p: 2, mb: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<AttachFileIcon fontSize="small" />
|
||||
<Typography variant="subtitle2">Anhänge ({files.length})</Typography>
|
||||
</Box>
|
||||
{canComment && (
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<UploadIcon />}
|
||||
component="label"
|
||||
disabled={uploadFileMut.isPending}
|
||||
>
|
||||
{uploadFileMut.isPending ? 'Hochladen...' : 'Datei hochladen'}
|
||||
<input type="file" hidden onChange={handleFileUpload} />
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
{files.length === 0 ? (
|
||||
<Typography variant="body2" color="text.secondary">Keine Anhänge</Typography>
|
||||
) : (
|
||||
<List dense disablePadding>
|
||||
{files.map((f) => (
|
||||
<ListItem key={f.id} disableGutters>
|
||||
<ListItemIcon sx={{ minWidth: 36 }}>
|
||||
<FileIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={f.dateiname}
|
||||
secondary={`${formatFileSize(f.dateigroesse)} — ${formatDate(f.hochgeladen_am)}`}
|
||||
/>
|
||||
<ListItemSecondaryAction>
|
||||
{(hasEdit || isOwner) && (
|
||||
<IconButton
|
||||
size="small"
|
||||
edge="end"
|
||||
color="error"
|
||||
onClick={() => deleteFileMut.mutate(f.id)}
|
||||
disabled={deleteFileMut.isPending}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Controls row */}
|
||||
<Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
{/* Status control */}
|
||||
@@ -341,6 +455,19 @@ export default function IssueDetail() {
|
||||
isOptionEqualToValue={(o, v) => o.id === v.id}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Due date */}
|
||||
{hasEdit && (
|
||||
<TextField
|
||||
size="small"
|
||||
label="Fällig am"
|
||||
type="date"
|
||||
value={toInputDate(issue.faellig_am)}
|
||||
onChange={(e) => updateMut.mutate({ faellig_am: e.target.value || null })}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
sx={{ minWidth: 160 }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Delete button */}
|
||||
|
||||
@@ -121,6 +121,16 @@ export default function IssueNeu() {
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
label="Fällig am"
|
||||
type="date"
|
||||
fullWidth
|
||||
value={form.faellig_am || ''}
|
||||
onChange={(e) => setForm({ ...form, faellig_am: e.target.value || null })}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 1 }}>
|
||||
|
||||
@@ -4,13 +4,14 @@ import {
|
||||
TableHead, TableRow, Paper, Chip, IconButton, Button, Dialog, DialogTitle,
|
||||
DialogContent, DialogActions, TextField, MenuItem, Select, FormControl,
|
||||
InputLabel, CircularProgress, FormControlLabel, Switch,
|
||||
Autocomplete,
|
||||
Autocomplete, ToggleButtonGroup, ToggleButton,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Add as AddIcon, Delete as DeleteIcon,
|
||||
BugReport, FiberNew, HelpOutline,
|
||||
Circle as CircleIcon, Edit as EditIcon,
|
||||
DragIndicator, Check as CheckIcon, Close as CloseIcon,
|
||||
ViewList as ViewListIcon, ViewKanban as ViewKanbanIcon,
|
||||
} from '@mui/icons-material';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useSearchParams, useNavigate } from 'react-router-dom';
|
||||
@@ -21,6 +22,7 @@ import { usePermissionContext } from '../contexts/PermissionContext';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { issuesApi } from '../services/issues';
|
||||
import type { Issue, IssueTyp, IssueFilters, AssignableMember, IssueStatusDef, IssuePriorityDef } from '../types/issue.types';
|
||||
import KanbanBoard from '../components/issues/KanbanBoard';
|
||||
|
||||
// ── Helpers ──
|
||||
|
||||
@@ -555,8 +557,10 @@ function IssueSettings() {
|
||||
export default function Issues() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { hasPermission } = usePermissionContext();
|
||||
const { user } = useAuth();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
|
||||
const canViewAll = hasPermission('issues:view_all');
|
||||
const hasEdit = hasPermission('issues:edit');
|
||||
@@ -581,6 +585,27 @@ export default function Issues() {
|
||||
const [showDoneMine, setShowDoneMine] = useState(false);
|
||||
const [showDoneAssigned, setShowDoneAssigned] = useState(false);
|
||||
const [filters, setFilters] = useState<IssueFilters>({});
|
||||
const [viewMode, setViewMode] = useState<'list' | 'kanban'>(() => {
|
||||
try { return (localStorage.getItem('issues-view-mode') as 'list' | 'kanban') || 'list'; }
|
||||
catch { return 'list'; }
|
||||
});
|
||||
|
||||
const handleViewModeChange = (_: unknown, val: 'list' | 'kanban' | null) => {
|
||||
if (!val) return;
|
||||
setViewMode(val);
|
||||
localStorage.setItem('issues-view-mode', val);
|
||||
};
|
||||
|
||||
// Mutation for kanban drag-and-drop status change
|
||||
const updateStatusMut = useMutation({
|
||||
mutationFn: ({ id, status }: { id: number; status: string }) =>
|
||||
issuesApi.updateIssue(id, { status }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['issues'] });
|
||||
showSuccess('Status aktualisiert');
|
||||
},
|
||||
onError: () => showError('Fehler beim Aktualisieren'),
|
||||
});
|
||||
|
||||
// Fetch all issues for mine/assigned tabs
|
||||
const { data: issues = [], isLoading } = useQuery({
|
||||
@@ -634,7 +659,22 @@ export default function Issues() {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Typography variant="h5" gutterBottom>Issues</Typography>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
|
||||
<Typography variant="h5">Issues</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={viewMode}
|
||||
exclusive
|
||||
onChange={handleViewModeChange}
|
||||
size="small"
|
||||
>
|
||||
<ToggleButton value="list" aria-label="Listenansicht">
|
||||
<ViewListIcon fontSize="small" />
|
||||
</ToggleButton>
|
||||
<ToggleButton value="kanban" aria-label="Kanban-Ansicht">
|
||||
<ViewKanbanIcon fontSize="small" />
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
|
||||
<Tabs value={tab} onChange={handleTabChange} sx={{ mb: 0 }}>
|
||||
{tabs.map((t, i) => <Tab key={i} label={t.label} />)}
|
||||
@@ -642,13 +682,24 @@ export default function Issues() {
|
||||
|
||||
{/* Tab 0: Meine Issues */}
|
||||
<TabPanel value={tab} index={0}>
|
||||
<FormControlLabel
|
||||
control={<Switch checked={showDoneMine} onChange={(e) => setShowDoneMine(e.target.checked)} size="small" />}
|
||||
label="Erledigte anzeigen"
|
||||
sx={{ mb: 1 }}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
|
||||
{viewMode === 'list' && (
|
||||
<FormControlLabel
|
||||
control={<Switch checked={showDoneMine} onChange={(e) => setShowDoneMine(e.target.checked)} size="small" />}
|
||||
label="Erledigte anzeigen"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
{isLoading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>
|
||||
) : viewMode === 'kanban' ? (
|
||||
<KanbanBoard
|
||||
issues={myIssuesFiltered}
|
||||
statuses={issueStatuses}
|
||||
priorities={issuePriorities}
|
||||
onNavigate={(id) => navigate(`/issues/${id}`)}
|
||||
onStatusChange={(id, status) => updateStatusMut.mutate({ id, status })}
|
||||
/>
|
||||
) : (
|
||||
<IssueTable issues={myIssuesFiltered} statuses={issueStatuses} priorities={issuePriorities} />
|
||||
)}
|
||||
@@ -656,13 +707,24 @@ export default function Issues() {
|
||||
|
||||
{/* Tab 1: Zugewiesene Issues */}
|
||||
<TabPanel value={tab} index={1}>
|
||||
<FormControlLabel
|
||||
control={<Switch checked={showDoneAssigned} onChange={(e) => setShowDoneAssigned(e.target.checked)} size="small" />}
|
||||
label="Erledigte anzeigen"
|
||||
sx={{ mb: 1 }}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
|
||||
{viewMode === 'list' && (
|
||||
<FormControlLabel
|
||||
control={<Switch checked={showDoneAssigned} onChange={(e) => setShowDoneAssigned(e.target.checked)} size="small" />}
|
||||
label="Erledigte anzeigen"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
{isLoading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>
|
||||
) : viewMode === 'kanban' ? (
|
||||
<KanbanBoard
|
||||
issues={assignedFiltered}
|
||||
statuses={issueStatuses}
|
||||
priorities={issuePriorities}
|
||||
onNavigate={(id) => navigate(`/issues/${id}`)}
|
||||
onStatusChange={(id, status) => updateStatusMut.mutate({ id, status })}
|
||||
/>
|
||||
) : (
|
||||
<IssueTable issues={assignedFiltered} statuses={issueStatuses} priorities={issuePriorities} />
|
||||
)}
|
||||
@@ -674,6 +736,14 @@ export default function Issues() {
|
||||
<FilterBar filters={filters} onChange={setFilters} types={types} members={members} statuses={issueStatuses} priorities={issuePriorities} />
|
||||
{isFilteredLoading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>
|
||||
) : viewMode === 'kanban' ? (
|
||||
<KanbanBoard
|
||||
issues={filteredIssues}
|
||||
statuses={issueStatuses}
|
||||
priorities={issuePriorities}
|
||||
onNavigate={(id) => navigate(`/issues/${id}`)}
|
||||
onStatusChange={(id, status) => updateStatusMut.mutate({ id, status })}
|
||||
/>
|
||||
) : (
|
||||
<IssueTable issues={filteredIssues} statuses={issueStatuses} priorities={issuePriorities} />
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user