feat: add tool inventory cards, hero and reservation modal
This commit is contained in:
MrFrostDev
@@ -0,0 +1,36 @@
|
||||
'use client';
|
||||
|
||||
import { Box } from '@mui/material';
|
||||
import FullCalendar from '@fullcalendar/react';
|
||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
|
||||
interface CalendarEvent {
|
||||
title: string;
|
||||
start: string;
|
||||
end: string;
|
||||
display?: 'background' | 'auto';
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export default function AvailabilityCalendar({ events }: { events: CalendarEvent[] }) {
|
||||
return (
|
||||
<Box className="pp-calendar-compact" sx={{ width: '100%' }}>
|
||||
<FullCalendar
|
||||
plugins={[dayGridPlugin, interactionPlugin]}
|
||||
initialView="dayGridMonth"
|
||||
headerToolbar={{ left: 'prev,next', center: 'title', right: '' }}
|
||||
events={events}
|
||||
height="auto"
|
||||
contentHeight="auto"
|
||||
aspectRatio={1.35}
|
||||
firstDay={1}
|
||||
locale="de"
|
||||
buttonText={{ today: 'Heute' }}
|
||||
dayHeaderFormat={{ weekday: 'short' }}
|
||||
fixedWeekCount={false}
|
||||
showNonCurrentDates={true}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
'use client';
|
||||
|
||||
import { Box, Typography, Container, Chip } from '@mui/material';
|
||||
import { Sparkles, Wrench, Bot, Zap } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useI18n } from '../services/i18n';
|
||||
import AIInput from './AIInput';
|
||||
|
||||
interface HeroSectionProps {
|
||||
onAISend: (message: string, files?: File[]) => void;
|
||||
}
|
||||
|
||||
const fadeUp = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
show: (i: number) => ({
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.55, delay: 0.1 + i * 0.08, ease: [0.16, 1, 0.3, 1] },
|
||||
}),
|
||||
};
|
||||
|
||||
export default function HeroSection({ onAISend }: HeroSectionProps) {
|
||||
const { t } = useI18n();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
pt: { xs: 6, sm: 8, md: 12 },
|
||||
pb: { xs: 4, sm: 6, md: 8 },
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
aria-hidden
|
||||
sx={{ position: 'absolute', inset: 0, zIndex: -1, overflow: 'hidden' }}
|
||||
>
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1, 1.15, 1],
|
||||
opacity: [0.32, 0.5, 0.32],
|
||||
x: [0, 30, 0],
|
||||
y: [0, -20, 0],
|
||||
}}
|
||||
transition={{ duration: 14, repeat: Infinity, ease: 'easeInOut' }}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '-15%',
|
||||
left: '5%',
|
||||
width: '50%',
|
||||
height: '70%',
|
||||
background:
|
||||
'radial-gradient(circle, rgba(255,107,0,0.18) 0%, transparent 70%)',
|
||||
filter: 'blur(80px)',
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1, 1.1, 1],
|
||||
opacity: [0.18, 0.36, 0.18],
|
||||
x: [0, -30, 0],
|
||||
y: [0, 30, 0],
|
||||
}}
|
||||
transition={{ duration: 18, repeat: Infinity, ease: 'easeInOut' }}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '-15%',
|
||||
right: '5%',
|
||||
width: '50%',
|
||||
height: '70%',
|
||||
background:
|
||||
'radial-gradient(circle, rgba(45,90,39,0.18) 0%, transparent 70%)',
|
||||
filter: 'blur(100px)',
|
||||
}}
|
||||
/>
|
||||
<Box className="pp-grid-bg" sx={{ position: 'absolute', inset: 0, opacity: 0.22 }} />
|
||||
</Box>
|
||||
|
||||
<Container maxWidth="md" sx={{ position: 'relative', px: { xs: 2.5, sm: 3 } }}>
|
||||
<motion.div custom={0} initial="hidden" animate="show" variants={fadeUp}>
|
||||
<Chip
|
||||
icon={<Sparkles size={14} />}
|
||||
label={t('heroBadge')}
|
||||
sx={{
|
||||
bgcolor: 'primary.main',
|
||||
color: 'white',
|
||||
fontWeight: 700,
|
||||
boxShadow: 'var(--pp-shadow-brand)',
|
||||
mb: { xs: 3, md: 4 },
|
||||
px: 1,
|
||||
height: 30,
|
||||
'& .MuiChip-icon': { color: 'white', ml: 0.5 },
|
||||
'& .MuiChip-label': { px: 1.25 },
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div custom={1} initial="hidden" animate="show" variants={fadeUp}>
|
||||
<Typography
|
||||
variant="h1"
|
||||
sx={{
|
||||
fontSize: { xs: '2.25rem', sm: '3rem', md: '4.25rem' },
|
||||
mb: { xs: 2, md: 2.5 },
|
||||
fontWeight: 900,
|
||||
letterSpacing: '-0.035em',
|
||||
lineHeight: 1.05,
|
||||
}}
|
||||
>
|
||||
{t('heroTitlePart1')}{' '}
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
background:
|
||||
'linear-gradient(135deg, #FF6B00 0%, #E55F00 50%, #2D5A27 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text',
|
||||
}}
|
||||
>
|
||||
{t('heroTitlePart2')}
|
||||
<motion.span
|
||||
initial={{ scaleX: 0, transformOrigin: '0% 50%' }}
|
||||
animate={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.9, delay: 0.9, ease: 'easeOut' }}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 4,
|
||||
height: 6,
|
||||
background: 'rgba(255,107,0,0.18)',
|
||||
zIndex: -1,
|
||||
borderRadius: 6,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Typography>
|
||||
</motion.div>
|
||||
|
||||
<motion.div custom={2} initial="hidden" animate="show" variants={fadeUp}>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
sx={{
|
||||
mb: { xs: 4, md: 5 },
|
||||
maxWidth: 620,
|
||||
mx: 'auto',
|
||||
fontWeight: 500,
|
||||
fontSize: { xs: '1rem', sm: '1.08rem', md: '1.15rem' },
|
||||
lineHeight: 1.55,
|
||||
}}
|
||||
>
|
||||
{t('heroSubtitle')}
|
||||
</Typography>
|
||||
</motion.div>
|
||||
|
||||
<motion.div custom={3} initial="hidden" animate="show" variants={fadeUp}>
|
||||
<Box sx={{ maxWidth: 720, mx: 'auto', textAlign: 'left' }}>
|
||||
<AIInput onSend={onAISend} />
|
||||
</Box>
|
||||
</motion.div>
|
||||
|
||||
<motion.div custom={4} initial="hidden" animate="show" variants={fadeUp}>
|
||||
<Box
|
||||
sx={{
|
||||
mt: { xs: 3.5, md: 5 },
|
||||
display: 'flex',
|
||||
gap: { xs: 1, sm: 1.5, md: 2 },
|
||||
justifyContent: 'center',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<MiniStat icon={<Wrench size={15} />} label="Inventar" value="Live" />
|
||||
<MiniStat icon={<Bot size={15} />} label="KI-Assistent" value="Gemini" />
|
||||
<MiniStat icon={<Zap size={15} />} label="Antwort" value="< 2s" />
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function MiniStat({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: string;
|
||||
}) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
pl: 1.25,
|
||||
pr: 1.5,
|
||||
py: 0.75,
|
||||
borderRadius: 999,
|
||||
bgcolor: 'background.paper',
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
boxShadow: 'var(--pp-shadow-soft)',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
color: 'primary.main',
|
||||
display: 'inline-grid',
|
||||
placeItems: 'center',
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 1.25,
|
||||
bgcolor: 'rgba(255,107,0,0.12)',
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5 }}>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary', fontSize: '0.72rem' }}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700, fontSize: '0.78rem' }}>
|
||||
{value}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,370 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
'use client';
|
||||
|
||||
import { Card, CardContent, Typography, Box, Chip, Button } from '@mui/material';
|
||||
import { MapPin, Clock, ShieldCheck, AlertTriangle, Home } from 'lucide-react';
|
||||
import { Tool, User, CATEGORY_LABEL } from '../types';
|
||||
import { useI18n } from '../services/i18n';
|
||||
|
||||
interface ToolCardProps {
|
||||
tool: Tool;
|
||||
user: User;
|
||||
onReserve: (tool: Tool) => 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 ToolCard({ tool, user, onReserve }: ToolCardProps) {
|
||||
const hasTraining =
|
||||
!tool.trainingRequired || user.trainings.includes(tool.requiredTrainingId!);
|
||||
const isLocked = !hasTraining && user.role !== 'admin';
|
||||
const { t } = useI18n();
|
||||
|
||||
return (
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
borderRadius: 3,
|
||||
transition: 'transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease',
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
'&:hover': {
|
||||
borderColor: 'primary.main',
|
||||
transform: 'translateY(-4px)',
|
||||
boxShadow: 'var(--pp-shadow-elevated)',
|
||||
},
|
||||
'&:hover .pp-tool-emoji': { transform: 'scale(1.08) rotate(-4deg)' },
|
||||
'&:hover .pp-tool-shine': { transform: 'translateX(220%)' },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
className="pp-tool-shine"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '60%',
|
||||
height: '100%',
|
||||
background:
|
||||
'linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%)',
|
||||
transform: 'translateX(-220%)',
|
||||
transition: 'transform 0.8s ease',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Header strip with emoji + category */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
height: 92,
|
||||
background: 'linear-gradient(135deg, rgba(255,107,0,0.12), rgba(45,90,39,0.08))',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
px: 2.5,
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
className="pp-tool-emoji"
|
||||
sx={{
|
||||
fontSize: 40,
|
||||
transition: 'transform 0.3s ease',
|
||||
lineHeight: 1,
|
||||
filter: 'drop-shadow(0 2px 6px rgba(0,0,0,0.15))',
|
||||
}}
|
||||
>
|
||||
{tool.emoji}
|
||||
</Box>
|
||||
<Chip
|
||||
label={CATEGORY_LABEL[tool.category]}
|
||||
size="small"
|
||||
sx={{
|
||||
...pillSx,
|
||||
bgcolor: 'background.paper',
|
||||
color: 'text.primary',
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<CardContent
|
||||
sx={{
|
||||
p: 2.5,
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 800, mb: 0.75, letterSpacing: '-0.01em', fontSize: '1.05rem' }}>
|
||||
{tool.name}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{
|
||||
mb: 2,
|
||||
flexGrow: 1,
|
||||
lineHeight: 1.5,
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 3,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{tool.description}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mb: 2 }}>
|
||||
{tool.trainingRequired ? (
|
||||
<Chip
|
||||
icon={hasTraining ? <ShieldCheck size={11} /> : <AlertTriangle size={11} />}
|
||||
label={hasTraining ? t('certified') : t('trainingMissing')}
|
||||
color={hasTraining ? 'success' : 'warning'}
|
||||
size="small"
|
||||
sx={pillSx}
|
||||
/>
|
||||
) : (
|
||||
<Chip
|
||||
label={t('freeAccess')}
|
||||
color="success"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
sx={pillSx}
|
||||
/>
|
||||
)}
|
||||
{tool.homeAllowed && (
|
||||
<Chip
|
||||
icon={<Home size={11} />}
|
||||
label={t('homeUse')}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
sx={pillSx}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 1.5,
|
||||
mb: 2,
|
||||
pt: 1.5,
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'text.secondary', fontSize: '0.75rem' }}>
|
||||
<MapPin size={12} />
|
||||
{tool.location}
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'text.secondary', fontSize: '0.75rem' }}>
|
||||
<Clock size={12} />
|
||||
max. {tool.maxRentalDays} {t('days')}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
variant={isLocked ? 'outlined' : 'contained'}
|
||||
color={isLocked ? 'inherit' : 'primary'}
|
||||
onClick={() => onReserve(tool)}
|
||||
disabled={isLocked}
|
||||
sx={{ py: 1, fontWeight: 700 }}
|
||||
>
|
||||
{isLocked ? t('trainingRequired') : t('reserve')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user