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

update

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-26 12:12:18 +01:00
parent d351ea2647
commit 507111e8e8
12 changed files with 202 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/admin/BannerManagementTab.tsx
View File

@@ -25,6 +25,7 @@ import {
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import AddIcon from '@mui/icons-material/Add';
import GermanDateField from '../shared/GermanDateField';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { bannerApi } from '../../services/banners';
import { useNotification } from '../../contexts/NotificationContext';
@@ -228,14 +229,13 @@ function BannerManagementTab() {
<MenuItem value="widget">Widget</MenuItem>
</Select>
</FormControl>
<TextField
<GermanDateField
mode="datetime"
margin="dense"
label="Ablaufdatum (optional)"
type="datetime-local"
fullWidth
value={newEndsAt}
onChange={(e) => setNewEndsAt(e.target.value)}
InputLabelProps={{ shrink: true }}
onChange={(v) => setNewEndsAt(v)}
helperText="Leer lassen für kein Ablaufdatum"
/>
</DialogContent>

10
frontend/src/components/admin/ServiceModeTab.tsx
View File

@@ -4,6 +4,7 @@ import {
TextField, Button, Alert, CircularProgress, Chip,
} from '@mui/material';
import BuildIcon from '@mui/icons-material/Build';
import GermanDateField from '../shared/GermanDateField';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { settingsApi } from '../../services/settings';
import { permissionsApi } from '../../services/permissions';
@@ -113,15 +114,14 @@ export default function ServiceModeTab() {
helperText="Diese Nachricht sehen Benutzer auf der Wartungsseite."
/>
<TextField
<GermanDateField
mode="datetime"
fullWidth
label="Automatisch deaktivieren am"
type="datetime-local"
value={endsAt}
onChange={(e) => setEndsAt(e.target.value)}
InputLabelProps={{ shrink: true }}
onChange={(v) => setEndsAt(v)}
helperText="Optional: Wartungsmodus wird automatisch zu diesem Zeitpunkt deaktiviert."
sx={{ mb: 3, '& input': { color: 'text.primary' } }}
sx={{ mb: 3 }}
/>
<Button

17
frontend/src/components/dashboard/VehicleBookingQuickAddWidget.tsx
View File

@@ -14,6 +14,7 @@ import {
SelectChangeEvent,
} from '@mui/material';
import { DirectionsCar } from '@mui/icons-material';
import GermanDateField from '../shared/GermanDateField';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { bookingApi, fetchVehicles } from '../../services/bookings';
import type { CreateBuchungInput } from '../../types/booking.types';
@@ -141,28 +142,24 @@ const VehicleBookingQuickAddWidget: React.FC = () => {
inputProps={{ maxLength: 250 }}
/>
<TextField
<GermanDateField
mode="datetime"
fullWidth
size="small"
label="Beginn"
type="datetime-local"
value={beginn}
onChange={(e) => setBeginn(e.target.value)}
onChange={(v) => setBeginn(v)}
required
InputLabelProps={{ shrink: true }}
sx={{ '& input': { color: 'text.primary' } }}
/>
<TextField
<GermanDateField
mode="datetime"
fullWidth
size="small"
label="Ende"
type="datetime-local"
value={ende}
onChange={(e) => setEnde(e.target.value)}
onChange={(v) => setEnde(v)}
required
InputLabelProps={{ shrink: true }}
sx={{ '& input': { color: 'text.primary' } }}
/>
<TextField

8
frontend/src/components/dashboard/VikunjaQuickAddWidget.tsx
View File

@@ -14,6 +14,7 @@ import {
SelectChangeEvent,
} from '@mui/material';
import { AddTask } from '@mui/icons-material';
import GermanDateField from '../shared/GermanDateField';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { vikunjaApi } from '../../services/vikunja';
import { useNotification } from '../../contexts/NotificationContext';
@@ -126,14 +127,13 @@ const VikunjaQuickAddWidget: React.FC = () => {
inputProps={{ maxLength: 250 }}
/>
<TextField
<GermanDateField
mode="date"
fullWidth
size="small"
label="Fälligkeitsdatum (optional)"
type="date"
value={dueDate}
onChange={(e) => setDueDate(e.target.value)}
InputLabelProps={{ shrink: true }}
onChange={(v) => setDueDate(v)}
/>
<Button

118
frontend/src/components/shared/GermanDateField.tsx Normal file
View File

@@ -0,0 +1,118 @@
import { useState, useRef } from 'react';
import TextField, { type TextFieldProps } from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';
import Box from '@mui/material/Box';
import CalendarMonth from '@mui/icons-material/CalendarMonth';
import {
toGermanDate,
toGermanDateTime,
fromGermanDate,
fromGermanDateTime,
} from '../../utils/dateInput';
export type GermanDateMode = 'date' | 'datetime';
export interface GermanDateFieldProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'type'> {
/** ISO date (YYYY-MM-DD) or datetime (YYYY-MM-DDTHH:MM) string */
value?: string | null;
/** Called with ISO date/datetime string whenever value changes to a valid date */
onChange?: (isoValue: string) => void;
mode?: GermanDateMode;
}
/**
* A MUI TextField that:
* - Displays dates in German format (TT.MM.JJJJ / TT.MM.JJJJ HH:MM)
* - Accepts free-text entry in that format
* - Has a calendar icon that opens the native browser date picker as a popup
* - onChange fires with an ISO string whenever the entered value is valid
*/
export default function GermanDateField({
value,
onChange,
mode = 'date',
sx,
...rest
}: GermanDateFieldProps) {
// localValue overrides the displayed text while the user is typing
const [localValue, setLocalValue] = useState<string | null>(null);
const hiddenRef = useRef<HTMLInputElement>(null);
const displayed =
localValue ?? (mode === 'date' ? toGermanDate(value) : toGermanDateTime(value));
function handleTextChange(raw: string) {
setLocalValue(raw);
const iso = mode === 'date' ? fromGermanDate(raw) : fromGermanDateTime(raw);
if (iso) {
onChange?.(iso);
setLocalValue(null);
}
}
function handleBlur() {
// Revert to the last valid formatted value if the text is incomplete
setLocalValue(null);
}
function handlePickerChange(nativeVal: string) {
if (!nativeVal) return;
if (mode === 'date') {
onChange?.(nativeVal);
} else {
// Preserve current time portion if available, default to 08:00
const time = value?.substring(11, 16) || '08:00';
onChange?.(`${nativeVal}T${time}`);
}
}
const nativeValue =
mode === 'date' ? (value?.substring(0, 10) || '') : (value?.substring(0, 16) || '');
return (
<Box sx={{ position: 'relative', display: 'inline-flex', width: rest.fullWidth ? '100%' : undefined, ...sx }}>
<TextField
{...rest}
sx={{ width: '100%' }}
value={displayed}
onChange={(e) => handleTextChange(e.target.value)}
onBlur={handleBlur}
placeholder={mode === 'date' ? 'TT.MM.JJJJ' : 'TT.MM.JJJJ HH:MM'}
InputLabelProps={{ shrink: true, ...rest.InputLabelProps }}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
size="small"
tabIndex={-1}
edge="end"
onClick={() => hiddenRef.current?.showPicker?.()}
>
<CalendarMonth fontSize="small" />
</IconButton>
</InputAdornment>
),
...rest.InputProps,
}}
/>
{/* Hidden native input used solely to open the browser's date picker popup */}
<input
ref={hiddenRef}
type={mode === 'date' ? 'date' : 'datetime-local'}
value={nativeValue}
onChange={(e) => handlePickerChange(e.target.value)}
tabIndex={-1}
style={{
position: 'absolute',
bottom: 0,
left: 0,
opacity: 0,
width: '100%',
height: '100%',
pointerEvents: 'none',
}}
/>
</Box>
);
}

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

@@ -47,6 +47,7 @@ import {
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useParams, useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import GermanDateField from '../components/shared/GermanDateField';
import { useNotification } from '../contexts/NotificationContext';
import { usePermissionContext } from '../contexts/PermissionContext';
import { bestellungApi } from '../services/bestellung';
@@ -417,11 +418,11 @@ export default function BestellungDetail() {
curY += 3;
}
// ── Besteller block ──
// ── Kontaktperson (Besteller) block ──
if (bestellung.besteller_name) {
doc.setFontSize(10);
doc.setFont('helvetica', 'bold');
doc.text('Besteller', 10, curY);
doc.text('Kontaktperson', 10, curY);
curY += 5;
const nameWithRank = bestellung.besteller_dienstgrad
? `${kurzDienstgrad(bestellung.besteller_dienstgrad)} ${bestellung.besteller_name}`
@@ -1012,13 +1013,11 @@ export default function BestellungDetail() {
{/* Inline Add Reminder Form */}
{reminderFormOpen && (
<Box sx={{ display: 'flex', gap: 1, mt: 2, alignItems: 'flex-end' }}>
<TextField
<GermanDateField
size="small"
type="date"
label="Fällig am"
InputLabelProps={{ shrink: true }}
value={reminderForm.faellig_am}
onChange={(e) => setReminderForm((f) => ({ ...f, faellig_am: e.target.value }))}
onChange={(iso) => setReminderForm((f) => ({ ...f, faellig_am: iso }))}
/>
<TextField
size="small"

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

@@ -31,6 +31,7 @@ import { useQuery } from '@tanstack/react-query';
import { useParams, useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import ServiceModePage from '../components/shared/ServiceModePage';
import GermanDateField from '../components/shared/GermanDateField';
import { usePermissionContext } from '../contexts/PermissionContext';
import { useNotification } from '../contexts/NotificationContext';
import { bookingApi, fetchVehicles, kategorieApi } from '../services/bookings';
@@ -286,51 +287,49 @@ function BookingFormPage() {
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField
<GermanDateField
fullWidth
size="small"
label="Beginn"
type={form.ganztaegig ? 'date' : 'datetime-local'}
required
mode={form.ganztaegig ? 'date' : 'datetime'}
value={
form.ganztaegig
? form.beginn?.split('T')[0] || ''
: form.beginn
}
onChange={(e) => {
onChange={(iso) => {
if (form.ganztaegig) {
setForm((f) => ({
...f,
beginn: `${e.target.value}T00:00`,
beginn: `${iso}T00:00`,
}));
} else {
setForm((f) => ({ ...f, beginn: e.target.value }));
setForm((f) => ({ ...f, beginn: iso }));
}
}}
InputLabelProps={{ shrink: true }}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
<GermanDateField
fullWidth
size="small"
label="Ende"
type={form.ganztaegig ? 'date' : 'datetime-local'}
required
mode={form.ganztaegig ? 'date' : 'datetime'}
value={
form.ganztaegig ? form.ende?.split('T')[0] || '' : form.ende
}
onChange={(e) => {
onChange={(iso) => {
if (form.ganztaegig) {
setForm((f) => ({
...f,
ende: `${e.target.value}T23:59`,
ende: `${iso}T23:59`,
}));
} else {
setForm((f) => ({ ...f, ende: e.target.value }));
setForm((f) => ({ ...f, ende: iso }));
}
}}
InputLabelProps={{ shrink: true }}
/>
</Grid>
</Grid>

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

@@ -48,6 +48,7 @@ import { useNavigate } from 'react-router-dom';
import { format, parseISO } from 'date-fns';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import ChatAwareFab from '../components/shared/ChatAwareFab';
import GermanDateField from '../components/shared/GermanDateField';
import ServiceModePage from '../components/shared/ServiceModePage';
import { useAuth } from '../contexts/AuthContext';
import { usePermissionContext } from '../contexts/PermissionContext';
@@ -262,22 +263,18 @@ function FahrzeugBuchungen() {
{/* Filters */}
<Paper sx={{ p: 2, mb: 2 }}>
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} alignItems="center">
<TextField
<GermanDateField
size="small"
label="Von"
type="date"
value={filterFrom}
onChange={(e) => setFilterFrom(e.target.value)}
InputLabelProps={{ shrink: true }}
onChange={(iso) => setFilterFrom(iso)}
sx={{ minWidth: 160 }}
/>
<TextField
<GermanDateField
size="small"
label="Bis"
type="date"
value={filterTo}
onChange={(e) => setFilterTo(e.target.value)}
InputLabelProps={{ shrink: true }}
onChange={(iso) => setFilterTo(iso)}
sx={{ minWidth: 160 }}
/>
<FormControl size="small" sx={{ minWidth: 180 }}>

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

@@ -57,6 +57,7 @@ import { useNavigate, useParams } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import ChatAwareFab from '../components/shared/ChatAwareFab';
import { vehiclesApi } from '../services/vehicles';
import GermanDateField from '../components/shared/GermanDateField';
import { fromGermanDate } from '../utils/dateInput';
import { equipmentApi } from '../services/equipment';
import {
@@ -404,23 +405,21 @@ const UebersichtTab: React.FC<UebersichtTabProps> = ({ vehicle, onStatusUpdated,
{isAusserDienst(newStatus) && (
<>
<TextField
<GermanDateField
label="Außer Dienst von *"
type="datetime-local"
mode="datetime"
fullWidth
sx={{ mb: 2 }}
value={ausserDienstVon}
onChange={(e) => setAusserDienstVon(e.target.value)}
InputLabelProps={{ shrink: true }}
onChange={(iso) => setAusserDienstVon(iso)}
/>
<TextField
<GermanDateField
label="Geschätztes Ende *"
type="datetime-local"
mode="datetime"
fullWidth
sx={{ mb: 1 }}
value={ausserDienstBis}
onChange={(e) => setAusserDienstBis(e.target.value)}
InputLabelProps={{ shrink: true }}
onChange={(iso) => setAusserDienstBis(iso)}
/>
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
Zeitangabe ist eine Schätzung
@@ -717,13 +716,12 @@ const WartungTab: React.FC<WartungTabProps> = ({ fahrzeugId, wartungslog, onAdde
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
<GermanDateField
label="Nächste Fälligkeit"
type="date"
mode="date"
fullWidth
value={form.naechste_faelligkeit ?? ''}
onChange={(e) => setForm((f) => ({ ...f, naechste_faelligkeit: e.target.value }))}
InputLabelProps={{ shrink: true }}
value={form.naechste_faelligkeit || null}
onChange={(iso) => setForm((f) => ({ ...f, naechste_faelligkeit: iso }))}
/>
</Grid>
</Grid>

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

@@ -13,6 +13,7 @@ import {
import { ArrowBack, Save } from '@mui/icons-material';
import { useNavigate, useParams } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import GermanDateField from '../components/shared/GermanDateField';
import { vehiclesApi } from '../services/vehicles';
import {
CreateFahrzeugPayload,
@@ -272,24 +273,20 @@ function FahrzeugForm() {
<Typography variant="h6" gutterBottom sx={{ mt: 3 }}>Prüf- und Wartungsfristen</Typography>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField
<GermanDateField
label="§57a fällig am"
fullWidth
type="date"
value={form.paragraph57a_faellig_am}
onChange={(e) => setForm((prev) => ({ ...prev, paragraph57a_faellig_am: e.target.value }))}
InputLabelProps={{ shrink: true }}
onChange={(iso) => setForm((prev) => ({ ...prev, paragraph57a_faellig_am: iso }))}
helperText="Periodische Begutachtung (§57a StVO)"
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
<GermanDateField
label="Nächste Wartung am"
fullWidth
type="date"
value={form.naechste_wartung_am}
onChange={(e) => setForm((prev) => ({ ...prev, naechste_wartung_am: e.target.value }))}
InputLabelProps={{ shrink: true }}
onChange={(iso) => setForm((prev) => ({ ...prev, naechste_wartung_am: iso }))}
helperText="Nächster geplanter Servicetermin"
/>
</Grid>

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

@@ -70,6 +70,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import ServiceModePage from '../components/shared/ServiceModePage';
import ChatAwareFab from '../components/shared/ChatAwareFab';
import GermanDateField from '../components/shared/GermanDateField';
import { toGermanDateTime, fromGermanDate, fromGermanDateTime } from '../utils/dateInput';
import { usePermissionContext } from '../contexts/PermissionContext';
@@ -185,24 +186,6 @@ function formatDateLong(d: Date): string {
return `${days[d.getDay()]}, ${d.getDate()}. ${MONTH_LABELS[d.getMonth()]} ${d.getFullYear()}`;
}
/** ISO string → YYYY-MM-DDTHH:MM (for type="datetime-local") */
function toDatetimeLocalValue(iso: string | null | undefined): string {
if (!iso) return '';
const d = new Date(iso);
if (isNaN(d.getTime())) return '';
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())}`;
}
/** ISO string → YYYY-MM-DD (for type="date") */
function toDateInputValue(iso: string | null | undefined): string {
if (!iso) return '';
const d = new Date(iso);
if (isNaN(d.getTime())) return '';
const pad = (n: number) => String(n).padStart(2, '0');
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
}
// ──────────────────────────────────────────────────────────────────────────────
// Types for unified calendar
// ──────────────────────────────────────────────────────────────────────────────
@@ -1343,44 +1326,30 @@ function VeranstaltungFormDialog({
}
label="Ganztägig"
/>
<TextField
<GermanDateField
label="Von"
type={form.ganztaegig ? 'date' : 'datetime-local'}
value={
form.ganztaegig
? toDateInputValue(form.datum_von)
: toDatetimeLocalValue(form.datum_von)
}
onChange={(e) => {
const raw = e.target.value;
if (!raw) return;
mode={form.ganztaegig ? 'date' : 'datetime'}
value={form.datum_von}
onChange={(iso) => {
const d = form.ganztaegig
? new Date(raw + 'T00:00:00')
: new Date(raw + ':00');
? new Date(iso + 'T00:00:00')
: new Date(iso);
if (isNaN(d.getTime())) return;
handleChange('datum_von', d.toISOString());
}}
InputLabelProps={{ shrink: true }}
fullWidth
/>
<TextField
<GermanDateField
label="Bis"
type={form.ganztaegig ? 'date' : 'datetime-local'}
value={
form.ganztaegig
? toDateInputValue(form.datum_bis)
: toDatetimeLocalValue(form.datum_bis)
}
onChange={(e) => {
const raw = e.target.value;
if (!raw) return;
mode={form.ganztaegig ? 'date' : 'datetime'}
value={form.datum_bis}
onChange={(iso) => {
const d = form.ganztaegig
? new Date(raw + 'T23:59:00')
: new Date(raw + ':00');
? new Date(iso + 'T23:59:00')
: new Date(iso);
if (isNaN(d.getTime())) return;
handleChange('datum_bis', d.toISOString());
}}
InputLabelProps={{ shrink: true }}
fullWidth
/>
<TextField
@@ -1525,13 +1494,12 @@ function VeranstaltungFormDialog({
</FormControl>
)}
<TextField
<GermanDateField
label="Wiederholungen bis"
size="small"
type="date"
mode="date"
value={wiederholungBis}
onChange={(e) => setWiederholungBis(e.target.value)}
InputLabelProps={{ shrink: true }}
onChange={(iso) => setWiederholungBis(iso)}
fullWidth
disabled={!!editingEvent?.wiederholung_parent_id}
helperText="Letztes Datum für Wiederholungen"
@@ -2333,22 +2301,20 @@ export default function Kalender() {
<>
{/* Date range inputs for list view */}
<Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
<TextField
type="date"
<GermanDateField
label="Von"
size="small"
mode="date"
value={listFrom}
onChange={(e) => setListFrom(e.target.value)}
InputLabelProps={{ shrink: true }}
onChange={(iso) => setListFrom(iso)}
sx={{ width: 170 }}
/>
<TextField
type="date"
<GermanDateField
label="Bis"
size="small"
mode="date"
value={listTo}
onChange={(e) => setListTo(e.target.value)}
InputLabelProps={{ shrink: true }}
onChange={(iso) => setListTo(iso)}
sx={{ width: 170 }}
/>
</Box>

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

@@ -52,6 +52,7 @@ import {
} from '@mui/icons-material';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import ChatAwareFab from '../components/shared/ChatAwareFab';
import GermanDateField from '../components/shared/GermanDateField';
import { toGermanDate, toGermanDateTime, fromGermanDate, fromGermanDateTime } from '../utils/dateInput';
import { usePermissionContext } from '../contexts/PermissionContext';
import { useNotification } from '../contexts/NotificationContext';
@@ -1016,16 +1017,15 @@ function EventFormDialog({
</FormControl>
)}
<TextField
<GermanDateField
label="Wiederholen bis"
type="date"
size="small"
mode="date"
value={form.wiederholung.bis}
onChange={(e) => {
const w = { ...form.wiederholung!, bis: e.target.value };
onChange={(iso) => {
const w = { ...form.wiederholung!, bis: iso };
handleChange('wiederholung', w);
}}
InputLabelProps={{ shrink: true }}
fullWidth
helperText="Enddatum der Wiederholungsserie"
/>