MrFrostDev
371 lines
11 KiB
TypeScript
371 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
Dialog,
|
|
Button,
|
|
TextField,
|
|
Typography,
|
|
Box,
|
|
Divider,
|
|
Chip,
|
|
Paper,
|
|
IconButton,
|
|
Stack,
|
|
useMediaQuery,
|
|
CircularProgress,
|
|
} from '@mui/material';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import { useState, useEffect, Suspense, lazy, useMemo } from 'react';
|
|
import { Tool, User } from '../types';
|
|
import { useReservationStore } from '../services/reservation-store';
|
|
import { useI18n } from '../services/i18n';
|
|
import { Calendar, Info, ShieldCheck, X, Check, MapPin, Clock } from 'lucide-react';
|
|
|
|
const AvailabilityCalendar = lazy(() => import('./AvailabilityCalendar'));
|
|
|
|
interface ReservationModalProps {
|
|
tool: Tool | null;
|
|
user: User;
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const pillSx = {
|
|
height: 22,
|
|
fontWeight: 600,
|
|
fontSize: '0.7rem',
|
|
borderRadius: 1.25,
|
|
'& .MuiChip-icon': { marginLeft: '6px', marginRight: '-2px' },
|
|
'& .MuiChip-label': { px: 0.75 },
|
|
} as const;
|
|
|
|
export default function ReservationModal({
|
|
tool,
|
|
user,
|
|
open,
|
|
onClose,
|
|
}: ReservationModalProps) {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
const { t } = useI18n();
|
|
|
|
const reservations = useReservationStore((s) => s.reservations);
|
|
const addReservation = useReservationStore((s) => s.addReservation);
|
|
|
|
const today = useMemo(() => new Date().toISOString().split('T')[0], []);
|
|
const [startDate, setStartDate] = useState(today);
|
|
const [endDate, setEndDate] = useState('');
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setStartDate(today);
|
|
setEndDate('');
|
|
setSubmitted(false);
|
|
}
|
|
}, [open, today]);
|
|
|
|
if (!tool) return null;
|
|
|
|
const toolEvents = reservations
|
|
.filter((r) => r.toolId === tool.id && r.status !== 'completed')
|
|
.map((r) => ({
|
|
title: 'Belegt',
|
|
start: r.startDate,
|
|
end: r.endDate,
|
|
display: 'background' as const,
|
|
color: '#F59E0B',
|
|
}));
|
|
|
|
const duration = (() => {
|
|
if (!startDate || !endDate) return 0;
|
|
const ms = new Date(endDate).getTime() - new Date(startDate).getTime();
|
|
return Math.max(0, Math.round(ms / 86_400_000) + 1);
|
|
})();
|
|
const exceedsMax = duration > tool.maxRentalDays;
|
|
const invalidRange = Boolean(endDate) && endDate < startDate;
|
|
const hasTraining =
|
|
!tool.trainingRequired || user.trainings.includes(tool.requiredTrainingId!);
|
|
const canReserve =
|
|
!!startDate &&
|
|
!!endDate &&
|
|
!exceedsMax &&
|
|
!invalidRange &&
|
|
(hasTraining || user.role === 'admin');
|
|
|
|
const handleSubmit = () => {
|
|
if (!canReserve) return;
|
|
addReservation({ userId: user.id, toolId: tool.id, startDate, endDate });
|
|
setSubmitted(true);
|
|
setTimeout(onClose, 1100);
|
|
};
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={onClose}
|
|
fullWidth
|
|
maxWidth="md"
|
|
fullScreen={isMobile}
|
|
PaperProps={{
|
|
sx: {
|
|
borderRadius: { xs: 0, md: 3 },
|
|
overflow: 'hidden',
|
|
maxHeight: { md: '90vh' },
|
|
},
|
|
}}
|
|
>
|
|
{/* Top bar */}
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
px: { xs: 2, md: 3 },
|
|
py: 1.5,
|
|
borderBottom: '1px solid',
|
|
borderColor: 'divider',
|
|
bgcolor: 'background.paper',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25 }}>
|
|
<Box
|
|
sx={{
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: 1.5,
|
|
display: 'grid',
|
|
placeItems: 'center',
|
|
background: 'linear-gradient(135deg, #FF6B00, #E55F00)',
|
|
color: 'white',
|
|
}}
|
|
>
|
|
<Calendar size={15} />
|
|
</Box>
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
|
|
Reservierung
|
|
</Typography>
|
|
</Box>
|
|
<IconButton onClick={onClose} size="small" aria-label="Schließen">
|
|
<X size={18} />
|
|
</IconButton>
|
|
</Box>
|
|
|
|
{/* Body */}
|
|
<Box
|
|
sx={{
|
|
display: 'grid',
|
|
gridTemplateColumns: { xs: '1fr', md: '5fr 7fr' },
|
|
flexGrow: 1,
|
|
minHeight: 0,
|
|
overflowY: 'auto',
|
|
}}
|
|
>
|
|
{/* Form panel */}
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
borderRight: { md: '1px solid' },
|
|
borderBottom: { xs: '1px solid', md: 'none' },
|
|
borderColor: 'divider',
|
|
bgcolor: 'background.paper',
|
|
}}
|
|
>
|
|
<Box sx={{ p: { xs: 2.5, md: 3 }, display: 'flex', flexDirection: 'column', gap: 2.25 }}>
|
|
<Box>
|
|
<Typography variant="h5" sx={{ fontWeight: 800, mb: 1, letterSpacing: '-0.015em' }}>
|
|
{tool.name}
|
|
</Typography>
|
|
<Stack direction="row" spacing={0.75} flexWrap="wrap" useFlexGap sx={{ rowGap: 0.75 }}>
|
|
<Chip
|
|
icon={<ShieldCheck size={12} />}
|
|
label={hasTraining ? 'Zertifiziert' : 'Einweisung fehlt'}
|
|
color={hasTraining ? 'success' : 'warning'}
|
|
size="small"
|
|
sx={pillSx}
|
|
/>
|
|
<Chip
|
|
icon={<MapPin size={12} />}
|
|
label={tool.location}
|
|
size="small"
|
|
variant="outlined"
|
|
sx={pillSx}
|
|
/>
|
|
<Chip
|
|
icon={<Clock size={12} />}
|
|
label={`max. ${tool.maxRentalDays} Tage`}
|
|
size="small"
|
|
variant="outlined"
|
|
sx={pillSx}
|
|
/>
|
|
</Stack>
|
|
<Typography variant="body2" color="text.secondary" sx={{ mt: 2, lineHeight: 1.55 }}>
|
|
{tool.description}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Divider />
|
|
|
|
<Stack spacing={2}>
|
|
<TextField
|
|
label={t('from')}
|
|
type="date"
|
|
value={startDate}
|
|
onChange={(e) => setStartDate(e.target.value)}
|
|
InputLabelProps={{ shrink: true }}
|
|
inputProps={{ min: today }}
|
|
fullWidth
|
|
size="small"
|
|
/>
|
|
<TextField
|
|
label={t('to')}
|
|
type="date"
|
|
value={endDate}
|
|
onChange={(e) => setEndDate(e.target.value)}
|
|
InputLabelProps={{ shrink: true }}
|
|
inputProps={{ min: startDate || today }}
|
|
fullWidth
|
|
size="small"
|
|
error={Boolean(invalidRange) || exceedsMax}
|
|
helperText={
|
|
invalidRange
|
|
? 'Enddatum liegt vor Startdatum.'
|
|
: exceedsMax
|
|
? `Maximale Leihdauer: ${tool.maxRentalDays} Tage.`
|
|
: duration > 0
|
|
? `${duration} ${duration === 1 ? 'Tag' : 'Tage'} gesamt`
|
|
: ' '
|
|
}
|
|
/>
|
|
|
|
<Paper
|
|
variant="outlined"
|
|
sx={{
|
|
p: 1.5,
|
|
display: 'flex',
|
|
gap: 1.25,
|
|
alignItems: 'flex-start',
|
|
bgcolor: 'action.hover',
|
|
borderStyle: 'dashed',
|
|
borderRadius: 2,
|
|
}}
|
|
>
|
|
<Info size={16} style={{ marginTop: 2, flexShrink: 0, opacity: 0.7 }} />
|
|
<Typography variant="caption" sx={{ lineHeight: 1.5 }}>
|
|
Maximale Ausleihdauer: <strong>{tool.maxRentalDays} Tage</strong>. Bitte
|
|
bringe das Werkzeug rechtzeitig und unbeschädigt zurück.
|
|
</Typography>
|
|
</Paper>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Sticky action bar */}
|
|
<Box
|
|
sx={{
|
|
mt: 'auto',
|
|
position: 'sticky',
|
|
bottom: 0,
|
|
px: { xs: 2.5, md: 3 },
|
|
py: 2,
|
|
display: 'flex',
|
|
gap: 1.25,
|
|
bgcolor: 'background.paper',
|
|
borderTop: '1px solid',
|
|
borderColor: 'divider',
|
|
}}
|
|
>
|
|
<Button onClick={onClose} variant="outlined" fullWidth color="inherit">
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
onClick={handleSubmit}
|
|
variant="contained"
|
|
fullWidth
|
|
disabled={!canReserve || submitted}
|
|
startIcon={submitted ? <Check size={16} /> : null}
|
|
>
|
|
{submitted ? 'Reserviert!' : 'Reservieren'}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Calendar panel */}
|
|
<Box
|
|
sx={{
|
|
p: { xs: 2.5, md: 3 },
|
|
bgcolor: 'background.default',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: { xs: 360, md: 'auto' },
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
mb: 1.5,
|
|
}}
|
|
>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
|
|
Verfügbarkeit
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', gap: 1.5 }}>
|
|
<LegendDot color="#F59E0B" label="Reserviert" />
|
|
<LegendDot label="Frei" outline />
|
|
</Box>
|
|
</Box>
|
|
<Paper
|
|
variant="outlined"
|
|
sx={{
|
|
p: { xs: 1.25, md: 1.75 },
|
|
borderRadius: 2.5,
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<Suspense
|
|
fallback={
|
|
<Box sx={{ display: 'grid', placeItems: 'center', height: 280 }}>
|
|
<CircularProgress size={24} />
|
|
</Box>
|
|
}
|
|
>
|
|
<AvailabilityCalendar events={toolEvents} />
|
|
</Suspense>
|
|
</Paper>
|
|
</Box>
|
|
</Box>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function LegendDot({
|
|
color,
|
|
label,
|
|
outline,
|
|
}: {
|
|
color?: string;
|
|
label: string;
|
|
outline?: boolean;
|
|
}) {
|
|
return (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
|
<Box
|
|
sx={{
|
|
width: 10,
|
|
height: 10,
|
|
borderRadius: 0.75,
|
|
bgcolor: color || 'transparent',
|
|
border: outline ? '1px solid' : 'none',
|
|
borderColor: 'divider',
|
|
}}
|
|
/>
|
|
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
|
|
{label}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|