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

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"
/>