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

new features, bookstack

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-03 21:30:38 +01:00
parent 817329db70
commit d3561c1109
32 changed files with 1923 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/pages/Atemschutz.tsx
View File

@@ -45,6 +45,7 @@ import { atemschutzApi } from '../services/atemschutz';
import { membersService } from '../services/members';
import { useNotification } from '../contexts/NotificationContext';
import { useAuth } from '../contexts/AuthContext';
import { toGermanDate, fromGermanDate } from '../utils/dateInput';
import type {
AtemschutzUebersicht,
AtemschutzStats,
@@ -66,17 +67,6 @@ function formatDate(iso: string | null): string {
});
}
/** Extract YYYY-MM-DD from an ISO timestamp or date string for <input type="date"> */
function toInputDate(iso: string | null | undefined): string {
if (!iso) return '';
// Already DD.MM.YYYY
if (/^\d{2}\.\d{2}\.\d{4}$/.test(iso)) return iso;
// YYYY-MM-DD → DD.MM.YYYY
const m = iso.match(/^(\d{4})-(\d{2})-(\d{2})/);
if (m) return `${m[3]}.${m[2]}.${m[1]}`;
return '';
}
function getDisplayName(item: AtemschutzUebersicht): string {
if (item.user_family_name || item.user_given_name) {
return [item.user_family_name, item.user_given_name].filter(Boolean).join(', ');
@@ -240,12 +230,12 @@ function Atemschutz() {
setForm({
user_id: item.user_id,
atemschutz_lehrgang: item.atemschutz_lehrgang,
lehrgang_datum: toInputDate(item.lehrgang_datum),
untersuchung_datum: toInputDate(item.untersuchung_datum),
untersuchung_gueltig_bis: toInputDate(item.untersuchung_gueltig_bis),
lehrgang_datum: toGermanDate(item.lehrgang_datum),
untersuchung_datum: toGermanDate(item.untersuchung_datum),
untersuchung_gueltig_bis: toGermanDate(item.untersuchung_gueltig_bis),
untersuchung_ergebnis: item.untersuchung_ergebnis || '',
leistungstest_datum: toInputDate(item.leistungstest_datum),
leistungstest_gueltig_bis: toInputDate(item.leistungstest_gueltig_bis),
leistungstest_datum: toGermanDate(item.leistungstest_datum),
leistungstest_gueltig_bis: toGermanDate(item.leistungstest_gueltig_bis),
leistungstest_bestanden: item.leistungstest_bestanden || false,
bemerkung: item.bemerkung || '',
});
@@ -267,24 +257,11 @@ function Atemschutz() {
setForm((prev) => ({ ...prev, [field]: value }));
};
/** Normalize dates before submit: parse DD.MM.YYYY or YYYY-MM-DD → YYYY-MM-DD for API */
/** Normalize dates before submit: parse DD.MM.YYYY → YYYY-MM-DD for API */
const normalizeDate = (val: string | undefined): string | undefined => {
if (!val) return undefined;
// DD.MM.YYYY format (German)
const dmy = val.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
if (dmy) {
const y = parseInt(dmy[3], 10);
if (y < 1900 || y > 2100) return undefined;
return `${dmy[3]}-${dmy[2].padStart(2, '0')}-${dmy[1].padStart(2, '0')}`;
}
// YYYY-MM-DD format (ISO)
const iso = val.match(/^(\d{4})-(\d{2})-(\d{2})$/);
if (iso) {
const y = parseInt(iso[1], 10);
if (y < 1900 || y > 2100) return undefined;
return val;
}
return undefined;
const iso = fromGermanDate(val);
return iso || undefined;
};
const handleSubmit = async () => {

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

@@ -45,6 +45,7 @@ import {
import { Link as RouterLink, useNavigate, useParams } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { equipmentApi } from '../services/equipment';
import { fromGermanDate } from '../utils/dateInput';
import {
AusruestungDetail,
AusruestungWartungslog,
@@ -375,6 +376,7 @@ const WartungTab: React.FC<WartungTabProps> = ({ equipmentId, wartungslog, onAdd
setSaveError(null);
await equipmentApi.addWartungslog(equipmentId, {
...form,
datum: fromGermanDate(form.datum) || form.datum,
pruefende_stelle: form.pruefende_stelle || undefined,
ergebnis: form.ergebnis || undefined,
});
@@ -459,8 +461,8 @@ const WartungTab: React.FC<WartungTabProps> = ({ equipmentId, wartungslog, onAdd
<Grid item xs={12} sm={6}>
<TextField
label="Datum *"
type="date"
fullWidth
placeholder="TT.MM.JJJJ"
value={form.datum}
onChange={(e) => setForm((f) => ({ ...f, datum: e.target.value }))}
InputLabelProps={{ shrink: true }}

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

@@ -19,6 +19,7 @@ import {
import { ArrowBack, Save } from '@mui/icons-material';
import { useNavigate, useParams } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { toGermanDate, fromGermanDate } from '../utils/dateInput';
import { equipmentApi } from '../services/equipment';
import { vehiclesApi } from '../services/vehicles';
import {
@@ -71,10 +72,9 @@ const EMPTY_FORM: FormState = {
// -- Helpers ------------------------------------------------------------------
/** Convert a Date ISO string like '2026-03-15T00:00:00.000Z' to 'YYYY-MM-DD' */
/** Convert a Date ISO string like '2026-03-15T00:00:00.000Z' to 'DD.MM.YYYY' */
function toDateInput(iso: string | null | undefined): string {
if (!iso) return '';
return iso.slice(0, 10);
return toGermanDate(iso);
}
// -- Component ----------------------------------------------------------------
@@ -217,8 +217,8 @@ function AusruestungForm() {
fahrzeug_id: form.fahrzeug_id || null,
standort: !form.fahrzeug_id ? (form.standort.trim() || 'Lager') : undefined,
pruef_intervall_monate: form.pruef_intervall_monate ? parseInt(form.pruef_intervall_monate, 10) : undefined,
letzte_pruefung_am: form.letzte_pruefung_am || undefined,
naechste_pruefung_am: form.naechste_pruefung_am || undefined,
letzte_pruefung_am: form.letzte_pruefung_am ? fromGermanDate(form.letzte_pruefung_am) || undefined : undefined,
naechste_pruefung_am: form.naechste_pruefung_am ? fromGermanDate(form.naechste_pruefung_am) || undefined : undefined,
bemerkung: form.bemerkung.trim() || undefined,
};
await equipmentApi.update(id, payload);
@@ -237,8 +237,8 @@ function AusruestungForm() {
fahrzeug_id: form.fahrzeug_id || undefined,
standort: !form.fahrzeug_id ? (form.standort.trim() || 'Lager') : undefined,
pruef_intervall_monate: form.pruef_intervall_monate ? parseInt(form.pruef_intervall_monate, 10) : undefined,
letzte_pruefung_am: form.letzte_pruefung_am || undefined,
naechste_pruefung_am: form.naechste_pruefung_am || undefined,
letzte_pruefung_am: form.letzte_pruefung_am ? fromGermanDate(form.letzte_pruefung_am) || undefined : undefined,
naechste_pruefung_am: form.naechste_pruefung_am ? fromGermanDate(form.naechste_pruefung_am) || undefined : undefined,
bemerkung: form.bemerkung.trim() || undefined,
};
const created = await equipmentApi.create(payload);
@@ -462,8 +462,8 @@ function AusruestungForm() {
<Grid item xs={12} sm={4}>
<TextField
label="Letzte Prüfung"
type="date"
fullWidth
placeholder="TT.MM.JJJJ"
value={form.letzte_pruefung_am}
onChange={(e) => setForm((prev) => ({ ...prev, letzte_pruefung_am: e.target.value }))}
InputLabelProps={{ shrink: true }}
@@ -472,8 +472,8 @@ function AusruestungForm() {
<Grid item xs={12} sm={4}>
<TextField
label="Nächste Prüfung"
type="date"
fullWidth
placeholder="TT.MM.JJJJ"
value={form.naechste_pruefung_am}
onChange={(e) => setForm((prev) => ({ ...prev, naechste_pruefung_am: e.target.value }))}
InputLabelProps={{ shrink: true }}

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

@@ -13,6 +13,8 @@ import UpcomingEventsWidget from '../components/dashboard/UpcomingEventsWidget';
import AtemschutzDashboardCard from '../components/atemschutz/AtemschutzDashboardCard';
import EquipmentDashboardCard from '../components/equipment/EquipmentDashboardCard';
import VehicleDashboardCard from '../components/vehicles/VehicleDashboardCard';
import BookStackRecentWidget from '../components/dashboard/BookStackRecentWidget';
import BookStackSearchWidget from '../components/dashboard/BookStackSearchWidget';
function Dashboard() {
const { user } = useAuth();
const canViewAtemschutz = user?.groups?.some(g =>
@@ -104,6 +106,24 @@ function Dashboard() {
</Fade>
)}
</Box>
{/* BookStack Recent Pages Widget */}
<Box>
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '520ms' }}>
<Box>
<BookStackRecentWidget />
</Box>
</Fade>
</Box>
{/* BookStack Search Widget */}
<Box>
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '560ms' }}>
<Box>
<BookStackSearchWidget />
</Box>
</Fade>
</Box>
</Box>
</Container>
</DashboardLayout>

19
frontend/src/pages/Einsaetze.tsx
View File

@@ -36,6 +36,7 @@ import {
import { format, parseISO } from 'date-fns';
import { de } from 'date-fns/locale';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { fromGermanDate } from '../utils/dateInput';
import IncidentStatsChart from '../components/incidents/IncidentStatsChart';
import {
incidentsApi,
@@ -206,12 +207,18 @@ function Einsaetze() {
limit: rowsPerPage,
offset: page * rowsPerPage,
};
if (dateFrom) filters.dateFrom = new Date(dateFrom).toISOString();
if (dateFrom) {
const iso = fromGermanDate(dateFrom);
if (iso) filters.dateFrom = new Date(iso).toISOString();
}
if (dateTo) {
// Set to end of day for dateTo
const end = new Date(dateTo);
end.setHours(23, 59, 59, 999);
filters.dateTo = end.toISOString();
const iso = fromGermanDate(dateTo);
if (iso) {
const end = new Date(iso);
end.setHours(23, 59, 59, 999);
filters.dateTo = end.toISOString();
}
}
if (selectedArts.length === 1) filters.einsatzArt = selectedArts[0];
@@ -336,7 +343,7 @@ function Einsaetze() {
<Grid item xs={12} sm={4} md={3}>
<TextField
label="Von (Alarmzeit)"
type="date"
placeholder="TT.MM.JJJJ"
value={dateFrom}
onChange={(e) => { setDateFrom(e.target.value); setPage(0); }}
InputLabelProps={{ shrink: true }}
@@ -348,7 +355,7 @@ function Einsaetze() {
<Grid item xs={12} sm={4} md={3}>
<TextField
label="Bis (Alarmzeit)"
type="date"
placeholder="TT.MM.JJJJ"
value={dateTo}
onChange={(e) => { setDateTo(e.target.value); setPage(0); }}
InputLabelProps={{ shrink: true }}

91
frontend/src/pages/FahrzeugBuchungen.tsx
View File

@@ -692,18 +692,33 @@ function FahrzeugBuchungen() {
InputLabelProps={{ shrink: true }}
/>
{availability !== null && (
<Chip
icon={availability ? <CheckCircle /> : <Warning />}
label={
availability
? 'Fahrzeug verfügbar'
: 'Konflikt: bereits gebucht'
}
color={availability ? 'success' : 'error'}
size="small"
sx={{ alignSelf: 'flex-start' }}
/>
{/* Availability indicator */}
{form.fahrzeugId && form.beginn && form.ende ? (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{availability === null ? (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<CircularProgress size={16} />
<Typography variant="body2" color="text.secondary">
Verfügbarkeit wird geprüft...
</Typography>
</Box>
) : (
<Chip
icon={availability ? <CheckCircle /> : <Warning />}
label={
availability
? 'Fahrzeug verfügbar'
: 'Konflikt: bereits gebucht'
}
color={availability ? 'success' : 'error'}
size="small"
/>
)}
</Box>
) : (
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.75rem' }}>
Wähle Fahrzeug und Zeitraum für Verfügbarkeitsprüfung
</Typography>
)}
<FormControl fullWidth size="small">
@@ -758,25 +773,43 @@ function FahrzeugBuchungen() {
</DialogContent>
<DialogActions>
<Button onClick={() => setDialogOpen(false)}>Abbrechen</Button>
<Button
variant="contained"
onClick={handleSave}
disabled={
dialogLoading ||
!form.titel ||
!form.fahrzeugId ||
!form.beginn ||
!form.ende
<Tooltip
title={
dialogLoading || (form.titel && form.fahrzeugId && form.beginn && form.ende)
? ''
: `Bitte fülle alle Pflichtfelder aus: ${[
!form.titel && 'Titel',
!form.fahrzeugId && 'Fahrzeug',
!form.beginn && 'Beginn',
!form.ende && 'Ende',
]
.filter(Boolean)
.join(', ')}`
}
disableHoverListener={!!(form.titel && form.fahrzeugId && form.beginn && form.ende)}
>
{dialogLoading ? (
<CircularProgress size={20} />
) : editingBooking ? (
'Speichern'
) : (
'Buchen'
)}
</Button>
<span>
<Button
variant="contained"
onClick={handleSave}
disabled={
dialogLoading ||
!form.titel ||
!form.fahrzeugId ||
!form.beginn ||
!form.ende
}
>
{dialogLoading ? (
<CircularProgress size={20} />
) : editingBooking ? (
'Speichern'
) : (
'Buchen'
)}
</Button>
</span>
</Tooltip>
</DialogActions>
</Dialog>

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

@@ -56,6 +56,7 @@ import {
import { useNavigate, useParams } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { vehiclesApi } from '../services/vehicles';
import { fromGermanDate } from '../utils/dateInput';
import { equipmentApi } from '../services/equipment';
import {
FahrzeugDetail,
@@ -347,6 +348,7 @@ const WartungTab: React.FC<WartungTabProps> = ({ fahrzeugId, wartungslog, onAdde
setSaveError(null);
await vehiclesApi.addWartungslog(fahrzeugId, {
...form,
datum: fromGermanDate(form.datum) || form.datum,
externe_werkstatt: form.externe_werkstatt || undefined,
});
setDialogOpen(false);
@@ -411,8 +413,8 @@ const WartungTab: React.FC<WartungTabProps> = ({ fahrzeugId, wartungslog, onAdde
<Grid item xs={12} sm={6}>
<TextField
label="Datum *"
type="date"
fullWidth
placeholder="TT.MM.JJJJ"
value={form.datum}
onChange={(e) => setForm((f) => ({ ...f, datum: e.target.value }))}
InputLabelProps={{ shrink: true }}

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

@@ -18,6 +18,7 @@ import { ArrowBack, Save } from '@mui/icons-material';
import { useNavigate, useParams } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { vehiclesApi } from '../services/vehicles';
import { toGermanDate, fromGermanDate } from '../utils/dateInput';
import {
FahrzeugStatus,
FahrzeugStatusLabel,
@@ -64,10 +65,9 @@ const EMPTY_FORM: FormState = {
// ── Helpers ───────────────────────────────────────────────────────────────────
/** Convert a Date ISO string like '2026-03-15T00:00:00.000Z' to 'YYYY-MM-DD' */
/** Convert a Date ISO string like '2026-03-15T00:00:00.000Z' to 'DD.MM.YYYY' */
function toDateInput(iso: string | null | undefined): string {
if (!iso) return '';
return iso.slice(0, 10);
return toGermanDate(iso);
}
// ── Component ─────────────────────────────────────────────────────────────────
@@ -169,8 +169,8 @@ function FahrzeugForm() {
status_bemerkung: form.status_bemerkung.trim() || undefined,
standort: form.standort.trim() || 'Feuerwehrhaus',
bild_url: form.bild_url.trim() || undefined,
paragraph57a_faellig_am: form.paragraph57a_faellig_am || undefined,
naechste_wartung_am: form.naechste_wartung_am || undefined,
paragraph57a_faellig_am: form.paragraph57a_faellig_am ? fromGermanDate(form.paragraph57a_faellig_am) || undefined : undefined,
naechste_wartung_am: form.naechste_wartung_am ? fromGermanDate(form.naechste_wartung_am) || undefined : undefined,
};
await vehiclesApi.update(id, payload);
navigate(`/fahrzeuge/${id}`);
@@ -188,8 +188,8 @@ function FahrzeugForm() {
status_bemerkung: form.status_bemerkung.trim() || undefined,
standort: form.standort.trim() || 'Feuerwehrhaus',
bild_url: form.bild_url.trim() || undefined,
paragraph57a_faellig_am: form.paragraph57a_faellig_am || undefined,
naechste_wartung_am: form.naechste_wartung_am || undefined,
paragraph57a_faellig_am: form.paragraph57a_faellig_am ? fromGermanDate(form.paragraph57a_faellig_am) || undefined : undefined,
naechste_wartung_am: form.naechste_wartung_am ? fromGermanDate(form.naechste_wartung_am) || undefined : undefined,
};
const newVehicle = await vehiclesApi.create(payload);
navigate(`/fahrzeuge/${newVehicle.id}`);
@@ -314,8 +314,8 @@ function FahrzeugForm() {
<Grid item xs={12} sm={6}>
<TextField
label="§57a fällig am"
type="date"
fullWidth
placeholder="TT.MM.JJJJ"
value={form.paragraph57a_faellig_am}
onChange={(e) => setForm((prev) => ({ ...prev, paragraph57a_faellig_am: e.target.value }))}
InputLabelProps={{ shrink: true }}
@@ -325,8 +325,8 @@ function FahrzeugForm() {
<Grid item xs={12} sm={6}>
<TextField
label="Nächste Wartung am"
type="date"
fullWidth
placeholder="TT.MM.JJJJ"
value={form.naechste_wartung_am}
onChange={(e) => setForm((prev) => ({ ...prev, naechste_wartung_am: e.target.value }))}
InputLabelProps={{ shrink: true }}

433
frontend/src/pages/Kalender.tsx
View File

@@ -55,8 +55,11 @@ import {
DirectionsCar as CarIcon,
Edit as EditIcon,
Event as EventIcon,
FileDownload as FileDownloadIcon,
FileUpload as FileUploadIcon,
HelpOutline as UnknownIcon,
IosShare,
PictureAsPdf as PdfIcon,
Star as StarIcon,
Today as TodayIcon,
Tune,
@@ -65,6 +68,7 @@ import {
} from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { toGermanDate, toGermanDateTime, fromGermanDate, fromGermanDateTime } from '../utils/dateInput';
import { useAuth } from '../contexts/AuthContext';
import { useNotification } from '../contexts/NotificationContext';
import { trainingApi } from '../services/training';
@@ -193,13 +197,12 @@ function formatDateLong(d: Date): string {
return `${days[d.getDay()]}, ${d.getDate()}. ${MONTH_LABELS[d.getMonth()]} ${d.getFullYear()}`;
}
function toDatetimeLocal(isoString: string): string {
const d = new Date(isoString);
const pad = (n: number) => String(n).padStart(2, '0');
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}
function fromDatetimeLocal(value: string): string {
if (!value) return new Date().toISOString();
const dtIso = fromGermanDateTime(value);
if (dtIso) return new Date(dtIso).toISOString();
const dIso = fromGermanDate(value);
if (dIso) return new Date(dIso).toISOString();
return new Date(value).toISOString();
}
@@ -609,6 +612,323 @@ function DayPopover({
);
}
// ──────────────────────────────────────────────────────────────────────────────
// PDF Export helper
// ──────────────────────────────────────────────────────────────────────────────
async function generatePdf(
year: number,
month: number,
trainingEvents: UebungListItem[],
veranstaltungen: VeranstaltungListItem[],
) {
// Dynamically import jsPDF to avoid bundle bloat if not needed
const { jsPDF } = await import('jspdf');
const autoTable = (await import('jspdf-autotable')).default;
const doc = new jsPDF({ orientation: 'landscape', unit: 'mm', format: 'a4' });
const monthLabel = MONTH_LABELS[month];
// Header bar
doc.setFillColor(183, 28, 28); // fire-red
doc.rect(0, 0, 297, 18, 'F');
doc.setTextColor(255, 255, 255);
doc.setFontSize(14);
doc.setFont('helvetica', 'bold');
doc.text(`Kalender — ${monthLabel} ${year}`, 10, 12);
doc.setFontSize(9);
doc.setFont('helvetica', 'normal');
doc.text('Feuerwehr Rems', 250, 12);
// Build combined list (same logic as CombinedListView)
type ListEntry =
| { kind: 'training'; item: UebungListItem }
| { kind: 'event'; item: VeranstaltungListItem };
const combined: ListEntry[] = [
...trainingEvents.map((t): ListEntry => ({ kind: 'training', item: t })),
...veranstaltungen.map((e): ListEntry => ({ kind: 'event', item: e })),
].sort((a, b) => a.item.datum_von.localeCompare(b.item.datum_von));
const formatDateCell = (iso: string) => {
const d = new Date(iso);
return `${String(d.getDate()).padStart(2, '0')}.${String(d.getMonth() + 1).padStart(2, '0')}.${d.getFullYear()}`;
};
const formatTimeCell = (iso: string) => {
const d = new Date(iso);
return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
};
const rows = combined.map((entry) => {
const item = entry.item;
return [
formatDateCell(item.datum_von),
formatTimeCell(item.datum_von),
item.titel,
entry.kind === 'training'
? (item as UebungListItem).typ
: ((item as VeranstaltungListItem).kategorie_name ?? 'Veranstaltung'),
(item as any).ort ?? '',
];
});
autoTable(doc, {
head: [['Datum', 'Uhrzeit', 'Titel', 'Kategorie/Typ', 'Ort']],
body: rows,
startY: 22,
headStyles: { fillColor: [183, 28, 28], textColor: 255, fontStyle: 'bold' },
alternateRowStyles: { fillColor: [250, 235, 235] },
margin: { left: 10, right: 10 },
styles: { fontSize: 9, cellPadding: 2 },
columnStyles: {
0: { cellWidth: 25 },
1: { cellWidth: 18 },
2: { cellWidth: 90 },
3: { cellWidth: 40 },
4: { cellWidth: 60 },
},
});
const filename = `kalender_${year}_${String(month + 1).padStart(2, '0')}.pdf`;
doc.save(filename);
}
// ──────────────────────────────────────────────────────────────────────────────
// CSV Import Dialog
// ──────────────────────────────────────────────────────────────────────────────
const CSV_EXAMPLE = [
'Titel;Datum Von;Datum Bis;Ganztaegig;Ort;Kategorie;Beschreibung',
'Übung Atemschutz;15.03.2026 19:00;15.03.2026 21:00;Nein;Feuerwehrhaus;Übung;Atemschutzübung für alle',
'Tag der offenen Tür;20.04.2026;20.04.2026;Ja;Feuerwehrhaus;Veranstaltung;',
].join('\n');
interface CsvRow {
titel: string;
datum_von: string;
datum_bis: string;
ganztaegig: boolean;
ort: string | null;
beschreibung: string | null;
valid: boolean;
error?: string;
}
function parseCsvRow(line: string, lineNo: number): CsvRow {
const parts = line.split(';');
if (parts.length < 4) {
return { titel: '', datum_von: '', datum_bis: '', ganztaegig: false, ort: null, beschreibung: null, valid: false, error: `Zeile ${lineNo}: Zu wenige Spalten` };
}
const [titel, rawVon, rawBis, rawGanztaegig, ort, , beschreibung] = parts;
const ganztaegig = rawGanztaegig?.trim().toLowerCase() === 'ja';
const convertDate = (raw: string): string => {
const trimmed = raw.trim();
// DD.MM.YYYY HH:MM
const dtIso = fromGermanDateTime(trimmed);
if (dtIso) return new Date(dtIso).toISOString();
// DD.MM.YYYY
const dIso = fromGermanDate(trimmed);
if (dIso) return new Date(dIso + 'T00:00:00').toISOString();
return '';
};
const datum_von = convertDate(rawVon ?? '');
const datum_bis = convertDate(rawBis ?? '');
if (!titel?.trim()) {
return { titel: '', datum_von, datum_bis, ganztaegig, ort: null, beschreibung: null, valid: false, error: `Zeile ${lineNo}: Titel fehlt` };
}
if (!datum_von) {
return { titel: titel.trim(), datum_von, datum_bis, ganztaegig, ort: null, beschreibung: null, valid: false, error: `Zeile ${lineNo}: Datum Von ungültig` };
}
return {
titel: titel.trim(),
datum_von,
datum_bis: datum_bis || datum_von,
ganztaegig,
ort: ort?.trim() || null,
beschreibung: beschreibung?.trim() || null,
valid: true,
};
}
interface CsvImportDialogProps {
open: boolean;
onClose: () => void;
onImported: () => void;
}
function CsvImportDialog({ open, onClose, onImported }: CsvImportDialogProps) {
const [rows, setRows] = useState<CsvRow[]>([]);
const [importing, setImporting] = useState(false);
const [result, setResult] = useState<{ created: number; errors: string[] } | null>(null);
const notification = useNotification();
const fileRef = React.useRef<HTMLInputElement>(null);
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (ev) => {
const text = ev.target?.result as string;
const lines = text.split(/\r?\n/).filter((l) => l.trim());
// Skip header line
const dataLines = lines[0]?.toLowerCase().includes('titel') ? lines.slice(1) : lines;
const parsed = dataLines.map((line, i) => parseCsvRow(line, i + 2));
setRows(parsed);
setResult(null);
};
reader.readAsText(file, 'UTF-8');
};
const downloadExample = () => {
const blob = new Blob(['\uFEFF' + CSV_EXAMPLE], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'kalender_import_beispiel.csv';
a.click();
URL.revokeObjectURL(url);
};
const validRows = rows.filter((r) => r.valid);
const handleImport = async () => {
if (validRows.length === 0) return;
setImporting(true);
try {
const events = validRows.map((r) => ({
titel: r.titel,
datum_von: r.datum_von,
datum_bis: r.datum_bis,
ganztaegig: r.ganztaegig,
ort: r.ort,
beschreibung: r.beschreibung,
zielgruppen: [],
alle_gruppen: true,
anmeldung_erforderlich: false,
}));
const res = await eventsApi.importEvents(events);
setResult(res);
if (res.created > 0) {
notification.showSuccess(`${res.created} Veranstaltung${res.created !== 1 ? 'en' : ''} importiert`);
onImported();
}
} catch {
notification.showError('Import fehlgeschlagen');
} finally {
setImporting(false);
}
};
const handleClose = () => {
setRows([]);
setResult(null);
if (fileRef.current) fileRef.current.value = '';
onClose();
};
return (
<Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
<DialogTitle>Kalender importieren (CSV)</DialogTitle>
<DialogContent>
<Stack spacing={2} sx={{ mt: 1 }}>
<Button
variant="outlined"
size="small"
startIcon={<FileDownloadIcon />}
onClick={downloadExample}
sx={{ alignSelf: 'flex-start' }}
>
Beispiel-CSV herunterladen
</Button>
<Box>
<input
ref={fileRef}
type="file"
accept=".csv,text/csv"
onChange={handleFileChange}
style={{ display: 'none' }}
id="csv-import-input"
/>
<label htmlFor="csv-import-input">
<Button variant="contained" component="span" startIcon={<FileUploadIcon />}>
CSV-Datei auswählen
</Button>
</label>
</Box>
{rows.length > 0 && (
<>
<Typography variant="body2">
{validRows.length} gültige / {rows.length - validRows.length} fehlerhafte Zeilen
</Typography>
{rows.some((r) => !r.valid) && (
<Alert severity="warning" sx={{ whiteSpace: 'pre-line' }}>
{rows.filter((r) => !r.valid).map((r) => r.error).join('\n')}
</Alert>
)}
<TableContainer component={Paper} variant="outlined" sx={{ maxHeight: 300 }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<TableCell>Status</TableCell>
<TableCell>Titel</TableCell>
<TableCell>Von</TableCell>
<TableCell>Bis</TableCell>
<TableCell>Ganztägig</TableCell>
<TableCell>Ort</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, i) => (
<TableRow key={i} sx={{ bgcolor: row.valid ? undefined : 'error.light' }}>
<TableCell>
<Chip
label={row.valid ? 'OK' : 'Fehler'}
color={row.valid ? 'success' : 'error'}
size="small"
/>
</TableCell>
<TableCell>{row.titel}</TableCell>
<TableCell>{row.datum_von ? new Date(row.datum_von).toLocaleDateString('de-DE') : '—'}</TableCell>
<TableCell>{row.datum_bis ? new Date(row.datum_bis).toLocaleDateString('de-DE') : '—'}</TableCell>
<TableCell>{row.ganztaegig ? 'Ja' : 'Nein'}</TableCell>
<TableCell>{row.ort ?? '—'}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
)}
{result && (
<Alert severity={result.errors.length === 0 ? 'success' : 'warning'}>
{result.created} Veranstaltung{result.created !== 1 ? 'en' : ''} importiert.
{result.errors.length > 0 && ` ${result.errors.length} Fehler.`}
</Alert>
)}
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Schließen</Button>
<Button
variant="contained"
onClick={handleImport}
disabled={validRows.length === 0 || importing}
startIcon={importing ? <CircularProgress size={16} /> : <FileUploadIcon />}
>
{validRows.length > 0 ? `${validRows.length} importieren` : 'Importieren'}
</Button>
</DialogActions>
</Dialog>
);
}
// ──────────────────────────────────────────────────────────────────────────────
// Combined List View (training + events sorted by date)
// ──────────────────────────────────────────────────────────────────────────────
@@ -874,7 +1194,7 @@ function VeranstaltungFormDialog({
wiederholung: (!editingEvent && wiederholungAktiv && wiederholungBis)
? {
typ: wiederholungTyp,
bis: wiederholungBis,
bis: fromGermanDate(wiederholungBis) || wiederholungBis,
intervall: wiederholungTyp === 'wöchentlich' ? wiederholungIntervall : undefined,
wochentag: (wiederholungTyp === 'monatlich_erster_wochentag' || wiederholungTyp === 'monatlich_letzter_wochentag')
? wiederholungWochentag
@@ -956,16 +1276,17 @@ function VeranstaltungFormDialog({
/>
<TextField
label="Von"
type={form.ganztaegig ? 'date' : 'datetime-local'}
placeholder={form.ganztaegig ? 'TT.MM.JJJJ' : 'TT.MM.JJJJ HH:MM'}
value={
form.ganztaegig
? toDatetimeLocal(form.datum_von).slice(0, 10)
: toDatetimeLocal(form.datum_von)
? toGermanDate(form.datum_von)
: toGermanDateTime(form.datum_von)
}
onChange={(e) => {
const raw = e.target.value;
const iso = form.ganztaegig
? fromDatetimeLocal(`${e.target.value}T00:00`)
: fromDatetimeLocal(e.target.value);
? fromDatetimeLocal(raw ? `${fromGermanDate(raw)} 00:00` : '')
: fromDatetimeLocal(raw);
handleChange('datum_von', iso);
}}
InputLabelProps={{ shrink: true }}
@@ -973,16 +1294,17 @@ function VeranstaltungFormDialog({
/>
<TextField
label="Bis"
type={form.ganztaegig ? 'date' : 'datetime-local'}
placeholder={form.ganztaegig ? 'TT.MM.JJJJ' : 'TT.MM.JJJJ HH:MM'}
value={
form.ganztaegig
? toDatetimeLocal(form.datum_bis).slice(0, 10)
: toDatetimeLocal(form.datum_bis)
? toGermanDate(form.datum_bis)
: toGermanDateTime(form.datum_bis)
}
onChange={(e) => {
const raw = e.target.value;
const iso = form.ganztaegig
? fromDatetimeLocal(`${e.target.value}T23:59`)
: fromDatetimeLocal(e.target.value);
? fromDatetimeLocal(raw ? `${fromGermanDate(raw)} 23:59` : '')
: fromDatetimeLocal(raw);
handleChange('datum_bis', iso);
}}
InputLabelProps={{ shrink: true }}
@@ -1039,11 +1361,14 @@ function VeranstaltungFormDialog({
{form.anmeldung_erforderlich && (
<TextField
label="Anmeldeschluss"
type="datetime-local"
value={form.anmeldung_bis ? toDatetimeLocal(form.anmeldung_bis) : ''}
onChange={(e) =>
handleChange('anmeldung_bis', e.target.value ? fromDatetimeLocal(e.target.value) : null)
}
placeholder="TT.MM.JJJJ HH:MM"
value={form.anmeldung_bis ? toGermanDateTime(form.anmeldung_bis) : ''}
onChange={(e) => {
const raw = e.target.value;
if (!raw) { handleChange('anmeldung_bis', null); return; }
const iso = fromGermanDateTime(raw);
if (iso) handleChange('anmeldung_bis', new Date(iso).toISOString());
}}
InputLabelProps={{ shrink: true }}
fullWidth
/>
@@ -1109,8 +1434,8 @@ function VeranstaltungFormDialog({
<TextField
label="Wiederholungen bis"
type="date"
size="small"
placeholder="TT.MM.JJJJ"
value={wiederholungBis}
onChange={(e) => setWiederholungBis(e.target.value)}
InputLabelProps={{ shrink: true }}
@@ -1216,6 +1541,7 @@ export default function Kalender() {
const [icalEventOpen, setIcalEventOpen] = useState(false);
const [icalEventUrl, setIcalEventUrl] = useState('');
const [icalBookingOpen, setIcalBookingOpen] = useState(false);
const [csvImportOpen, setCsvImportOpen] = useState(false);
const [icalBookingUrl, setIcalBookingUrl] = useState('');
// ── Data loading ─────────────────────────────────────────────────────────────
@@ -1405,8 +1731,8 @@ export default function Kalender() {
setBookingForm({
...EMPTY_BOOKING_FORM,
fahrzeugId: vehicleId,
beginn: fnsFormat(day, "yyyy-MM-dd'T'08:00"),
ende: fnsFormat(day, "yyyy-MM-dd'T'17:00"),
beginn: toGermanDateTime(fnsFormat(day, "yyyy-MM-dd'T'08:00")),
ende: toGermanDateTime(fnsFormat(day, "yyyy-MM-dd'T'17:00")),
});
setBookingDialogError(null);
setAvailability(null);
@@ -1420,8 +1746,8 @@ export default function Kalender() {
fahrzeugId: detailBooking.fahrzeug_id,
titel: detailBooking.titel,
beschreibung: '',
beginn: fnsFormat(parseISO(detailBooking.beginn as unknown as string), "yyyy-MM-dd'T'HH:mm"),
ende: fnsFormat(parseISO(detailBooking.ende as unknown as string), "yyyy-MM-dd'T'HH:mm"),
beginn: toGermanDateTime(fnsFormat(parseISO(detailBooking.beginn as unknown as string), "yyyy-MM-dd'T'HH:mm")),
ende: toGermanDateTime(fnsFormat(parseISO(detailBooking.ende as unknown as string), "yyyy-MM-dd'T'HH:mm")),
buchungsArt: detailBooking.buchungs_art,
kontaktPerson: '',
kontaktTelefon: '',
@@ -1440,11 +1766,13 @@ export default function Kalender() {
return;
}
let cancelled = false;
const beginnIso = fromGermanDateTime(bookingForm.beginn) || bookingForm.beginn;
const endeIso = fromGermanDateTime(bookingForm.ende) || bookingForm.ende;
bookingApi
.checkAvailability(
bookingForm.fahrzeugId,
new Date(bookingForm.beginn),
new Date(bookingForm.ende)
new Date(beginnIso),
new Date(endeIso)
)
.then(({ available }) => {
if (!cancelled) setAvailability(available);
@@ -1461,8 +1789,8 @@ export default function Kalender() {
try {
const payload: CreateBuchungInput = {
...bookingForm,
beginn: new Date(bookingForm.beginn).toISOString(),
ende: new Date(bookingForm.ende).toISOString(),
beginn: (() => { const iso = fromGermanDateTime(bookingForm.beginn); return iso ? new Date(iso).toISOString() : new Date(bookingForm.beginn).toISOString(); })(),
ende: (() => { const iso = fromGermanDateTime(bookingForm.ende); return iso ? new Date(iso).toISOString() : new Date(bookingForm.ende).toISOString(); })(),
};
if (editingBooking) {
await bookingApi.update(editingBooking.id, payload);
@@ -1622,6 +1950,35 @@ export default function Kalender() {
</Tooltip>
)}
{/* PDF Export — only in list view */}
{viewMode === 'list' && (
<Tooltip title="Als PDF exportieren">
<IconButton
size="small"
onClick={() => generatePdf(
viewMonth.year,
viewMonth.month,
trainingForMonth,
eventsForMonth,
)}
>
<PdfIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
{/* CSV Import */}
{canWriteEvents && (
<Tooltip title="Kalender importieren (CSV)">
<IconButton
size="small"
onClick={() => setCsvImportOpen(true)}
>
<FileUploadIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
{/* iCal subscribe */}
<Button
startIcon={<IosShare />}
@@ -2166,7 +2523,7 @@ export default function Kalender() {
/>
<TextField
fullWidth size="small" label="Beginn" type="datetime-local" required
fullWidth size="small" label="Beginn" placeholder="TT.MM.JJJJ HH:MM" required
value={bookingForm.beginn}
onChange={(e) =>
setBookingForm((f) => ({ ...f, beginn: e.target.value }))
@@ -2175,7 +2532,7 @@ export default function Kalender() {
/>
<TextField
fullWidth size="small" label="Ende" type="datetime-local" required
fullWidth size="small" label="Ende" placeholder="TT.MM.JJJJ HH:MM" required
value={bookingForm.ende}
onChange={(e) =>
setBookingForm((f) => ({ ...f, ende: e.target.value }))
@@ -2327,6 +2684,16 @@ export default function Kalender() {
)}
</Box>
{/* CSV Import Dialog */}
<CsvImportDialog
open={csvImportOpen}
onClose={() => setCsvImportOpen(false)}
onImported={() => {
setCsvImportOpen(false);
loadCalendarData();
}}
/>
</DashboardLayout>
);
}

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

@@ -39,6 +39,7 @@ import { useParams, useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { useAuth } from '../contexts/AuthContext';
import { membersService } from '../services/members';
import { toGermanDate, fromGermanDate } from '../utils/dateInput';
import {
MemberWithProfile,
StatusEnum,
@@ -239,10 +240,11 @@ function MitgliedDetail() {
setFormData({
mitglieds_nr: member.profile.mitglieds_nr ?? undefined,
dienstgrad: member.profile.dienstgrad ?? undefined,
dienstgrad_seit: toGermanDate(member.profile.dienstgrad_seit) || undefined,
funktion: member.profile.funktion,
status: member.profile.status,
eintrittsdatum: member.profile.eintrittsdatum ?? undefined,
geburtsdatum: member.profile.geburtsdatum ?? undefined,
eintrittsdatum: toGermanDate(member.profile.eintrittsdatum) || undefined,
geburtsdatum: toGermanDate(member.profile.geburtsdatum) || undefined,
telefon_mobil: member.profile.telefon_mobil ?? undefined,
telefon_privat: member.profile.telefon_privat ?? undefined,
notfallkontakt_name: member.profile.notfallkontakt_name ?? undefined,
@@ -263,7 +265,13 @@ function MitgliedDetail() {
setSaving(true);
setSaveError(null);
try {
const updated = await membersService.updateMember(userId, formData);
const payload: UpdateMemberProfileData = {
...formData,
eintrittsdatum: formData.eintrittsdatum ? fromGermanDate(formData.eintrittsdatum) || undefined : undefined,
geburtsdatum: formData.geburtsdatum ? fromGermanDate(formData.geburtsdatum) || undefined : undefined,
dienstgrad_seit: formData.dienstgrad_seit ? fromGermanDate(formData.dienstgrad_seit) || undefined : undefined,
};
const updated = await membersService.updateMember(userId, payload);
setMember(updated);
setEditMode(false);
} catch {
@@ -491,9 +499,9 @@ function MitgliedDetail() {
<TextField
label="Dienstgrad seit"
type="date"
fullWidth
size="small"
placeholder="TT.MM.JJJJ"
value={formData.dienstgrad_seit ?? ''}
onChange={(e) => handleFieldChange('dienstgrad_seit', e.target.value || undefined)}
InputLabelProps={{ shrink: true }}
@@ -522,9 +530,9 @@ function MitgliedDetail() {
<TextField
label="Eintrittsdatum"
type="date"
fullWidth
size="small"
placeholder="TT.MM.JJJJ"
value={formData.eintrittsdatum ?? ''}
onChange={(e) => handleFieldChange('eintrittsdatum', e.target.value || undefined)}
InputLabelProps={{ shrink: true }}
@@ -532,9 +540,9 @@ function MitgliedDetail() {
<TextField
label="Geburtsdatum"
type="date"
fullWidth
size="small"
placeholder="TT.MM.JJJJ"
value={formData.geburtsdatum ?? ''}
onChange={(e) => handleFieldChange('geburtsdatum', e.target.value || undefined)}
InputLabelProps={{ shrink: true }}

43
frontend/src/pages/Settings.tsx
View File

@@ -11,20 +11,23 @@ import {
Divider,
Box,
Button,
ToggleButtonGroup,
ToggleButton,
} from '@mui/material';
import { Settings as SettingsIcon, Notifications, Palette, Language, Save } from '@mui/icons-material';
import { Settings as SettingsIcon, Notifications, Palette, Language, Save, SettingsBrightness, LightMode, DarkMode } from '@mui/icons-material';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { useNotification } from '../contexts/NotificationContext';
import { useThemeMode } from '../contexts/ThemeContext';
function Settings() {
const notification = useNotification();
const { themeMode, setThemeMode } = useThemeMode();
// Settings state
const [emailNotifications, setEmailNotifications] = useState(true);
const [alarmNotifications, setAlarmNotifications] = useState(true);
const [maintenanceReminders, setMaintenanceReminders] = useState(false);
const [systemNotifications, setSystemNotifications] = useState(true);
const [darkMode, setDarkMode] = useState(false);
const [compactView, setCompactView] = useState(true);
const [animations, setAnimations] = useState(true);
@@ -105,18 +108,6 @@ function Settings() {
</Box>
<Divider sx={{ mb: 2 }} />
<FormGroup>
<FormControlLabel
control={
<Switch
checked={darkMode}
onChange={(e) => {
setDarkMode(e.target.checked);
notification.showInfo('Dunkler Modus wird in einer zukünftigen Version verfügbar sein');
}}
/>
}
label="Dunkler Modus (Vorschau)"
/>
<FormControlLabel
control={
<Switch
@@ -135,6 +126,30 @@ function Settings() {
}
label="Animationen"
/>
<Box sx={{ mt: 1 }}>
<Typography variant="body2" sx={{ mb: 1 }}>
Farbschema
</Typography>
<ToggleButtonGroup
value={themeMode}
exclusive
onChange={(_e, value) => { if (value) setThemeMode(value); }}
size="small"
>
<ToggleButton value="system">
<SettingsBrightness fontSize="small" sx={{ mr: 0.5 }} />
System
</ToggleButton>
<ToggleButton value="light">
<LightMode fontSize="small" sx={{ mr: 0.5 }} />
Hell
</ToggleButton>
<ToggleButton value="dark">
<DarkMode fontSize="small" sx={{ mr: 0.5 }} />
Dunkel
</ToggleButton>
</ToggleButtonGroup>
</Box>
</FormGroup>
</CardContent>
</Card>

42
frontend/src/pages/Veranstaltungen.tsx
View File

@@ -52,6 +52,7 @@ import {
Delete as DeleteIcon,
} from '@mui/icons-material';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { toGermanDate, toGermanDateTime, fromGermanDate, fromGermanDateTime } from '../utils/dateInput';
import { useAuth } from '../contexts/AuthContext';
import { useNotification } from '../contexts/NotificationContext';
import { eventsApi } from '../services/events';
@@ -121,15 +122,15 @@ function formatDateShort(isoString: string): string {
return `${String(d.getDate()).padStart(2, '0')}.${String(d.getMonth() + 1).padStart(2, '0')}.${d.getFullYear()}`;
}
/** Convert a Date to datetime-local input value "YYYY-MM-DDTHH:MM" */
function toDatetimeLocal(isoString: string): string {
const d = new Date(isoString);
const pad = (n: number) => String(n).padStart(2, '0');
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}
/** Convert datetime-local value back to ISO string */
function fromDatetimeLocal(value: string): string {
if (!value) return new Date().toISOString();
// DD.MM.YYYY HH:MM format
const dtIso = fromGermanDateTime(value);
if (dtIso) return new Date(dtIso).toISOString();
// DD.MM.YYYY format (for ganztaegig)
const dIso = fromGermanDate(value);
if (dIso) return new Date(dIso).toISOString();
return new Date(value).toISOString();
}
@@ -720,16 +721,16 @@ function EventFormDialog({
{/* Datum von */}
<TextField
label="Von"
type={form.ganztaegig ? 'date' : 'datetime-local'}
placeholder={form.ganztaegig ? 'TT.MM.JJJJ' : 'TT.MM.JJJJ HH:MM'}
value={
form.ganztaegig
? toDatetimeLocal(form.datum_von).slice(0, 10)
: toDatetimeLocal(form.datum_von)
? toGermanDate(form.datum_von)
: toGermanDateTime(form.datum_von)
}
onChange={(e) => {
const raw = e.target.value;
const iso = form.ganztaegig
? fromDatetimeLocal(`${raw}T00:00`)
? fromDatetimeLocal(raw ? `${fromGermanDate(raw)}T00:00` : '')
: fromDatetimeLocal(raw);
handleChange('datum_von', iso);
}}
@@ -740,16 +741,16 @@ function EventFormDialog({
{/* Datum bis */}
<TextField
label="Bis"
type={form.ganztaegig ? 'date' : 'datetime-local'}
placeholder={form.ganztaegig ? 'TT.MM.JJJJ' : 'TT.MM.JJJJ HH:MM'}
value={
form.ganztaegig
? toDatetimeLocal(form.datum_bis).slice(0, 10)
: toDatetimeLocal(form.datum_bis)
? toGermanDate(form.datum_bis)
: toGermanDateTime(form.datum_bis)
}
onChange={(e) => {
const raw = e.target.value;
const iso = form.ganztaegig
? fromDatetimeLocal(`${raw}T23:59`)
? fromDatetimeLocal(raw ? `${fromGermanDate(raw)}T23:59` : '')
: fromDatetimeLocal(raw);
handleChange('datum_bis', iso);
}}
@@ -827,9 +828,14 @@ function EventFormDialog({
{form.anmeldung_erforderlich && (
<TextField
label="Anmeldeschluss"
type="datetime-local"
value={form.anmeldung_bis ? toDatetimeLocal(form.anmeldung_bis) : ''}
onChange={(e) => handleChange('anmeldung_bis', e.target.value ? fromDatetimeLocal(e.target.value) : null)}
placeholder="TT.MM.JJJJ HH:MM"
value={form.anmeldung_bis ? toGermanDateTime(form.anmeldung_bis) : ''}
onChange={(e) => {
const raw = e.target.value;
if (!raw) { handleChange('anmeldung_bis', null); return; }
const iso = fromGermanDateTime(raw);
if (iso) handleChange('anmeldung_bis', new Date(iso).toISOString());
}}
InputLabelProps={{ shrink: true }}
fullWidth
/>

60
frontend/src/pages/admin/AuditLog.tsx
View File

@@ -40,10 +40,7 @@ import {
DialogTitle,
Divider,
IconButton,
MenuItem,
Paper,
Select,
SelectChangeEvent,
Skeleton,
Stack,
TextField,
@@ -57,8 +54,6 @@ import {
GridRenderCellParams,
GridRowParams,
} from '@mui/x-data-grid';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { de } from 'date-fns/locale';
import { format, parseISO } from 'date-fns';
import CloseIcon from '@mui/icons-material/Close';
@@ -66,6 +61,7 @@ import DownloadIcon from '@mui/icons-material/Download';
import FilterAltIcon from '@mui/icons-material/FilterAlt';
import DashboardLayout from '../../components/dashboard/DashboardLayout';
import { api } from '../../services/api';
import { fromGermanDate } from '../../utils/dateInput';
// ---------------------------------------------------------------------------
// Types — mirror the backend AuditLogEntry interface
@@ -106,8 +102,8 @@ interface AuditFilters {
userId?: string;
action?: AuditAction[];
resourceType?: AuditResourceType[];
dateFrom?: Date | null;
dateTo?: Date | null;
dateFrom?: string;
dateTo?: string;
}
// ---------------------------------------------------------------------------
@@ -349,17 +345,23 @@ const FilterPanel: React.FC<FilterPanelProps> = ({ filters, onChange, onReset })
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
{/* Date range */}
<DatePicker
<TextField
label="Von"
value={filters.dateFrom ?? null}
onChange={(date) => onChange({ ...filters, dateFrom: date })}
slotProps={{ textField: { size: 'small', sx: { minWidth: 160 } } }}
size="small"
placeholder="TT.MM.JJJJ"
value={filters.dateFrom ?? ''}
onChange={(e) => onChange({ ...filters, dateFrom: e.target.value })}
sx={{ minWidth: 160 }}
InputLabelProps={{ shrink: true }}
/>
<DatePicker
<TextField
label="Bis"
value={filters.dateTo ?? null}
onChange={(date) => onChange({ ...filters, dateTo: date })}
slotProps={{ textField: { size: 'small', sx: { minWidth: 160 } } }}
size="small"
placeholder="TT.MM.JJJJ"
value={filters.dateTo ?? ''}
onChange={(e) => onChange({ ...filters, dateTo: e.target.value })}
sx={{ minWidth: 160 }}
InputLabelProps={{ shrink: true }}
/>
{/* Action multi-select */}
@@ -416,8 +418,8 @@ const FilterPanel: React.FC<FilterPanelProps> = ({ filters, onChange, onReset })
const DEFAULT_FILTERS: AuditFilters = {
action: [],
resourceType: [],
dateFrom: null,
dateTo: null,
dateFrom: '',
dateTo: '',
};
const AuditLog: React.FC = () => {
@@ -460,8 +462,14 @@ const AuditLog: React.FC = () => {
pageSize: String(pagination.pageSize),
};
if (f.dateFrom) params.dateFrom = f.dateFrom.toISOString();
if (f.dateTo) params.dateTo = f.dateTo.toISOString();
if (f.dateFrom) {
const iso = fromGermanDate(f.dateFrom);
if (iso) params.dateFrom = new Date(iso).toISOString();
}
if (f.dateTo) {
const iso = fromGermanDate(f.dateTo);
if (iso) params.dateTo = new Date(iso + 'T23:59:59').toISOString();
}
if (f.action && f.action.length > 0) {
params.action = f.action.join(',');
}
@@ -513,8 +521,14 @@ const AuditLog: React.FC = () => {
setExporting(true);
try {
const params: Record<string, string> = {};
if (appliedFilters.dateFrom) params.dateFrom = appliedFilters.dateFrom.toISOString();
if (appliedFilters.dateTo) params.dateTo = appliedFilters.dateTo.toISOString();
if (appliedFilters.dateFrom) {
const iso = fromGermanDate(appliedFilters.dateFrom);
if (iso) params.dateFrom = new Date(iso).toISOString();
}
if (appliedFilters.dateTo) {
const iso = fromGermanDate(appliedFilters.dateTo);
if (iso) params.dateTo = new Date(iso + 'T23:59:59').toISOString();
}
if (appliedFilters.action && appliedFilters.action.length > 0) {
params.action = appliedFilters.action.join(',');
}
@@ -637,8 +651,7 @@ const AuditLog: React.FC = () => {
// -------------------------------------------------------------------------
return (
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={de}>
<DashboardLayout>
<DashboardLayout>
<Container maxWidth="xl">
{/* Header */}
<Stack
@@ -726,7 +739,6 @@ const AuditLog: React.FC = () => {
/>
</Container>
</DashboardLayout>
</LocalizationProvider>
);
};