inital

frontend/src/pages/Settings.tsx

@@ -0,0 +1,209 @@
+import { useState } from 'react';
+import {
+  Container,
+  Typography,
+  Card,
+  CardContent,
+  Grid,
+  FormGroup,
+  FormControlLabel,
+  Switch,
+  Divider,
+  Box,
+  Button,
+} from '@mui/material';
+import { Settings as SettingsIcon, Notifications, Palette, Language, Save } from '@mui/icons-material';
+import DashboardLayout from '../components/dashboard/DashboardLayout';
+import { useNotification } from '../contexts/NotificationContext';
+
+function Settings() {
+  const notification = useNotification();
+
+  // Settings state
+  const [emailNotifications, setEmailNotifications] = useState(true);
+  const [alarmNotifications, setAlarmNotifications] = useState(true);
+  const [maintenanceReminders, setMaintenanceReminders] = useState(false);
+  const [systemNotifications, setSystemNotifications] = useState(true);
+  const [darkMode, setDarkMode] = useState(false);
+  const [compactView, setCompactView] = useState(true);
+  const [animations, setAnimations] = useState(true);
+
+  const handleSaveSettings = () => {
+    try {
+      // In a real application, save settings to backend
+      notification.showSuccess('Einstellungen erfolgreich gespeichert');
+    } catch (error) {
+      notification.showError('Fehler beim Speichern der Einstellungen');
+    }
+  };
+  return (
+    <DashboardLayout>
+      <Container maxWidth="lg">
+        <Typography variant="h4" gutterBottom sx={{ mb: 4 }}>
+          Einstellungen
+        </Typography>
+
+        <Grid container spacing={3}>
+          {/* Notification Settings */}
+          <Grid item xs={12} md={6}>
+            <Card>
+              <CardContent>
+                <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+                  <Notifications color="primary" sx={{ mr: 2 }} />
+                  <Typography variant="h6">Benachrichtigungen</Typography>
+                </Box>
+                <Divider sx={{ mb: 2 }} />
+                <FormGroup>
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={emailNotifications}
+                        onChange={(e) => setEmailNotifications(e.target.checked)}
+                      />
+                    }
+                    label="E-Mail-Benachrichtigungen"
+                  />
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={alarmNotifications}
+                        onChange={(e) => setAlarmNotifications(e.target.checked)}
+                      />
+                    }
+                    label="Einsatz-Alarme"
+                  />
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={maintenanceReminders}
+                        onChange={(e) => setMaintenanceReminders(e.target.checked)}
+                      />
+                    }
+                    label="Wartungserinnerungen"
+                  />
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={systemNotifications}
+                        onChange={(e) => setSystemNotifications(e.target.checked)}
+                      />
+                    }
+                    label="System-Benachrichtigungen"
+                  />
+                </FormGroup>
+              </CardContent>
+            </Card>
+          </Grid>
+
+          {/* Display Settings */}
+          <Grid item xs={12} md={6}>
+            <Card>
+              <CardContent>
+                <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+                  <Palette color="primary" sx={{ mr: 2 }} />
+                  <Typography variant="h6">Anzeigeoptionen</Typography>
+                </Box>
+                <Divider sx={{ mb: 2 }} />
+                <FormGroup>
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={darkMode}
+                        onChange={(e) => {
+                          setDarkMode(e.target.checked);
+                          notification.showInfo('Dunkler Modus wird in einer zukünftigen Version verfügbar sein');
+                        }}
+                      />
+                    }
+                    label="Dunkler Modus (Vorschau)"
+                  />
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={compactView}
+                        onChange={(e) => setCompactView(e.target.checked)}
+                      />
+                    }
+                    label="Kompakte Ansicht"
+                  />
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={animations}
+                        onChange={(e) => setAnimations(e.target.checked)}
+                      />
+                    }
+                    label="Animationen"
+                  />
+                </FormGroup>
+              </CardContent>
+            </Card>
+          </Grid>
+
+          {/* Language Settings */}
+          <Grid item xs={12} md={6}>
+            <Card>
+              <CardContent>
+                <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+                  <Language color="primary" sx={{ mr: 2 }} />
+                  <Typography variant="h6">Sprache</Typography>
+                </Box>
+                <Divider sx={{ mb: 2 }} />
+                <Typography variant="body2" color="text.secondary">
+                  Aktuelle Sprache: Deutsch
+                </Typography>
+                <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
+                  Kommende Features: Sprachauswahl, Datumsformat, Zeitzone
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+
+          {/* General Settings */}
+          <Grid item xs={12} md={6}>
+            <Card>
+              <CardContent>
+                <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+                  <SettingsIcon color="primary" sx={{ mr: 2 }} />
+                  <Typography variant="h6">Allgemein</Typography>
+                </Box>
+                <Divider sx={{ mb: 2 }} />
+                <Typography variant="body2" color="text.secondary">
+                  Kommende Features: Dashboard-Layout, Standardansichten, Exporteinstellungen
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
+
+        <Box
+          sx={{
+            mt: 3,
+            p: 2,
+            backgroundColor: 'info.lighter',
+            borderRadius: 1,
+          }}
+        >
+          <Typography variant="body2" color="info.dark">
+            Diese Einstellungen sind derzeit nur zur Demonstration verfügbar. Die Funktionalität
+            wird in zukünftigen Updates implementiert.
+          </Typography>
+        </Box>
+
+        <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end' }}>
+          <Button
+            variant="contained"
+            color="primary"
+            size="large"
+            startIcon={<Save />}
+            onClick={handleSaveSettings}
+          >
+            Einstellungen speichern
+          </Button>
+        </Box>
+      </Container>
+    </DashboardLayout>
+  );
+}
+
+export default Settings;