Added dummy Account page.

01-frontend/src/pages/Account.tsx

@@ -1,34 +1,106 @@
-import { Box, Typography, Button } from "@mui/material";
+import { Box, Typography, Button, TextField, Paper, Divider, Stack } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import "./pages.css";
+import { useState } from "react";
 
 export default function Account() {
     const navigate = useNavigate();
 
-    const handleGoHome = () => {
+    // Beispielhafte Userdaten (könnten aus Context/Backend kommen)
+    const [user, setUser] = useState({
+        name: "Max Mustermann",
+        email: "max.mustermann@email.de",
+        phone: "+49 123 456789",
+        address: "Musterstraße 1, 12345 Musterstadt"
+    });
+
+    const [edit, setEdit] = useState(false);
+    const [form, setForm] = useState(user);
+
+    const handleEdit = () => setEdit(true);
+    const handleCancel = () => {
+        setForm(user);
+        setEdit(false);
+    };
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setForm({ ...form, [e.target.name]: e.target.value });
+    };
+    const handleSave = () => {
+        setUser(form);
+        setEdit(false);
+    };
+    const handleDelete = () => {
+        // Hier ggf. Dialog oder API-Call zum Löschen
+        alert("Konto gelöscht!");
         navigate("/");
     };
 
     return (
-        <Box className="no-page-container">
-            <Typography variant="h1" className="no-page-title">
-                Account
+        <Box className="page-background" sx={{ minHeight: "100vh", justifyContent: "flex-start", pt: 4 }}>
+            <Paper elevation={3} sx={{ p: 4, maxWidth: 500, width: "100%", mx: "auto" }}>
+                <Typography variant="h4" gutterBottom>
+                    Mein Konto
                 </Typography>
-            <Typography variant="h5" className="no-page-subtitle">
-                Oops! The page you're looking for doesn't exist.
-            </Typography>
-            <Typography variant="body1" className="no-page-description">
-                It seems you may have taken a wrong turn. Let's get you back on track.
-            </Typography>
-            <Button
-                variant="contained"
-                color="primary"
-                size="large"
-                className="no-page-button"
-                onClick={handleGoHome}
-            >
-                Go Back to Home
+                <Divider sx={{ mb: 3 }} />
+                <Stack spacing={2}>
+                    <TextField
+                        label="Name"
+                        name="name"
+                        value={edit ? form.name : user.name}
+                        onChange={handleChange}
+                        disabled={!edit}
+                        fullWidth
+                    />
+                    <TextField
+                        label="E-Mail"
+                        name="email"
+                        value={edit ? form.email : user.email}
+                        onChange={handleChange}
+                        disabled={!edit}
+                        fullWidth
+                    />
+                    <TextField
+                        label="Telefon"
+                        name="phone"
+                        value={edit ? form.phone : user.phone}
+                        onChange={handleChange}
+                        disabled={!edit}
+                        fullWidth
+                    />
+                    <TextField
+                        label="Adresse"
+                        name="address"
+                        value={edit ? form.address : user.address}
+                        onChange={handleChange}
+                        disabled={!edit}
+                        fullWidth
+                    />
+                </Stack>
+                <Box sx={{ display: "flex", gap: 2, mt: 4 }}>
+                    {edit ? (
+                        <>
+                            <Button variant="contained" color="primary" onClick={handleSave}>
+                                Speichern
                             </Button>
+                            <Button variant="outlined" color="secondary" onClick={handleCancel}>
+                                Abbrechen
+                            </Button>
+                        </>
+                    ) : (
+                        <Button variant="contained" color="primary" onClick={handleEdit}>
+                            Bearbeiten
+                        </Button>
+                    )}
+                    <Button
+                        variant="outlined"
+                        color="error"
+                        onClick={handleDelete}
+                        sx={{ marginLeft: "auto" }}
+                    >
+                        Konto löschen
+                    </Button>
+                </Box>
+            </Paper>
         </Box>
     );
 }