121 lines
3.7 KiB
JavaScript
121 lines
3.7 KiB
JavaScript
import React from 'react';
|
|
import { ThemeProvider, createTheme, CssBaseline, AppBar, Toolbar, Typography, Container, Box, Button, Chip } from '@mui/material';
|
|
import Dashboard from './Dashboard';
|
|
import RuleManager from './RuleManager';
|
|
import LoginDialog from './LoginDialog';
|
|
import { AuthProvider, useAuth } from './AuthContext';
|
|
|
|
// Gruvbox Dark color palette
|
|
const gruvboxDark = {
|
|
bg0: '#282828', // background
|
|
bg1: '#3c3836', // lighter background (cards)
|
|
bg2: '#504945', // selection / borders
|
|
fg: '#ebdbb2', // foreground
|
|
fg2: '#d5c4a1', // secondary text
|
|
aqua: '#8ec07c', // primary accent
|
|
orange: '#fe8019', // secondary accent
|
|
red: '#fb4934',
|
|
green: '#b8bb26',
|
|
yellow: '#fabd2f',
|
|
blue: '#83a598',
|
|
purple: '#d3869b',
|
|
};
|
|
|
|
const darkTheme = createTheme({
|
|
palette: {
|
|
mode: 'dark',
|
|
primary: {
|
|
main: gruvboxDark.aqua,
|
|
},
|
|
secondary: {
|
|
main: gruvboxDark.orange,
|
|
},
|
|
background: {
|
|
default: gruvboxDark.bg0,
|
|
paper: gruvboxDark.bg1,
|
|
},
|
|
text: {
|
|
primary: gruvboxDark.fg,
|
|
secondary: gruvboxDark.fg2,
|
|
},
|
|
divider: gruvboxDark.bg2,
|
|
},
|
|
});
|
|
|
|
function AppContent() {
|
|
const { user, loading, logout, isAuthenticated, isAdmin } = useAuth();
|
|
|
|
if (loading) {
|
|
return (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
|
|
<Typography>Loading...</Typography>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (!isAuthenticated) {
|
|
return <LoginDialog open={true} />;
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ flexGrow: 1 }}>
|
|
<AppBar position="static">
|
|
<Toolbar>
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
Tischlerei Dashboard
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
|
<Chip
|
|
label={user.username}
|
|
color={isAdmin ? 'secondary' : 'default'}
|
|
size="small"
|
|
sx={{
|
|
fontWeight: 600,
|
|
...(isAdmin && {
|
|
background: 'linear-gradient(45deg, #d3869b 30%, #fe8019 90%)'
|
|
})
|
|
}}
|
|
/>
|
|
{isAdmin && (
|
|
<Chip
|
|
label="ADMIN"
|
|
size="small"
|
|
sx={{
|
|
bgcolor: gruvboxDark.purple,
|
|
color: gruvboxDark.bg0,
|
|
fontWeight: 700
|
|
}}
|
|
/>
|
|
)}
|
|
<Button
|
|
color="inherit"
|
|
onClick={logout}
|
|
size="small"
|
|
sx={{ ml: 1 }}
|
|
>
|
|
Logout
|
|
</Button>
|
|
</Box>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
|
|
<Dashboard />
|
|
{isAdmin && <RuleManager />}
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<ThemeProvider theme={darkTheme}>
|
|
<CssBaseline />
|
|
<AuthProvider>
|
|
<AppContent />
|
|
</AuthProvider>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|