feat: add admin dashboard with CRUD and reservation approvals
This commit is contained in:
MrFrostDev
@@ -0,0 +1,112 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import FullCalendar from '@fullcalendar/react';
|
||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||
import timeGridPlugin from '@fullcalendar/timegrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
import { Paper, Box, Typography } from '@mui/material';
|
||||
import { useReservationStore } from '../services/reservation-store';
|
||||
import { MOCK_TOOLS } from '../services/mock-data';
|
||||
|
||||
const STATUS_COLOR: Record<string, string> = {
|
||||
requested: '#F59E0B',
|
||||
approved: '#22C55E',
|
||||
active: '#3B82F6',
|
||||
completed: '#9CA3AF',
|
||||
overdue: '#EF4444',
|
||||
};
|
||||
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
requested: 'Angefragt',
|
||||
approved: 'Genehmigt',
|
||||
active: 'Aktiv',
|
||||
completed: 'Erledigt',
|
||||
overdue: 'Überfällig',
|
||||
};
|
||||
|
||||
export default function AdminCalendar() {
|
||||
const reservations = useReservationStore((state) => state.reservations);
|
||||
|
||||
const events = reservations.map((res) => {
|
||||
const tool = MOCK_TOOLS.find((t) => t.id === res.toolId);
|
||||
const color = STATUS_COLOR[res.status] ?? '#FF6B00';
|
||||
return {
|
||||
id: res.id,
|
||||
title: tool ? tool.name : 'Werkzeug',
|
||||
start: res.startDate,
|
||||
end: res.endDate,
|
||||
backgroundColor: color,
|
||||
borderColor: color,
|
||||
extendedProps: { status: res.status },
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', mb: 2, flexWrap: 'wrap', gap: 1 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
Reservierungskalender
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
|
||||
{Object.entries(STATUS_LABEL).map(([key, label]) => (
|
||||
<Box key={key} sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 0.75,
|
||||
bgcolor: STATUS_COLOR[key],
|
||||
}}
|
||||
/>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{label}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Paper variant="outlined" sx={{ p: { xs: 1.5, md: 2 }, borderRadius: 3 }}>
|
||||
<FullCalendar
|
||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||
initialView="dayGridMonth"
|
||||
headerToolbar={{
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay',
|
||||
}}
|
||||
events={events}
|
||||
height="auto"
|
||||
firstDay={1}
|
||||
locale="de"
|
||||
buttonText={{
|
||||
today: 'Heute',
|
||||
month: 'Monat',
|
||||
week: 'Woche',
|
||||
day: 'Tag',
|
||||
}}
|
||||
dayHeaderFormat={{ weekday: 'short' }}
|
||||
eventContent={(eventInfo) => (
|
||||
<Box sx={{ px: 0.5, overflow: 'hidden' }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
display: 'block',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: '0.72rem',
|
||||
color: '#fff',
|
||||
}}
|
||||
>
|
||||
{eventInfo.event.title}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
/>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,816 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Typography,
|
||||
Tab,
|
||||
Tabs,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Button,
|
||||
IconButton,
|
||||
Chip,
|
||||
useMediaQuery,
|
||||
Tooltip,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TextField,
|
||||
MenuItem,
|
||||
Stack,
|
||||
Switch,
|
||||
FormControlLabel,
|
||||
} from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { useState, lazy, Suspense, useMemo } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
Plus,
|
||||
Edit2,
|
||||
Trash2,
|
||||
FileText,
|
||||
Users,
|
||||
Hammer,
|
||||
Calendar as CalendarIcon,
|
||||
Activity,
|
||||
TrendingUp,
|
||||
ShieldCheck,
|
||||
Check,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { useI18n } from '../services/i18n';
|
||||
import { CATEGORY_LABEL, type Tool, type ToolCategory } from '../types';
|
||||
import { useToolsStore } from '../services/tools-store';
|
||||
import { useReservationStore } from '../services/reservation-store';
|
||||
import { MOCK_USERS } from '../services/mock-data';
|
||||
|
||||
const AdminCalendar = lazy(() => import('./AdminCalendar'));
|
||||
|
||||
const STATUS_COLOR: Record<string, 'default' | 'warning' | 'success' | 'info' | 'error'> = {
|
||||
requested: 'warning',
|
||||
approved: 'success',
|
||||
active: 'info',
|
||||
completed: 'default',
|
||||
overdue: 'error',
|
||||
};
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const theme = useTheme();
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const { t } = useI18n();
|
||||
|
||||
const tools = useToolsStore((s) => s.tools);
|
||||
const removeTool = useToolsStore((s) => s.removeTool);
|
||||
const addTool = useToolsStore((s) => s.addTool);
|
||||
const updateTool = useToolsStore((s) => s.updateTool);
|
||||
const manuals = useToolsStore((s) => s.manuals);
|
||||
const addManual = useToolsStore((s) => s.addManual);
|
||||
const removeManual = useToolsStore((s) => s.removeManual);
|
||||
|
||||
const reservations = useReservationStore((s) => s.reservations);
|
||||
const updateStatus = useReservationStore((s) => s.updateStatus);
|
||||
const removeReservation = useReservationStore((s) => s.removeReservation);
|
||||
|
||||
const [toolDialogOpen, setToolDialogOpen] = useState(false);
|
||||
const [editingTool, setEditingTool] = useState<Tool | null>(null);
|
||||
const [confirmDelete, setConfirmDelete] = useState<{
|
||||
kind: 'tool' | 'reservation';
|
||||
id: string;
|
||||
label: string;
|
||||
} | null>(null);
|
||||
const [manualDialogOpen, setManualDialogOpen] = useState(false);
|
||||
|
||||
const stats = useMemo(() => {
|
||||
const active = reservations.filter(
|
||||
(r) => r.status === 'approved' || r.status === 'active'
|
||||
).length;
|
||||
const pending = reservations.filter((r) => r.status === 'requested').length;
|
||||
return { tools: tools.length, users: MOCK_USERS.length, active, pending };
|
||||
}, [reservations, tools]);
|
||||
|
||||
const pendingReservations = reservations.filter((r) => r.status === 'requested');
|
||||
|
||||
const openAdd = () => {
|
||||
setEditingTool(null);
|
||||
setToolDialogOpen(true);
|
||||
};
|
||||
|
||||
const openEdit = (tool: Tool) => {
|
||||
setEditingTool(tool);
|
||||
setToolDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteConfirmed = () => {
|
||||
if (!confirmDelete) return;
|
||||
if (confirmDelete.kind === 'tool') removeTool(confirmDelete.id);
|
||||
if (confirmDelete.kind === 'reservation') removeReservation(confirmDelete.id);
|
||||
setConfirmDelete(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container maxWidth="lg" sx={{ py: { xs: 3, md: 5 } }}>
|
||||
<Box sx={{ mb: { xs: 3, md: 4 }, display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 2.5,
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: 'linear-gradient(135deg, #FF6B00, #E55F00)',
|
||||
color: 'white',
|
||||
boxShadow: 'var(--pp-shadow-brand)',
|
||||
}}
|
||||
>
|
||||
<ShieldCheck size={20} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="h4" sx={{ fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
|
||||
{t('adminDashboard')}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('adminSubtitle')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Stats */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: { xs: 'repeat(2, 1fr)', md: 'repeat(4, 1fr)' },
|
||||
gap: { xs: 1.5, md: 2 },
|
||||
mb: { xs: 3, md: 4 },
|
||||
}}
|
||||
>
|
||||
<StatCard delay={0} icon={<Hammer size={18} />} label={t('statsTools')} value={stats.tools} accent="#FF6B00" />
|
||||
<StatCard delay={0.05} icon={<Users size={18} />} label={t('statsUsers')} value={stats.users} accent="#2D5A27" />
|
||||
<StatCard delay={0.1} icon={<Activity size={18} />} label={t('statsActive')} value={stats.active} accent="#3B82F6" />
|
||||
<StatCard delay={0.15} icon={<TrendingUp size={18} />} label={t('statsPending')} value={stats.pending} accent="#F59E0B" />
|
||||
</Box>
|
||||
|
||||
{/* Pending requests banner */}
|
||||
{pendingReservations.length > 0 && (
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={{
|
||||
mb: { xs: 3, md: 4 },
|
||||
p: { xs: 2, md: 2.5 },
|
||||
borderRadius: 3,
|
||||
borderColor: 'warning.main',
|
||||
bgcolor: 'rgba(245, 158, 11, 0.06)',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, mb: 1.5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 1.5,
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
bgcolor: 'warning.main',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
<TrendingUp size={14} />
|
||||
</Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
|
||||
{t('pendingReservations')} ({pendingReservations.length})
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack spacing={1}>
|
||||
{pendingReservations.map((r) => {
|
||||
const tool = tools.find((tt) => tt.id === r.toolId);
|
||||
const requester = MOCK_USERS.find((u) => u.id === r.userId);
|
||||
return (
|
||||
<Paper
|
||||
key={r.id}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1.5,
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ fontSize: 24 }}>{tool?.emoji ?? '🔧'}</Box>
|
||||
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700 }} noWrap>
|
||||
{tool?.name ?? '—'}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('requestedBy')}: <strong>{requester?.username ?? '?'}</strong> · {r.startDate} → {r.endDate}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 0.75 }}>
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
color="success"
|
||||
startIcon={<Check size={14} />}
|
||||
onClick={() => updateStatus(r.id, 'approved')}
|
||||
>
|
||||
{t('approve')}
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color="error"
|
||||
startIcon={<X size={14} />}
|
||||
onClick={() => updateStatus(r.id, 'completed')}
|
||||
>
|
||||
{t('reject')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(_, val) => setActiveTab(val)}
|
||||
variant={isSmall ? 'scrollable' : 'standard'}
|
||||
scrollButtons="auto"
|
||||
allowScrollButtonsMobile
|
||||
>
|
||||
<Tab icon={<Hammer size={16} />} iconPosition="start" label={t('manageTools')} />
|
||||
<Tab icon={<CalendarIcon size={16} />} iconPosition="start" label={t('calendar')} />
|
||||
<Tab icon={<FileText size={16} />} iconPosition="start" label={t('manageRAG')} />
|
||||
<Tab icon={<Users size={16} />} iconPosition="start" label={t('manageUsers')} />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
{activeTab === 0 && (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2, flexWrap: 'wrap', gap: 1 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
{t('manageTools')}
|
||||
</Typography>
|
||||
<Button variant="contained" startIcon={<Plus size={16} />} onClick={openAdd}>
|
||||
{t('addTool')}
|
||||
</Button>
|
||||
</Box>
|
||||
<TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 3, overflowX: 'auto' }}>
|
||||
<Table sx={{ minWidth: 640 }}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>{t('name')}</TableCell>
|
||||
<TableCell>{t('category')}</TableCell>
|
||||
<TableCell>{t('location')}</TableCell>
|
||||
<TableCell>{t('status')}</TableCell>
|
||||
<TableCell align="right">{t('actions')}</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{tools.map((tool) => (
|
||||
<TableRow key={tool.id} hover>
|
||||
<TableCell>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Box sx={{ fontSize: 20 }}>{tool.emoji}</Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
||||
{tool.name}
|
||||
</Typography>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={CATEGORY_LABEL[tool.category]}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
sx={{ borderRadius: 1.25, height: 22, fontSize: '0.7rem' }}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>{tool.location}</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={tool.trainingRequired ? t('trainingRequired') : t('available')}
|
||||
color={tool.trainingRequired ? 'warning' : 'success'}
|
||||
size="small"
|
||||
sx={{ borderRadius: 1.25, height: 22, fontSize: '0.7rem' }}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Tooltip title={t('edit')}>
|
||||
<IconButton size="small" onClick={() => openEdit(tool)}>
|
||||
<Edit2 size={14} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('delete')}>
|
||||
<IconButton
|
||||
size="small"
|
||||
color="error"
|
||||
onClick={() =>
|
||||
setConfirmDelete({ kind: 'tool', id: tool.id, label: tool.name })
|
||||
}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{activeTab === 1 && (
|
||||
<Suspense
|
||||
fallback={
|
||||
<Box sx={{ display: 'grid', placeItems: 'center', minHeight: 360 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('calendar')} …
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<AdminCalendar />
|
||||
</Suspense>
|
||||
)}
|
||||
|
||||
{activeTab === 2 && (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2, flexWrap: 'wrap', gap: 1 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
{t('manageRAG')}
|
||||
</Typography>
|
||||
<Button variant="contained" startIcon={<Plus size={16} />} onClick={() => setManualDialogOpen(true)}>
|
||||
{t('addManual')}
|
||||
</Button>
|
||||
</Box>
|
||||
<TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 3, overflowX: 'auto' }}>
|
||||
<Table sx={{ minWidth: 600 }}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>{t('forTool')}</TableCell>
|
||||
<TableCell>{t('manualPreview')}</TableCell>
|
||||
<TableCell align="right">{t('actions')}</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{manuals.map((manual, idx) => {
|
||||
const tool = tools.find((tt) => tt.id === manual.toolId);
|
||||
return (
|
||||
<TableRow key={idx} hover>
|
||||
<TableCell>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Box sx={{ fontSize: 18 }}>{tool?.emoji ?? '📄'}</Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
||||
{manual.title ?? tool?.name ?? 'Allgemein'}
|
||||
</Typography>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell sx={{ color: 'text.secondary', maxWidth: 320, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
{manual.content}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton
|
||||
size="small"
|
||||
color="error"
|
||||
onClick={() => removeManual(manual.toolId, idx)}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{activeTab === 3 && (
|
||||
<Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}>
|
||||
{t('manageUsers')}
|
||||
</Typography>
|
||||
<TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 3, overflowX: 'auto' }}>
|
||||
<Table sx={{ minWidth: 600 }}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>{t('username')}</TableCell>
|
||||
<TableCell>{t('role')}</TableCell>
|
||||
<TableCell>{t('certifications')}</TableCell>
|
||||
<TableCell align="right">{t('actions')}</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{MOCK_USERS.map((user) => (
|
||||
<TableRow key={user.id} hover>
|
||||
<TableCell sx={{ fontWeight: 700 }}>{user.username}</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={user.role}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color={user.role === 'admin' ? 'primary' : 'default'}
|
||||
sx={{ textTransform: 'capitalize', borderRadius: 1.25, height: 22, fontSize: '0.7rem' }}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{user.trainings.length > 0 ? (
|
||||
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
{user.trainings.map((tr, i) => (
|
||||
<Chip
|
||||
key={i}
|
||||
label={tr}
|
||||
size="small"
|
||||
sx={{ borderRadius: 1.25, height: 20, fontSize: '0.68rem' }}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
) : (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('none')}
|
||||
</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton size="small">
|
||||
<Edit2 size={14} />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Box>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
<ToolEditorDialog
|
||||
open={toolDialogOpen}
|
||||
tool={editingTool}
|
||||
onClose={() => setToolDialogOpen(false)}
|
||||
onSave={(values) => {
|
||||
if (editingTool) {
|
||||
updateTool(editingTool.id, values);
|
||||
} else {
|
||||
addTool(values);
|
||||
}
|
||||
setToolDialogOpen(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<ManualEditorDialog
|
||||
open={manualDialogOpen}
|
||||
tools={tools}
|
||||
onClose={() => setManualDialogOpen(false)}
|
||||
onSave={(manual) => {
|
||||
addManual(manual);
|
||||
setManualDialogOpen(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Dialog
|
||||
open={Boolean(confirmDelete)}
|
||||
onClose={() => setConfirmDelete(null)}
|
||||
PaperProps={{ sx: { borderRadius: 3 } }}
|
||||
>
|
||||
<DialogTitle sx={{ fontWeight: 700 }}>{t('confirmDelete')}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{confirmDelete?.label}
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setConfirmDelete(null)} color="inherit">
|
||||
{t('cancel')}
|
||||
</Button>
|
||||
<Button onClick={handleDeleteConfirmed} variant="contained" color="error">
|
||||
{t('delete')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------ Tool Editor Dialog ------------ */
|
||||
|
||||
const EMPTY_TOOL: Omit<Tool, 'id'> = {
|
||||
name: '',
|
||||
description: '',
|
||||
location: '',
|
||||
category: 'hand',
|
||||
trainingRequired: false,
|
||||
requiredTrainingId: '',
|
||||
homeAllowed: true,
|
||||
maxRentalDays: 3,
|
||||
emoji: '🔧',
|
||||
};
|
||||
|
||||
function ToolEditorDialog({
|
||||
open,
|
||||
tool,
|
||||
onClose,
|
||||
onSave,
|
||||
}: {
|
||||
open: boolean;
|
||||
tool: Tool | null;
|
||||
onClose: () => void;
|
||||
onSave: (values: Omit<Tool, 'id'>) => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [values, setValues] = useState<Omit<Tool, 'id'>>(EMPTY_TOOL);
|
||||
|
||||
// Reset when opening or switching tool
|
||||
useMemo(() => {
|
||||
if (open) {
|
||||
setValues(tool ? { ...tool } : EMPTY_TOOL);
|
||||
}
|
||||
}, [open, tool]);
|
||||
|
||||
const update = <K extends keyof Omit<Tool, 'id'>>(key: K, val: Omit<Tool, 'id'>[K]) =>
|
||||
setValues((v) => ({ ...v, [key]: val }));
|
||||
|
||||
const canSave = values.name.trim().length > 0 && values.location.trim().length > 0;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} fullWidth maxWidth="sm" PaperProps={{ sx: { borderRadius: 3 } }}>
|
||||
<DialogTitle sx={{ fontWeight: 800 }}>
|
||||
{tool ? t('editTool') : t('addTool')}
|
||||
</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<Stack spacing={2} sx={{ pt: 1 }}>
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: 2 }}>
|
||||
<TextField
|
||||
label={t('emoji')}
|
||||
value={values.emoji}
|
||||
onChange={(e) => update('emoji', e.target.value)}
|
||||
size="small"
|
||||
inputProps={{ maxLength: 2, style: { fontSize: 24, textAlign: 'center' } }}
|
||||
/>
|
||||
<TextField
|
||||
label={t('name')}
|
||||
value={values.name}
|
||||
onChange={(e) => update('name', e.target.value)}
|
||||
size="small"
|
||||
fullWidth
|
||||
autoFocus
|
||||
/>
|
||||
</Box>
|
||||
<TextField
|
||||
label={t('description')}
|
||||
value={values.description}
|
||||
onChange={(e) => update('description', e.target.value)}
|
||||
size="small"
|
||||
multiline
|
||||
minRows={2}
|
||||
maxRows={4}
|
||||
fullWidth
|
||||
/>
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: '2fr 1fr' }, gap: 2 }}>
|
||||
<TextField
|
||||
label={t('location')}
|
||||
value={values.location}
|
||||
onChange={(e) => update('location', e.target.value)}
|
||||
size="small"
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
label="Max. Tage"
|
||||
type="number"
|
||||
value={values.maxRentalDays}
|
||||
onChange={(e) => update('maxRentalDays', Math.max(1, Number(e.target.value)))}
|
||||
size="small"
|
||||
fullWidth
|
||||
inputProps={{ min: 1, max: 30 }}
|
||||
/>
|
||||
</Box>
|
||||
<TextField
|
||||
select
|
||||
label={t('category')}
|
||||
value={values.category}
|
||||
onChange={(e) => update('category', e.target.value as ToolCategory)}
|
||||
size="small"
|
||||
fullWidth
|
||||
>
|
||||
{(Object.entries(CATEGORY_LABEL) as [ToolCategory, string][]).map(([key, label]) => (
|
||||
<MenuItem key={key} value={key}>
|
||||
{label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
<Stack direction="row" spacing={2} flexWrap="wrap" useFlexGap>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={values.trainingRequired}
|
||||
onChange={(e) => update('trainingRequired', e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label={t('trainingRequired')}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={values.homeAllowed}
|
||||
onChange={(e) => update('homeAllowed', e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label={t('homeUse')}
|
||||
/>
|
||||
</Stack>
|
||||
{values.trainingRequired && (
|
||||
<TextField
|
||||
label="Training-ID"
|
||||
value={values.requiredTrainingId ?? ''}
|
||||
onChange={(e) => update('requiredTrainingId', e.target.value)}
|
||||
size="small"
|
||||
helperText="z. B. drill, 3d-print, laser, soldering, cnc"
|
||||
fullWidth
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} color="inherit">
|
||||
{t('cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => canSave && onSave(values)}
|
||||
variant="contained"
|
||||
disabled={!canSave}
|
||||
>
|
||||
{t('save')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------ Manual Editor Dialog ------------ */
|
||||
|
||||
function ManualEditorDialog({
|
||||
open,
|
||||
tools,
|
||||
onClose,
|
||||
onSave,
|
||||
}: {
|
||||
open: boolean;
|
||||
tools: Tool[];
|
||||
onClose: () => void;
|
||||
onSave: (manual: { toolId: string; title: string; content: string }) => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [toolId, setToolId] = useState<string>('');
|
||||
const [title, setTitle] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
|
||||
useMemo(() => {
|
||||
if (open) {
|
||||
setToolId(tools[0]?.id ?? '');
|
||||
setTitle('');
|
||||
setContent('');
|
||||
}
|
||||
}, [open, tools]);
|
||||
|
||||
const canSave = Boolean(toolId) && content.trim().length > 0;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} fullWidth maxWidth="sm" PaperProps={{ sx: { borderRadius: 3 } }}>
|
||||
<DialogTitle sx={{ fontWeight: 800 }}>{t('addManual')}</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<Stack spacing={2} sx={{ pt: 1 }}>
|
||||
<TextField
|
||||
select
|
||||
label={t('forTool')}
|
||||
value={toolId}
|
||||
onChange={(e) => setToolId(e.target.value)}
|
||||
size="small"
|
||||
fullWidth
|
||||
>
|
||||
{tools.map((tool) => (
|
||||
<MenuItem key={tool.id} value={tool.id}>
|
||||
{tool.emoji} {tool.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
<TextField
|
||||
label={t('title')}
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
size="small"
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
label={t('content')}
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
size="small"
|
||||
multiline
|
||||
minRows={4}
|
||||
maxRows={10}
|
||||
fullWidth
|
||||
placeholder="Beschreibe Bedienung, Sicherheitshinweise, häufige Probleme…"
|
||||
/>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} color="inherit">
|
||||
{t('cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => canSave && onSave({ toolId, title, content })}
|
||||
variant="contained"
|
||||
disabled={!canSave}
|
||||
>
|
||||
{t('save')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
accent,
|
||||
delay,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: number;
|
||||
accent: string;
|
||||
delay: number;
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay, ease: 'easeOut' }}
|
||||
>
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={{
|
||||
p: 2,
|
||||
borderRadius: 3,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
transition: 'transform 0.2s ease, box-shadow 0.2s ease',
|
||||
'&:hover': { transform: 'translateY(-2px)', boxShadow: 'var(--pp-shadow-elevated)' },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: -20,
|
||||
right: -20,
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: '50%',
|
||||
background: `radial-gradient(circle, ${accent}22, transparent 70%)`,
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 1.5,
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
bgcolor: `${accent}1A`,
|
||||
color: accent,
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</Box>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600 }}>
|
||||
{label}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="h4" sx={{ fontWeight: 800, letterSpacing: '-0.02em' }}>
|
||||
{value}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user