Spaces:
Sleeping
Sleeping
| /** | |
| * Sidebar component - Side navigation with quick actions and stats summary | |
| */ | |
| import React from 'react'; | |
| import { Link, useLocation } from 'react-router-dom'; | |
| import { | |
| Box, | |
| Drawer, | |
| List, | |
| ListItem, | |
| ListItemButton, | |
| ListItemIcon, | |
| ListItemText, | |
| Divider, | |
| Typography, | |
| Button, | |
| Paper, | |
| } from '@mui/material'; | |
| import { | |
| Dashboard as DashboardIcon, | |
| CloudUpload as UploadIcon, | |
| History as HistoryIcon, | |
| PlayArrow as StartIcon, | |
| Analytics as StatsIcon, | |
| } from '@mui/icons-material'; | |
| const DRAWER_WIDTH = 240; | |
| interface SidebarProps { | |
| stats?: { | |
| totalJobs?: number; | |
| completedJobs?: number; | |
| avgAccuracy?: number; | |
| }; | |
| } | |
| const Sidebar: React.FC<SidebarProps> = ({ stats }) => { | |
| const location = useLocation(); | |
| const menuItems = [ | |
| { path: '/', label: 'Dashboard', icon: <DashboardIcon /> }, | |
| { path: '/upload', label: 'Upload Dataset', icon: <UploadIcon /> }, | |
| { path: '/jobs', label: 'Job History', icon: <HistoryIcon /> }, | |
| ]; | |
| const isActive = (path: string): boolean => { | |
| if (path === '/') { | |
| return location.pathname === '/'; | |
| } | |
| return location.pathname.startsWith(path); | |
| }; | |
| return ( | |
| <Drawer | |
| variant="permanent" | |
| sx={{ | |
| width: DRAWER_WIDTH, | |
| flexShrink: 0, | |
| '& .MuiDrawer-paper': { | |
| width: DRAWER_WIDTH, | |
| boxSizing: 'border-box', | |
| bgcolor: 'background.default', | |
| borderRight: '1px solid', | |
| borderColor: 'divider', | |
| }, | |
| }} | |
| > | |
| {/* Quick Stats Section */} | |
| {stats && ( | |
| <Box sx={{ p: 2 }}> | |
| <Paper elevation={0} sx={{ p: 2, bgcolor: 'primary.light', color: 'primary.contrastText' }}> | |
| <Typography variant="subtitle2" gutterBottom sx={{ fontWeight: 600 }}> | |
| Quick Stats | |
| </Typography> | |
| <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}> | |
| <Box sx={{ display: 'flex', justifyContent: 'space-between' }}> | |
| <Typography variant="body2">Total Jobs:</Typography> | |
| <Typography variant="body2" sx={{ fontWeight: 600 }}> | |
| {stats.totalJobs || 0} | |
| </Typography> | |
| </Box> | |
| <Box sx={{ display: 'flex', justifyContent: 'space-between' }}> | |
| <Typography variant="body2">Completed:</Typography> | |
| <Typography variant="body2" sx={{ fontWeight: 600 }}> | |
| {stats.completedJobs || 0} | |
| </Typography> | |
| </Box> | |
| <Box sx={{ display: 'flex', justifyContent: 'space-between' }}> | |
| <Typography variant="body2">Avg Accuracy:</Typography> | |
| <Typography variant="body2" sx={{ fontWeight: 600 }}> | |
| {stats.avgAccuracy ? `${stats.avgAccuracy.toFixed(1)}%` : 'N/A'} | |
| </Typography> | |
| </Box> | |
| </Box> | |
| </Paper> | |
| </Box> | |
| )} | |
| <Divider /> | |
| {/* Main Navigation */} | |
| <List sx={{ px: 1 }}> | |
| {menuItems.map((item) => ( | |
| <ListItem key={item.path} disablePadding> | |
| <ListItemButton | |
| component={Link} | |
| to={item.path} | |
| selected={isActive(item.path)} | |
| sx={{ | |
| borderRadius: 1, | |
| mb: 0.5, | |
| '&.Mui-selected': { | |
| bgcolor: 'primary.main', | |
| color: 'primary.contrastText', | |
| '&:hover': { | |
| bgcolor: 'primary.dark', | |
| }, | |
| '& .MuiListItemIcon-root': { | |
| color: 'inherit', | |
| }, | |
| }, | |
| }} | |
| > | |
| <ListItemIcon sx={{ minWidth: 40 }}>{item.icon}</ListItemIcon> | |
| <ListItemText primary={item.label} /> | |
| </ListItemButton> | |
| </ListItem> | |
| ))} | |
| </List> | |
| <Divider sx={{ my: 1 }} /> | |
| {/* Quick Actions */} | |
| <Box sx={{ p: 2 }}> | |
| <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: 'text.secondary' }}> | |
| Quick Actions | |
| </Typography> | |
| <Button | |
| variant="contained" | |
| fullWidth | |
| component={Link} | |
| to="/upload" | |
| startIcon={<StartIcon />} | |
| sx={{ mb: 1 }} | |
| > | |
| New Job | |
| </Button> | |
| <Button | |
| variant="outlined" | |
| fullWidth | |
| component={Link} | |
| to="/jobs" | |
| startIcon={<StatsIcon />} | |
| > | |
| View Reports | |
| </Button> | |
| </Box> | |
| </Drawer> | |
| ); | |
| }; | |
| export default Sidebar; | |