feat: add onboarding walkthrough and wire all views into main page
This commit is contained in:
MrFrostDev
@@ -0,0 +1,770 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
TextField,
|
||||
Button,
|
||||
Typography,
|
||||
Paper,
|
||||
AppBar,
|
||||
Toolbar,
|
||||
IconButton,
|
||||
Chip,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Drawer,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemButton,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Divider,
|
||||
useMediaQuery,
|
||||
Tooltip,
|
||||
InputAdornment,
|
||||
Avatar,
|
||||
ToggleButtonGroup,
|
||||
ToggleButton,
|
||||
} from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Sun,
|
||||
Moon,
|
||||
Languages,
|
||||
LogOut,
|
||||
User as UserIcon,
|
||||
Settings,
|
||||
Menu as MenuIcon,
|
||||
MessageSquare,
|
||||
Wrench,
|
||||
ShieldCheck,
|
||||
Lock,
|
||||
ChevronRight,
|
||||
Search,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import Logo from '../components/Logo';
|
||||
|
||||
import { useAuthStore } from '../services/auth-store';
|
||||
import { useColorMode } from '../services/color-mode';
|
||||
import { useChatStore } from '../services/chat-store';
|
||||
import { useI18n } from '../services/i18n';
|
||||
import { useToolsStore } from '../services/tools-store';
|
||||
import { Tool, ToolCategory, CATEGORY_LABEL } from '../types';
|
||||
|
||||
import ChatSidebar from '../components/ChatSidebar';
|
||||
import ChatWindow from '../components/ChatWindow';
|
||||
import ToolCard from '../components/ToolCard';
|
||||
import ReservationModal from '../components/ReservationModal';
|
||||
import Onboarding from '../components/Onboarding';
|
||||
import HeroSection from '../components/HeroSection';
|
||||
import AdminDashboard from '../components/AdminDashboard';
|
||||
import AnimatedBackground from '../components/AnimatedBackground';
|
||||
|
||||
type View = 'tools' | 'chat' | 'admin';
|
||||
|
||||
const APPBAR_HEIGHT = 64;
|
||||
|
||||
export default function Home() {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
||||
const isSmall = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
|
||||
const { user, login, logout } = useAuthStore();
|
||||
const { mode, toggleColorMode } = useColorMode();
|
||||
const { t, lang, setLang } = useI18n();
|
||||
const { createSession, addMessage } = useChatStore();
|
||||
const tools = useToolsStore((s) => s.tools);
|
||||
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loginError, setLoginError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||||
const openLangMenu = Boolean(anchorEl);
|
||||
|
||||
const [view, setView] = useState<View>('tools');
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
|
||||
const [showOnboarding, setShowOnboarding] = useState(false);
|
||||
const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
// Tools page filters
|
||||
const [search, setSearch] = useState('');
|
||||
const [categoryFilter, setCategoryFilter] = useState<ToolCategory | 'all'>('all');
|
||||
|
||||
const navItems = useMemo(
|
||||
() =>
|
||||
[
|
||||
{ id: 'tools' as View, label: t('tools'), icon: <Wrench size={18} /> },
|
||||
{ id: 'chat' as View, label: t('chat'), icon: <MessageSquare size={18} /> },
|
||||
...(user?.role === 'admin'
|
||||
? [{ id: 'admin' as View, label: t('admin'), icon: <Settings size={18} /> }]
|
||||
: []),
|
||||
],
|
||||
[user, t]
|
||||
);
|
||||
|
||||
const filteredTools = useMemo(() => {
|
||||
const q = search.trim().toLowerCase();
|
||||
return tools.filter((tool) => {
|
||||
if (categoryFilter !== 'all' && tool.category !== categoryFilter) return false;
|
||||
if (!q) return true;
|
||||
return (
|
||||
tool.name.toLowerCase().includes(q) ||
|
||||
tool.description.toLowerCase().includes(q) ||
|
||||
tool.location.toLowerCase().includes(q) ||
|
||||
CATEGORY_LABEL[tool.category].toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
}, [tools, search, categoryFilter]);
|
||||
|
||||
const handleLangClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleLangClose = (newLang?: 'de' | 'en') => {
|
||||
if (newLang) setLang(newLang);
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleLogin = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
setLoginError(null);
|
||||
const ok = login(username.trim(), password);
|
||||
if (ok) {
|
||||
setShowOnboarding(true);
|
||||
} else {
|
||||
setLoginError(t('loginError'));
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
const openReservation = (tool: Tool) => {
|
||||
setSelectedTool(tool);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleAISend = (message: string) => {
|
||||
const sessionId = createSession(message.substring(0, 30) || 'Neue Reparatur');
|
||||
setView('chat');
|
||||
addMessage(sessionId, { role: 'user', content: message });
|
||||
};
|
||||
|
||||
const navigate = (next: View) => {
|
||||
setView(next);
|
||||
setDrawerOpen(false);
|
||||
};
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<LoginScreen
|
||||
username={username}
|
||||
password={password}
|
||||
setUsername={setUsername}
|
||||
setPassword={setPassword}
|
||||
submitting={submitting}
|
||||
loginError={loginError}
|
||||
onSubmit={handleLogin}
|
||||
t={t}
|
||||
mode={mode}
|
||||
toggleColorMode={toggleColorMode}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const usedCategories = Array.from(new Set(tools.map((t) => t.category))) as ToolCategory[];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<AnimatedBackground intensity={view === 'tools' ? 1 : 0.6} />
|
||||
|
||||
<Box sx={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
|
||||
<AppBar position="sticky" elevation={0} sx={{ color: 'text.primary' }}>
|
||||
<Toolbar sx={{ minHeight: { xs: APPBAR_HEIGHT, sm: APPBAR_HEIGHT }, gap: 1 }}>
|
||||
{isMobile && (
|
||||
<IconButton
|
||||
edge="start"
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
aria-label="Menü öffnen"
|
||||
sx={{ mr: 0.5 }}
|
||||
>
|
||||
<MenuIcon size={22} />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1.25,
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
flexGrow: { xs: 1, md: 0 },
|
||||
}}
|
||||
onClick={() => navigate('tools')}
|
||||
>
|
||||
<Logo size={36} />
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontWeight: 900,
|
||||
letterSpacing: '-0.02em',
|
||||
fontSize: { xs: '1.05rem', sm: '1.15rem' },
|
||||
display: { xs: isSmall ? 'none' : 'block', sm: 'block' },
|
||||
}}
|
||||
>
|
||||
PATCH<Box component="span" sx={{ color: 'primary.main' }}>PILOT</Box>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{!isMobile && (
|
||||
<Box sx={{ ml: 3, display: 'flex', gap: 0.5, flexGrow: 1 }}>
|
||||
{navItems.map((item) => (
|
||||
<Button
|
||||
key={item.id}
|
||||
onClick={() => navigate(item.id)}
|
||||
startIcon={item.icon}
|
||||
variant={view === item.id ? 'contained' : 'text'}
|
||||
color={view === item.id ? 'primary' : 'inherit'}
|
||||
sx={{
|
||||
px: 2,
|
||||
fontWeight: view === item.id ? 700 : 500,
|
||||
boxShadow: view === item.id ? 'var(--pp-shadow-brand)' : 'none',
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{isMobile && <Box sx={{ flexGrow: 1 }} />}
|
||||
|
||||
<Tooltip title="Sprache wechseln">
|
||||
<IconButton onClick={handleLangClick} size="small">
|
||||
<Languages size={20} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu anchorEl={anchorEl} open={openLangMenu} onClose={() => handleLangClose()}>
|
||||
<MenuItem onClick={() => handleLangClose('de')} selected={lang === 'de'}>
|
||||
Deutsch
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => handleLangClose('en')} selected={lang === 'en'}>
|
||||
English
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
|
||||
<Tooltip title={mode === 'dark' ? 'Light' : 'Dark'}>
|
||||
<IconButton onClick={toggleColorMode} size="small">
|
||||
{mode === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
{!isSmall && (
|
||||
<Chip
|
||||
icon={<UserIcon size={14} />}
|
||||
label={user.username}
|
||||
sx={{ ml: 1, fontWeight: 600, borderRadius: 1.5 }}
|
||||
size="small"
|
||||
/>
|
||||
)}
|
||||
<Tooltip title={t('logout')}>
|
||||
<IconButton onClick={logout} size="small">
|
||||
<LogOut size={20} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
<Drawer anchor="left" open={drawerOpen} onClose={() => setDrawerOpen(false)}>
|
||||
<Box sx={{ width: 280, pt: 2, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ px: 2.5, pb: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Avatar
|
||||
sx={{
|
||||
bgcolor: 'primary.main',
|
||||
width: 40,
|
||||
height: 40,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</Avatar>
|
||||
<Box>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 700, lineHeight: 1.2 }}>
|
||||
{user.username}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{user.role === 'admin' ? t('administrator') : user.role === 'staff' ? t('staffRole') : t('guestRole')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Divider />
|
||||
<List sx={{ flexGrow: 1, p: 1 }}>
|
||||
{navItems.map((item) => (
|
||||
<ListItem key={item.id} disablePadding sx={{ mb: 0.5 }}>
|
||||
<ListItemButton
|
||||
selected={view === item.id}
|
||||
onClick={() => navigate(item.id)}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
'&.Mui-selected': {
|
||||
bgcolor: 'primary.main',
|
||||
color: 'white',
|
||||
'& .MuiListItemIcon-root': { color: 'white' },
|
||||
'&:hover': { bgcolor: 'primary.dark' },
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{ minWidth: 36 }}>{item.icon}</ListItemIcon>
|
||||
<ListItemText primary={item.label} primaryTypographyProps={{ fontWeight: 600 }} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
<Divider />
|
||||
<Box sx={{ p: 1.5 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
startIcon={<LogOut size={18} />}
|
||||
onClick={logout}
|
||||
color="inherit"
|
||||
>
|
||||
{t('logout')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Drawer>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={view}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -8 }}
|
||||
transition={{ duration: 0.25, ease: 'easeOut' }}
|
||||
style={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
{view === 'tools' ? (
|
||||
<Box sx={{ pb: { xs: 6, md: 10 } }}>
|
||||
<HeroSection onAISend={handleAISend} />
|
||||
<Container maxWidth="lg" sx={{ mt: { xs: 2, md: 4 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: { xs: 'stretch', md: 'center' },
|
||||
justifyContent: 'space-between',
|
||||
mb: { xs: 2, md: 3 },
|
||||
flexDirection: { xs: 'column', md: 'row' },
|
||||
gap: { xs: 1.5, md: 2 },
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ fontWeight: 800, letterSpacing: '-0.015em' }}>
|
||||
{t('inventory')}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{filteredTools.length} / {tools.length} {t('inventoryHint')}
|
||||
</Typography>
|
||||
</Box>
|
||||
<TextField
|
||||
size="small"
|
||||
placeholder={t('search')}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
sx={{ minWidth: { xs: '100%', sm: 280 } }}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Search size={16} />
|
||||
</InputAdornment>
|
||||
),
|
||||
endAdornment: search ? (
|
||||
<InputAdornment position="end">
|
||||
<IconButton size="small" onClick={() => setSearch('')}>
|
||||
<X size={14} />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
) : null,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: { xs: 2.5, md: 3 }, overflowX: 'auto', pb: 0.5 }}>
|
||||
<ToggleButtonGroup
|
||||
value={categoryFilter}
|
||||
exclusive
|
||||
onChange={(_, v) => v && setCategoryFilter(v)}
|
||||
size="small"
|
||||
sx={{
|
||||
'& .MuiToggleButton-root': {
|
||||
textTransform: 'none',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.78rem',
|
||||
borderRadius: '999px !important',
|
||||
mx: 0.25,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
px: 1.5,
|
||||
py: 0.5,
|
||||
height: 30,
|
||||
'&.Mui-selected': {
|
||||
bgcolor: 'primary.main',
|
||||
color: 'white',
|
||||
borderColor: 'primary.main',
|
||||
'&:hover': { bgcolor: 'primary.dark' },
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ToggleButton value="all">{t('all')}</ToggleButton>
|
||||
{usedCategories.map((cat) => (
|
||||
<ToggleButton key={cat} value={cat}>
|
||||
{CATEGORY_LABEL[cat]}
|
||||
</ToggleButton>
|
||||
))}
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
|
||||
{filteredTools.length === 0 ? (
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={{
|
||||
p: 6,
|
||||
textAlign: 'center',
|
||||
borderRadius: 3,
|
||||
borderStyle: 'dashed',
|
||||
}}
|
||||
>
|
||||
<Typography color="text.secondary">{t('noToolsFound')}</Typography>
|
||||
</Paper>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: {
|
||||
xs: '1fr',
|
||||
sm: 'repeat(2, 1fr)',
|
||||
lg: 'repeat(3, 1fr)',
|
||||
},
|
||||
gap: { xs: 2, md: 2.5 },
|
||||
}}
|
||||
>
|
||||
{filteredTools.map((tool, idx) => (
|
||||
<motion.div
|
||||
key={tool.id}
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.03 * idx, ease: 'easeOut' }}
|
||||
>
|
||||
<ToolCard tool={tool} user={user} onReserve={openReservation} />
|
||||
</motion.div>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Container>
|
||||
</Box>
|
||||
) : view === 'chat' ? (
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
overflow: 'hidden',
|
||||
height: `calc(100vh - ${APPBAR_HEIGHT}px)`,
|
||||
}}
|
||||
>
|
||||
<ChatSidebar />
|
||||
<ChatWindow />
|
||||
</Box>
|
||||
) : (
|
||||
<AdminDashboard />
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</Box>
|
||||
|
||||
<ReservationModal
|
||||
open={isModalOpen}
|
||||
tool={selectedTool}
|
||||
user={user}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
/>
|
||||
|
||||
<Onboarding open={showOnboarding} onFinish={() => setShowOnboarding(false)} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Login Screen ---------- */
|
||||
|
||||
interface LoginScreenProps {
|
||||
username: string;
|
||||
password: string;
|
||||
setUsername: (v: string) => void;
|
||||
setPassword: (v: string) => void;
|
||||
submitting: boolean;
|
||||
loginError: string | null;
|
||||
onSubmit: (e: React.FormEvent) => void;
|
||||
t: (k: any) => string;
|
||||
mode: 'light' | 'dark';
|
||||
toggleColorMode: () => void;
|
||||
}
|
||||
|
||||
function LoginScreen({
|
||||
username,
|
||||
password,
|
||||
setUsername,
|
||||
setPassword,
|
||||
submitting,
|
||||
loginError,
|
||||
onSubmit,
|
||||
t,
|
||||
mode,
|
||||
toggleColorMode,
|
||||
}: LoginScreenProps) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
minHeight: '100vh',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<AnimatedBackground intensity={0.7} />
|
||||
|
||||
<IconButton
|
||||
onClick={toggleColorMode}
|
||||
sx={{ position: 'absolute', top: 16, right: 16, zIndex: 5 }}
|
||||
>
|
||||
{mode === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
|
||||
</IconButton>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: { xs: 'none', md: 'flex' },
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
color: 'white',
|
||||
p: 6,
|
||||
overflow: 'hidden',
|
||||
background:
|
||||
'radial-gradient(circle at 0% 0%, rgba(255,107,0,0.95), rgba(229,95,0,0.95) 45%, rgba(45,90,39,0.9) 100%)',
|
||||
}}
|
||||
>
|
||||
<Box className="pp-grid-bg" sx={{ position: 'absolute', inset: 0, opacity: 0.18 }} />
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, position: 'relative' }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 2.5,
|
||||
bgcolor: 'rgba(255,255,255,0.95)',
|
||||
p: 0.5,
|
||||
border: '1px solid rgba(255,255,255,0.28)',
|
||||
boxShadow: '0 8px 20px -8px rgba(0,0,0,0.35)',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Logo size={36} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 900, letterSpacing: '-0.02em' }}>
|
||||
PATCHPILOT
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ position: 'relative', maxWidth: 460 }}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||
>
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{ fontWeight: 900, letterSpacing: '-0.03em', lineHeight: 1.05, mb: 2 }}
|
||||
>
|
||||
{t('heroTitlePart1')}<br />{t('heroTitlePart2')}
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ opacity: 0.92, fontSize: '1.05rem', mb: 4 }}>
|
||||
{t('heroSubtitle')}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
|
||||
<Feature icon={<Wrench size={18} />} title={t('miniStatInventory')} desc="Werkzeug-Inventar" />
|
||||
<Feature icon={<MessageSquare size={18} />} title={t('chat')} desc="Schritt für Schritt" />
|
||||
<Feature icon={<ShieldCheck size={18} />} title="Sicher" desc="Einweisungs-Tracking" />
|
||||
<Feature icon={<Settings size={18} />} title={t('admin')} desc="Verwaltung" />
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
<Typography variant="caption" sx={{ opacity: 0.75, position: 'relative' }}>
|
||||
© {new Date().getFullYear()} PatchPilot · Hackathon Edition
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
p: { xs: 3, sm: 4, md: 6 },
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: 'easeOut' }}
|
||||
style={{ width: '100%', maxWidth: 420, position: 'relative' }}
|
||||
>
|
||||
<Box sx={{ display: { md: 'none' }, mb: 4, textAlign: 'center' }}>
|
||||
<Box sx={{ display: 'inline-block', mb: 2 }}>
|
||||
<Logo size={64} />
|
||||
</Box>
|
||||
<Typography variant="h4" sx={{ fontWeight: 900, letterSpacing: '-0.02em' }}>
|
||||
PATCHPILOT
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography variant="h4" sx={{ fontWeight: 800, mb: 1, letterSpacing: '-0.02em' }}>
|
||||
{t('loginWelcomeBack')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
|
||||
{t('loginSubtitle')}
|
||||
</Typography>
|
||||
|
||||
<form onSubmit={onSubmit}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={t('username')}
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
autoFocus
|
||||
autoComplete="username"
|
||||
margin="normal"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<UserIcon size={18} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={t('password')}
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
margin="normal"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Lock size={18} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
{loginError && (
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
mt: 2,
|
||||
p: 1.5,
|
||||
bgcolor: 'error.main',
|
||||
color: 'white',
|
||||
borderRadius: 2,
|
||||
fontSize: '0.85rem',
|
||||
border: 'none',
|
||||
}}
|
||||
>
|
||||
{loginError}
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
size="large"
|
||||
variant="contained"
|
||||
type="submit"
|
||||
disabled={submitting || !username || !password}
|
||||
endIcon={<ChevronRight size={18} />}
|
||||
sx={{ mt: 3, py: 1.5, fontSize: '1rem' }}
|
||||
>
|
||||
{submitting ? t('loginSubmitting') : t('loginSubmit')}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={{
|
||||
mt: 4,
|
||||
p: 2,
|
||||
borderRadius: 2,
|
||||
bgcolor: 'action.hover',
|
||||
fontSize: '0.8rem',
|
||||
border: '1px dashed',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" sx={{ fontWeight: 700, color: 'text.primary' }}>
|
||||
{t('loginDemoTitle')}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ display: 'block', color: 'text.secondary', mt: 0.5, whiteSpace: 'pre-line' }}
|
||||
>
|
||||
{t('loginDemoBody')}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function Feature({ icon, title, desc }: { icon: React.ReactNode; title: string; desc: string }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'rgba(255,255,255,0.12)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
borderRadius: 2.5,
|
||||
p: 2,
|
||||
border: '1px solid rgba(255,255,255,0.18)',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
|
||||
{icon}
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
|
||||
{title}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="caption" sx={{ opacity: 0.85 }}>
|
||||
{desc}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,701 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
Button,
|
||||
Typography,
|
||||
Box,
|
||||
IconButton,
|
||||
LinearProgress,
|
||||
Chip,
|
||||
Paper,
|
||||
TextField,
|
||||
Avatar,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Hammer,
|
||||
MessageSquare,
|
||||
ArrowRight,
|
||||
Check,
|
||||
Calendar,
|
||||
Shield,
|
||||
X,
|
||||
Sparkles,
|
||||
ShieldCheck,
|
||||
MapPin,
|
||||
Send,
|
||||
Bot,
|
||||
User as UserIcon,
|
||||
} from 'lucide-react';
|
||||
import Logo from './Logo';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useI18n } from '../services/i18n';
|
||||
import { useAuthStore } from '../services/auth-store';
|
||||
|
||||
interface OnboardingProps {
|
||||
open: boolean;
|
||||
onFinish: () => void;
|
||||
}
|
||||
|
||||
type Step = {
|
||||
key: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
icon: React.ReactNode;
|
||||
visual: React.ReactNode;
|
||||
action?: { label: string; hint?: string };
|
||||
};
|
||||
|
||||
export default function Onboarding({ open, onFinish }: OnboardingProps) {
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
const [pickedExample, setPickedExample] = useState<string | null>(null);
|
||||
const [demoInput, setDemoInput] = useState('');
|
||||
const { t } = useI18n();
|
||||
const { user } = useAuthStore();
|
||||
|
||||
const steps = useMemo<Step[]>(() => {
|
||||
const base: Step[] = [
|
||||
{
|
||||
key: 'welcome',
|
||||
title: `Willkommen, ${user?.username ?? 'Helfer'}!`,
|
||||
subtitle:
|
||||
'In wenigen Sekunden zeige ich dir, wie du Werkzeuge ausleihst, dich vom KI-Assistenten beraten lässt und alles auf einen Blick siehst.',
|
||||
icon: <Hammer size={22} />,
|
||||
visual: <WelcomeVisual />,
|
||||
},
|
||||
{
|
||||
key: 'tools',
|
||||
title: 'Werkzeuge entdecken',
|
||||
subtitle:
|
||||
'Wähle aus unserem Inventar — jedes Werkzeug zeigt dir Standort, Leihdauer und ob eine Einweisung nötig ist.',
|
||||
icon: <Hammer size={22} />,
|
||||
visual: (
|
||||
<ToolsVisual
|
||||
picked={pickedExample}
|
||||
onPick={(name) => setPickedExample(name)}
|
||||
/>
|
||||
),
|
||||
action: {
|
||||
label: 'Probier es: klick auf ein Werkzeug',
|
||||
hint: pickedExample ? `✓ Gewählt: ${pickedExample}` : undefined,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'chat',
|
||||
title: 'KI-Assistent nutzen',
|
||||
subtitle:
|
||||
'Beschreibe dein Problem in eigenen Worten — RepairBuddy hilft dir bei der Diagnose und schlägt Reparaturansätze vor.',
|
||||
icon: <MessageSquare size={22} />,
|
||||
visual: <ChatVisual demoInput={demoInput} onChange={setDemoInput} />,
|
||||
action: {
|
||||
label: 'Tippe einen Beispiel-Satz oben ein',
|
||||
hint: demoInput.length > 4 ? `✓ Beispiel erkannt (${demoInput.length} Zeichen)` : undefined,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'calendar',
|
||||
title: 'Verfügbarkeit prüfen',
|
||||
subtitle:
|
||||
'Im interaktiven Kalender siehst du sofort, wann Werkzeuge frei sind und wann sie belegt sind.',
|
||||
icon: <Calendar size={22} />,
|
||||
visual: <CalendarVisual />,
|
||||
},
|
||||
];
|
||||
|
||||
if (user?.role === 'admin') {
|
||||
base.push({
|
||||
key: 'admin',
|
||||
title: 'Admin-Bereich',
|
||||
subtitle:
|
||||
'Als Admin verwaltest du Werkzeuge, Nutzer, das KI-Wissen und siehst alle Reservierungen auf einen Blick.',
|
||||
icon: <Shield size={22} />,
|
||||
visual: <AdminVisual />,
|
||||
});
|
||||
}
|
||||
|
||||
return base;
|
||||
}, [user, pickedExample, demoInput]);
|
||||
|
||||
const totalSteps = steps.length;
|
||||
const isLast = activeStep === totalSteps - 1;
|
||||
const current = steps[activeStep];
|
||||
const progress = ((activeStep + 1) / totalSteps) * 100;
|
||||
|
||||
const handleNext = () => {
|
||||
if (isLast) {
|
||||
reset();
|
||||
onFinish();
|
||||
} else {
|
||||
setActiveStep((p) => p + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => setActiveStep((p) => Math.max(0, p - 1));
|
||||
|
||||
const handleSkip = () => {
|
||||
reset();
|
||||
onFinish();
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
setActiveStep(0);
|
||||
setPickedExample(null);
|
||||
setDemoInput('');
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleSkip}
|
||||
fullWidth
|
||||
maxWidth="md"
|
||||
PaperProps={{
|
||||
sx: {
|
||||
borderRadius: { xs: 3, md: 4 },
|
||||
overflow: 'hidden',
|
||||
bgcolor: 'background.paper',
|
||||
backgroundImage: 'none',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
{/* Header: progress + close */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
px: { xs: 2, md: 3 },
|
||||
py: 2,
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 1.5,
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: 'linear-gradient(135deg, #FF6B00, #E55F00)',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
<Sparkles size={14} />
|
||||
</Box>
|
||||
<Typography variant="caption" sx={{ fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
|
||||
Onboarding · Schritt {activeStep + 1} von {totalSteps}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={progress}
|
||||
sx={{
|
||||
height: 6,
|
||||
borderRadius: 999,
|
||||
bgcolor: 'action.hover',
|
||||
'& .MuiLinearProgress-bar': {
|
||||
background: 'linear-gradient(90deg, #FF6B00, #E55F00)',
|
||||
borderRadius: 999,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<IconButton onClick={handleSkip} size="small" aria-label="Überspringen">
|
||||
<X size={16} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{/* Body */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
|
||||
minHeight: { md: 400 },
|
||||
}}
|
||||
>
|
||||
{/* Visual */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
p: { xs: 3, md: 4 },
|
||||
bgcolor: 'background.default',
|
||||
backgroundImage: 'none',
|
||||
borderRight: { md: '1px solid' },
|
||||
borderBottom: { xs: '1px solid', md: 'none' },
|
||||
borderColor: 'divider',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={current.key}
|
||||
initial={{ opacity: 0, scale: 0.96 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 1.02 }}
|
||||
transition={{ duration: 0.28, ease: 'easeOut' }}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
{current.visual}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</Box>
|
||||
|
||||
{/* Text */}
|
||||
<Box
|
||||
sx={{
|
||||
p: { xs: 3, md: 4 },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={current.key}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -6 }}
|
||||
transition={{ duration: 0.22 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.75,
|
||||
color: 'primary.main',
|
||||
fontWeight: 700,
|
||||
fontSize: '0.75rem',
|
||||
letterSpacing: '0.06em',
|
||||
textTransform: 'uppercase',
|
||||
mb: 1.5,
|
||||
}}
|
||||
>
|
||||
{current.icon}
|
||||
<span>{current.key}</span>
|
||||
</Box>
|
||||
<Typography variant="h5" sx={{ fontWeight: 800, mb: 1.5, letterSpacing: '-0.015em' }}>
|
||||
{current.title}
|
||||
</Typography>
|
||||
<Typography color="text.secondary" sx={{ lineHeight: 1.6, mb: 2 }}>
|
||||
{current.subtitle}
|
||||
</Typography>
|
||||
|
||||
{current.action && (
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: 2,
|
||||
borderStyle: 'dashed',
|
||||
bgcolor: 'action.hover',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1.25,
|
||||
}}
|
||||
>
|
||||
<Sparkles size={16} color="#FF6B00" />
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ display: 'block', fontWeight: 700 }}>
|
||||
{current.action.label}
|
||||
</Typography>
|
||||
{current.action.hint && (
|
||||
<Typography variant="caption" sx={{ color: 'success.main', fontWeight: 600 }}>
|
||||
{current.action.hint}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
mt: 'auto',
|
||||
pt: 2,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={activeStep === 0 ? handleSkip : handleBack}
|
||||
color="inherit"
|
||||
size="small"
|
||||
>
|
||||
{activeStep === 0 ? 'Überspringen' : 'Zurück'}
|
||||
</Button>
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
{steps.map((s, i) => (
|
||||
<Box
|
||||
key={s.key}
|
||||
sx={{
|
||||
width: i === activeStep ? 20 : 8,
|
||||
height: 8,
|
||||
borderRadius: 999,
|
||||
bgcolor: i === activeStep ? 'primary.main' : 'action.disabledBackground',
|
||||
transition: 'all 0.3s',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
<Button
|
||||
onClick={handleNext}
|
||||
variant="contained"
|
||||
endIcon={isLast ? <Check size={16} /> : <ArrowRight size={16} />}
|
||||
>
|
||||
{isLast ? 'Loslegen' : 'Weiter'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------ Visuals ------------ */
|
||||
|
||||
function WelcomeVisual() {
|
||||
return (
|
||||
<Box sx={{ textAlign: 'center', width: '100%' }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 110,
|
||||
height: 110,
|
||||
mx: 'auto',
|
||||
borderRadius: 4,
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
bgcolor: 'background.paper',
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
boxShadow: 'var(--pp-shadow-elevated)',
|
||||
position: 'relative',
|
||||
p: 1.5,
|
||||
}}
|
||||
>
|
||||
<Logo size={76} />
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 14, repeat: Infinity, ease: 'linear' }}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: -10,
|
||||
borderRadius: 26,
|
||||
border: '2px dashed rgba(255,107,0,0.35)',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ mt: 3, display: 'flex', justifyContent: 'center', gap: 0.75 }}>
|
||||
<Chip label="🔧 Werkzeuge" size="small" />
|
||||
<Chip label="🤖 KI-Chat" size="small" />
|
||||
<Chip label="📅 Kalender" size="small" />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolsVisual({
|
||||
picked,
|
||||
onPick,
|
||||
}: {
|
||||
picked: string | null;
|
||||
onPick: (name: string) => void;
|
||||
}) {
|
||||
const samples = [
|
||||
{ name: 'Bohrmaschine', loc: 'Werkstatt A', cert: true },
|
||||
{ name: '3D-Drucker', loc: 'Labor 1', cert: true },
|
||||
{ name: 'Hammer', loc: 'Werkzeugwand', cert: false },
|
||||
];
|
||||
return (
|
||||
<Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1.25 }}>
|
||||
{samples.map((s) => {
|
||||
const selected = picked === s.name;
|
||||
return (
|
||||
<Paper
|
||||
key={s.name}
|
||||
variant="outlined"
|
||||
onClick={() => onPick(s.name)}
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: 2.5,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1.5,
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.18s ease',
|
||||
borderColor: selected ? 'primary.main' : 'divider',
|
||||
bgcolor: selected ? 'rgba(255,107,0,0.08)' : 'background.paper',
|
||||
boxShadow: selected ? 'var(--pp-shadow-brand)' : 'none',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 1.75,
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: 'linear-gradient(135deg, #FF6B00, #E55F00)',
|
||||
color: 'white',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Hammer size={16} />
|
||||
</Box>
|
||||
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
||||
{s.name}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'text.secondary' }}>
|
||||
<MapPin size={11} />
|
||||
<Typography variant="caption">{s.loc}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
{s.cert ? (
|
||||
<Chip
|
||||
icon={<ShieldCheck size={11} />}
|
||||
label="Einweisung"
|
||||
size="small"
|
||||
color="warning"
|
||||
sx={{ height: 22, fontSize: '0.7rem', borderRadius: 1.25 }}
|
||||
/>
|
||||
) : (
|
||||
<Chip
|
||||
label="Frei"
|
||||
size="small"
|
||||
color="success"
|
||||
sx={{ height: 22, fontSize: '0.7rem', borderRadius: 1.25 }}
|
||||
/>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ChatVisual({
|
||||
demoInput,
|
||||
onChange,
|
||||
}: {
|
||||
demoInput: string;
|
||||
onChange: (v: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1.25 }}>
|
||||
<Box sx={{ display: 'flex', gap: 1.25, alignItems: 'flex-start' }}>
|
||||
<Avatar sx={{ width: 28, height: 28, bgcolor: 'secondary.main' }}>
|
||||
<Bot size={14} />
|
||||
</Avatar>
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={{
|
||||
p: 1.25,
|
||||
borderRadius: 2.5,
|
||||
borderTopLeftRadius: 6,
|
||||
maxWidth: '85%',
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontSize: '0.82rem' }}>
|
||||
Hi! Was möchtest du heute reparieren?
|
||||
</Typography>
|
||||
</Paper>
|
||||
</Box>
|
||||
{demoInput.length > 0 && (
|
||||
<Box sx={{ display: 'flex', gap: 1.25, alignItems: 'flex-start', flexDirection: 'row-reverse' }}>
|
||||
<Avatar sx={{ width: 28, height: 28, bgcolor: 'primary.main' }}>
|
||||
<UserIcon size={14} />
|
||||
</Avatar>
|
||||
<Paper
|
||||
sx={{
|
||||
p: 1.25,
|
||||
borderRadius: 2.5,
|
||||
borderTopRightRadius: 6,
|
||||
maxWidth: '85%',
|
||||
bgcolor: 'primary.main',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
}}
|
||||
elevation={0}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontSize: '0.82rem' }}>
|
||||
{demoInput}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</Box>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
mt: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
p: 1,
|
||||
borderRadius: 2.5,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
bgcolor: 'background.paper',
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
size="small"
|
||||
variant="standard"
|
||||
placeholder="z. B. Mein Fahrrad bremst nicht mehr"
|
||||
value={demoInput}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
InputProps={{ disableUnderline: true, sx: { px: 1, fontSize: '0.85rem' } }}
|
||||
/>
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{
|
||||
width: 30,
|
||||
height: 30,
|
||||
bgcolor: 'primary.main',
|
||||
color: 'white',
|
||||
borderRadius: 2,
|
||||
'&:hover': { bgcolor: 'primary.dark' },
|
||||
}}
|
||||
>
|
||||
<Send size={14} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function CalendarVisual() {
|
||||
const days = Array.from({ length: 28 }, (_, i) => i + 1);
|
||||
const reserved = new Set([5, 6, 12, 18, 19, 20, 25]);
|
||||
const today = 10;
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: 320,
|
||||
mx: 'auto',
|
||||
p: 2,
|
||||
borderRadius: 3,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
bgcolor: 'background.paper',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
|
||||
<Typography variant="caption" sx={{ fontWeight: 700 }}>
|
||||
Mai 2026
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4 }}>
|
||||
<Box sx={{ width: 8, height: 8, borderRadius: 0.75, bgcolor: '#F59E0B' }} />
|
||||
<Typography variant="caption" sx={{ fontSize: '0.65rem' }}>
|
||||
Belegt
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(7, 1fr)',
|
||||
gap: 0.4,
|
||||
}}
|
||||
>
|
||||
{['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'].map((d) => (
|
||||
<Box
|
||||
key={d}
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
fontSize: '0.6rem',
|
||||
color: 'text.secondary',
|
||||
fontWeight: 700,
|
||||
py: 0.5,
|
||||
}}
|
||||
>
|
||||
{d}
|
||||
</Box>
|
||||
))}
|
||||
{days.map((d) => {
|
||||
const isReserved = reserved.has(d);
|
||||
const isToday = d === today;
|
||||
return (
|
||||
<Box
|
||||
key={d}
|
||||
sx={{
|
||||
aspectRatio: '1',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 600,
|
||||
borderRadius: 1,
|
||||
bgcolor: isToday
|
||||
? 'primary.main'
|
||||
: isReserved
|
||||
? 'rgba(245,158,11,0.18)'
|
||||
: 'transparent',
|
||||
color: isToday ? 'white' : isReserved ? '#B45309' : 'text.primary',
|
||||
}}
|
||||
>
|
||||
{d}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function AdminVisual() {
|
||||
return (
|
||||
<Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1.25 }}>
|
||||
{[
|
||||
{ label: 'Werkzeuge', value: '3', accent: '#FF6B00' },
|
||||
{ label: 'Aktive Reservierungen', value: '2', accent: '#3B82F6' },
|
||||
{ label: 'Offene Anfragen', value: '1', accent: '#F59E0B' },
|
||||
{ label: 'Nutzer', value: '2', accent: '#22C55E' },
|
||||
].map((s) => (
|
||||
<Paper
|
||||
key={s.label}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: 2.5,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1.5,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 8,
|
||||
height: 36,
|
||||
borderRadius: 999,
|
||||
bgcolor: s.accent,
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600 }}>
|
||||
{s.label}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="h5" sx={{ fontWeight: 800, letterSpacing: '-0.02em' }}>
|
||||
{s.value}
|
||||
</Typography>
|
||||
</Paper>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user