u

src/client/App.js

@@ -1,6 +1,9 @@
 import React from 'react';
-import { ThemeProvider, createTheme, CssBaseline, AppBar, Toolbar, Typography, Container, Box } from '@mui/material';
+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 = {
@@ -39,22 +42,77 @@ const darkTheme = createTheme({
     },
 });
 
+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 />
-            <Box sx={{ flexGrow: 1 }}>
-                <AppBar position="static">
-                    <Toolbar>
-                        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-                            Tischlerei Dashboard
-                        </Typography>
-                    </Toolbar>
-                </AppBar>
-                <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
-                    <Dashboard />
-                </Container>
-            </Box>
+            <AuthProvider>
+                <AppContent />
+            </AuthProvider>
         </ThemeProvider>
     );
 }