db

00-backend/src/main/java/de/htwsaar/webshop/config/ControllerPathConfig.java

@@ -25,8 +25,8 @@ public class ControllerPathConfig {
 
     //ArticleController
     public static final String ARTICLE_BASE = "/article";
-    public static final String ARTICLE_GET_ALL = ARTICLE_BASE + "/all";
-    public static final String ARTICLE_GET_ALL_WITH_IMAGE = ARTICLE_BASE + "/all/image";
+    public static final String ARTICLE_GET_ALL = "/all";
+    public static final String ARTICLE_GET_ALL_WITH_IMAGE = "/all/image";
 
     //CustomerController
     public static final String CUSTOMER_BASE = "/customer";
@@ -43,12 +43,12 @@ public class ControllerPathConfig {
 
     //OrderController
     public static final String ORDER_BASE = "/order";
-    public static final String ORDER_GET_ALL = ORDER_BASE + "/all";
-    public static final String ORDER_GET_ALL_ADMIN = ORDER_BASE + "/all/all";
+    public static final String ORDER_GET_ALL = "/all";
+    public static final String ORDER_GET_ALL_ADMIN = "/all/all";
 
     //ReviewController
     public static final String REVIEW_BASE = "/review";
-    public static final String REVIEW_GET_ALL = REVIEW_BASE + "/all";
+    public static final String REVIEW_GET_ALL = "/all";
 
     //StatisticsController
     private static final String STATISTICS_BASE = "/statistics";

00-backend/src/main/java/de/htwsaar/webshop/controller/ArticleController.java

@@ -19,6 +19,7 @@ import static de.htwsaar.webshop.util.LoggerUtil.logRequest;
 
 @RestController
 @Slf4j
+@RequestMapping(path = ARTICLE_BASE, produces = "application/json")
 public class ArticleController {
     private final ArticleService articleService;
 
@@ -27,26 +28,26 @@ public class ArticleController {
         this.articleService = articleService;
     }
 
-    @RequestMapping(path = ARTICLE_GET_ALL, method = RequestMethod.GET, produces = "application/json")
+    @GetMapping(path = ARTICLE_GET_ALL)
     public ResponseEntity<List<ArticleModel>> getAll(HttpServletRequest request) {
         logRequest(request);
         return ResponseEntity.ok(articleService.from(articleService.findAll()));
     }
 
-    @RequestMapping(path = ARTICLE_GET_ALL_WITH_IMAGE, method = RequestMethod.GET, produces = "application/json")
+    @GetMapping(path = ARTICLE_GET_ALL_WITH_IMAGE)
     public ResponseEntity<List<ArticleWithImageModel>> getAllWithImageData(HttpServletRequest request) {
         logRequest(request);
         return ResponseEntity.ok(articleService.fromWithImage(articleService.findAll()));
     }
 
-    @RequestMapping(path = ARTICLE_BASE, method = RequestMethod.GET, produces = "application/json")
+    @GetMapping
     public ResponseEntity<ArticleModel> getByUUID(HttpServletRequest request,
                                                   @RequestParam(value = PARAM_UUID) UUID uuid) {
         logRequest(request);
         return ResponseEntity.ok(articleService.from(articleService.findByUUID(uuid)));
     }
 
-    @RequestMapping(path = ARTICLE_BASE, method = RequestMethod.POST, produces = "application/json")
+    @PostMapping
     public ResponseEntity<Boolean> add(HttpServletRequest request,
                                        @RequestBody Article article) {
         logRequest(request);
@@ -60,7 +61,7 @@ public class ArticleController {
         return ResponseEntity.ok(a != null);
     }
 
-    @RequestMapping(path = ARTICLE_BASE, method = RequestMethod.PUT, produces = "application/json")
+    @PutMapping
     public ResponseEntity<Boolean> update(HttpServletRequest request,
                                           @RequestParam(value = PARAM_UUID) UUID uuid,
                                           @RequestBody Article article) {
@@ -80,7 +81,7 @@ public class ArticleController {
         return ResponseEntity.ok(true);
     }
 
-    @RequestMapping(path = ARTICLE_BASE, method = RequestMethod.DELETE, produces = "application/json")
+    @DeleteMapping
     public ResponseEntity<Boolean> delete(HttpServletRequest request,
                                           @RequestParam(value = PARAM_UUID) UUID uuid) {
         logRequest(request);

00-backend/src/main/java/de/htwsaar/webshop/controller/OrderController.java

@@ -22,6 +22,7 @@ import static de.htwsaar.webshop.util.LoggerUtil.logRequest;
 
 @RestController
 @Slf4j
+@RequestMapping(path = ORDER_BASE, produces = "application/json")
 public class OrderController {
 
     private final OrderService orderService;
@@ -35,7 +36,7 @@ public class OrderController {
         this.sessionService = sessionService;
     }
 
-    @RequestMapping(path = ORDER_GET_ALL, method = RequestMethod.GET, produces = "application/json")
+    @GetMapping(path = ORDER_GET_ALL)
     public ResponseEntity<List<OrderModel>> getAll(HttpServletRequest request,
                                                    @RequestParam(value = PARAM_CUSTOMER_ID) Long customerId) {
         logRequest(request);
@@ -46,7 +47,7 @@ public class OrderController {
         return ResponseEntity.ok(orders.stream().map(Order::toModel).toList());
     }
 
-    @RequestMapping(path = ORDER_GET_ALL_ADMIN, method = RequestMethod.GET, produces = "application/json")
+    @GetMapping(path = ORDER_GET_ALL_ADMIN)
     public ResponseEntity<List<OrderModel>> getAll(HttpServletRequest request,
                                                    @RequestParam(value = PARAM_EMAIL) String email,
                                                    @RequestParam(value = PARAM_SESSION) UUID token) {
@@ -59,7 +60,7 @@ public class OrderController {
         return ResponseEntity.ok(orderService.findAll().stream().map(Order::toModel).toList());
     }
 
-    @RequestMapping(path = ORDER_BASE, method = RequestMethod.GET, produces = "application/json")
+    @GetMapping
     public ResponseEntity<OrderModel> get(HttpServletRequest request,
                                      @RequestParam(value = PARAM_ID) Long orderId) {
         logRequest(request);
@@ -70,7 +71,7 @@ public class OrderController {
         return ResponseEntity.ok(order.toModel());
     }
 
-    @RequestMapping(path = ORDER_BASE, method = RequestMethod.POST, produces = "application/json")
+    @PostMapping
     public ResponseEntity<Boolean> add(HttpServletRequest request,
                                        @RequestBody OrderModel order) {
         logRequest(request);
@@ -85,8 +86,8 @@ public class OrderController {
         return ResponseEntity.ok(saved != null);
     }
 
-    @RequestMapping(path = ORDER_BASE, method = RequestMethod.PATCH, produces = "application/json")
-    public ResponseEntity<Boolean> update(HttpServletRequest request,
+    @PatchMapping
+    public ResponseEntity<Boolean> patch(HttpServletRequest request,
                                           @RequestParam(value = PARAM_ID) Long orderId,
                                           @RequestParam(value = PARAM_STATUS) OrderStatus status) {
         logRequest(request);
@@ -107,7 +108,7 @@ public class OrderController {
         return ResponseEntity.ok(orderService.saveNew(order) != null);
     }
 
-    @RequestMapping(path = ORDER_BASE, method = RequestMethod.DELETE, produces = "application/json")
+    @DeleteMapping
     public ResponseEntity<Boolean> delete(HttpServletRequest request,
                                           @RequestParam(value = PARAM_ID) Long orderId) {
         logRequest(request);

00-backend/src/main/java/de/htwsaar/webshop/controller/ReviewController.java

@@ -1,3 +1,4 @@
+
 package de.htwsaar.webshop.controller;
 
 import de.htwsaar.webshop.model.ReviewModel;
@@ -5,8 +6,13 @@ import de.htwsaar.webshop.repository.entities.Review;
 import de.htwsaar.webshop.service.ArticleService;
 import de.htwsaar.webshop.service.ReviewService;
 import jakarta.servlet.http.HttpServletRequest;
+import jakarta.validation.Valid;
+import jakarta.validation.constraints.Max;
+import jakarta.validation.constraints.Min;
+import jakarta.validation.constraints.NotBlank;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 
@@ -19,6 +25,7 @@ import static de.htwsaar.webshop.config.ParameterConfig.*;
 import static de.htwsaar.webshop.util.LoggerUtil.logRequest;
 
 @RestController
+@RequestMapping(value = REVIEW_BASE, produces = "application/json")
 @Slf4j
 public class ReviewController {
 
@@ -31,70 +38,96 @@ public class ReviewController {
         this.articleService = articleService;
     }
 
-    @RequestMapping(path = REVIEW_GET_ALL, method = RequestMethod.GET, produces = "application/json")
+    @GetMapping(path = REVIEW_GET_ALL)
     public ResponseEntity<List<ReviewModel>> getAll(HttpServletRequest request,
                                                     @RequestParam(value = PARAM_UUID) UUID uuid) {
         logRequest(request);
-        List<ReviewModel> review = reviewService.getAllByUUID(uuid).stream().map(reviewService::toModel).toList();
-        if (review.isEmpty()) {
+        List<ReviewModel> reviews = reviewService.getAllByUUID(uuid)
+                .stream()
+                .map(reviewService::toModel)
+                .toList();
+
+        if (reviews.isEmpty()) {
             return ResponseEntity.noContent().build();
         }
-        return ResponseEntity.ok(review);
+        return ResponseEntity.ok(reviews);
     }
 
-    @RequestMapping(path = REVIEW_BASE, method = RequestMethod.GET, produces = "application/json")
-    public ResponseEntity<Review> get(HttpServletRequest request,
-                                      @RequestParam(value = PARAM_ID) Long reviewId) {
+    @GetMapping
+    public ResponseEntity<ReviewModel> get(HttpServletRequest request,
+                                           @RequestParam(value = PARAM_ID) Long reviewId) {
         logRequest(request);
         Review review = reviewService.getReviewById(reviewId);
+
         if (review == null) {
+            log.debug("Review with id {} not found", reviewId);
             return ResponseEntity.noContent().build();
         }
-        return ResponseEntity.ok(review);
+
+        return ResponseEntity.ok(reviewService.toModel(review));
     }
 
-    @RequestMapping(path = REVIEW_BASE, method = RequestMethod.POST, produces = "application/json")
-    public ResponseEntity<Boolean> add(HttpServletRequest request,
-                                       @RequestParam(value = PARAM_UUID) UUID uuid,
-                                       @RequestParam(value = PARAM_RATING) int rating,
-                                       @RequestBody String review) {
+    @PostMapping
+    public ResponseEntity<ReviewModel> add(HttpServletRequest request,
+                                           @RequestParam(value = PARAM_UUID) UUID articleUuid,
+                                           @RequestParam(value = PARAM_RATING)
+                                           @Min(value = 0, message = "Rating must be at least 0")
+                                           @Max(value = 10, message = "Rating must be at most 10")
+                                           int rating,
+                                           @RequestBody @NotBlank(message = "Review text cannot be empty") String reviewText) {
         logRequest(request);
 
-        if (uuid == null || articleService.findByUUID(uuid) == null
-                || rating < 0 || rating > 10) {
-            log.warn("[{}] failed Validation, sending bad request", request.getRequestURI());
-            return ResponseEntity.badRequest().body(false);
+        if (articleService.findByUUID(articleUuid) == null) {
+            log.warn("Article with UUID {} not found for review creation", articleUuid);
+            return ResponseEntity.badRequest().build();
         }
 
-        Review saved = reviewService.save(uuid, rating, review);
-        return ResponseEntity.ok(saved != null);
+        Review savedReview = reviewService.save(articleUuid, rating, reviewText);
+
+        if (savedReview == null) {
+            log.error("Failed to save review for article UUID {}", articleUuid);
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
+        }
+
+        return ResponseEntity.status(HttpStatus.CREATED).body(reviewService.toModel(savedReview));
     }
 
-    @RequestMapping(path = REVIEW_BASE, method = RequestMethod.PUT, produces = "application/json")
-    public ResponseEntity<Boolean> update(HttpServletRequest request,
-                                          @RequestParam(value = PARAM_ID) Long reviewId,
-                                          @RequestBody Review review) {
+    @PutMapping
+    public ResponseEntity<ReviewModel> update(HttpServletRequest request,
+                                              @RequestParam(value = PARAM_ID) Long reviewId,
+                                              @RequestBody @Valid Review review) {
         logRequest(request);
-        if (reviewId == null || reviewService.getReviewById(reviewId) == null) {
-            return ResponseEntity.badRequest().body(false);
+
+        Review existingReview = reviewService.getReviewById(reviewId);
+        if (existingReview == null) {
+            log.warn("Review with id {} not found for update", reviewId);
+            return ResponseEntity.notFound().build();
         }
-        review.setId(reviewService.getReviewById(reviewId).getId());
-        return ResponseEntity.ok(reviewService.save(review) != null);
+
+        // Ensure the ID matches
+        review.setId(reviewId);
+        Review updatedReview = reviewService.save(review);
+
+        if (updatedReview == null) {
+            log.error("Failed to update review with id {}", reviewId);
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
+        }
+
+        return ResponseEntity.ok(reviewService.toModel(updatedReview));
     }
 
-    @RequestMapping(path = REVIEW_BASE, method = RequestMethod.DELETE, produces = "application/json")
-    public ResponseEntity<Boolean> delete(HttpServletRequest request,
-                                          @RequestParam(value = PARAM_ID) Long reviewId) {
+    @DeleteMapping
+    public ResponseEntity<Void> delete(HttpServletRequest request,
+                                       @RequestParam(value = PARAM_ID) Long reviewId) {
         logRequest(request);
-        if (reviewId == null) {
-            log.warn("[{}] got invalid imageId", request.getRequestURI());
-            return ResponseEntity.badRequest().body(false);
-        }
-        if (reviewService.getReviewById(reviewId) != null) {
-            log.warn("[{}] got invalid imageId", request.getRequestURI());
-            return ResponseEntity.badRequest().body(false);
+
+        Review existingReview = reviewService.getReviewById(reviewId);
+        if (existingReview == null) {
+            log.warn("Review with id {} not found for deletion", reviewId);
+            return ResponseEntity.notFound().build();
         }
+
         reviewService.delete(reviewId);
         return ResponseEntity.ok().build();
     }
-}
+}

00-backend/src/main/java/de/htwsaar/webshop/controller/StatisticsController.java

@@ -1,6 +1,6 @@
 package de.htwsaar.webshop.controller;
 
-import de.htwsaar.webshop.model.CatMonthModel;
+import de.htwsaar.webshop.model.CategoryMonthModel;
 import de.htwsaar.webshop.model.OrderStatus;
 import de.htwsaar.webshop.service.SessionService;
 import de.htwsaar.webshop.service.StatisticsService;
@@ -12,7 +12,6 @@ import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
-import java.util.List;
 import java.util.Map;
 import java.util.UUID;
 
@@ -34,9 +33,9 @@ public class StatisticsController {
     }
 
     @RequestMapping(value = STATISTICS_VOLUME, method = RequestMethod.GET, produces = "application/json")
-    public ResponseEntity<CatMonthModel<Integer>> getMonthlySalesVolume(HttpServletRequest request,
-                                                                        @RequestParam(value = PARAM_SESSION) UUID session,
-                                                                        @RequestParam(value = PARAM_EMAIL) String email) {
+    public ResponseEntity<CategoryMonthModel<Integer>> getMonthlySalesVolume(HttpServletRequest request,
+                                                                             @RequestParam(value = PARAM_SESSION) UUID session,
+                                                                             @RequestParam(value = PARAM_EMAIL) String email) {
         logRequest(request);
         if (!sessionService.isAdmin(session, email)) {
             log.warn("Invalid session requesting Admin {}", session);
@@ -46,9 +45,9 @@ public class StatisticsController {
     }
 
     @RequestMapping(value = STATISTICS_REVENUE, method = RequestMethod.GET, produces = "application/json")
-    public ResponseEntity<CatMonthModel<Integer>> getMonthlyRevenue(HttpServletRequest request,
-                                                                    @RequestParam(value = PARAM_SESSION) UUID token,
-                                                                    @RequestParam(value = PARAM_EMAIL) String email) {
+    public ResponseEntity<CategoryMonthModel<Integer>> getMonthlyRevenue(HttpServletRequest request,
+                                                                         @RequestParam(value = PARAM_SESSION) UUID token,
+                                                                         @RequestParam(value = PARAM_EMAIL) String email) {
         logRequest(request);
         if (!sessionService.isAdmin(token, email)) {
             log.warn("Invalid session requesting Admin {}", token);

00-backend/src/main/java/de/htwsaar/webshop/cronjob/ExpiredSessionDeleteJob.java

@@ -16,17 +16,10 @@ public class ExpiredSessionDeleteJob {
 
     private final SessionService sessionService;
 
-    /**
-     * Constructor of the class
-     * @param sessionService used in the class
-     */
     public ExpiredSessionDeleteJob(SessionService sessionService) {
         this.sessionService = sessionService;
     }
 
-    /**
-     * Method running the job calling the referring service method
-     */
     @Scheduled(fixedRate = MILLIS_TO_WEEK)
     public void runFixedRateTask() {
         log.info("Deleting expired sessions...");

00-backend/src/main/java/de/htwsaar/webshop/model/CategoryMonthModel.java

@@ -9,6 +9,6 @@ import java.util.Map;
 @Getter
 @Setter
 @AllArgsConstructor
-public class CatMonthModel<T extends Number> {
+public class CategoryMonthModel<T extends Number> {
     Map<String, Map<Long, T>> catMonthMap;
 }

00-backend/src/main/java/de/htwsaar/webshop/service/StatisticsService.java

@@ -1,16 +1,14 @@
 package de.htwsaar.webshop.service;
 
-import de.htwsaar.webshop.model.CatMonthModel;
+import de.htwsaar.webshop.model.CategoryMonthModel;
 import de.htwsaar.webshop.model.OrderStatus;
 
 import java.util.Map;
-import java.util.List;
-import java.util.UUID;
 
 public interface StatisticsService {
-    CatMonthModel<Integer> getSalesVolume();
+    CategoryMonthModel<Integer> getSalesVolume();
 
-    CatMonthModel<Integer> getSalesRevenue();
+    CategoryMonthModel<Integer> getSalesRevenue();
 
     Map<OrderStatus, Integer> getOrderStatus();
 

00-backend/src/main/java/de/htwsaar/webshop/service/impl/StatisticsServiceImpl.java

@@ -1,7 +1,7 @@
 package de.htwsaar.webshop.service.impl;
 
 import de.htwsaar.webshop.model.ArticleCategory;
-import de.htwsaar.webshop.model.CatMonthModel;
+import de.htwsaar.webshop.model.CategoryMonthModel;
 import de.htwsaar.webshop.model.OrderStatus;
 import de.htwsaar.webshop.repository.entities.OrderItem;
 import de.htwsaar.webshop.service.ArticleService;
@@ -30,9 +30,9 @@ public class StatisticsServiceImpl implements StatisticsService {
     }
 
     //returns Map<unix milli timestamp, Map<Category, T>>
-    private <T extends Number> CatMonthModel<T> getMonthCategoryMap(Function<OrderItem, T> mappingFunction,
-                                                                    BinaryOperator<T> reduceFunction,
-                                                                    T defaultValue) {
+    private <T extends Number> CategoryMonthModel<T> getMonthCategoryMap(Function<OrderItem, T> mappingFunction,
+                                                                         BinaryOperator<T> reduceFunction,
+                                                                         T defaultValue) {
         Map<String, Map<Long, T>> map = new TreeMap<>();
         for (ArticleCategory value : ArticleCategory.values()) {
             map.put(value.loc, new TreeMap<>());
@@ -49,16 +49,16 @@ public class StatisticsServiceImpl implements StatisticsService {
                 })
             );
         });
-        return new CatMonthModel<>(map);
+        return new CategoryMonthModel<>(map);
     }
 
     @Override
-    public CatMonthModel<Integer> getSalesVolume() {
+    public CategoryMonthModel<Integer> getSalesVolume() {
         return getMonthCategoryMap(OrderItem::getAmount, Integer::sum, 0);
     }
 
     @Override
-    public CatMonthModel<Integer> getSalesRevenue() {
+    public CategoryMonthModel<Integer> getSalesRevenue() {
         return getMonthCategoryMap(item -> item.getArticle().getPrice100(), Integer::sum, 0);
     }
 

01-frontend/package-lock.json

@@ -4880,21 +4880,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
-      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
-      "dev": true,
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

01-frontend/public/locales/en/translation.json

@@ -132,8 +132,8 @@
   "salesStatistics": "Sales Statistics",
   "monthlySalesVolume": "Monthly Sales Volume",
   "monthlySalesRevenue": "Monthly Sales Revenue in €",
-  "itemVolumeDistribution": "Item Volume Distribution",
-  "itemRevenueDistribution": "Item Revenue Distribution",
+  "itemVolumeDistribution": "Sales Volume Distribution",
+  "itemRevenueDistribution": "Sales Revenue Distribution",
   "stockFulfillment": "Stock fulfillment",
   "orderStatus": "Order Status",
   "ORDERED": "Ordered",

01-frontend/src/App.css

@@ -1,63 +1,64 @@
 /* App.css - CSS-Variablen-basierte Version */
 :root {
-    --background-color: #fafafa;
-    --text-color: #000000;
-    --navbar-height: 5.1vh;
-    --page-height: 94vh;
+  --background-color: #fafafa;
+  --text-color: #000000;
+  --navbar-height: 5.1vh;
+  --page-height: 94vh;
 }
 
 #root {
-    width: 100%;
-    min-height: 100vh;
-    background-color: var(--background-color) !important;
-    color: var(--text-color) !important;
-    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+  min-height: 100vh;
+  background-color: var(--background-color) !important;
+  color: var(--text-color) !important;
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-html, body {
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background-color: var(--background-color) !important;
-    color: var(--text-color) !important;
-    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+html,
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--background-color) !important;
+  color: var(--text-color) !important;
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
 }
 
 .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
+  filter: drop-shadow(0 0 2em #646cffaa);
 }
 
 .logo.react:hover {
-    filter: drop-shadow(0 0 2em #61dafbaa);
+  filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
 @keyframes logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 @media (prefers-reduced-motion: no-preference) {
-    a:nth-of-type(2) .logo {
-        animation: logo-spin infinite 20s linear;
-    }
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
 }
 
 .card {
-    padding: 2em;
-    border-radius: 8px;
+  padding: 2em;
+  border-radius: 8px;
 }
 
 .read-the-docs {
-    opacity: 0.7;
+  opacity: 0.7;
 }

01-frontend/src/App.tsx

@@ -1,52 +1,51 @@
-import {StyledEngineProvider} from '@mui/material/styles';
-import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
-import {BrowserRouter, Route, Routes} from 'react-router-dom';
-import './App.css';
-import {BasketProvider} from './helper/BasketProvider';
-import NavBar from './helper/navbar/NavBar';
-import Account from './pages/Account';
-import Contact from './pages/Contact';
-import Home from './pages/Home';
-import NoPage from './pages/NoPage';
-import Orders from './pages/Orders';
-import Payment from './pages/Payment';
-import Product from './pages/Product';
-import {CustomThemeProvider} from './theme/ThemeContext';
-import FSComponents from './pages/FSComponents.tsx';
-import AdminPanel from './pages/AdminPanel';
-import {AccountProvider} from './helper/AccountProvider.tsx';
-import {CookiesProvider} from 'react-cookie';
+import { StyledEngineProvider } from "@mui/material/styles";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import "./App.css";
+import { BasketProvider } from "./helper/BasketProvider";
+import NavBar from "./helper/navbar/NavBar";
+import Account from "./pages/Account";
+import Contact from "./pages/Contact";
+import Home from "./pages/Home";
+import NoPage from "./pages/NoPage";
+import Orders from "./pages/Orders";
+import Payment from "./pages/Payment";
+import Product from "./pages/Product";
+import { CustomThemeProvider } from "./theme/ThemeContext";
+import FSComponents from "./pages/FSComponents.tsx";
+import AdminPanel from "./pages/AdminPanel";
+import { AccountProvider } from "./helper/AccountProvider.tsx";
+import { CookiesProvider } from "react-cookie";
 
 export default function App() {
+  const queryClient = new QueryClient();
 
-    const queryClient = new QueryClient();
-
-    return (
-        <QueryClientProvider client={queryClient}>
-            <StyledEngineProvider injectFirst>
-                <CustomThemeProvider>
-                    <CookiesProvider>
-                        <AccountProvider>
-                            <BasketProvider>
-                                <BrowserRouter>
-                                    <NavBar/>
-                                    <Routes>
-                                        <Route path="/" element={<Home/>}/>
-                                        <Route path="*" element={<NoPage/>}/>
-                                        <Route path="/product/:id" element={<Product/>}/>
-                                        <Route path="/checkout" element={<Payment/>}/>
-                                        <Route path="/components" element={<FSComponents/>}/>
-                                        <Route path="/contact" element={<Contact/>}/>
-                                        <Route path='/account' element={<Account/>}/>
-                                        <Route path='/orders' element={<Orders/>}/>
-                                        <Route path='/admin' element={<AdminPanel/>}/>
-                                    </Routes>
-                                </BrowserRouter>
-                            </BasketProvider>
-                        </AccountProvider>
-                    </CookiesProvider>
-                </CustomThemeProvider>
-            </StyledEngineProvider>
-        </QueryClientProvider>
-    )
+  return (
+    <QueryClientProvider client={queryClient}>
+      <StyledEngineProvider injectFirst>
+        <CustomThemeProvider>
+          <CookiesProvider>
+            <AccountProvider>
+              <BasketProvider>
+                <BrowserRouter>
+                  <NavBar />
+                  <Routes>
+                    <Route path="/" element={<Home />} />
+                    <Route path="*" element={<NoPage />} />
+                    <Route path="/product/:id" element={<Product />} />
+                    <Route path="/checkout" element={<Payment />} />
+                    <Route path="/components" element={<FSComponents />} />
+                    <Route path="/contact" element={<Contact />} />
+                    <Route path="/account" element={<Account />} />
+                    <Route path="/orders" element={<Orders />} />
+                    <Route path="/admin" element={<AdminPanel />} />
+                  </Routes>
+                </BrowserRouter>
+              </BasketProvider>
+            </AccountProvider>
+          </CookiesProvider>
+        </CustomThemeProvider>
+      </StyledEngineProvider>
+    </QueryClientProvider>
+  );
 }

01-frontend/src/components/Account.tsx

@@ -1,58 +1,57 @@
 type AccountType = {
+  id: number;
+  customer: {
     id: number;
-    customer: {
-        id: number;
-        name: string;
-        surname: string;
-        address: string;
-        country: string;
-        zip: string;
-    };
-    password: string;
-    langI18n: string;
-    admin: boolean;
-    email: string;
+    name: string;
+    surname: string;
+    address: string;
+    country: string;
+    zip: string;
+  };
+  password: string;
+  langI18n: string;
+  admin: boolean;
+  email: string;
 };
 
 export default AccountType;
 
-export type CustomerType =
-    {
-        id: number;
-        name: string;
-        surname: string;
-        address: string;
-        country: string;
-        zip: string;
-    }
+export type CustomerType = {
+  id: number;
+  name: string;
+  surname: string;
+  address: string;
+  country: string;
+  zip: string;
+};
 
 export type SubmitLogin = {
-    email: string;
-    password: string;
+  email: string;
+  password: string;
 };
 
 export type SubmitLoginSession = {
-    email: string;
-    session: string;
+  email: string;
+  session: string;
 };
 
 export type AdminAccountOperation = {
-    email: string;
-    uuid: string;
-    accountId: number;
-}
+  email: string;
+  uuid: string;
+  accountId: number;
+};
 
 export type User = {
-    password: string;
-    email: string;
-    customerId: number;
-    session: string;
-    isAdmin: boolean;
-    // weitere Felder nach Bedarf
+  password: string;
+  email: string;
+  customerId: number;
+  session: string;
+  isAdmin: boolean;
+  // weitere Felder nach Bedarf
 };
 
 export type AccountContextType = {
-    user: User | null;
-    login: (userData: User) => void;
-    logout: () => void;
-};
+  user: User | null;
+  login: (userData: User) => void;
+  logout: () => void;
+};

01-frontend/src/components/Item.tsx

@@ -1,43 +1,43 @@
 export type Item = {
-    id: number;
-    uuid: string;
-    name: string;
-    description: string;
-    price100: number;
-    stock: number;
-    stockExpected: number;
-    category: string;
-    rating: number;
-    discount100: number;
+  id: number;
+  uuid: string;
+  name: string;
+  description: string;
+  price100: number;
+  stock: number;
+  stockExpected: number;
+  category: string;
+  rating: number;
+  discount100: number;
 };
 
 type ItemWithImage = {
-    id: number;
-    uuid: string;
-    name: string;
-    description: string;
-    price100: number;
-    stock: number;
-    stockExpected: number;
-    category: string;
-    rating: number;
-    discount100: number;
-    image: string;
+  id: number;
+  uuid: string;
+  name: string;
+  description: string;
+  price100: number;
+  stock: number;
+  stockExpected: number;
+  category: string;
+  rating: number;
+  discount100: number;
+  image: string;
 };
 
 export type ItemWithFSImage = {
-    id: number;
-    uuid: string;
-    name: string;
-    description: string;
-    price100: number;
-    stock: number;
-    stockExpected: number;
-    category: string;
-    rating: number;
-    discount100: number;
-    image: string;
-    farmImage: string;
+  id: number;
+  uuid: string;
+  name: string;
+  description: string;
+  price100: number;
+  stock: number;
+  stockExpected: number;
+  category: string;
+  rating: number;
+  discount100: number;
+  image: string;
+  farmImage: string;
 };
 
-export default ItemWithImage;
+export default ItemWithImage;

01-frontend/src/components/Order.tsx

@@ -1,40 +1,39 @@
 export enum OrderStatusEnum {
-    ORDERED = 'ORDERED',
-    IN_PROGRESS = 'IN_PROGRESS',
-    ISSUES = 'ISSUES',
-    DELIVERED = 'DELIVERED',
-    CANCELLED = 'CANCELLED',
+  ORDERED = "ORDERED",
+  IN_PROGRESS = "IN_PROGRESS",
+  ISSUES = "ISSUES",
+  DELIVERED = "DELIVERED",
+  CANCELLED = "CANCELLED",
 }
 
 type OrderType = {
-    id: number;
-    customerId: number;
-    time: number;
-    status: OrderStatusEnum;
-    orderItems: { id: number; amount: number; article: string }[];
-    total: number;
+  id: number;
+  customerId: number;
+  time: number;
+  status: OrderStatusEnum;
+  orderItems: { id: number; amount: number; article: string }[];
+  total: number;
 };
 
 export default OrderType;
 
-
 export type ShippingDetails = {
-    firstName: string;
-    lastName: string;
-    telefon: string;
-    address: string;
-    postalCode: string;
-    city: string;
-    country: string;
+  firstName: string;
+  lastName: string;
+  telefon: string;
+  address: string;
+  postalCode: string;
+  city: string;
+  country: string;
 };
 
 export type OrderItem = {
-    id: string;
-    amount: number;
-    article: string; // UUID of the item
+  id: string;
+  amount: number;
+  article: string; // UUID of the item
 };
 
 export type OrderPatch = {
-    id: number;
-    status: OrderStatusEnum;
+  id: number;
+  status: OrderStatusEnum;
 };

01-frontend/src/components/Rating.tsx

@@ -1,7 +1,7 @@
 type RatingType = {
-    rating: number;
-    content: string;
-    timestamp: number;
+  rating: number;
+  content: string;
+  timestamp: number;
 };
 
-export default RatingType;
+export default RatingType;

01-frontend/src/components/RatingSubmit.tsx

@@ -1,7 +1,7 @@
 type RatingSubmitType = {
-    articleId: string;
-    rating: number;
-    content: string;
+  articleId: string;
+  rating: number;
+  content: string;
 };
 
-export default RatingSubmitType;
+export default RatingSubmitType;

01-frontend/src/components/i18n/i18n.ts

@@ -1,19 +1,19 @@
 import i18next from "i18next";
-import {initReactI18next} from "react-i18next";
+import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import HttpBackend from "i18next-http-backend";
 
 i18next
-    .use(HttpBackend)
-    .use(LanguageDetector)
-    .use(initReactI18next)
-    .init({
-        fallbackLng: "en",
-        debug: false,
-        interpolation: {
-            escapeValue: false,
-        },
-        backend: {
-            loadPath: "/locales/{{lng}}/translation.json",
-        }
-    });
+  .use(HttpBackend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: "en",
+    debug: false,
+    interpolation: {
+      escapeValue: false,
+    },
+    backend: {
+      loadPath: "/locales/{{lng}}/translation.json",
+    },
+  });

01-frontend/src/helper/AccountProvider.tsx

@@ -1,42 +1,48 @@
-import {createContext, ReactNode, useContext, useEffect, useState} from "react";
-import {AccountContextType, User} from "../components/Account";
-import {useCookies} from 'react-cookie';
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { AccountContextType, User } from "../components/Account";
+import { useCookies } from "react-cookie";
 
 const AccountContext = createContext<AccountContextType | undefined>(undefined);
 
-export const AccountProvider = ({children}: { children: ReactNode }) => {
-    const [cookies, setCookie] = useCookies(["account"]);
+export const AccountProvider = ({ children }: { children: ReactNode }) => {
+  const [cookies, setCookie] = useCookies(["account"]);
 
-    const initialAccount =
-        typeof cookies.account === "object" && !Array.isArray(cookies.account)
-            ? cookies.account
-            : null;
-    const [user, setUser] = useState<User | null>(initialAccount);
+  const initialAccount =
+    typeof cookies.account === "object" && !Array.isArray(cookies.account)
+      ? cookies.account
+      : null;
+  const [user, setUser] = useState<User | null>(initialAccount);
 
-    const login = (userData: User) => {
-        setUser(userData);
-    };
+  const login = (userData: User) => {
+    setUser(userData);
+  };
 
-    const logout = () => {
-        setUser(null);
-    };
+  const logout = () => {
+    setUser(null);
+  };
 
-    useEffect(() => {
-        setCookie("account", user, {path: "/", maxAge: 3600 * 24 * 7});
-    }, [user, setCookie]);
+  useEffect(() => {
+    setCookie("account", user, { path: "/", maxAge: 3600 * 24 * 7 });
+  }, [user, setCookie]);
 
-    return (
-        <AccountContext.Provider value={{user, login, logout}}>
-            {children}
-        </AccountContext.Provider>
-    );
+  return (
+    <AccountContext.Provider value={{ user, login, logout }}>
+      {children}
+    </AccountContext.Provider>
+  );
 };
 
 // eslint-disable-next-line react-refresh/only-export-components
 export const useAccount = () => {
-    const context = useContext(AccountContext);
-    if (!context) {
-        throw new Error("useAccount must be used within an AccountProvider");
-    }
-    return context;
-};
+  const context = useContext(AccountContext);
+  if (!context) {
+    throw new Error("useAccount must be used within an AccountProvider");
+  }
+  return context;
+};

01-frontend/src/helper/BasketProvider.tsx

@@ -1,60 +1,64 @@
-import React, {createContext, useContext, useEffect, useState} from 'react';
-import Item from '../components/Item';
-import {useCookies} from 'react-cookie';
+import React, { createContext, useContext, useEffect, useState } from "react";
+import Item from "../components/Item";
+import { useCookies } from "react-cookie";
 
 export interface BasketItem {
-    item: Item;
-    quantity: number;
+  item: Item;
+  quantity: number;
 }
 
 interface BasketContextType {
-    basket: BasketItem[];
-    addToBasket: (item: Item, quantity: number) => void;
-    clearBasket: () => void;
+  basket: BasketItem[];
+  addToBasket: (item: Item, quantity: number) => void;
+  clearBasket: () => void;
 }
 
 const BasketContext = createContext<BasketContextType | undefined>(undefined);
 
-export const BasketProvider: React.FC<{ children: React.ReactNode }> = ({children}) => {
-    const [cookies, setCookie] = useCookies(["basket"]);
-    const [basket, setBasket] = useState<BasketItem[]>(cookies.basket || []);
+export const BasketProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [cookies, setCookie] = useCookies(["basket"]);
+  const [basket, setBasket] = useState<BasketItem[]>(cookies.basket || []);
 
-    const addToBasket = (item: Item, quantity: number) => {
-        setBasket((prevBasket) => {
-            const existingItem = prevBasket.find((basketItem) => basketItem.item.uuid === item.uuid);
-            if (existingItem) {
-                // Update quantity if item already exists
-                return prevBasket.map((basketItem) =>
-                    basketItem.item.uuid === item.uuid
-                        ? {...basketItem, quantity: basketItem.quantity + quantity}
-                        : basketItem
-                );
-            }
-            // Add new item to basket
-            return [...prevBasket, {item, quantity}];
-        });
-    };
+  const addToBasket = (item: Item, quantity: number) => {
+    setBasket((prevBasket) => {
+      const existingItem = prevBasket.find(
+        (basketItem) => basketItem.item.uuid === item.uuid,
+      );
+      if (existingItem) {
+        // Update quantity if item already exists
+        return prevBasket.map((basketItem) =>
+          basketItem.item.uuid === item.uuid
+            ? { ...basketItem, quantity: basketItem.quantity + quantity }
+            : basketItem,
+        );
+      }
+      // Add new item to basket
+      return [...prevBasket, { item, quantity }];
+    });
+  };
 
-    const clearBasket = () => {
-        setBasket([]);
-    };
+  const clearBasket = () => {
+    setBasket([]);
+  };
 
-    useEffect(() => {
-        setCookie("basket", basket, {path: "/", maxAge: 3600 * 24 * 7}); // 7 Tage
-    }, [basket, setCookie]);
+  useEffect(() => {
+    setCookie("basket", basket, { path: "/", maxAge: 3600 * 24 * 7 }); // 7 Tage
+  }, [basket, setCookie]);
 
-    return (
-        <BasketContext.Provider value={{basket, addToBasket, clearBasket}}>
-            {children}
-        </BasketContext.Provider>
-    );
+  return (
+    <BasketContext.Provider value={{ basket, addToBasket, clearBasket }}>
+      {children}
+    </BasketContext.Provider>
+  );
 };
 
 // eslint-disable-next-line react-refresh/only-export-components
 export const useBasket = () => {
-    const context = useContext(BasketContext);
-    if (!context) {
-        throw new Error('useBasket must be used within a BasketProvider');
-    }
-    return context;
-};
+  const context = useContext(BasketContext);
+  if (!context) {
+    throw new Error("useBasket must be used within a BasketProvider");
+  }
+  return context;
+};

01-frontend/src/helper/adminpanel/AccountsInfo.tsx

@@ -1,183 +1,211 @@
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
-import {Box, Button, IconButton, Toolbar, useTheme} from "@mui/material";
-import {DataGrid, GridColDef, GridRowId, GridRowSelectionModel} from "@mui/x-data-grid";
-import {useMutation, useQuery} from "@tanstack/react-query";
-import {useEffect, useState} from "react";
-import {useTranslation} from "react-i18next";
-import AccountType, {AdminAccountOperation, CustomerType} from "../../components/Account";
-import {useAccount} from "../AccountProvider";
-import {deleteAccountAdmin, fetchAccounts, updateAccountAdmin} from "../query/Queries";
+import { Box, Button, IconButton, Toolbar, useTheme } from "@mui/material";
+import {
+  DataGrid,
+  GridColDef,
+  GridRowId,
+  GridRowSelectionModel,
+} from "@mui/x-data-grid";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import AccountType, {
+  AdminAccountOperation,
+  CustomerType,
+} from "../../components/Account";
+import { useAccount } from "../AccountProvider";
+import {
+  deleteAccountAdmin,
+  fetchAccounts,
+  updateAccountAdmin,
+} from "../query/Queries";
 import CustomerEditDialog from "./CustomerEditDialog";
 
 export default function AccountsInfo() {
-    const theme = useTheme();
-    const {t} = useTranslation();
+  const theme = useTheme();
+  const { t } = useTranslation();
 
-    const [customerData, setCustomerData] = useState<CustomerType>({
-        id: 0,
-        name: "",
-        surname: "",
-        address: "",
-        zip: "",
-        country: ""
-    });
+  const [customerData, setCustomerData] = useState<CustomerType>({
+    id: 0,
+    name: "",
+    surname: "",
+    address: "",
+    zip: "",
+    country: "",
+  });
 
-    async function handleCustomerEdit(account: AccountType) {
-        setCustomerData(account.customer);
-        setOpen(true);
+  async function handleCustomerEdit(account: AccountType) {
+    setCustomerData(account.customer);
+    setOpen(true);
+  }
+
+  const [rows, setRows] = useState<AccountType[]>([]);
+  const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());
+
+  const { user: loginData } = useAccount();
+
+  const { data, refetch } = useQuery({
+    queryKey: ["fetchAccounts", loginData],
+    queryFn: () =>
+      fetchAccounts(
+        loginData
+          ? loginData
+          : {
+              email: "",
+              password: "",
+              session: "",
+              customerId: -1,
+              isAdmin: false,
+            },
+      ),
+    retry: 3,
+    retryDelay: 1000,
+  });
+
+  const deleteAccount = useMutation({
+    mutationFn: (user: AdminAccountOperation) => deleteAccountAdmin(user),
+  });
+
+  useEffect(() => {
+    if (data) {
+      setRows(data);
     }
+  }, [data]);
 
-    const [rows, setRows] = useState<AccountType[]>([]);
-    const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());
+  const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
+    setSelectedRows(newSelection.ids);
+  };
 
-    const {user: loginData} = useAccount();
-
-    const {data, refetch} = useQuery({
-        queryKey: ["fetchAccounts", loginData],
-        queryFn: () => fetchAccounts(loginData ? loginData : {
-            email: "",
-            password: "",
-            session: "",
-            customerId: -1,
-            isAdmin: false
-        }),
-        retry: 3,
-        retryDelay: 1000,
+  const handleDeleteSelected = async () => {
+    selectedRows.forEach(async (rowId) => {
+      let id = rows.find((row) => row.id === rowId)?.id;
+      if (id === undefined) id = -1;
+      await deleteAccount.mutateAsync({
+        email: loginData?.email || "",
+        uuid: loginData?.session || "",
+        accountId: id,
+      });
     });
 
-    const deleteAccount = useMutation({
-        mutationFn: (user: AdminAccountOperation) =>
-            deleteAccountAdmin(user),
-    });
+    setRows(rows.filter((row) => !selectedRows.has(row.id)));
+  };
 
-    useEffect(() => {
-        if (data) {
-            setRows(data);
-        }
-    }, [data]);
+  const updateAdmin = useMutation({
+    mutationFn: (account: AccountType) =>
+      updateAccountAdmin(
+        account,
+        loginData
+          ? loginData
+          : {
+              email: "",
+              password: "",
+              session: "",
+              customerId: -1,
+              isAdmin: false,
+            },
+      ),
+  });
 
-    const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
-        setSelectedRows(newSelection.ids);
-    };
+  const columns: GridColDef<(typeof rows)[number]>[] = [
+    { field: "id", headerName: "ID", width: 60 },
+    {
+      field: "admin",
+      headerName: t("admin"),
+      type: "boolean",
+      width: 90,
+      editable: true,
+    },
+    {
+      field: "email",
+      headerName: t("email"),
+      width: 150,
+      editable: false,
+    },
+    {
+      field: "langI18n",
+      headerName: t("language"),
+      width: 150,
+      editable: false,
+    },
+    {
+      //edit billing information button
+      field: "customer",
+      headerName: t("address"),
+      width: 90,
+      sortable: false,
+      disableReorder: true,
+      disableColumnMenu: true,
+      renderCell: (params) => (
+        <IconButton onClick={() => handleCustomerEdit(params.row)}>
+          {" "}
+          <EditIcon />{" "}
+        </IconButton>
+      ),
+    },
+  ];
 
-    const handleDeleteSelected = async () => {
-        selectedRows.forEach(async (rowId) => {
-            let id = rows.find((row) => row.id === rowId)?.id
-            if(id === undefined) id = -1;
-            await deleteAccount.mutateAsync({
-                email: loginData?.email || '',
-                uuid: loginData?.session || '',
-                accountId: id,
-            });
-        })
+  const [open, setOpen] = useState(false);
 
-        setRows(rows.filter((row) => !selectedRows.has(row.id)));
-    };
+  const handleCustomerEditSubmit = async () => {
+    setOpen(false);
+    await refetch();
+  };
 
-    const updateAdmin = useMutation({
-        mutationFn: (account: AccountType) =>
-            updateAccountAdmin(account, loginData ? loginData : {
-                email: "",
-                password: "",
-                session: "",
-                customerId: -1,
-                isAdmin: false
-            }),
-
-    });
-
-    const columns: GridColDef<(typeof rows)[number]>[] = [
-        {field: 'id', headerName: 'ID', width: 60},
-        {
-            field: 'admin',
-            headerName: t('admin'),
-            type: "boolean",
-            width: 90,
-            editable: true
-        },
-        {
-            field: 'email',
-            headerName: t('email'),
-            width: 150,
-            editable: false,
-        },
-        {
-            field: 'langI18n',
-            headerName: t('language'),
-            width: 150,
-            editable: false,
-        },
-        { //edit billing information button
-            field: "customer",
-            headerName: t('address'),
-            width: 90,
-            sortable: false,
-            disableReorder: true,
-            disableColumnMenu: true,
-            renderCell: params => <IconButton onClick={() => handleCustomerEdit(params.row)}> <EditIcon/> </IconButton>,
-        }
-    ];
-
-    const [open, setOpen] = useState(false);
-
-    const handleCustomerEditSubmit = async () => {
-        setOpen(false);
-        await refetch();
-    };
-
-    return (
-        <>
-            <Box
-                className="page-table"
-                sx={{
-                    backgroundColor: theme.palette.background.paper,
-                    color: theme.palette.text.secondary
-                }}
-            >
-                <DataGrid
-                    rows={rows}
-                    columns={columns}
-                    initialState={{}}
-                    checkboxSelection
-                    disableRowSelectionOnClick
-                    onRowSelectionModelChange={handleSelectionChange}
-                    slots={{
-                        toolbar: () => (
-                            <Toolbar>
-                                <Button
-                                    variant="contained"
-                                    color="error"
-                                    startIcon={<DeleteIcon/>}
-                                    onClick={handleDeleteSelected}
-                                    disabled={selectedRows.size === 0}
-                                    sx={{
-                                        marginRight: 1
-                                    }}
-                                >
-                                    {t('deleteAccount')}
-                                </Button>
-                            </Toolbar>
-                        )
-                    }}
-                    showToolbar
-                    processRowUpdate={async (updatedRow) => {
-                        const originalRow = rows.find(row => row.id === updatedRow.id);
-                        if (originalRow && originalRow.admin !== updatedRow.admin) {
-                            await updateAdmin.mutateAsync(updatedRow);
-                        }
-                        setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row));
-                        return updatedRow;
-                    }}
-                />
-            </Box>
-            <CustomerEditDialog
-                open={open}
-                onClose={() => setOpen(false)}
-                onSubmit={handleCustomerEditSubmit}
-                customerData={customerData}
-                setCustomerData={setCustomerData}
-            />
-        </>
-    );
+  return (
+    <>
+      <Box
+        className="page-table"
+        sx={{
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.text.secondary,
+        }}
+      >
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          initialState={{}}
+          checkboxSelection
+          disableRowSelectionOnClick
+          onRowSelectionModelChange={handleSelectionChange}
+          slots={{
+            toolbar: () => (
+              <Toolbar>
+                <Button
+                  variant="contained"
+                  color="error"
+                  startIcon={<DeleteIcon />}
+                  onClick={handleDeleteSelected}
+                  disabled={selectedRows.size === 0}
+                  sx={{
+                    marginRight: 1,
+                  }}
+                >
+                  {t("deleteAccount")}
+                </Button>
+              </Toolbar>
+            ),
+          }}
+          showToolbar
+          processRowUpdate={async (updatedRow) => {
+            const originalRow = rows.find((row) => row.id === updatedRow.id);
+            if (originalRow && originalRow.admin !== updatedRow.admin) {
+              await updateAdmin.mutateAsync(updatedRow);
+            }
+            setRows(
+              rows.map((row) => (row.id === updatedRow.id ? updatedRow : row)),
+            );
+            return updatedRow;
+          }}
+        />
+      </Box>
+      <CustomerEditDialog
+        open={open}
+        onClose={() => setOpen(false)}
+        onSubmit={handleCustomerEditSubmit}
+        customerData={customerData}
+        setCustomerData={setCustomerData}
+      />
+    </>
+  );
 }

01-frontend/src/helper/adminpanel/CustomerEditDialog.tsx

@@ -1,108 +1,123 @@
-import {Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField} from "@mui/material";
-import {useMutation} from "@tanstack/react-query";
-import React, {useEffect} from "react";
-import {useTranslation} from "react-i18next";
-import {CustomerType} from "../../components/Account";
-import {updateCustomer} from "../query/Queries"; // Importiere die Funktion für die Registrierung
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+import { useMutation } from "@tanstack/react-query";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { CustomerType } from "../../components/Account";
+import { updateCustomer } from "../query/Queries"; // Importiere die Funktion für die Registrierung
 
 type CustomerDialogProps = {
-    open: boolean;
-    onClose: () => void;
-    onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
-    customerData: CustomerType;
-    setCustomerData: React.Dispatch<React.SetStateAction<CustomerType>>;
+  open: boolean;
+  onClose: () => void;
+  onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
+  customerData: CustomerType;
+  setCustomerData: React.Dispatch<React.SetStateAction<CustomerType>>;
 };
 
 const CustomerEditDialog: React.FC<CustomerDialogProps> = ({
-                                                               open,
-                                                               onClose,
-                                                               customerData,
-                                                               setCustomerData,
-                                                               onSubmit
-                                                           }) => {
+  open,
+  onClose,
+  customerData,
+  setCustomerData,
+  onSubmit,
+}) => {
+  const { t } = useTranslation();
 
-    const {t} = useTranslation();
-
-    useEffect(() => {
-        if (open) {
-            const active = document.activeElement as HTMLElement | null;
-            if (active && typeof active.blur === "function") {
-                active.blur();
-            }
-        }
-    }, [open]);
-
-    const changeCustomer = useMutation({
-        mutationFn: (customer: CustomerType) =>
-            updateCustomer(customer),
-    });
-
-    const handleSave = async () => {
-        const customer: CustomerType = {
-            id: customerData.id,
-            name: customerData.name,
-            surname: customerData.surname,
-            address: customerData.address,
-            zip: customerData.zip,
-            country: customerData.country,
-        };
-        await changeCustomer.mutateAsync(customer);
-        onSubmit(); // Rufe die onSubmit-Funktion auf, um den Dialog zu schließen und die Änderungen zu übernehmen
-        onClose(); // Schließe den Dialog
+  useEffect(() => {
+    if (open) {
+      const active = document.activeElement as HTMLElement | null;
+      if (active && typeof active.blur === "function") {
+        active.blur();
+      }
     }
+  }, [open]);
 
-    return (
-        <Dialog open={open} onClose={onClose} disableEnforceFocus>
-            <DialogTitle>{t('changeCustomer')}</DialogTitle>
-            <DialogContent>
-                <TextField
-                    margin="dense"
-                    label={t("name")}
-                    type="text"
-                    fullWidth
-                    value={customerData.name}
-                    onChange={e => setCustomerData(prev => ({...prev, name: e.target.value}))}
-                />
-                <TextField
-                    margin="dense"
-                    label={t("surname")}
-                    type="text"
-                    fullWidth
-                    value={customerData.surname}
-                    onChange={e => setCustomerData(prev => ({...prev, surname: e.target.value}))}
-                />
-                <TextField
-                    margin="dense"
-                    label={t("address")}
-                    type="text"
-                    fullWidth
-                    value={customerData.address}
-                    onChange={e => setCustomerData(prev => ({...prev, address: e.target.value}))}
-                />
-                <TextField
-                    margin="dense"
-                    label={t("zip")}
-                    type="text"
-                    fullWidth
-                    value={customerData.zip}
-                    onChange={e => setCustomerData(prev => ({...prev, zip: e.target.value}))}
-                />
-                <TextField
-                    margin="dense"
-                    label={t("country")}
-                    type="text"
-                    fullWidth
-                    value={customerData.country}
-                    onChange={e => setCustomerData(prev => ({...prev, country: e.target.value}))}
-                />
-            </DialogContent>
-            <DialogActions>
-                <Button variant="contained" color="primary" onClick={handleSave}>
-                    {t("save")}
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
+  const changeCustomer = useMutation({
+    mutationFn: (customer: CustomerType) => updateCustomer(customer),
+  });
+
+  const handleSave = async () => {
+    const customer: CustomerType = {
+      id: customerData.id,
+      name: customerData.name,
+      surname: customerData.surname,
+      address: customerData.address,
+      zip: customerData.zip,
+      country: customerData.country,
+    };
+    await changeCustomer.mutateAsync(customer);
+    onSubmit(); // Rufe die onSubmit-Funktion auf, um den Dialog zu schließen und die Änderungen zu übernehmen
+    onClose(); // Schließe den Dialog
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} disableEnforceFocus>
+      <DialogTitle>{t("changeCustomer")}</DialogTitle>
+      <DialogContent>
+        <TextField
+          margin="dense"
+          label={t("name")}
+          type="text"
+          fullWidth
+          value={customerData.name}
+          onChange={(e) =>
+            setCustomerData((prev) => ({ ...prev, name: e.target.value }))
+          }
+        />
+        <TextField
+          margin="dense"
+          label={t("surname")}
+          type="text"
+          fullWidth
+          value={customerData.surname}
+          onChange={(e) =>
+            setCustomerData((prev) => ({ ...prev, surname: e.target.value }))
+          }
+        />
+        <TextField
+          margin="dense"
+          label={t("address")}
+          type="text"
+          fullWidth
+          value={customerData.address}
+          onChange={(e) =>
+            setCustomerData((prev) => ({ ...prev, address: e.target.value }))
+          }
+        />
+        <TextField
+          margin="dense"
+          label={t("zip")}
+          type="text"
+          fullWidth
+          value={customerData.zip}
+          onChange={(e) =>
+            setCustomerData((prev) => ({ ...prev, zip: e.target.value }))
+          }
+        />
+        <TextField
+          margin="dense"
+          label={t("country")}
+          type="text"
+          fullWidth
+          value={customerData.country}
+          onChange={(e) =>
+            setCustomerData((prev) => ({ ...prev, country: e.target.value }))
+          }
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button variant="contained" color="primary" onClick={handleSave}>
+          {t("save")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
 };
 
 export default CustomerEditDialog;

01-frontend/src/helper/adminpanel/ItemImageDialog.tsx

@@ -1,229 +1,243 @@
-import React, {useState} from 'react';
+import React, { useState } from "react";
 import {
-    Alert,
-    Box,
-    Button,
-    CircularProgress,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    IconButton,
-    Typography,
-} from '@mui/material';
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
-import CloseIcon from '@mui/icons-material/Close';
-import {useTranslation} from 'react-i18next';
-import {Item} from '../../components/Item.tsx';
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Typography,
+} from "@mui/material";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import CloseIcon from "@mui/icons-material/Close";
+import { useTranslation } from "react-i18next";
+import { Item } from "../../components/Item.tsx";
 
 interface ItemImageDialogProps {
-    open: boolean;
-    onClose: () => void;
-    item: Item;
-    onSuccess?: () => void;
-    isFarmStationImage: boolean;
+  open: boolean;
+  onClose: () => void;
+  item: Item;
+  onSuccess?: () => void;
+  isFarmStationImage: boolean;
 }
 
-export default function ItemImageDialog({open, onClose, item, onSuccess, isFarmStationImage}: ItemImageDialogProps) {
-    const {t} = useTranslation();
-    const [selectedFile, setSelectedFile] = useState<File | null>(null);
-    const [preview, setPreview] = useState<string | null>(null);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [success, setSuccess] = useState(false);
+export default function ItemImageDialog({
+  open,
+  onClose,
+  item,
+  onSuccess,
+  isFarmStationImage,
+}: ItemImageDialogProps) {
+  const { t } = useTranslation();
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
 
-    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files?.[0];
-        if (file) {
-            // Validate file type
-            if (!file.type.startsWith('image/')) {
-                setError('Please select a valid image file');
-                return;
-            }
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!file.type.startsWith("image/")) {
+        setError("Please select a valid image file");
+        return;
+      }
 
-            // Validate file size (5MB limit)
-            if (file.size > 5 * 1024 * 1024) {
-                setError('File size must be less than 5MB');
-                return;
-            }
+      // Validate file size (5MB limit)
+      if (file.size > 5 * 1024 * 1024) {
+        setError("File size must be less than 5MB");
+        return;
+      }
 
-            setSelectedFile(file);
-            setError(null);
+      setSelectedFile(file);
+      setError(null);
 
-            // Create preview
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                setPreview(e.target?.result as string);
-            };
-            reader.readAsDataURL(file);
-        }
-    };
+      // Create preview
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setPreview(e.target?.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
 
-    const convertFileToBase64 = (file: File): Promise<string> => {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = () => {
-                const result = reader.result as string;
-                // Remove the data URL prefix (e.g., "data:image/jpeg;base64,")
-                const base64 = result.split(',')[1];
-                resolve(base64);
-            };
-            reader.onerror = reject;
-            reader.readAsDataURL(file);
-        });
-    };
+  const convertFileToBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result as string;
+        // Remove the data URL prefix (e.g., "data:image/jpeg;base64,")
+        const base64 = result.split(",")[1];
+        resolve(base64);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  };
 
-    const handleUpload = async () => {
-        if (!selectedFile) {
-            setError('Please select an image file');
-            return;
-        }
+  const handleUpload = async () => {
+    if (!selectedFile) {
+      setError("Please select an image file");
+      return;
+    }
 
-        setLoading(true);
-        setError(null);
+    setLoading(true);
+    setError(null);
 
-        try {
-            const base64Image = await convertFileToBase64(selectedFile);
+    try {
+      const base64Image = await convertFileToBase64(selectedFile);
 
-            const response = await fetch((isFarmStationImage ? 'http://localhost:8085/farm' : 'http://localhost:8085/image') + '?uuid=' + item.uuid, {
-                method: 'PUT',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: base64Image,
-            });
+      const response = await fetch(
+        (isFarmStationImage
+          ? "http://localhost:8085/farm"
+          : "http://localhost:8085/image") +
+          "?uuid=" +
+          item.uuid,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: base64Image,
+        },
+      );
 
-            if (!response.ok) {
-                console.error('Failed to upload image:', await response.text());
-            }
+      if (!response.ok) {
+        console.error("Failed to upload image:", await response.text());
+      }
 
-            setSuccess(true);
-            onSuccess?.();
+      setSuccess(true);
+      onSuccess?.();
 
-            // Auto-close dialog after 1.5 seconds
-            setTimeout(() => {
-                handleClose();
-            }, 1500);
+      // Auto-close dialog after 1.5 seconds
+      setTimeout(() => {
+        handleClose();
+      }, 1500);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to upload image");
+    } finally {
+      setLoading(false);
+    }
+  };
 
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to upload image');
-        } finally {
-            setLoading(false);
-        }
-    };
+  const handleClose = () => {
+    setSelectedFile(null);
+    setPreview(null);
+    setError(null);
+    setSuccess(false);
+    setLoading(false);
+    onClose();
+  };
 
-    const handleClose = () => {
-        setSelectedFile(null);
-        setPreview(null);
-        setError(null);
-        setSuccess(false);
-        setLoading(false);
-        onClose();
-    };
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+      <DialogTitle
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        {t("uploadImage")} - {item.name}
+        <IconButton onClick={handleClose} size="small">
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
 
-    return (
-        <Dialog
-            open={open}
-            onClose={handleClose}
-            maxWidth="sm"
-            fullWidth
+      <DialogContent>
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 2, py: 1 }}>
+          {/* Item Info */}
+          <Box>
+            <Typography variant="body2" color="textSecondary">
+              {t("item")}: {item.name}
+            </Typography>
+            <Typography variant="body2" color="textSecondary">
+              UUID: {item.uuid}
+            </Typography>
+            <Typography variant="body2" color="error">
+              {t("imageUploadNotice")}
+            </Typography>
+            {isFarmStationImage && (
+              <Typography variant="body2" color="error">
+                {t("imageUploadNoticeFs")}
+              </Typography>
+            )}
+          </Box>
+
+          {/* File Upload */}
+          <Box>
+            <input
+              accept="image/*"
+              style={{ display: "none" }}
+              id="image-upload"
+              type="file"
+              onChange={handleFileSelect}
+            />
+            <label htmlFor="image-upload">
+              <Button
+                variant="outlined"
+                component="span"
+                startIcon={<CloudUploadIcon />}
+                fullWidth
+                sx={{ mb: 2 }}
+              >
+                {selectedFile ? selectedFile.name : t("selectImage")}
+              </Button>
+            </label>
+          </Box>
+
+          {/* Image Preview */}
+          {preview && (
+            <Box sx={{ textAlign: "center" }}>
+              <img
+                src={preview}
+                alt="Preview"
+                style={{
+                  maxWidth: "100%",
+                  maxHeight: "300px",
+                  objectFit: "contain",
+                  border: "1px solid #ddd",
+                  borderRadius: "4px",
+                }}
+              />
+              <Typography variant="caption" display="block" sx={{ mt: 1 }}>
+                {selectedFile?.name} (
+                {(selectedFile?.size || 0 / 1024).toFixed(1)} KB)
+              </Typography>
+            </Box>
+          )}
+
+          {/* Error Message */}
+          {error && (
+            <Alert severity="error" onClose={() => setError(null)}>
+              {error}
+            </Alert>
+          )}
+
+          {/* Success Message */}
+          {success && (
+            <Alert severity="success">{t("imageUploadedSuccessfully")}</Alert>
+          )}
+        </Box>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={handleClose} disabled={loading}>
+          {t("cancel")}
+        </Button>
+        <Button
+          onClick={handleUpload}
+          variant="contained"
+          disabled={!selectedFile || loading}
+          startIcon={loading ? <CircularProgress size={20} /> : undefined}
         >
-            <DialogTitle sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
-                {t('uploadImage')} - {item.name}
-                <IconButton onClick={handleClose} size="small">
-                    <CloseIcon/>
-                </IconButton>
-            </DialogTitle>
-
-            <DialogContent>
-                <Box sx={{display: 'flex', flexDirection: 'column', gap: 2, py: 1}}>
-                    {/* Item Info */}
-                    <Box>
-                        <Typography variant="body2" color="textSecondary">
-                            {t('item')}: {item.name}
-                        </Typography>
-                        <Typography variant="body2" color="textSecondary">
-                            UUID: {item.uuid}
-                        </Typography>
-                        <Typography variant="body2" color="error">
-                            {t('imageUploadNotice')}
-                        </Typography>
-                        {isFarmStationImage && <Typography variant="body2" color="error">
-                            {t('imageUploadNoticeFs')}
-                        </Typography>}
-                    </Box>
-
-                    {/* File Upload */}
-                    <Box>
-                        <input
-                            accept="image/*"
-                            style={{display: 'none'}}
-                            id="image-upload"
-                            type="file"
-                            onChange={handleFileSelect}
-                        />
-                        <label htmlFor="image-upload">
-                            <Button
-                                variant="outlined"
-                                component="span"
-                                startIcon={<CloudUploadIcon/>}
-                                fullWidth
-                                sx={{mb: 2}}
-                            >
-                                {selectedFile ? selectedFile.name : t('selectImage')}
-                            </Button>
-                        </label>
-                    </Box>
-
-                    {/* Image Preview */}
-                    {preview && (
-                        <Box sx={{textAlign: 'center'}}>
-                            <img
-                                src={preview}
-                                alt="Preview"
-                                style={{
-                                    maxWidth: '100%',
-                                    maxHeight: '300px',
-                                    objectFit: 'contain',
-                                    border: '1px solid #ddd',
-                                    borderRadius: '4px',
-                                }}
-                            />
-                            <Typography variant="caption" display="block" sx={{mt: 1}}>
-                                {selectedFile?.name} ({(selectedFile?.size || 0 / 1024).toFixed(1)} KB)
-                            </Typography>
-                        </Box>
-                    )}
-
-                    {/* Error Message */}
-                    {error && (
-                        <Alert severity="error" onClose={() => setError(null)}>
-                            {error}
-                        </Alert>
-                    )}
-
-                    {/* Success Message */}
-                    {success && (
-                        <Alert severity="success">
-                            {t('imageUploadedSuccessfully')}
-                        </Alert>
-                    )}
-                </Box>
-            </DialogContent>
-
-            <DialogActions>
-                <Button onClick={handleClose} disabled={loading}>
-                    {t('cancel')}
-                </Button>
-                <Button
-                    onClick={handleUpload}
-                    variant="contained"
-                    disabled={!selectedFile || loading}
-                    startIcon={loading ? <CircularProgress size={20}/> : undefined}
-                >
-                    {loading ? t('uploading') : t('upload')}
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-}
+          {loading ? t("uploading") : t("upload")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

01-frontend/src/helper/adminpanel/ItemsInfo.tsx

@@ -3,256 +3,284 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import { Box, Button, IconButton, Toolbar, useTheme } from "@mui/material";
 import { Gauge, gaugeClasses } from "@mui/x-charts";
-import { DataGrid, GridColDef, GridRowId, GridRowSelectionModel } from "@mui/x-data-grid";
+import {
+  DataGrid,
+  GridColDef,
+  GridRowId,
+  GridRowSelectionModel,
+} from "@mui/x-data-grid";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Item from "../../components/Item";
 import { mapValueToColor } from "../../util/ColorUtil.tsx";
-import { useAccount } from "../AccountProvider.tsx";
-import { deleteItemQuery, fetchItems, updateItemAdmin } from "../query/Queries.tsx";
+import {
+  deleteItemQuery,
+  fetchItemList,
+  updateItemAdmin,
+} from "../query/Queries.tsx";
 import ItemImageDialog from "./ItemImageDialog.tsx";
 import NewItemDialog from "./NewItemDialog.tsx";
 
-export default function ItemsInfo() {
-    const theme = useTheme();
-    const { t } = useTranslation();
+export default function ItemsInfo({ itemList }: { itemList: Item[] }) {
+  const theme = useTheme();
+  const { t } = useTranslation();
 
-    const [rows, setRows] = useState<Item[]>([]);
-    const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());
+  const [rows, setRows] = useState<Item[]>([]);
+  const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());
 
-    const [editImageDialog, setEditImageDialog] = useState(false);
-    const [newItemDialog, setNewItemDialog] = useState(false);
-    const [selectedItem, setSelectedItem] = useState<Item | null>(null);
-    const [isFarmStationImage, setIsFarmStationImage] = useState(false);
+  const [editImageDialog, setEditImageDialog] = useState(false);
+  const [newItemDialog, setNewItemDialog] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<Item | null>(null);
+  const [isFarmStationImage, setIsFarmStationImage] = useState(false);
 
+  function handleImageEdit(item: Item) {
+    setIsFarmStationImage(false);
+    setSelectedItem(item);
+    setEditImageDialog(true);
+    console.log("IconEdit", item);
+  }
 
-    function handleImageEdit(item: Item) {
-        setIsFarmStationImage(false);
-        setSelectedItem(item);
-        setEditImageDialog(true);
-        console.log("IconEdit", item);
+  function handleFarmImageEdit(item: Item) {
+    setIsFarmStationImage(true);
+    setSelectedItem(item);
+    setEditImageDialog(true);
+    console.log("IconEdit", item);
+  }
+
+  function handleAddItem() {
+    setNewItemDialog(true);
+  }
+
+  useEffect(() => {
+    if (itemList) {
+      setRows(itemList);
     }
+  }, [itemList]);
 
-    function handleFarmImageEdit(item: Item) {
-        setIsFarmStationImage(true);
-        setSelectedItem(item);
-        setEditImageDialog(true);
-        console.log("IconEdit", item);
-    }
+  const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
+    setSelectedRows(newSelection.ids);
+  };
 
+  const deleteItem = useMutation({
+    mutationFn: (uuid: string) => deleteItemQuery(uuid),
+  });
 
-    function handleAddItem() {
-        setNewItemDialog(true);
-    }
-
-    const { user: loginData } = useAccount();
-
-    const { data } = useQuery({
-        queryKey: ["fetchItems", loginData],
-        queryFn: () => fetchItems(),
-        retry: 3,
-        retryDelay: 1000,
-    });
-
-    useEffect(() => {
-        if (data) {
-            setRows(data);
-        }
-    }, [data]);
-
-    const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
-        setSelectedRows(newSelection.ids);
-    };
-
-    const deleteItem = useMutation({
-        mutationFn: (uuid: string) =>
-            deleteItemQuery(uuid),
-    });
-
-    const handleDeleteSelected = async () => {
-        await Promise.all(
-            Array.from(selectedRows).map(async (row) => {
-                await deleteItem.mutateAsync(rows.find(item => item.id === row)?.uuid || "");
-            })
+  const handleDeleteSelected = async () => {
+    await Promise.all(
+      Array.from(selectedRows).map(async (row) => {
+        await deleteItem.mutateAsync(
+          rows.find((item) => item.id === row)?.uuid || "",
         );
-
-        setRows(rows.filter((row) => !selectedRows.has(row.id)));
-    };
-
-    const updateItem = useMutation({
-        mutationFn: (item: Item) =>
-            updateItemAdmin(item),
-
-    });
-
-    const handleRowUpdate = async (updatedRow: Item) => {
-        setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row));
-        await updateItem.mutateAsync(updatedRow);
-        return updatedRow;
-    }
-
-    const columns: GridColDef<(typeof rows)[number]>[] = [
-        { field: 'id', headerName: 'ID', width: 60 },
-        {
-            field: 'uuid',
-            headerName: t('uuid'),
-            type: "string",
-            width: 120,
-            editable: false
-        },
-        {
-            field: 'name',
-            headerName: t('name'),
-            width: 200,
-            editable: true,
-        },
-        {
-            field: 'category',
-            headerName: t('category'),
-            width: 150,
-            editable: true,
-            valueFormatter: (val) => t(val),
-        },
-        {
-            field: 'description',
-            headerName: t('description'),
-            width: 150,
-            editable: true,
-        },
-        {
-            field: 'price100',
-            headerName: t('price100€'),
-            width: 100,
-            editable: true,
-            type: 'number',
-            valueFormatter: (val) => (val / 100).toFixed(2),
-        },
-        {
-            field: 'discount100',
-            headerName: t('discount100'),
-            width: 120,
-            editable: true,
-            type: 'number'
-        },
-        {
-            field: 'stock',
-            headerName: t('stock'),
-            width: 100,
-            editable: true,
-            type: 'number',
-            renderCell: params => <Gauge value={Math.min(params.row.stock, params.row.stockExpected)} valueMin={0}
-                valueMax={params.row.stockExpected} startAngle={-90} endAngle={90} sx={{
-                    [`& .${gaugeClasses.valueArc}`]: {
-                        fill: () => {
-                            return mapValueToColor(0, params.row.stockExpected, params.row.stock)
-                        },
-                    },
-                }} text={() => `${params.row.stock}`} />
-        },
-        {
-            field: 'rating',
-            headerName: t('rating'),
-            width: 100,
-            editable: false, //the rating is averaged from ratings
-            type: 'number',
-            renderCell: params => <Gauge value={Math.min(params.row.rating, 10)} valueMin={0} valueMax={10}
-                startAngle={-90} endAngle={90} sx={{
-                    [`& .${gaugeClasses.valueArc}`]: {
-                        fill: () => {
-                            return mapValueToColor(0, 10, params.row.rating)
-                        },
-                    },
-                }} text={() => `${params.row.rating.toFixed(2)}`} />
-        },
-        {
-            field: "actualPrice",
-            headerName: t('actualPrice'),
-            width: 90,
-            editable: false,
-            valueGetter: (_, row) => (row.price100 / 100 * ((100 - row.discount100) / 100)).toFixed(2)
-        },
-        {
-            field: 'images',
-            headerName: t('images'),
-            width: 90,
-            editable: false,
-            renderCell: params => <IconButton onClick={() => handleImageEdit(params.row)}> <EditIcon /> </IconButton>,
-        },
-        {
-            field: 'farmImage',
-            headerName: t('fsImage'),
-            width: 90,
-            editable: false,
-            renderCell: params => <IconButton onClick={() => handleFarmImageEdit(params.row)}> <EditIcon />
-            </IconButton>,
-        }
-    ];
-
-    return (
-        <Box
-            className="page-table"
-            sx={{
-                backgroundColor: theme.palette.background.paper,
-                color: theme.palette.text.secondary
-            }}
-        >
-            <DataGrid
-                rows={rows}
-                columns={columns}
-                initialState={{}}
-                checkboxSelection
-                disableRowSelectionOnClick
-                onRowSelectionModelChange={handleSelectionChange}
-                slots={{
-                    toolbar: () => (
-                        <Toolbar>
-                            <Button
-                                variant="contained"
-                                color="error"
-                                startIcon={<DeleteIcon />}
-                                onClick={handleDeleteSelected}
-                                disabled={selectedRows.size === 0}
-                                sx={{
-                                    marginRight: 1
-                                }}
-                            >
-                                {t('deleteProduct')}
-                            </Button>
-                            <Button
-                                variant="contained"
-                                color="primary"
-                                startIcon={<AddIcon/>}
-                                onClick={handleAddItem}
-                                sx={{
-                                    marginRight: 1
-                                }}
-                            >
-                                {t('addProduct')}
-                            </Button>
-                        </Toolbar>
-                    )
-                }}
-                showToolbar
-                processRowUpdate={handleRowUpdate}
-            />
-            {selectedItem && (
-                <ItemImageDialog
-                    open={editImageDialog}
-                    onClose={() => setEditImageDialog(false)}
-                    item={selectedItem}
-                    onSuccess={() => {
-                        // Refresh data or update UI
-                        console.log('Image uploaded successfully');
-                    }}
-                    isFarmStationImage={isFarmStationImage}
-                />
-            )}
-
-            <NewItemDialog
-                open={newItemDialog}
-                onClose={() => setNewItemDialog(false)}
-            />
-        </Box>
+      }),
     );
-}
+
+    setRows(rows.filter((row) => !selectedRows.has(row.id)));
+  };
+
+  const updateItem = useMutation({
+    mutationFn: (item: Item) => updateItemAdmin(item),
+  });
+
+  const handleRowUpdate = async (updatedRow: Item) => {
+    setRows(rows.map((row) => (row.id === updatedRow.id ? updatedRow : row)));
+    await updateItem.mutateAsync(updatedRow);
+    return updatedRow;
+  };
+
+  const columns: GridColDef<(typeof rows)[number]>[] = [
+    { field: "id", headerName: "ID", width: 60 },
+    {
+      field: "uuid",
+      headerName: t("uuid"),
+      type: "string",
+      width: 120,
+      editable: false,
+    },
+    {
+      field: "name",
+      headerName: t("name"),
+      width: 200,
+      editable: true,
+    },
+    {
+      field: "category",
+      headerName: t("category"),
+      width: 150,
+      editable: true,
+      valueFormatter: (val) => t(val),
+    },
+    {
+      field: "description",
+      headerName: t("description"),
+      width: 150,
+      editable: true,
+    },
+    {
+      field: "price100",
+      headerName: t("price100€"),
+      width: 100,
+      editable: true,
+      type: "number",
+      valueFormatter: (val) => (val / 100).toFixed(2),
+    },
+    {
+      field: "discount100",
+      headerName: t("discount100"),
+      width: 120,
+      editable: true,
+      type: "number",
+    },
+    {
+      field: "stock",
+      headerName: t("stock"),
+      width: 100,
+      editable: true,
+      type: "number",
+      renderCell: (params) => (
+        <Gauge
+          value={Math.min(params.row.stock, params.row.stockExpected)}
+          valueMin={0}
+          valueMax={params.row.stockExpected}
+          startAngle={-90}
+          endAngle={90}
+          sx={{
+            [`& .${gaugeClasses.valueArc}`]: {
+              fill: () => {
+                return mapValueToColor(
+                  0,
+                  params.row.stockExpected,
+                  params.row.stock,
+                );
+              },
+            },
+          }}
+          text={() => `${params.row.stock}`}
+        />
+      ),
+    },
+    {
+      field: "rating",
+      headerName: t("rating"),
+      width: 100,
+      editable: false, //the rating is averaged from ratings
+      type: "number",
+      renderCell: (params) => (
+        <Gauge
+          value={Math.min(params.row.rating, 10)}
+          valueMin={0}
+          valueMax={10}
+          startAngle={-90}
+          endAngle={90}
+          sx={{
+            [`& .${gaugeClasses.valueArc}`]: {
+              fill: () => {
+                return mapValueToColor(0, 10, params.row.rating);
+              },
+            },
+          }}
+          text={() => `${params.row.rating.toFixed(2)}`}
+        />
+      ),
+    },
+    {
+      field: "actualPrice",
+      headerName: t("actualPrice"),
+      width: 90,
+      editable: false,
+      valueGetter: (_, row) =>
+        ((row.price100 / 100) * ((100 - row.discount100) / 100)).toFixed(2),
+    },
+    {
+      field: "images",
+      headerName: t("images"),
+      width: 90,
+      editable: false,
+      renderCell: (params) => (
+        <IconButton onClick={() => handleImageEdit(params.row)}>
+          {" "}
+          <EditIcon />{" "}
+        </IconButton>
+      ),
+    },
+    {
+      field: "farmImage",
+      headerName: t("fsImage"),
+      width: 90,
+      editable: false,
+      renderCell: (params) => (
+        <IconButton onClick={() => handleFarmImageEdit(params.row)}>
+          {" "}
+          <EditIcon />
+        </IconButton>
+      ),
+    },
+  ];
+
+  return (
+    <Box
+      className="page-table"
+      sx={{
+        backgroundColor: theme.palette.background.paper,
+        color: theme.palette.text.secondary,
+      }}
+    >
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        initialState={{}}
+        checkboxSelection
+        disableRowSelectionOnClick
+        onRowSelectionModelChange={handleSelectionChange}
+        slots={{
+          toolbar: () => (
+            <Toolbar>
+              <Button
+                variant="contained"
+                color="error"
+                startIcon={<DeleteIcon />}
+                onClick={handleDeleteSelected}
+                disabled={selectedRows.size === 0}
+                sx={{
+                  marginRight: 1,
+                }}
+              >
+                {t("deleteProduct")}
+              </Button>
+              <Button
+                variant="contained"
+                color="primary"
+                startIcon={<AddIcon />}
+                onClick={handleAddItem}
+                sx={{
+                  marginRight: 1,
+                }}
+              >
+                {t("addProduct")}
+              </Button>
+            </Toolbar>
+          ),
+        }}
+        showToolbar
+        processRowUpdate={handleRowUpdate}
+      />
+      {selectedItem && (
+        <ItemImageDialog
+          open={editImageDialog}
+          onClose={() => setEditImageDialog(false)}
+          item={selectedItem}
+          onSuccess={() => {
+            // Refresh data or update UI
+            console.log("Image uploaded successfully");
+          }}
+          isFarmStationImage={isFarmStationImage}
+        />
+      )}
+
+      <NewItemDialog
+        open={newItemDialog}
+        onClose={() => setNewItemDialog(false)}
+      />
+    </Box>
+  );
+}

01-frontend/src/helper/adminpanel/NewItemDialog.tsx

@@ -1,166 +1,164 @@
-import CloseIcon from '@mui/icons-material/Close';
+import CloseIcon from "@mui/icons-material/Close";
 import {
-    Alert,
-    Box,
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    IconButton,
-    TextField
-} from '@mui/material';
-import {useMutation} from '@tanstack/react-query';
-import {useState} from 'react';
-import {useTranslation} from 'react-i18next';
-import {Item} from '../../components/Item';
-import {submitItem} from '../query/Queries';
+  Alert,
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  TextField,
+} from "@mui/material";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Item } from "../../components/Item";
+import { submitItem } from "../query/Queries";
 
 interface NewItemDialogProps {
-    open: boolean;
-    onClose: () => void;
+  open: boolean;
+  onClose: () => void;
 }
 
-export default function NewItemDialog({open, onClose}: NewItemDialogProps) {
-    const {t} = useTranslation();
-    const [item, setItem] = useState<Item>({
-        id: 0,
-        uuid: "",
-        name: "",
-        description: "",
-        price100: 0,
-        stock: 0,
-        stockExpected: 1,
-        category: "",
-        rating: -1,
-        discount100: 0,
-    });
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [success, setSuccess] = useState(false);
+export default function NewItemDialog({ open, onClose }: NewItemDialogProps) {
+  const { t } = useTranslation();
+  const [item, setItem] = useState<Item>({
+    id: 0,
+    uuid: "",
+    name: "",
+    description: "",
+    price100: 0,
+    stock: 0,
+    stockExpected: 1,
+    category: "",
+    rating: -1,
+    discount100: 0,
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
 
-    const handleClose = () => {
-        setError(null);
-        setSuccess(false);
-        setLoading(false);
-        onClose();
-    };
+  const handleClose = () => {
+    setError(null);
+    setSuccess(false);
+    setLoading(false);
+    onClose();
+  };
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setItem({...item, [e.target.name]: e.target.value});
-    };
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setItem({ ...item, [e.target.name]: e.target.value });
+  };
 
-    const saveItem = useMutation({
-        mutationFn: (item: Item) =>
-            submitItem(item),
-    });
+  const saveItem = useMutation({
+    mutationFn: (item: Item) => submitItem(item),
+  });
 
-    const handleSave = async () => {
-        setLoading(true);
-        setError(null);
-        setSuccess(false);
+  const handleSave = async () => {
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
 
-        await saveItem.mutateAsync(item)
+    await saveItem.mutateAsync(item);
 
-        onClose(); // Close the dialog after saving
-        setLoading(false);
-    };
+    onClose(); // Close the dialog after saving
+    setLoading(false);
+  };
 
-    return (
-        <Dialog
-            open={open}
-            onClose={handleClose}
-            maxWidth="sm"
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+      <DialogTitle
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        {t("createNewItem")}
+        <IconButton onClick={handleClose} size="small">
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+
+      <DialogContent>
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 2, py: 1 }}>
+          {/* Name, Kategorie, Beschreibung, Preis, Rabatt, Bestand, Bestand erwartet */}
+          <TextField
+            label={t("name")}
+            name="name"
+            value={item.name}
+            onChange={handleChange}
             fullWidth
-        >
-            <DialogTitle sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
-                {t('createNewItem')}
-                <IconButton onClick={handleClose} size="small">
-                    <CloseIcon/>
-                </IconButton>
-            </DialogTitle>
+          />
+          <TextField
+            label={t("category")}
+            name="category"
+            value={item.category}
+            onChange={handleChange}
+            fullWidth
+          />
+          <TextField
+            label={t("description")}
+            name="description"
+            value={item.description}
+            onChange={handleChange}
+            fullWidth
+          />
+          <TextField
+            label={t("price100")}
+            name="price100"
+            value={item.price100}
+            onChange={handleChange}
+            fullWidth
+            type="number"
+          />
+          <TextField
+            label={t("discount100")}
+            name="discount100"
+            value={item.discount100}
+            onChange={handleChange}
+            fullWidth
+            type="number"
+          />
+          <TextField
+            label={t("stockExpected")}
+            name="stockExpected"
+            value={item.stockExpected}
+            onChange={handleChange}
+            fullWidth
+            type="number"
+          />
+          <TextField
+            label={t("stock")}
+            name="stock"
+            value={item.stock}
+            onChange={handleChange}
+            fullWidth
+            type="number"
+          />
 
-            <DialogContent>
-                <Box sx={{display: 'flex', flexDirection: 'column', gap: 2, py: 1}}>
-                    {/* Name, Kategorie, Beschreibung, Preis, Rabatt, Bestand, Bestand erwartet */}
-                    <TextField
-                        label={t("name")}
-                        name="name"
-                        value={item.name}
-                        onChange={handleChange}
-                        fullWidth
-                    />
-                    <TextField
-                        label={t("category")}
-                        name="category"
-                        value={item.category}
-                        onChange={handleChange}
-                        fullWidth
-                    />
-                    <TextField
-                        label={t("description")}
-                        name="description"
-                        value={item.description}
-                        onChange={handleChange}
-                        fullWidth
-                    />
-                    <TextField
-                        label={t("price100")}
-                        name="price100"
-                        value={item.price100}
-                        onChange={handleChange}
-                        fullWidth
-                        type='number'
-                    />
-                    <TextField
-                        label={t("discount100")}
-                        name="discount100"
-                        value={item.discount100}
-                        onChange={handleChange}
-                        fullWidth
-                        type='number'
-                    />
-                    <TextField
-                        label={t("stockExpected")}
-                        name="stockExpected"
-                        value={item.stockExpected}
-                        onChange={handleChange}
-                        fullWidth
-                        type='number'
-                    />
-                    <TextField
-                        label={t("stock")}
-                        name="stock"
-                        value={item.stock}
-                        onChange={handleChange}
-                        fullWidth
-                        type='number'
-                    />
+          {/* Error Message */}
+          {error && (
+            <Alert severity="error" onClose={() => setError(null)}>
+              {error}
+            </Alert>
+          )}
 
-                    {/* Error Message */}
-                    {error && (
-                        <Alert severity="error" onClose={() => setError(null)}>
-                            {error}
-                        </Alert>
-                    )}
+          {/* Success Message */}
+          {success && (
+            <Alert severity="success">{t("itemCreatedSuccessfully")}</Alert>
+          )}
+        </Box>
+      </DialogContent>
 
-                    {/* Success Message */}
-                    {success && (
-                        <Alert severity="success">
-                            {t('itemCreatedSuccessfully')}
-                        </Alert>
-                    )}
-                </Box>
-            </DialogContent>
-
-            <DialogActions>
-                <Button onClick={handleSave} disabled={loading}>
-                    {t('save')}
-                </Button>
-                <Button onClick={handleClose} disabled={loading}>
-                    {t('cancel')}
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-}
+      <DialogActions>
+        <Button onClick={handleSave} disabled={loading}>
+          {t("save")}
+        </Button>
+        <Button onClick={handleClose} disabled={loading}>
+          {t("cancel")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

01-frontend/src/helper/adminpanel/OrdersInfo.tsx

@@ -1,231 +1,251 @@
 import {
-    Button,
-    Card,
-    CardContent,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    Divider,
-    List,
-    ListItemText,
-    Snackbar,
-    Stack,
-    Typography,
-    useTheme
+  Button,
+  Card,
+  CardContent,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  List,
+  ListItemText,
+  Snackbar,
+  Stack,
+  Typography,
+  useTheme,
 } from "@mui/material";
-import {useMutation, useQuery} from "@tanstack/react-query";
-import React, {PropsWithChildren, useState} from "react";
-import {DndProvider, useDrag, useDrop} from 'react-dnd';
-import {HTML5Backend} from 'react-dnd-html5-backend';
-import {useTranslation} from "react-i18next";
-import OrderType, {OrderPatch, OrderStatusEnum} from "../../components/Order";
-import {useAccount} from "../AccountProvider";
-import {fetchOrdersAdmin, orderPatch} from "../query/Queries";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import React, { PropsWithChildren, useState } from "react";
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { useTranslation } from "react-i18next";
+import OrderType, { OrderPatch, OrderStatusEnum } from "../../components/Order";
+import { useAccount } from "../AccountProvider";
+import { fetchOrdersAdmin, orderPatch } from "../query/Queries";
+import Item from "../../components/Item";
 
 // The order in which the statuses are displayed
 const statusOrder: OrderStatusEnum[] = [
-    OrderStatusEnum.CANCELLED,
-    OrderStatusEnum.ISSUES,
-    OrderStatusEnum.ORDERED,
-    OrderStatusEnum.IN_PROGRESS,
-    OrderStatusEnum.DELIVERED
+  OrderStatusEnum.CANCELLED,
+  OrderStatusEnum.ISSUES,
+  OrderStatusEnum.ORDERED,
+  OrderStatusEnum.IN_PROGRESS,
+  OrderStatusEnum.DELIVERED,
 ];
 
+const OrderCard: React.FC<{ order: OrderType; onClick: () => void }> = ({
+  order,
+  onClick,
+}) => {
+  const { t } = useTranslation();
 
-const OrderCard: React.FC<{ order: OrderType; onClick: () => void }> = ({order, onClick}) => {
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: "order",
+    item: { id: order.id },
+    collect: (monitor) => ({
+      isDragging: !!monitor.isDragging(),
+    }),
+  }));
 
-    const {t} = useTranslation();
-
-    const [{isDragging}, drag] = useDrag(() => ({
-        type: 'order',
-        item: {id: order.id},
-        collect: (monitor) => ({
-            isDragging: !!monitor.isDragging(),
-        }),
-    }));
-
-    return (
-        <div ref={drag} style={{opacity: isDragging ? 0.5 : 1, marginBottom: 8}}>
-            <Card elevation={4} sx={{
-                m: 1
-            }}>
-                <CardContent onClick={onClick}>
-                    <Typography gutterBottom variant="h5" component="div">
-                        Order: {order.id}
-                    </Typography>
-                    <Typography>
-                        {t('date') + ": " + new Date(order.time).toUTCString()}
-                    </Typography>
-                    <Typography>
-                        {t('total') + ": " + (order.total / 100).toFixed(2) + " €"}
-                    </Typography>
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1, marginBottom: 8 }}>
+      <Card
+        elevation={4}
+        sx={{
+          m: 1,
+        }}
+      >
+        <CardContent onClick={onClick}>
+          <Typography gutterBottom variant="h5" component="div">
+            Order: {order.id}
+          </Typography>
+          <Typography>
+            {t("date") + ": " + new Date(order.time).toUTCString()}
+          </Typography>
+          <Typography>
+            {t("total") + ": " + (order.total / 100).toFixed(2) + " €"}
+          </Typography>
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
-const Column: React.FC<PropsWithChildren<{
+const Column: React.FC<
+  PropsWithChildren<{
     status: OrderStatusEnum;
-    onDrop: (id: number, status: OrderStatusEnum) => void
-}>> = ({status, onDrop, children}) => {
+    onDrop: (id: number, status: OrderStatusEnum) => void;
+  }>
+> = ({ status, onDrop, children }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
 
-    const {t} = useTranslation();
-    const theme = useTheme();
+  const [{ isOver }, drop] = useDrop(() => ({
+    accept: "order",
+    drop: (item: { id: number }) => onDrop(item.id, status),
+    collect: (monitor) => ({
+      isOver: !!monitor.isOver(),
+    }),
+  }));
 
-    const [{isOver}, drop] = useDrop(() => ({
-        accept: 'order',
-        drop: (item: { id: number }) => onDrop(item.id, status),
-        collect: (monitor) => ({
-            isOver: !!monitor.isOver(),
-        }),
-    }));
-
-    return (
-        <div ref={drop} style={{
+  return (
+    <div
+      ref={drop}
+      style={{
+        flex: 1,
+        backgroundColor: isOver
+          ? theme.palette.background.paper
+          : "transparent",
+        minWidth: 300,
+        maxWidth: 400,
+      }}
+    >
+      <Card
+        sx={{
+          minHeight: "100%",
+          marginTop: 2,
+          marginLeft: 1,
+          height: "80vh",
+          display: "flex",
+          flexDirection: "column",
+        }}
+        elevation={1}
+      >
+        <CardContent
+          sx={{
             flex: 1,
-            backgroundColor: isOver ? theme.palette.background.paper : 'transparent',
-            minWidth: 300,
-            maxWidth: 400
-        }}>
-            <Card sx={{
-                minHeight: '100%',
-                marginTop: 2,
-                marginLeft: 1,
-                height: '80vh',
-                display: 'flex',
-                flexDirection: 'column'
-            }} elevation={1}>
-                <CardContent sx={{
-                    flex: 1,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    overflowY: 'auto',
-                    height: '100%',
-                }}>
-                    <Typography variant="h6">{t(status)}</Typography>
-                    <div style={{flex: 1, overflowY: 'auto'}}>
-                        {children}
-                    </div>
-                </CardContent>
-            </Card>
-        </div>
-    );
+            display: "flex",
+            flexDirection: "column",
+            overflowY: "auto",
+            height: "100%",
+          }}
+        >
+          <Typography variant="h6">{t(status)}</Typography>
+          <div style={{ flex: 1, overflowY: "auto" }}>{children}</div>
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
-const EditOrder: React.FC<{ open: boolean; order: OrderType | null; onClose: () => void }> = ({
-                                                                                                  open,
-                                                                                                  order,
-                                                                                                  onClose
-                                                                                              }) => {
-
-    const {t} = useTranslation();
-    if (order === null)
-        return "";
-    return (
-        <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
-            <DialogTitle>
-                {`${t(order.status)} #${order?.id}`}
-            </DialogTitle>
-            <DialogContent dividers>
-                {order && (
-                    <Stack spacing={2}>
-                        <Typography
-                            variant="subtitle1">{`${t('orderDate')}: ${new Date(order.time).toDateString()}`}</Typography>
-                        <Divider/>
-                        <Typography variant="subtitle2">{t('orderedItems')}:</Typography>
-                        <List dense>
-                            {order.orderItems.map((item, idx) => (
-                                <ListItemText
-                                    key={idx}
-                                    primary={`${item.article} x${item.amount}`}
-                                />
-                            ))}
-                        </List>
-                        <Divider/>
-                        <Typography variant="h6">{`${t('sum')}: ${(order.total / 100).toFixed(2)} €`}</Typography>
-                    </Stack>
-                )}
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={onClose}>{t('close')}</Button>
-            </DialogActions>
-        </Dialog>
-    );
+const EditOrder: React.FC<{
+  open: boolean;
+  order: OrderType | null;
+  articleNameMapping: (uuid: string) => string;
+  onClose: () => void;
+}> = ({ open, order, articleNameMapping, onClose }) => {
+  const { t } = useTranslation();
+  if (order === null) return "";
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle>{`${t(order.status)} #${order?.id}`}</DialogTitle>
+      <DialogContent dividers>
+        {order && (
+          <Stack spacing={2}>
+            <Typography variant="subtitle1">{`${t("orderDate")}: ${new Date(order.time).toDateString()}`}</Typography>
+            <Divider />
+            <Typography variant="subtitle2">{t("orderedItems")}:</Typography>
+            <List dense>
+              {order.orderItems.map((item, idx) => (
+                <ListItemText
+                  key={idx}
+                  primary={`${item.amount}x ${articleNameMapping(item.article)}`}
+                />
+              ))}
+            </List>
+            <Divider />
+            <Typography variant="h6">{`${t("sum")}: ${(order.total / 100).toFixed(2)} €`}</Typography>
+          </Stack>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>{t("close")}</Button>
+      </DialogActions>
+    </Dialog>
+  );
 };
 
-export default function OrdersInfo() {
-    const [editOrder, setEditOrder] = useState<OrderType | null>(null);
-    const [openSnackbar, setOpenSnackbar] = useState(false);
+export default function OrdersInfo({ itemList }: { itemList: Item[] }) {
+  const [editOrder, setEditOrder] = useState<OrderType | null>(null);
+  const [openSnackbar, setOpenSnackbar] = useState(false);
 
-    const {user: loginData} = useAccount();
+  const { user: loginData } = useAccount();
 
-    const {data, refetch, isLoading} = useQuery({
-        queryKey: ["fetchOrdersAdmin", loginData],
-        queryFn: () => fetchOrdersAdmin(loginData ? loginData : {
-            email: "",
-            password: "",
-            session: "",
-            customerId: -1,
-            isAdmin: false
-        }),
-        retry: 3,
-        retryDelay: 1000,
-    });
+  const { data, refetch, isLoading } = useQuery<OrderType[]>({
+    queryKey: ["fetchOrdersAdmin", loginData],
+    queryFn: () =>
+      fetchOrdersAdmin(
+        loginData
+          ? loginData
+          : {
+              email: "",
+              password: "",
+              session: "",
+              customerId: -1,
+              isAdmin: false,
+            },
+      ),
+    retry: 3,
+    retryDelay: 1000,
+  });
 
-    const patchOrderMutation = useMutation({
-        mutationFn: (order: OrderPatch) =>
-            orderPatch({id: order.id, status: order.status}),
-    });
+  const patchOrderMutation = useMutation({
+    mutationFn: (order: OrderPatch) =>
+      orderPatch({ id: order.id, status: order.status }),
+  });
 
-
-    const handleDrop = async (id: number, status: OrderStatusEnum) => {
-
-        const currentOrders = data ?? [];
-        const obj = currentOrders.find((o) => o.id === id);
-        if (!obj) {
-            setOpenSnackbar(true);
-            return;
-        }
-        try {
-            await patchOrderMutation.mutateAsync({id: obj.id, status: status});
-            await refetch();
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        } catch (error) {
-            setOpenSnackbar(true);
-        }
-    };
-    const handleEdit = (order: OrderType) => setEditOrder(order);
-
-    if (isLoading || !data) {
-        return <div>Lade Bestellungen...</div>;
+  const handleDrop = async (id: number, status: OrderStatusEnum) => {
+    const currentOrders = data ?? [];
+    const obj = currentOrders.find((o) => o.id === id);
+    if (!obj) {
+      setOpenSnackbar(true);
+      return;
     }
+    try {
+      await patchOrderMutation.mutateAsync({ id: obj.id, status: status });
+      await refetch();
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (error) {
+      setOpenSnackbar(true);
+    }
+  };
+  const handleEdit = (order: OrderType) => setEditOrder(order);
 
-    return (
-        <DndProvider backend={HTML5Backend}>
-            <div style={{display: 'flex', gap: 10, minHeight: '90%'}}>
-                {statusOrder.map((status) => (
-                    <Column key={status} status={status} onDrop={handleDrop}>
-                        {data
-                            .filter((o) => o.status === status)
-                            .map((o) => (
-                                <OrderCard key={o.id} order={o} onClick={() => handleEdit(o)}/>
-                            ))}
-                    </Column>
-                ))}
-            </div>
-            <EditOrder
-                open={!!editOrder}
-                order={editOrder}
-                onClose={() => setEditOrder(null)}
-            />
-            <Snackbar
-                open={openSnackbar}
-                autoHideDuration={4000}
-                onClose={() => setOpenSnackbar(false)}
-                message="Failed changing Orderstatus"
-            />
-        </DndProvider>
-    );
+  if (isLoading || !data) {
+    return <div>Lade Bestellungen...</div>;
+  }
+
+  if (!itemList) {
+    return <div>itemlist empty</div>;
+  }
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <div style={{ display: "flex", gap: 10, minHeight: "90%" }}>
+        {statusOrder.map((status) => (
+          <Column key={status} status={status} onDrop={handleDrop}>
+            {data
+              .filter((o) => o.status === status)
+              .map((o) => (
+                <OrderCard key={o.id} order={o} onClick={() => handleEdit(o)} />
+              ))}
+          </Column>
+        ))}
+      </div>
+      <EditOrder
+        open={!!editOrder}
+        order={editOrder}
+        articleNameMapping={(uuid: string) => {
+          return itemList.find((item) => item.uuid == uuid)?.name || uuid;
+        }}
+        onClose={() => setEditOrder(null)}
+      />
+      <Snackbar
+        open={openSnackbar}
+        autoHideDuration={4000}
+        onClose={() => setOpenSnackbar(false)}
+        message="Failed changing Orderstatus"
+      />
+    </DndProvider>
+  );
 }

01-frontend/src/helper/adminpanel/StatisticsInfo.tsx

@@ -1,290 +1,339 @@
-import {Box, Typography, useTheme} from "@mui/material";
-import {BarChart} from '@mui/x-charts/BarChart';
-import {PieChart} from '@mui/x-charts/PieChart';
-import {BarSeriesType} from '@mui/x-charts'
-import {useEffect, useState} from "react";
-import {useTranslation} from "react-i18next";
-import {useQuery} from "@tanstack/react-query";
-import {fetchOrderStatus, fetchStatisticsRevenue, fetchStatisticsVolume, fetchStockPercent} from "../query/Queries.tsx";
-import {useAccount} from "../AccountProvider.tsx";
-import {getColorFromPercent} from "../../util/ColorUtil.tsx";
+import { Box, Typography, useTheme } from "@mui/material";
+import { BarChart } from "@mui/x-charts/BarChart";
+import { PieChart } from "@mui/x-charts/PieChart";
+import { BarSeriesType } from "@mui/x-charts";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
+import {
+  fetchOrderStatus,
+  fetchStatisticsRevenue,
+  fetchStatisticsVolume,
+  fetchStockPercent,
+} from "../query/Queries.tsx";
+import { useAccount } from "../AccountProvider.tsx";
+import { getColorFromPercent } from "../../util/ColorUtil.tsx";
 
 export default function StatisticsInfo() {
-    const theme = useTheme();
-    const {t} = useTranslation();
+  const theme = useTheme();
+  const { t } = useTranslation();
 
-    const [monthlyVolume, setMonthlyVolume] = useState<BarSeriesType[]>([]);
-    const [monthlyVolumeXaxis, setMonthlyVolumeXaxis] = useState([{data: []}]);
-    const [totalVolume, setTotalVolume] = useState([]);
+  const [monthlyVolume, setMonthlyVolume] = useState<BarSeriesType[]>([]);
+  const [monthlyVolumeXaxis, setMonthlyVolumeXaxis] = useState([{ data: [] }]);
+  const [totalVolume, setTotalVolume] = useState([]);
 
-    const [monthlyRevenue, setMonthlyRevenue] = useState<BarSeriesType[]>([]);
-    const [monthlyRevenueXaxis, setMonthlyRevenueXaxis] = useState([{data: []}]);
-    const [totalRevenue, setTotalRevenue] = useState([]);
+  const [monthlyRevenue, setMonthlyRevenue] = useState<BarSeriesType[]>([]);
+  const [monthlyRevenueXaxis, setMonthlyRevenueXaxis] = useState([
+    { data: [] },
+  ]);
+  const [totalRevenue, setTotalRevenue] = useState([]);
 
-    const [orderStatus, setOrderStatus] = useState([]);
+  const [orderStatus, setOrderStatus] = useState([]);
 
-    const [stockPercent, setStockPercent] = useState([]);
+  const [stockPercent, setStockPercent] = useState([]);
 
+  const { user: loginData } = useAccount();
 
-    const {user: loginData} = useAccount();
+  const { data: dataVolume } = useQuery({
+    queryKey: ["fetchStatisticsVolume", loginData],
+    queryFn: () =>
+      fetchStatisticsVolume(
+        loginData
+          ? loginData
+          : {
+              email: "",
+              password: "",
+              session: "",
+              customerId: -1,
+              isAdmin: false,
+            },
+      ),
+    retry: 0,
+    retryDelay: 0,
+  });
 
+  const { data: dataRevenue } = useQuery({
+    queryKey: ["fetchStatisticsRevenue", loginData],
+    queryFn: () =>
+      fetchStatisticsRevenue(
+        loginData
+          ? loginData
+          : {
+              email: "",
+              password: "",
+              session: "",
+              customerId: -1,
+              isAdmin: false,
+            },
+      ),
+    retry: 0,
+    retryDelay: 0,
+  });
 
-    const {data: dataVolume} = useQuery({
-        queryKey: ["fetchStatisticsVolume", loginData],
-        queryFn: () => fetchStatisticsVolume(loginData ? loginData : {
-            email: "",
-            password: "",
-            session: "",
-            customerId: -1,
-            isAdmin: false
-        }),
-        retry: 0,
-        retryDelay: 0,
-    });
+  const { data: dataOrderStatus } = useQuery({
+    queryKey: ["fetchOrderStatus", loginData],
+    queryFn: () =>
+      fetchOrderStatus(
+        loginData
+          ? loginData
+          : {
+              email: "",
+              password: "",
+              session: "",
+              customerId: -1,
+              isAdmin: false,
+            },
+      ),
+    retry: 0,
+    retryDelay: 0,
+  });
 
-    const {data: dataRevenue} = useQuery({
-        queryKey: ["fetchStatisticsRevenue", loginData],
-        queryFn: () => fetchStatisticsRevenue(loginData ? loginData : {
-            email: "",
-            password: "",
-            session: "",
-            customerId: -1,
-            isAdmin: false
-        }),
-        retry: 0,
-        retryDelay: 0,
-    });
+  const { data: dataStockPercent } = useQuery({
+    queryKey: ["fetchStockPercent", loginData],
+    queryFn: () =>
+      fetchStockPercent(
+        loginData
+          ? loginData
+          : {
+              email: "",
+              password: "",
+              session: "",
+              customerId: -1,
+              isAdmin: false,
+            },
+      ),
+    retry: 0,
+    retryDelay: 0,
+  });
 
-    const {data: dataOrderStatus} = useQuery({
-        queryKey: ["fetchOrderStatus", loginData],
-        queryFn: () => fetchOrderStatus(loginData ? loginData : {
-            email: "",
-            password: "",
-            session: "",
-            customerId: -1,
-            isAdmin: false
-        }),
-        retry: 0,
-        retryDelay: 0,
-    });
+  useEffect(() => {
+    if (dataVolume) {
+      const cmm = [];
+      const cmmx = monthlyVolumeXaxis;
+      const tv = [];
+      let i = 0;
+      for (const cat in dataVolume.catMonthMap) {
+        for (const timestamp in dataVolume.catMonthMap[cat]) {
+          const date = new Date(parseInt(timestamp));
+          const formattedDate =
+            date.getFullYear() +
+            "-" +
+            String(date.getMonth() + 1).padStart(2, "0");
+          if (!cmmx[0].data.includes(formattedDate)) {
+            cmmx[0].data.push(formattedDate);
+          }
+          const datapoint = dataVolume.catMonthMap[cat][timestamp];
+          if (cmm.length == i) {
+            cmm.push({ id: i, data: [], label: t(cat), type: "bar" });
+          }
+          cmm[i].data.push(datapoint);
 
-    const {data: dataStockPercent} = useQuery({
-        queryKey: ["fetchStockPercent", loginData],
-        queryFn: () => fetchStockPercent(loginData ? loginData : {
-            email: "",
-            password: "",
-            session: "",
-            customerId: -1,
-            isAdmin: false
-        }),
-        retry: 0,
-        retryDelay: 0,
-    });
-
-
-    useEffect(() => {
-        if (dataVolume) {
-            const cmm = []
-            const cmmx = monthlyVolumeXaxis
-            const tv = []
-            let i = 0
-            for (const cat in dataVolume.catMonthMap) {
-                for (const timestamp in dataVolume.catMonthMap[cat]) {
-                    const date = new Date(parseInt(timestamp))
-                    const formattedDate = date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, '0')
-                    if (!cmmx[0].data.includes(formattedDate)) {
-                        cmmx[0].data.push(formattedDate);
-                    }
-                    const datapoint = dataVolume.catMonthMap[cat][timestamp]
-                    if (cmm.length == i) {
-                        cmm.push({id: i, data: [], label: t(cat), type: "bar"})
-                    }
-                    cmm[i].data.push(datapoint)
-
-                    if (tv.length == i) {
-                        tv.push({id: i, value: 0, label: t(cat)})
-                    }
-                    tv[i].value += datapoint
-                }
-                i++;
-            }
-
-            setMonthlyVolume(cmm)
-            setMonthlyVolumeXaxis(cmmx)
-            setTotalVolume(tv)
+          if (tv.length == i) {
+            tv.push({ id: i, value: 0, label: t(cat) });
+          }
+          tv[i].value += datapoint;
         }
-    }, [dataVolume]);
+        i++;
+      }
 
-    useEffect(() => {
-        if (dataRevenue) {
-            const cmm = []
-            const cmmx = monthlyRevenueXaxis
-            const tv = []
-            let i = 0
-            for (const cat in dataRevenue.catMonthMap) {
-                for (const timestamp in dataRevenue.catMonthMap[cat]) {
-                    const date = new Date(parseInt(timestamp))
-                    const formattedDate = date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, '0')
-                    if (!cmmx[0].data.includes(formattedDate)) {
-                        cmmx[0].data.push(formattedDate);
-                    }
-                    const datapoint = dataRevenue.catMonthMap[cat][timestamp] / 100
-                    if (cmm.length == i) {
-                        cmm.push({id: i, data: [], label: t(cat), type: "bar"})
-                    }
-                    cmm[i].data.push(datapoint)
+      setMonthlyVolume(cmm);
+      setMonthlyVolumeXaxis(cmmx);
+      setTotalVolume(tv);
+    }
+  }, [dataVolume]);
 
-                    if (tv.length == i) {
-                        tv.push({id: i, value: 0, label: t(cat)})
-                    }
-                    tv[i].value += datapoint
-                }
-                i++;
-            }
+  useEffect(() => {
+    if (dataRevenue) {
+      const cmm = [];
+      const cmmx = monthlyRevenueXaxis;
+      const tv = [];
+      let i = 0;
+      for (const cat in dataRevenue.catMonthMap) {
+        for (const timestamp in dataRevenue.catMonthMap[cat]) {
+          const date = new Date(parseInt(timestamp));
+          const formattedDate =
+            date.getFullYear() +
+            "-" +
+            String(date.getMonth() + 1).padStart(2, "0");
+          if (!cmmx[0].data.includes(formattedDate)) {
+            cmmx[0].data.push(formattedDate);
+          }
+          const datapoint = dataRevenue.catMonthMap[cat][timestamp] / 100;
+          if (cmm.length == i) {
+            cmm.push({ id: i, data: [], label: t(cat), type: "bar" });
+          }
+          cmm[i].data.push(datapoint);
 
-            setMonthlyRevenue(cmm)
-            setMonthlyRevenueXaxis(cmmx)
-            setTotalRevenue(tv)
+          if (tv.length == i) {
+            tv.push({ id: i, value: 0, label: t(cat) });
+          }
+          tv[i].value += datapoint;
         }
-    }, [dataRevenue, monthlyRevenueXaxis, t]);
+        i++;
+      }
 
-    useEffect(() => {
-        if (dataOrderStatus) {
-            const orderStatus = []
-            for (const status in dataOrderStatus) {
-                orderStatus.push({value: dataOrderStatus[status], label: t(status)})
-            }
-            setOrderStatus(orderStatus)
+      setMonthlyRevenue(cmm);
+      setMonthlyRevenueXaxis(cmmx);
+      setTotalRevenue(tv);
+    }
+  }, [dataRevenue, monthlyRevenueXaxis, t]);
+
+  useEffect(() => {
+    if (dataOrderStatus) {
+      const orderStatus = [];
+      for (const status in dataOrderStatus) {
+        orderStatus.push({ value: dataOrderStatus[status], label: t(status) });
+      }
+      setOrderStatus(orderStatus);
+    }
+  }, [dataOrderStatus, t]);
+
+  useEffect(() => {
+    function generateName(percent: string): string {
+      return ">" + percent + "%";
+    }
+
+    if (dataStockPercent) {
+      const stockPercent = [];
+      let i = 0;
+      for (let x = 0; x < 10; x++) {
+        stockPercent.push({
+          value: 0,
+          label: generateName(String(x * 10)),
+          color: getColorFromPercent(String(x * 10)),
+        });
+      }
+      for (const cat in dataStockPercent) {
+        for (const percent in dataStockPercent[cat]) {
+          let index = stockPercent.findIndex(
+            (entry) => entry.label == generateName(percent),
+          );
+          const datapoint = dataStockPercent[cat][percent];
+          if (index === -1) {
+            index =
+              stockPercent.push({
+                value: 0,
+                label: generateName(percent),
+                color: getColorFromPercent(percent),
+              }) - 1;
+          }
+          stockPercent[index].value += datapoint;
         }
-    }, [dataOrderStatus, t]);
+        i++;
+      }
+      setStockPercent(stockPercent);
+    }
+  }, [dataStockPercent]);
 
-    useEffect(() => {
-        function generateName(percent: string): string {
-            return ">" + percent + "%";
-        }
+  return (
+    <Box className="" sx={{ color: theme.palette.text.primary }}>
+      <Typography mt={4} variant="h4" align="center" gutterBottom>
+        {t("salesStatistics")}
+      </Typography>
 
-        if (dataStockPercent) {
-            const stockPercent = []
-            let i = 0
-            for (let x = 0; x < 10; x++) {
-                stockPercent.push({
-                    value: 0,
-                    label: generateName(String(x * 10)),
-                    color: getColorFromPercent(String(x * 10))
-                });
-            }
-            for (const cat in dataStockPercent) {
-                for (const percent in dataStockPercent[cat]) {
-                    let index = stockPercent.findIndex((entry) => entry.label == generateName(percent))
-                    const datapoint = dataStockPercent[cat][percent]
-                    if (index === -1) {
-                        index = stockPercent.push({
-                            value: 0,
-                            label: generateName(percent),
-                            color: getColorFromPercent(percent)
-                        }) - 1
-                    }
-                    stockPercent[index].value += datapoint
-                }
-                i++
-            }
-            setStockPercent(stockPercent)
-        }
-    }, [dataStockPercent])
-
-    return (
-        <Box className="" sx={{color: theme.palette.text.primary}}>
-            <Typography mt={4} variant="h4" align="center" gutterBottom>
-                {t("salesStatistics")}
-            </Typography>
-
-            <Box sx={{mb: 4}}>
-                <Typography variant="h6" align="center" gutterBottom>
-                    {t("monthlySalesVolume")}
-                </Typography>
-                <BarChart
-                    series={monthlyVolume}
-                    height={290}
-                    xAxis={monthlyVolumeXaxis}
-                />
-            </Box>
-            <Box sx={{mb: 4}}>
-                <Typography variant="h6" align="center" gutterBottom>
-                    {t("monthlySalesRevenue")}
-                </Typography>
-                <BarChart
-                    series={monthlyRevenue}
-                    height={290}
-                    xAxis={monthlyRevenueXaxis}
-                />
-            </Box>
-            <Box display={"flex"} mb={9}>
-                <Box className="vw20" sx={{m: 2}}>
-                    <Typography variant="h6" align="center" gutterBottom>
-                        {t("itemVolumeDistribution")}
-                    </Typography>
-                    <PieChart
-                        series={[{
-                            data: totalVolume,
-                            highlightScope: {fade: 'global', highlight: 'item'},
-                            faded: {innerRadius: 30, additionalRadius: -30, color: 'gray'},
-                        }]}
-                        width={200}
-                        height={200}
-                    />
-                </Box>
-
-                <Box className="vw20" sx={{m: 2}}>
-                    <Typography variant="h6" align="center" gutterBottom>
-                        {t("itemRevenueDistribution")}
-                    </Typography>
-                    <PieChart
-                        series={[{
-                            data: totalRevenue,
-                            highlightScope: {fade: 'global', highlight: 'item'},
-                            valueFormatter: (v) => (v ? `${v.value}€` : '-'),
-                        }]}
-                        width={200}
-                        height={200}
-                    />
-                </Box>
-                <Box className="vw20" sx={{m: 2}}>
-                    <Typography variant="h6" align="center" gutterBottom>
-                        {t("stockFulfillment")}
-                    </Typography>
-                    <PieChart
-                        series={[{
-                            data: stockPercent,
-                            innerRadius: 10,
-                            outerRadius: 85,
-                            cornerRadius: 5,
-                            paddingAngle: 2,
-                            valueFormatter: (v) => (v ? `${v.value}%` : '-'),
-                        }]}
-                        width={200}
-                        height={200}
-                        hideLegend
-                    />
-                </Box>
-                <Box className="vw20" sx={{m: 2}}>
-                    <Typography variant="h6" align="center" gutterBottom>
-                        {t("orderStatus")}
-                    </Typography>
-                    <PieChart
-                        series={[{
-                            data: orderStatus,
-                            innerRadius: 20,
-                            outerRadius: 70,
-                            cornerRadius: 5,
-                            paddingAngle: 1,
-                            highlightScope: {fade: 'global', highlight: 'item'},
-                            faded: {innerRadius: 30, additionalRadius: -10, color: 'gray'},
-                        }]}
-                        height={200}
-                        width={200}
-                    />
-                </Box>
-            </Box>
+      <Box sx={{ mb: 4 }}>
+        <Typography variant="h6" align="center" gutterBottom>
+          {t("monthlySalesVolume")}
+        </Typography>
+        <BarChart
+          series={monthlyVolume}
+          height={290}
+          xAxis={monthlyVolumeXaxis}
+        />
+      </Box>
+      <Box sx={{ mb: 4 }}>
+        <Typography variant="h6" align="center" gutterBottom>
+          {t("monthlySalesRevenue")}
+        </Typography>
+        <BarChart
+          series={monthlyRevenue}
+          height={290}
+          xAxis={monthlyRevenueXaxis}
+        />
+      </Box>
+      <Box display={"flex"} mb={9}>
+        <Box className="vw20" sx={{ m: 2 }}>
+          <Typography variant="h6" align="center" gutterBottom>
+            {t("itemVolumeDistribution")}
+          </Typography>
+          <PieChart
+            series={[
+              {
+                data: totalVolume,
+                highlightScope: { fade: "global", highlight: "item" },
+                faded: {
+                  innerRadius: 30,
+                  additionalRadius: -30,
+                  color: "gray",
+                },
+              },
+            ]}
+            width={200}
+            height={200}
+          />
         </Box>
-    );
+
+        <Box className="vw20" sx={{ m: 2 }}>
+          <Typography variant="h6" align="center" gutterBottom>
+            {t("itemRevenueDistribution")}
+          </Typography>
+          <PieChart
+            series={[
+              {
+                data: totalRevenue,
+                highlightScope: { fade: "global", highlight: "item" },
+                valueFormatter: (v) => (v ? `${v.value}€` : "-"),
+              },
+            ]}
+            width={200}
+            height={200}
+          />
+        </Box>
+        <Box className="vw20" sx={{ m: 2 }}>
+          <Typography variant="h6" align="center" gutterBottom>
+            {t("stockFulfillment")}
+          </Typography>
+          <PieChart
+            series={[
+              {
+                data: stockPercent,
+                innerRadius: 10,
+                outerRadius: 85,
+                cornerRadius: 5,
+                paddingAngle: 2,
+                valueFormatter: (v) => (v ? `${v.value}%` : "-"),
+              },
+            ]}
+            width={200}
+            height={200}
+            hideLegend
+          />
+        </Box>
+        <Box className="vw20" sx={{ m: 2 }}>
+          <Typography variant="h6" align="center" gutterBottom>
+            {t("orderStatus")}
+          </Typography>
+          <PieChart
+            series={[
+              {
+                data: orderStatus,
+                innerRadius: 20,
+                outerRadius: 70,
+                cornerRadius: 5,
+                paddingAngle: 1,
+                highlightScope: { fade: "global", highlight: "item" },
+                faded: {
+                  innerRadius: 30,
+                  additionalRadius: -10,
+                  color: "gray",
+                },
+              },
+            ]}
+            height={200}
+            width={200}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
 }

01-frontend/src/helper/helper.css

@@ -1,36 +1,36 @@
 .item-description {
-    display: flex;
-    justify-content: space-between; /* Elemente an gegenüberliegenden Seiten platzieren */
-    align-items: center; /* Vertikale Zentrierung */
-    width: 100%;
+  display: flex;
+  justify-content: space-between; /* Elemente an gegenüberliegenden Seiten platzieren */
+  align-items: center; /* Vertikale Zentrierung */
+  width: 100%;
 }
 
 .item-card-button {
-    color: green;
+  color: green;
 }
 
 .rating-card-body {
-    display: grid;
-    align-items: center; /* Vertikale Zentrierung */
-    width: 100%;
-    gap: 30px;
+  display: grid;
+  align-items: center; /* Vertikale Zentrierung */
+  width: 100%;
+  gap: 30px;
 }
 
 .rating-button {
-    max-width: 200px;
+  max-width: 200px;
 }
 
 .rating-card-box {
-    display: grid;
-    align-items: center; /* Vertikale Zentrierung */
-    gap: 10px;
-    width: 100%;
+  display: grid;
+  align-items: center; /* Vertikale Zentrierung */
+  gap: 10px;
+  width: 100%;
 }
 
 .rating-text-field {
-    background-color: whitesmoke;
+  background-color: whitesmoke;
 }
 
 .vw20 {
-    width: 20vw;
-}
+  width: 20vw;
+}

01-frontend/src/helper/homepage/FilterItem.tsx

@@ -1,75 +1,83 @@
-import {FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Rating, useTheme,} from "@mui/material";
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  Rating,
+  useTheme,
+} from "@mui/material";
 import React from "react";
 
 type FilterItemOption = {
-    value: string;
-    label: string;
+  value: string;
+  label: string;
 };
 
 type FilterItemProps = {
-    filterName: string;
-    filterItems: FilterItemOption[];
-    value?: string | null;
-    onChange?: (value: string) => void;
+  filterName: string;
+  filterItems: FilterItemOption[];
+  value?: string | null;
+  onChange?: (value: string) => void;
 };
 
 export default function FilterItem({
-                                       filterName,
-                                       filterItems,
-                                       value,
-                                       onChange,
-                                   }: FilterItemProps) {
-    const theme = useTheme();
+  filterName,
+  filterItems,
+  value,
+  onChange,
+}: FilterItemProps) {
+  const theme = useTheme();
 
-    if (!value && filterItems.length > 0) {
-        value = filterItems[0].value;
+  if (!value && filterItems.length > 0) {
+    value = filterItems[0].value;
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(event.target.value);
     }
+  };
 
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (onChange) {
-            onChange(event.target.value);
-        }
-    };
+  return (
+    <div style={{ marginBottom: "1.5rem" }}>
+      <FormLabel
+        component="legend"
+        sx={{
+          fontWeight: "bold",
+          color: theme.palette.text.primary,
+          mb: 1,
+        }}
+      >
+        {filterName}
+      </FormLabel>
 
-    return (
-        <div style={{marginBottom: "1.5rem"}}>
-            <FormLabel
-                component="legend"
-                sx={{
-                    fontWeight: "bold",
-                    color: theme.palette.text.primary,
-                    mb: 1,
-                }}
-            >
-                {filterName}
-            </FormLabel>
-
-            <FormControl>
-                <RadioGroup value={value} onChange={handleChange}>
-                    {filterItems.map((item, idx) => (
-                        <FormControlLabel
-                            key={idx}
-                            value={item.value}
-                            control={<Radio/>}
-                            label={
-                                /^[1-5]$/.test(item.value) ? (
-                                    <Rating
-                                        readOnly
-                                        value={Number(item.value)}
-                                        precision={1}
-                                        size="small"
-                                    />
-                                ) : (
-                                    item.label
-                                )
-                            }
-                            sx={{
-                                color: theme.palette.text.primary,
-                            }}
-                        />
-                    ))}
-                </RadioGroup>
-            </FormControl>
-        </div>
-    );
+      <FormControl>
+        <RadioGroup value={value} onChange={handleChange}>
+          {filterItems.map((item, idx) => (
+            <FormControlLabel
+              key={idx}
+              value={item.value}
+              control={<Radio />}
+              label={
+                /^[1-5]$/.test(item.value) ? (
+                  <Rating
+                    readOnly
+                    value={Number(item.value)}
+                    precision={1}
+                    size="small"
+                  />
+                ) : (
+                  item.label
+                )
+              }
+              sx={{
+                color: theme.palette.text.primary,
+              }}
+            />
+          ))}
+        </RadioGroup>
+      </FormControl>
+    </div>
+  );
 }

01-frontend/src/helper/homepage/ItemCard.css

@@ -2,24 +2,24 @@
 
 /* Container um jedes Filter-Widget */
 .filter-item {
-    margin-bottom: 1.5rem;
+  margin-bottom: 1.5rem;
 }
 
 /* Überschrift (FormLabel) */
 .filter-item__label {
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-    /* nutze die CSS-Variable, die GlobalStyles füllen */
-    color: var(--text-color);
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  /* nutze die CSS-Variable, die GlobalStyles füllen */
+  color: var(--text-color);
 }
 
 /* Das Material-UI FormControl-Element */
 .filter-item__group {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Jeder Radio-Button mit Label */
 .filter-item__option {
-    color: var(--text-color);
+  color: var(--text-color);
 }

01-frontend/src/helper/homepage/ItemCard.tsx

@@ -1,91 +1,150 @@
-import {AddShoppingCart} from "@mui/icons-material";
-import {Box, Card, CardActionArea, CardContent, CardMedia, IconButton, Paper, Rating, Typography} from "@mui/material";
-import {useState} from "react";
-import {useTranslation} from 'react-i18next';
-import {useNavigate} from "react-router-dom";
+import { AddShoppingCart } from "@mui/icons-material";
+import {
+  Box,
+  Card,
+  CardActionArea,
+  CardContent,
+  CardMedia,
+  IconButton,
+  Paper,
+  Rating,
+  Typography,
+} from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 import ItemWithImage from "../../components/Item";
-import {useBasket} from "../BasketProvider";
+import { useBasket } from "../BasketProvider";
 import "../helper.css";
 
-export default function ItemCard({item}: { item: ItemWithImage }) {
+export default function ItemCard({ item }: { item: ItemWithImage }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { addToBasket } = useBasket();
 
-    const {t} = useTranslation();
-    const navigate = useNavigate()
-    const {addToBasket} = useBasket();
+  const handleAddToCart = () => {
+    addToBasket(item, 1);
+    console.log(`Added ${1} of ${item.name} to basket`);
+  };
 
-    const handleAddToCart = () => {
-        addToBasket(item, 1);
-        console.log(`Added ${1} of ${item.name} to basket`);
-    };
+  const handleClick = () => {
+    navigate(`/product/${item.id}`, { state: { item } });
+  };
+  const [imageUrl, setImageUrl] = useState<string>(
+    item.image || "/src/assets/default.jpg",
+  ); // Fallback-Bild
 
-    const handleClick = () => {
-        navigate(`/product/${item.id}`, {state: {item}});
-    }
-    const [imageUrl, setImageUrl] = useState<string>(item.image || "/src/assets/default.jpg"); // Fallback-Bild
+  if (
+    imageUrl !== "/src/assets/default.jpg" &&
+    !imageUrl.startsWith("data:image/")
+  ) {
+    setImageUrl("data:image/jpeg;base64," + imageUrl);
+  }
 
-    if (imageUrl !== "/src/assets/default.jpg" && !imageUrl.startsWith("data:image/")) {
-        setImageUrl("data:image/jpeg;base64," + imageUrl);
-    }
+  return (
+    <Paper elevation={4}>
+      <Card
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <CardActionArea
+          onClick={handleClick}
+          sx={{ height: "100%", width: "100%" }}
+          component="div"
+        >
+          <CardMedia
+            component="img"
+            height="140"
+            src={imageUrl}
+            alt={item.name}
+            onError={(event) => {
+              event.currentTarget.src = "/src/assets/default.jpg"; // Standardbild setzen
+            }}
+            sx={{
+              objectFit: "contain", // Bild wird skaliert, um vollständig sichtbar zu sein
+              maxWidth: "100%", // Begrenze die maximale Breite auf den Container
+              maxHeight: "100%", // Begrenze die maximale Höhe auf den Container
+            }}
+          />
+          <CardContent
+            sx={{ display: "flex", flexDirection: "column", flexGrow: 1 }}
+          >
+            <Typography gutterBottom variant="h5" component="div">
+              {item.name}
+            </Typography>
+            <Box
+              sx={{
+                mt: "auto",
+                display: "flex",
+                flexGrow: 1,
+                flexDirection: "column",
+              }}
+            >
+              <Rating
+                name="half-rating"
+                readOnly
+                defaultValue={item.rating / 2}
+                precision={0.5}
+              />
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "flex-end",
+                }}
+              >
+                <Typography
+                  variant="body2"
+                  sx={{ color: "text.secondary" }}
+                  className="item-description"
+                >
+                  {(
+                    (item.price100 / 100) *
+                    (1 - item.discount100 / 100)
+                  ).toFixed(2)}{" "}
+                  €
+                </Typography>
+                {item.discount100 == 0 ? (
+                  <></>
+                ) : (
+                  <Typography
+                    variant="body2"
+                    sx={{ color: "red" }}
+                    className="item-description"
+                  >
+                    {-item.discount100}%
+                  </Typography>
+                )}
+                <IconButton
+                  aria-label={t("addToCart")}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleAddToCart();
+                  }}
+                >
+                  <AddShoppingCart />
+                </IconButton>
+              </Box>
 
-    return (
-        <Paper elevation={4}>
-            <Card sx={{height: "100%", width: "100%"}}>
-                <CardActionArea onClick={handleClick} sx={{height: "100%"}} component="div">
-                    <CardMedia
-                        component="img"
-                        height="140"
-                        src={imageUrl}
-                        alt={item.name}
-                        onError={(event) => {
-                            event.currentTarget.src = "/src/assets/default.jpg"; // Standardbild setzen
-                        }}
-                        sx={{
-                            objectFit: "contain", // Bild wird skaliert, um vollständig sichtbar zu sein
-                            maxWidth: "100%", // Begrenze die maximale Breite auf den Container
-                            maxHeight: "100%", // Begrenze die maximale Höhe auf den Container
-                        }}
-                    />
-                    <CardContent>
-                        <Typography gutterBottom variant="h5" component="div">
-                            {item.name}
-                        </Typography>
-                        <Rating name="half-rating" readOnly defaultValue={item.rating / 2} precision={0.5}/>
-                        <Box sx={{display: "flex", justifyContent: "space-between", alignItems: "flex-end"}}>
-                            <Typography variant="body2" sx={{color: 'text.secondary'}} className="item-description">
-                                {(item.price100 / 100 * (1 - item.discount100 / 100)).toFixed(2)} €
-                            </Typography>
-                            {item.discount100 == 0 ? <></> :
-                                <Typography variant="body2" sx={{color: 'red'}} className="item-description">
-                                    {(- item.discount100)}%
-                                </Typography>
-                            }
-                            <IconButton
-                                aria-label={t('addToCart')}
-                                onClick={(event) => {
-                                    event.stopPropagation();
-                                    handleAddToCart();
-                                }}
-                            >
-                                <AddShoppingCart/>
-                            </IconButton>
-                        </Box>
-
-                        {item.stock > 10 ? (
-                            <Typography variant="body2">
-                                {t('inStock')}
-                            </Typography>
-                        ) : item.stock > 0 ? (
-                            <Typography variant="body2" sx={{color: 'orange'}}>
-                                {t('almostSoldOut')}
-                            </Typography>
-                        ) : (
-                            <Typography variant="body2" sx={{color: 'red'}}>
-                                {t('outOfStock')}
-                            </Typography>
-                        )}
-                    </CardContent>
-                </CardActionArea>
-            </Card>
-        </Paper>
-    )
+              {item.stock > 10 ? (
+                <Typography variant="body2">{t("inStock")}</Typography>
+              ) : item.stock > 0 ? (
+                <Typography variant="body2" sx={{ color: "orange" }}>
+                  {t("almostSoldOut")}
+                </Typography>
+              ) : (
+                <Typography variant="body2" sx={{ color: "red" }}>
+                  {t("outOfStock")}
+                </Typography>
+              )}
+            </Box>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    </Paper>
+  );
 }

01-frontend/src/helper/homepage/PriceSlider.tsx

@@ -1,81 +1,88 @@
-import {Box, Slider, Typography, useTheme} from "@mui/material";
-import {SyntheticEvent, useEffect, useState} from "react";
-import {useTranslation} from "react-i18next";
+import { Box, Slider, Typography, useTheme } from "@mui/material";
+import { SyntheticEvent, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 type PriceSliderProps = {
-    min?: number;
-    max?: number;
-    onChange?: (range: [number, number]) => void;
+  min?: number;
+  max?: number;
+  onChange?: (range: [number, number]) => void;
 };
 
-export default function PriceSlider({min = 0, max = 10000, onChange}: PriceSliderProps) {
-    const {t} = useTranslation();
-    const theme = useTheme();
+export default function PriceSlider({
+  min = 0,
+  max = 10000,
+  onChange,
+}: PriceSliderProps) {
+  const { t } = useTranslation();
+  const theme = useTheme();
 
-    const [value, setValue] = useState<[number, number]>([min, max]);
+  const [value, setValue] = useState<[number, number]>([min, max]);
 
-    useEffect(() => {
-        setValue([min, max]);
-        onChange?.([min, max]);
-    }, [min, max]);
+  useEffect(() => {
+    setValue([min, max]);
+    onChange?.([min, max]);
+  }, [min, max]);
 
-    const handleChange = (_: Event, newValue: number | number[]) => {
-        if (Array.isArray(newValue)) {
-            setValue([newValue[0], newValue[1]]);
-        }
-    };
+  const handleChange = (_: Event, newValue: number | number[]) => {
+    if (Array.isArray(newValue)) {
+      setValue([newValue[0], newValue[1]]);
+    }
+  };
 
-    const handleCommitted = (_: Event | SyntheticEvent<Element, Event>, newValue: number | number[]) => {
-        if (Array.isArray(newValue)) {
-            onChange?.([newValue[0], newValue[1]]);
-        }
-    };
+  const handleCommitted = (
+    _: Event | SyntheticEvent<Element, Event>,
+    newValue: number | number[],
+  ) => {
+    if (Array.isArray(newValue)) {
+      onChange?.([newValue[0], newValue[1]]);
+    }
+  };
 
-    const formatValueToEuro = (val: number) => `${(val / 100).toFixed(2)} €`;
+  const formatValueToEuro = (val: number) => `${(val / 100).toFixed(2)} €`;
 
-    return (
-        <Box sx={{mb: 4}}>
-            <Typography
-                variant="h6"
-                sx={{
-                    fontWeight: "bold",
-                    color: theme.palette.text.primary,
-                    mb: 1,
-                }}
-            >
-                {t("price")}
-            </Typography>
+  return (
+    <Box sx={{ mb: 4 }}>
+      <Typography
+        variant="h6"
+        sx={{
+          fontWeight: "bold",
+          color: theme.palette.text.primary,
+          mb: 1,
+        }}
+      >
+        {t("price")}
+      </Typography>
 
-            <Box sx={{px: 1}}>
-                <Slider
-                    value={value}
-                    onChange={handleChange}
-                    onChangeCommitted={handleCommitted}
-                    valueLabelDisplay="auto"
-                    valueLabelFormat={formatValueToEuro}
-                    min={min}
-                    max={max}
-                    step={1}
-                    sx={{
-                        color: "#0fd13f",
-                        '& .MuiSlider-valueLabel': {
-                            color: theme.palette.text.primary,
-                        },
-                    }}
-                />
+      <Box sx={{ px: 1 }}>
+        <Slider
+          value={value}
+          onChange={handleChange}
+          onChangeCommitted={handleCommitted}
+          valueLabelDisplay="auto"
+          valueLabelFormat={formatValueToEuro}
+          min={min}
+          max={max}
+          step={1}
+          sx={{
+            color: "#0fd13f",
+            "& .MuiSlider-valueLabel": {
+              color: theme.palette.text.primary,
+            },
+          }}
+        />
 
-                <Typography
-                    variant="body2"
-                    sx={{
-                        mt: 1,
-                        color: theme.palette.text.primary,
-                        fontSize: "0.9rem",
-                        textAlign: "center",
-                    }}
-                >
-                    {formatValueToEuro(value[0])} – {formatValueToEuro(value[1])}
-                </Typography>
-            </Box>
-        </Box>
-    );
+        <Typography
+          variant="body2"
+          sx={{
+            mt: 1,
+            color: theme.palette.text.primary,
+            fontSize: "0.9rem",
+            textAlign: "center",
+          }}
+        >
+          {formatValueToEuro(value[0])} – {formatValueToEuro(value[1])}
+        </Typography>
+      </Box>
+    </Box>
+  );
 }

01-frontend/src/helper/navbar/LoginDialog.tsx

@@ -1,257 +1,307 @@
-import {Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Link, TextField} from "@mui/material";
-import {useQuery} from "@tanstack/react-query";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Link,
+  TextField,
+} from "@mui/material";
+import { useQuery } from "@tanstack/react-query";
 import i18next from "i18next";
-import React, {useEffect, useState} from "react";
-import AccountType, {User} from "../../components/Account";
-import {useAccount} from "../AccountProvider";
-import {fetchAccount, submitLogin, submitRegister} from "../query/Queries"; // Importiere die Funktion für die Registrierung
-import {useTranslation} from "react-i18next";
+import React, { useEffect, useState } from "react";
+import AccountType, { User } from "../../components/Account";
+import { useAccount } from "../AccountProvider";
+import { fetchAccount, submitLogin, submitRegister } from "../query/Queries"; // Importiere die Funktion für die Registrierung
+import { useTranslation } from "react-i18next";
 
 type LoginDialogProps = {
-    open: boolean;
-    onClose: () => void;
-    onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
-    loginData: { email: string; password: string };
-    setLoginData: React.Dispatch<React.SetStateAction<{ email: string; password: string, customerId: number }>>;
+  open: boolean;
+  onClose: () => void;
+  onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
+  loginData: { email: string; password: string };
+  setLoginData: React.Dispatch<
+    React.SetStateAction<{
+      email: string;
+      password: string;
+      customerId: number;
+    }>
+  >;
 };
 
-const LoginDialog: React.FC<LoginDialogProps> = ({open, onClose, loginData, setLoginData, onSubmit}) => {
+const LoginDialog: React.FC<LoginDialogProps> = ({
+  open,
+  onClose,
+  loginData,
+  setLoginData,
+  onSubmit,
+}) => {
+  const { t } = useTranslation();
+  const { login } = useAccount();
+  const [showRegister, setShowRegister] = useState(false);
+  const [registerData, setRegisterData] = useState<AccountType>({
+    email: "",
+    password: "",
+    id: 0,
+    customer: {
+      id: 0,
+      name: "",
+      surname: "",
+      address: "",
+      country: "",
+      zip: "",
+    },
+    langI18n: i18next.language,
+    admin: false,
+  });
+  const [showErrorRegister, setShowErrorRegister] = useState(false); // Neuer Zustand für die Anzeige der Fehlermeldung
+  const [showErrorLogin, setShowErrorLogin] = useState(false); // Neuer Zustand für die Anzeige der Login-Fehlermeldung
 
-    const {t} = useTranslation();
-    const {login} = useAccount();
-    const [showRegister, setShowRegister] = useState(false);
-    const [registerData, setRegisterData] = useState<AccountType>({
-        email: "",
-        password: "",
-        id: 0,
-        customer: {id: 0, name: "", surname: "", address: "", country: "", zip: ""},
-        langI18n: i18next.language,
-        admin: false
-    });
-    const [showErrorRegister, setShowErrorRegister] = useState(false); // Neuer Zustand für die Anzeige der Fehlermeldung
-    const [showErrorLogin, setShowErrorLogin] = useState(false); // Neuer Zustand für die Anzeige der Login-Fehlermeldung
+  useEffect(() => {
+    if (open) {
+      const active = document.activeElement as HTMLElement | null;
+      if (active && typeof active.blur === "function") {
+        active.blur();
+      }
+    }
+  }, [open]);
 
-    useEffect(() => {
-        if (open) {
-            const active = document.activeElement as HTMLElement | null;
-            if (active && typeof active.blur === "function") {
-                active.blur();
-            }
-        }
-    }, [open]);
+  // useQuery für Login
+  const {
+    refetch: refetchLogin,
+    isLoading: isLoadingLogin,
+    error: errorLogin,
+  } = useQuery({
+    queryKey: ["submitLogin", loginData],
+    queryFn: () => submitLogin(loginData),
+    retry: 0,
+    retryDelay: 1000,
+    enabled: false,
+  });
 
+  const { refetch: refetchAccount } = useQuery({
+    queryKey: ["fetchAccount", loginData],
+    queryFn: () => fetchAccount(loginData),
+    retry: 0,
+    retryDelay: 1000,
+    enabled: false,
+  });
 
-    // useQuery für Login
-    const {refetch: refetchLogin, isLoading: isLoadingLogin, error: errorLogin} = useQuery({
-        queryKey: ["submitLogin", loginData],
-        queryFn: () => submitLogin(loginData),
-        retry: 0,
-        retryDelay: 1000,
-        enabled: false,
-    });
+  // useQuery für Registrierung
+  const {
+    refetch: refetchRegister,
+    isLoading: isLoadingRegister,
+    error: errorRegister,
+  } = useQuery({
+    queryKey: ["submitRegister", registerData],
+    queryFn: () => submitRegister(registerData),
+    retry: 0,
+    retryDelay: 1000,
+    enabled: false,
+  });
 
-    const {refetch: refetchAccount} = useQuery({
-        queryKey: ["fetchAccount", loginData],
-        queryFn: () => fetchAccount(loginData),
-        retry: 0,
-        retryDelay: 1000,
-        enabled: false,
-    });
+  const handleClose = () => {
+    setShowErrorLogin(false); // Fehlermeldung zurücksetzen
+    setShowErrorRegister(false); // Fehlermeldung zurücksetzen
+    onClose();
+  };
 
-    // useQuery für Registrierung
-    const {refetch: refetchRegister, isLoading: isLoadingRegister, error: errorRegister} = useQuery({
-        queryKey: ["submitRegister", registerData],
-        queryFn: () => submitRegister(registerData),
-        retry: 0,
-        retryDelay: 1000,
-        enabled: false,
-    });
+  const handleLogin = async () => {
+    try {
+      setShowErrorLogin(false); // Fehlermeldung zurücksetzen
+      setShowErrorRegister(false); // Fehlermeldung zurücksetzen
+      const response = await refetchLogin(); // Anfrage auslösen
+      if (response.status === "success") {
+        const session = response.data.uuid; // Session-Daten aus der Antwort extrahieren
+        const customerData = (await refetchAccount()).data;
+        const user: User = {
+          email: customerData.email,
+          password: customerData.password,
+          customerId: customerData.customer.id, // Setze die customerId aus den Account-Daten
+          session: session, // Setze die Session aus der Login-Antwort
+          isAdmin: customerData.admin,
+        };
+        login(user);
+        setShowRegister(false); // Zurück zum Login wechseln
+        onSubmit(); // Dialog schließen
+      } else {
+        setShowErrorLogin(true); // Fehlermeldung anzeigen
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (error) {
+      setShowErrorLogin(true); // Fehlermeldung anzeigen
+    }
+  };
 
-    const handleClose = () => {
-        setShowErrorLogin(false); // Fehlermeldung zurücksetzen
-        setShowErrorRegister(false); // Fehlermeldung zurücksetzen
-        onClose();
-    };
+  const handleRegister = async () => {
+    try {
+      setShowErrorLogin(false); // Fehlermeldung zurücksetzen
+      setShowErrorRegister(false); // Fehlermeldung zurücksetzen
+      await refetchRegister(); // Beispiel für den Refetch-Aufruf
+      // Erfolgslogik hier
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (error) {
+      setShowErrorRegister(true); // Fehlermeldung anzeigen
+    }
+  };
 
-    const handleLogin = async () => {
-        try {
-            setShowErrorLogin(false); // Fehlermeldung zurücksetzen
-            setShowErrorRegister(false); // Fehlermeldung zurücksetzen
-            const response = await refetchLogin(); // Anfrage auslösen
-            if (response.status === "success") {
-                const session = response.data.uuid; // Session-Daten aus der Antwort extrahieren
-                const customerData = (await refetchAccount()).data;
-                const user: User = {
-                    email: customerData.email,
-                    password: customerData.password,
-                    customerId: customerData.customer.id, // Setze die customerId aus den Account-Daten
-                    session: session, // Setze die Session aus der Login-Antwort
-                    isAdmin: customerData.admin
-                };
-                login(user);
-                setShowRegister(false); // Zurück zum Login wechseln
-                onSubmit(); // Dialog schließen
-            } else {
-                setShowErrorLogin(true); // Fehlermeldung anzeigen
-            }
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        } catch (error) {
-            setShowErrorLogin(true); // Fehlermeldung anzeigen
-        }
-    };
-
-    const handleRegister = async () => {
-        try {
-            setShowErrorLogin(false); // Fehlermeldung zurücksetzen
-            setShowErrorRegister(false); // Fehlermeldung zurücksetzen
-            await refetchRegister(); // Beispiel für den Refetch-Aufruf
-            // Erfolgslogik hier
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        } catch (error) {
-            setShowErrorRegister(true); // Fehlermeldung anzeigen
-        }
-    };
-
-    return (
-        <Dialog open={open} onClose={handleClose} disableEnforceFocus>
-            <form onSubmit={e => {
-                e.preventDefault();
-                if (showRegister) {
-                    handleLogin();
-                } else {
-                    handleRegister();
+  return (
+    <Dialog open={open} onClose={handleClose} disableEnforceFocus>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (showRegister) {
+            handleLogin();
+          } else {
+            handleRegister();
+          }
+        }}
+        noValidate
+      >
+        <DialogTitle>{showRegister ? t("register") : t("login")}</DialogTitle>
+        <DialogContent>
+          <TextField
+            margin="dense"
+            label={t("email")}
+            type="email"
+            fullWidth
+            value={showRegister ? registerData.email : loginData.email}
+            onChange={(e) => {
+              setLoginData((prev) => ({ ...prev, email: e.target.value }));
+              setRegisterData((prev) => ({ ...prev, email: e.target.value }));
+            }}
+          />
+          <TextField
+            margin="dense"
+            label={t("password")}
+            type="password"
+            fullWidth
+            value={showRegister ? registerData.password : loginData.password}
+            onChange={(e) => {
+              setLoginData((prev) => ({ ...prev, password: e.target.value }));
+              setRegisterData((prev) => ({
+                ...prev,
+                password: e.target.value,
+              }));
+            }}
+          />
+          {showRegister && (
+            <>
+              <TextField
+                margin="dense"
+                label={t("firstName")}
+                type="text"
+                fullWidth
+                value={registerData.customer.name}
+                onChange={(e) =>
+                  setRegisterData((prev) => ({
+                    ...prev,
+                    customer: { ...prev.customer, name: e.target.value },
+                  }))
                 }
-            }} noValidate>
-                <DialogTitle>{showRegister ? t("register") : t("login")}</DialogTitle>
-                <DialogContent>
-                    <TextField
-                        margin="dense"
-                        label={t("email")}
-                        type="email"
-                        fullWidth
-                        value={showRegister ? registerData.email : loginData.email}
-                        onChange={e => {
-                            setLoginData(prev => ({...prev, email: e.target.value}));
-                            setRegisterData(prev => ({...prev, email: e.target.value}))
-                        }}
-                    />
-                    <TextField
-                        margin="dense"
-                        label={t("password")}
-                        type="password"
-                        fullWidth
-                        value={showRegister ? registerData.password : loginData.password}
-                        onChange={e => {
-                            setLoginData(prev => ({...prev, password: e.target.value}))
-                            setRegisterData(prev => ({...prev, password: e.target.value}))
-                        }}
-                    />
-                    {showRegister &&
-                        <>
-                            <TextField
-                                margin="dense"
-                                label={t("firstName")}
-                                type="text"
-                                fullWidth
-                                value={registerData.customer.name}
-                                onChange={e => setRegisterData(prev => ({
-                                    ...prev,
-                                    customer: {...prev.customer, name: e.target.value},
-                                }))}
-                            />
-                            <TextField
-                                margin="dense"
-                                label={t("lastName")}
-                                type="text"
-                                fullWidth
-                                value={registerData.customer.surname}
-                                onChange={e => setRegisterData(prev => ({
-                                    ...prev,
-                                    customer: {...prev.customer, surname: e.target.value},
-                                }))}
-                            />
-                            <TextField
-                                margin="dense"
-                                label={t("address")}
-                                type="text"
-                                fullWidth
-                                value={registerData.customer.address}
-                                onChange={e => setRegisterData(prev => ({
-                                    ...prev,
-                                    customer: {...prev.customer, address: e.target.value},
-                                }))}
-                            />
-                            <TextField
-                                margin="dense"
-                                label={t("country")}
-                                type="text"
-                                fullWidth
-                                value={registerData.customer.country}
-                                onChange={e => setRegisterData(prev => ({
-                                    ...prev,
-                                    customer: {...prev.customer, country: e.target.value},
-                                }))}
-                            />
-                            <TextField
-                                margin="dense"
-                                label={t("zip")}
-                                type="text"
-                                fullWidth
-                                value={registerData.customer.zip}
-                                onChange={e => setRegisterData(prev => ({
-                                    ...prev,
-                                    customer: {...prev.customer, zip: e.target.value},
-                                }))}
-                            />
-                        </>
-                    }
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={handleClose}>{t("cancel")}</Button>
-                    {showRegister ? (
-                        <Button onClick={handleRegister} disabled={isLoadingRegister}>
-                            {isLoadingRegister ? t("loading") : t("register")}
-                        </Button>
-                    ) : (
-                        <Button onClick={handleLogin} disabled={isLoadingLogin}>
-                            {isLoadingLogin ? t("loading") : t("login")}
-                        </Button>
-                    )}
-                </DialogActions>
-                {showErrorLogin && errorLogin && (
-                    <Box color="error.main">{t("loginFailed")}</Box>
-                )}
-                {showErrorRegister && errorRegister !== null && (
-                    <Box color="error.main">{t("registerFailed")}</Box>
-                )}
-                {showRegister ? (
-                    <Box sx={{width: '100%', textAlign: 'center', pb: 2}}>
-                        <Link
-                            component="button"
-                            variant="body2"
-                            onClick={() => setShowRegister(false)}
-                            color="primary"
-                            underline="hover"
-                        >
-                            {t("backToLogin")}
-                        </Link>
-                    </Box>
-                ) : (
-                    <Box sx={{width: '100%', textAlign: 'center', pb: 2}}>
-                        <Link
-                            component="button"
-                            variant="body2"
-                            onClick={() => setShowRegister(true)}
-                            color="primary"
-                            underline="hover"
-                        >
-                            {t("noAccountRegister")}
-                        </Link>
-                    </Box>
-                )}
-            </form>
-        </Dialog>
-    );
+              />
+              <TextField
+                margin="dense"
+                label={t("lastName")}
+                type="text"
+                fullWidth
+                value={registerData.customer.surname}
+                onChange={(e) =>
+                  setRegisterData((prev) => ({
+                    ...prev,
+                    customer: { ...prev.customer, surname: e.target.value },
+                  }))
+                }
+              />
+              <TextField
+                margin="dense"
+                label={t("address")}
+                type="text"
+                fullWidth
+                value={registerData.customer.address}
+                onChange={(e) =>
+                  setRegisterData((prev) => ({
+                    ...prev,
+                    customer: { ...prev.customer, address: e.target.value },
+                  }))
+                }
+              />
+              <TextField
+                margin="dense"
+                label={t("country")}
+                type="text"
+                fullWidth
+                value={registerData.customer.country}
+                onChange={(e) =>
+                  setRegisterData((prev) => ({
+                    ...prev,
+                    customer: { ...prev.customer, country: e.target.value },
+                  }))
+                }
+              />
+              <TextField
+                margin="dense"
+                label={t("zip")}
+                type="text"
+                fullWidth
+                value={registerData.customer.zip}
+                onChange={(e) =>
+                  setRegisterData((prev) => ({
+                    ...prev,
+                    customer: { ...prev.customer, zip: e.target.value },
+                  }))
+                }
+              />
+            </>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>{t("cancel")}</Button>
+          {showRegister ? (
+            <Button onClick={handleRegister} disabled={isLoadingRegister}>
+              {isLoadingRegister ? t("loading") : t("register")}
+            </Button>
+          ) : (
+            <Button onClick={handleLogin} disabled={isLoadingLogin}>
+              {isLoadingLogin ? t("loading") : t("login")}
+            </Button>
+          )}
+        </DialogActions>
+        {showErrorLogin && errorLogin && (
+          <Box color="error.main">{t("loginFailed")}</Box>
+        )}
+        {showErrorRegister && errorRegister !== null && (
+          <Box color="error.main">{t("registerFailed")}</Box>
+        )}
+        {showRegister ? (
+          <Box sx={{ width: "100%", textAlign: "center", pb: 2 }}>
+            <Link
+              component="button"
+              variant="body2"
+              onClick={() => setShowRegister(false)}
+              color="primary"
+              underline="hover"
+            >
+              {t("backToLogin")}
+            </Link>
+          </Box>
+        ) : (
+          <Box sx={{ width: "100%", textAlign: "center", pb: 2 }}>
+            <Link
+              component="button"
+              variant="body2"
+              onClick={() => setShowRegister(true)}
+              color="primary"
+              underline="hover"
+            >
+              {t("noAccountRegister")}
+            </Link>
+          </Box>
+        )}
+      </form>
+    </Dialog>
+  );
 };
 
 export default LoginDialog;

01-frontend/src/helper/navbar/NavBar.css

@@ -1,80 +1,80 @@
 /* Navbar styles */
 
 .navbar {
-    /*color in tsx*/
-    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-    position: fixed;
-    top: 0;
-    width: 100%;
-    overflow-x: hidden;
-    z-index: 10000;
-    height: var(--navbar-height);
-    min-height: 64px;
+  /*color in tsx*/
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  position: fixed;
+  top: 0;
+  width: 100%;
+  overflow-x: hidden;
+  z-index: 10000;
+  height: var(--navbar-height);
+  min-height: 64px;
 }
 
 /* Logo styles */
 .navbar-logo {
-    text-decoration: none;
-    margin-right: 1rem;
-    height: 3rem;
+  text-decoration: none;
+  margin-right: 1rem;
+  height: 3rem;
 }
 
 /* Menu styles */
 .navbar-menu {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
 }
 
 /* Search styles */
 .search {
-    position: relative;
-    border-radius: 4px;
-    background-color: rgba(255, 255, 255, 0.15);
+  position: relative;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.15);
 }
 
 .search:hover {
-    background-color: rgba(255, 255, 255, 0.25);
+  background-color: rgba(255, 255, 255, 0.25);
 }
 
 .search-icon-wrapper {
-    padding: 8px;
-    height: 100%;
-    position: absolute;
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  padding: 8px;
+  height: 100%;
+  position: absolute;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .search-input {
-    color: inherit;
-    width: 100%;
-    padding: 8px 8px 8px 40px;
-    font-size: 1rem;
+  color: inherit;
+  width: 100%;
+  padding: 8px 8px 8px 40px;
+  font-size: 1rem;
 }
 
 /* User avatar styles */
 .navbar-user {
-    margin-left: 16px;
+  margin-left: 16px;
 }
 
 /* Typography styles */
 .navbar-typography {
-    font-family: 'monospace';
-    font-weight: 700;
-    letter-spacing: .3rem;
-    color: inherit;
-    text-decoration: none;
+  font-family: "monospace";
+  font-weight: 700;
+  letter-spacing: 0.3rem;
+  color: inherit;
+  text-decoration: none;
 }
 
 /* Button styles */
 .navbar-button {
-    margin: 2;
-    color: white;
-    display: block;
+  margin: 2;
+  color: white;
+  display: block;
 }
 
 .navbar-offset {
-    height: var(--navbar-height);
-}
+  height: var(--navbar-height);
+}

01-frontend/src/helper/navbar/NavBar.tsx

@@ -1,331 +1,348 @@
-import MenuIcon from '@mui/icons-material/Menu';
-import SearchIcon from '@mui/icons-material/Search';
-import {Autocomplete, Badge, TextField} from '@mui/material';
-import AppBar from '@mui/material/AppBar';
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Toolbar from '@mui/material/Toolbar';
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
-import {useQuery} from '@tanstack/react-query';
-import * as React from 'react';
-import {useTranslation} from 'react-i18next';
-import {useNavigate} from 'react-router-dom';
-import Item from '../../components/Item';
-import ThemeToggle from '../../theme/ThemeToggle';
-import {useAccount} from '../AccountProvider';
-import {fetchItemList} from '../query/Queries';
-import LoginDialog from './LoginDialog';
-import './NavBar.css';
-import {useBasket} from '../BasketProvider';
-import logo from '../../assets/logo/Blume-logo.png';
-
+import MenuIcon from "@mui/icons-material/Menu";
+import SearchIcon from "@mui/icons-material/Search";
+import { Autocomplete, Badge, TextField } from "@mui/material";
+import AppBar from "@mui/material/AppBar";
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import Toolbar from "@mui/material/Toolbar";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { useQuery } from "@tanstack/react-query";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import Item from "../../components/Item";
+import ThemeToggle from "../../theme/ThemeToggle";
+import { useAccount } from "../AccountProvider";
+import { fetchItemList } from "../query/Queries";
+import LoginDialog from "./LoginDialog";
+import "./NavBar.css";
+import { useBasket } from "../BasketProvider";
+import logo from "../../assets/logo/Blume-logo.png";
 
 export default function NavBar() {
-    const {t} = useTranslation();
-    const navigate = useNavigate();
-    const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
-    const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
-    const [avatarName, setAvatarName] = React.useState<string>(''); // Für Avatar-Tooltip
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
+    null,
+  );
+  const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
+    null,
+  );
+  const [avatarName, setAvatarName] = React.useState<string>(""); // Für Avatar-Tooltip
 
-    const {user, logout} = useAccount();
+  const { user, logout } = useAccount();
 
-    const {basket} = useBasket();
+  const { basket } = useBasket();
 
-    const totalQuantity = basket?.reduce((sum, item) => sum + item.quantity, 0) ?? 0;
+  const totalQuantity =
+    basket?.reduce((sum, item) => sum + item.quantity, 0) ?? 0;
 
+  const [loginOpen, setLoginOpen] = React.useState(false);
+  const [loginData, setLoginData] = React.useState({
+    password: "",
+    email: "",
+    customerId: 0,
+  });
 
-    const [loginOpen, setLoginOpen] = React.useState(false);
-    const [loginData, setLoginData] = React.useState({password: '', email: '', customerId: 0});
+  const [itemNames, setItemNames] = React.useState<string[]>([]); // Für Autocomplete
 
+  const pageKeys = ["components", "checkout", "contact", "admin"];
 
-    const [itemNames, setItemNames] = React.useState<string[]>([]); // Für Autocomplete
+  const filteredPages = pageKeys
+    .filter((key) => {
+      if (key === "admin") {
+        return user?.isAdmin === true; // nur Admins sehen Admin-Seite
+      }
+      return true; // alle anderen Seiten immer anzeigen
+    })
+    .map((key) => ({ key, label: t(key) }));
 
-    const pageKeys = ['components', 'checkout', 'contact', 'admin'];
+  const settings = user
+    ? [
+        {
+          key: "email",
+          label: `${t("loggedInAs")}: ${user.email}`,
+          disabled: true, // wir nutzen dieses Flag gleich zur Erkennung
+        },
+        { key: "account", label: t("account") },
+        { key: "orders", label: t("orders") },
+        { key: "logout", label: t("logout") },
+      ]
+    : [{ key: "login", label: t("login") }];
 
-    const filteredPages = pageKeys
-        .filter(key => {
-            if (key === "admin") {
-                return user?.isAdmin === true;  // nur Admins sehen Admin-Seite
-            }
-            return true; // alle anderen Seiten immer anzeigen
-        })
-        .map(key => ({key, label: t(key)}));
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget);
+  };
 
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget);
+  };
 
-    const settings = user
-        ? [
-            {
-                key: 'email',
-                label: `${t('loggedInAs')}: ${user.email}`,
-                disabled: true // wir nutzen dieses Flag gleich zur Erkennung
-            },
-            {key: 'account', label: t('account')},
-            {key: 'orders', label: t('orders')},
-            {key: 'logout', label: t('logout')}
-        ]
-        : [
-            {key: 'login', label: t('login')}
-        ];
+  const handleCloseNavMenu = (link: string) => {
+    setAnchorElNav(null);
+    navigate(`/${link.toLowerCase()}`);
+  };
 
-    const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
-        setAnchorElNav(event.currentTarget);
-    };
+  const handleCloseUserMenu = (link: string) => {
+    setAnchorElUser(null);
+    if (link === "login") {
+      setLoginOpen(true);
+    } else if (link === "logout") {
+      logout();
+      if (
+        location.pathname.startsWith("/account") ||
+        location.pathname.startsWith("/orders")
+      ) {
+        navigate("/");
+      }
+    } else {
+      navigate(`/${link.toLowerCase()}`);
+    }
+  };
 
-    const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
-        setAnchorElUser(event.currentTarget);
-    };
+  const handleLoginSubmit = () => {
+    setLoginOpen(false);
+  };
 
-    const handleCloseNavMenu = (link: string) => {
-        setAnchorElNav(null);
-        navigate(`/${link.toLowerCase()}`);
-    };
+  // useQuery, um die Item-Namen zu laden
+  const { data: items = [] } = useQuery<Item[]>({
+    queryKey: ["fetchItemList"],
+    queryFn: fetchItemList,
+  });
 
-    const handleCloseUserMenu = (link: string) => {
-        setAnchorElUser(null);
-        if (link === 'login') {
-            setLoginOpen(true);
-        } else if (link === 'logout') {
-            logout();
-            if (
-                location.pathname.startsWith('/account') ||
-                location.pathname.startsWith('/orders')
-            ) {
-                navigate('/');
-            }
-        } else {
-            navigate(`/${link.toLowerCase()}`)
-        }
-    };
+  React.useEffect(() => {
+    // Extrahiere die Namen der Items für Autocomplete
+    setItemNames(items.map((item) => item.name));
+  }, [items]);
 
-    const handleLoginSubmit = () => {
-        setLoginOpen(false);
-    };
+  React.useEffect(() => {
+    // Setze den Avatar-Namen, wenn der Benutzer angemeldet ist
+    if (user !== undefined && user !== null) {
+      setAvatarName(user.email.toUpperCase());
+    }
+    if (!user) {
+      setAvatarName("");
+    }
+  }, [user]);
 
+  const handleSearch = (_: React.SyntheticEvent, value: string | null) => {
+    if (!value) {
+      // Wenn der Suchwert leer ist, navigiere zur Homepage ohne Suchparameter
+      navigate("/");
+    } else {
+      // Navigiere zur Homepage mit dem Suchparameter
+      navigate(`/?search=${encodeURIComponent(value)}`);
+    }
+  };
 
-    // useQuery, um die Item-Namen zu laden
-    const {data: items = []} = useQuery<Item[]>({
-        queryKey: ["fetchItemList"],
-        queryFn: fetchItemList,
-    });
-
-    React.useEffect(() => {
-        // Extrahiere die Namen der Items für Autocomplete
-        setItemNames(items.map((item) => item.name));
-    }, [items]);
-
-    React.useEffect(() => {
-        // Setze den Avatar-Namen, wenn der Benutzer angemeldet ist
-        if (user !== undefined && user !== null) {
-            setAvatarName(user.email.toUpperCase());
-        }
-        if (!user) {
-            setAvatarName('');
-        }
-    }, [user]);
-
-    const handleSearch = (_: React.SyntheticEvent, value: string | null) => {
-
-        if (!value) {
-            // Wenn der Suchwert leer ist, navigiere zur Homepage ohne Suchparameter
-            navigate("/");
-        } else {
-            // Navigiere zur Homepage mit dem Suchparameter
-            navigate(`/?search=${encodeURIComponent(value)}`);
-        }
-    };
-
-    return (
-        <>
-            <AppBar className="navbar" color="primary" elevation={4}>
-                <Toolbar
-                    disableGutters
-                    sx={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center', // <--- HIER hinzugefügt
-                        px: 3,
-                        minHeight: { xs: 56, sm: 64 }, // optional: Standardhöhe für bessere Zentrierung
-                    }}
-                >
-                    <Box sx={{display: "flex", alignItems: "center", minWidth: "0px"}}>
-                        <img
-                            src={logo}
-                            alt="Logo"
-                            className="navbar-logo"
-                            style={{ display: "block", height: 40, marginRight: 12, objectFit: "contain" }} // optional: Höhe anpassen
-                            onClick={() => navigate('/')}
-                        />
-                        <Typography
-                            variant="h6"
-                            noWrap
-                            component="a"
-                            onClick={() => navigate('/')}
-                            sx={{
-                                fontFamily: "monospace",
-                                fontWeight: 700,
-                                letterSpacing: ".3rem",
-                                color: "white",
-                                textDecoration: "none",
-                                display: "flex",
-                                alignItems: "center", // <--- HIER hinzugefügt
-                                height: "100%", // optional
-                            }}
-                        >
-                            Digitaler Produktionsshop
-                        </Typography>
-
-                    </Box>
-
-                    <Box sx={{
-                        flexGrow: 1,
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center", // <--- HIER hinzugefügt
-                        px: 3,
-                        zIndex: 100000
-                    }}>
-                        <Autocomplete
-                            sx={{
-                                flexGrow: 1,
-                                minWidth: "150px",
-                                maxWidth: "600px",
-                                display: "flex",
-                                alignItems: "center" // <--- HIER hinzugefügt
-                            }}
-                            freeSolo
-                            options={itemNames}
-                            onInputChange={handleSearch}
-                            renderInput={(params) => (
-                                <TextField
-                                    {...params}
-                                    placeholder={t("search") + "..."}
-                                    InputProps={{
-                                        ...params.InputProps,
-                                        startAdornment: (
-                                            <SearchIcon sx={{color: "white", mr: 1}}/>
-                                        ),
-                                    }}
-                                    sx={{
-                                        '& .MuiOutlinedInput-root': {
-                                            '& fieldset': {
-                                                borderColor: 'white',
-                                                borderWidth: '1px',
-                                            },
-                                            '&:hover fieldset': {
-                                                borderColor: 'white',
-                                            },
-                                            '&.Mui-focused fieldset': {
-                                                borderColor: 'white',
-                                            },
-                                        },
-                                        input: {
-                                            color: 'white',
-                                        },
-                                    }}
-                                />
-                            )}
-                        />
-                    </Box>
-
-                    <Box sx={{display: "flex", alignItems: "center", gap: 2, marginLeft: 'auto'}}>
-                        <Box sx={{display: {xs: "none", md: "flex"}, gap: 2}}>
-                            {filteredPages.map(({key, label}) => {
-                                if (key === 'checkout') {
-                                    return (
-                                        <Button
-                                            key={key}
-                                            onClick={() => handleCloseNavMenu(key)}
-                                            sx={{color: "white", fontWeight: 500}}
-                                        >
-                                            <Badge
-                                                badgeContent={totalQuantity}
-                                                color="error"
-                                                overlap="rectangular"
-                                                showZero={false}
-                                            >
-                                                {label}
-                                            </Badge>
-                                        </Button>
-                                    );
-                                }
-
-                                return (
-                                    <Button
-                                        key={key}
-                                        onClick={() => handleCloseNavMenu(key)}
-                                        sx={{color: "white", fontWeight: 500}}
-                                    >
-                                        {label}
-                                    </Button>
-                                );
-                            })}
-                        </Box>
-
-                        <Box sx={{display: {xs: "flex", md: "none"}}}>
-                            <IconButton
-                                size="large"
-                                aria-label={t('menu')}
-                                onClick={handleOpenNavMenu}
-                                color="inherit"
-                            >
-                                <MenuIcon/>
-                            </IconButton>
-                            <Menu
-                                anchorEl={anchorElNav}
-                                anchorOrigin={{vertical: "top", horizontal: "right"}}
-                                transformOrigin={{vertical: "top", horizontal: "right"}}
-                                open={Boolean(anchorElNav)}
-                                onClose={() => setAnchorElNav(null)}
-                            >
-                                {filteredPages.map(({key, label}) => (
-                                    <MenuItem key={key} onClick={() => handleCloseNavMenu(key)}>
-                                        <Typography>{label}</Typography>
-                                    </MenuItem>
-                                ))}
-                            </Menu>
-                        </Box>
-
-                        <ThemeToggle/>
-                        <Tooltip title={t('openSettings')} placement='bottom-end'>
-                            <IconButton onClick={handleOpenUserMenu} sx={{p: 0}}>
-                                <Avatar alt={avatarName} src="/static/images/avatar/2.jpg"/>
-                            </IconButton>
-                        </Tooltip>
-                        <Menu
-                            sx={{mt: "15px"}}
-                            id="menu-appbar-user"
-                            anchorEl={anchorElUser}
-                            open={Boolean(anchorElUser)}
-                            onClose={() => setAnchorElUser(null)}
-                        >
-                            {settings.map(({key, label, disabled}) => (
-                                <MenuItem
-                                    key={key}
-                                    onClick={() => {
-                                        if (!disabled) handleCloseUserMenu(key);
-                                    }}
-                                    disabled={disabled}
-                                >
-                                    <Typography sx={{textAlign: "center"}}>{label}</Typography>
-                                </MenuItem>
-                            ))}
-                        </Menu>
-                    </Box>
-                </Toolbar>
-            </AppBar>
-            <LoginDialog
-                open={loginOpen}
-                onClose={() => setLoginOpen(false)}
-                onSubmit={handleLoginSubmit}
-                loginData={loginData}
-                setLoginData={setLoginData}
+  return (
+    <>
+      <AppBar className="navbar" color="primary" elevation={4}>
+        <Toolbar
+          disableGutters
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center", // <--- HIER hinzugefügt
+            px: 3,
+            minHeight: { xs: 56, sm: 64 }, // optional: Standardhöhe für bessere Zentrierung
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center", minWidth: "0px" }}>
+            <img
+              src={logo}
+              alt="Logo"
+              className="navbar-logo"
+              style={{
+                display: "block",
+                height: 40,
+                marginRight: 12,
+                objectFit: "contain",
+              }} // optional: Höhe anpassen
+              onClick={() => navigate("/")}
             />
-            <div className="navbar-offset"/>
-        </>
-    );
+            <Typography
+              variant="h6"
+              noWrap
+              component="a"
+              onClick={() => navigate("/")}
+              sx={{
+                fontFamily: "monospace",
+                fontWeight: 700,
+                letterSpacing: ".3rem",
+                color: "white",
+                textDecoration: "none",
+                display: "flex",
+                alignItems: "center", // <--- HIER hinzugefügt
+                height: "100%", // optional
+                ":hover": {
+                  color: "#fff1d8ff",
+                },
+              }}
+            >
+              Digitaler Produktionsshop
+            </Typography>
+          </Box>
+
+          <Box
+            sx={{
+              flexGrow: 1,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center", // <--- HIER hinzugefügt
+              px: 3,
+              zIndex: 100000,
+            }}
+          >
+            <Autocomplete
+              sx={{
+                flexGrow: 1,
+                minWidth: "150px",
+                maxWidth: "600px",
+                display: "flex",
+                alignItems: "center", // <--- HIER hinzugefügt
+              }}
+              freeSolo
+              options={itemNames}
+              onInputChange={handleSearch}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder={t("search") + "..."}
+                  InputProps={{
+                    ...params.InputProps,
+                    startAdornment: (
+                      <SearchIcon sx={{ color: "white", mr: 1 }} />
+                    ),
+                  }}
+                  sx={{
+                    "& .MuiOutlinedInput-root": {
+                      "& fieldset": {
+                        borderColor: "white",
+                        borderWidth: "1px",
+                      },
+                      "&:hover fieldset": {
+                        borderColor: "white",
+                      },
+                      "&.Mui-focused fieldset": {
+                        borderColor: "white",
+                      },
+                    },
+                    input: {
+                      color: "white",
+                    },
+                  }}
+                />
+              )}
+            />
+          </Box>
+
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              marginLeft: "auto",
+            }}
+          >
+            <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
+              {filteredPages.map(({ key, label }) => {
+                if (key === "checkout") {
+                  return (
+                    <Button
+                      key={key}
+                      onClick={() => handleCloseNavMenu(key)}
+                      sx={{ color: "white", fontWeight: 500 }}
+                    >
+                      <Badge
+                        badgeContent={totalQuantity}
+                        color="error"
+                        overlap="rectangular"
+                        showZero={false}
+                      >
+                        {label}
+                      </Badge>
+                    </Button>
+                  );
+                }
+
+                return (
+                  <Button
+                    key={key}
+                    onClick={() => handleCloseNavMenu(key)}
+                    sx={{ color: "white", fontWeight: 500 }}
+                  >
+                    {label}
+                  </Button>
+                );
+              })}
+            </Box>
+
+            <Box sx={{ display: { xs: "flex", md: "none" } }}>
+              <IconButton
+                size="large"
+                aria-label={t("menu")}
+                onClick={handleOpenNavMenu}
+                color="inherit"
+              >
+                <MenuIcon />
+              </IconButton>
+              <Menu
+                anchorEl={anchorElNav}
+                anchorOrigin={{ vertical: "top", horizontal: "right" }}
+                transformOrigin={{ vertical: "top", horizontal: "right" }}
+                open={Boolean(anchorElNav)}
+                onClose={() => setAnchorElNav(null)}
+              >
+                {filteredPages.map(({ key, label }) => (
+                  <MenuItem key={key} onClick={() => handleCloseNavMenu(key)}>
+                    <Typography>{label}</Typography>
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Box>
+
+            <ThemeToggle />
+            <Tooltip title={t("openSettings")} placement="bottom-end">
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <Avatar alt={avatarName} src="/static/images/avatar/2.jpg" />
+              </IconButton>
+            </Tooltip>
+            <Menu
+              sx={{ mt: "15px" }}
+              id="menu-appbar-user"
+              anchorEl={anchorElUser}
+              open={Boolean(anchorElUser)}
+              onClose={() => setAnchorElUser(null)}
+            >
+              {settings.map(({ key, label, disabled }) => (
+                <MenuItem
+                  key={key}
+                  onClick={() => {
+                    if (!disabled) handleCloseUserMenu(key);
+                  }}
+                  disabled={disabled}
+                >
+                  <Typography sx={{ textAlign: "center" }}>{label}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+        </Toolbar>
+      </AppBar>
+      <LoginDialog
+        open={loginOpen}
+        onClose={() => setLoginOpen(false)}
+        onSubmit={handleLoginSubmit}
+        loginData={loginData}
+        setLoginData={setLoginData}
+      />
+      <div className="navbar-offset" />
+    </>
+  );
 }

01-frontend/src/helper/productpage/ProductInfo.tsx

@@ -1,209 +1,216 @@
-import {Close, LocalShipping, ShoppingCart} from "@mui/icons-material";
+import { Close, LocalShipping, ShoppingCart } from "@mui/icons-material";
 import {
-    Alert,
-    Box,
-    Button,
-    Card,
-    Divider,
-    Grid,
-    IconButton,
-    Rating,
-    Snackbar,
-    SnackbarCloseReason,
-    Stack,
-    TextField,
-    Typography
+  Alert,
+  Box,
+  Button,
+  Card,
+  Divider,
+  Grid,
+  IconButton,
+  Rating,
+  Snackbar,
+  SnackbarCloseReason,
+  Stack,
+  TextField,
+  Typography,
 } from "@mui/material";
-import React, {useEffect, useState} from "react";
-import {useTranslation} from "react-i18next";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import Item from "../../components/Item";
-import {useBasket} from "../BasketProvider";
+import { useBasket } from "../BasketProvider";
 
-export default function ProductInfo({item}: { item: Item }) {
+export default function ProductInfo({ item }: { item: Item }) {
+  const { t } = useTranslation();
+  const [quantity, setQuantity] = useState<number>(1);
+  const [open, setOpen] = useState<boolean>(false);
+  const [imageDimensions, setImageDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
 
-    const {t} = useTranslation();
-    const [quantity, setQuantity] = useState<number>(1);
-    const [open, setOpen] = useState<boolean>(false);
-    const [imageDimensions, setImageDimensions] = useState({width: 0, height: 0});
+  const { addToBasket } = useBasket();
 
+  const handleClose = (
+    _: React.SyntheticEvent | Event,
+    reason?: SnackbarCloseReason,
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
 
-    const {addToBasket} = useBasket();
+    setOpen(false);
+  };
 
-    const handleClose = (
-        _: React.SyntheticEvent | Event,
-        reason?: SnackbarCloseReason,
-    ) => {
-        if (reason === 'clickaway') {
-            return;
+  const action = (
+    <React.Fragment>
+      <IconButton
+        size="small"
+        aria-label={t("close")}
+        color="inherit"
+        onClick={handleClose}
+      >
+        <Close fontSize="small" />
+      </IconButton>
+    </React.Fragment>
+  );
+
+  const handleAddToCart = () => {
+    addToBasket(item, quantity);
+    setOpen(true);
+    console.log(`Added {quantity} of €{item.name} to basket`);
+  };
+
+  const discountedPrice = item.price100 * (1 - item.discount100 / 100);
+
+  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
+    const { naturalWidth, naturalHeight } = event.currentTarget;
+    setImageDimensions({ width: naturalWidth, height: naturalHeight });
+  };
+
+  const [imageUrl, setImageUrl] = useState<string>("/src/assets/default.jpg"); // Fallback-Bild
+
+  useEffect(() => {
+    const fetchImage = async () => {
+      try {
+        const response = await fetch(
+          `http://localhost:8085/image?uuid=${item.uuid}`,
+        );
+        let data = await response.text();
+        if (data.length == 0) {
+          console.error("Got emtpy picture for article ", item.uuid);
         }
-
-        setOpen(false);
+        if (!data.startsWith("data:image/")) {
+          data = "data:image/jpeg;base64," + data;
+        }
+        setImageUrl(data);
+      } catch (error) {
+        console.error("Fehler beim Laden des Bildes:", error);
+      }
     };
 
-    const action = (
-        <React.Fragment>
-            <IconButton
-                size="small"
-                aria-label={t('close')}
-                color="inherit"
-                onClick={handleClose}
-            >
-                <Close fontSize="small"/>
-            </IconButton>
-        </React.Fragment>
-    );
+    fetchImage();
+  }, [item.uuid]);
 
+  return (
+    <Grid container spacing={4}>
+      {/* Left Column - Image */}
 
-    const handleAddToCart = () => {
-        addToBasket(item, quantity);
-        setOpen(true);
-        console.log(`Added {quantity} of €{item.name} to basket`);
-    };
+      <Card
+        elevation={2}
+        sx={{ width: "100%", maxWidth: 400, display: "inherit" }}
+      >
+        <Box
+          component="img"
+          src={imageUrl}
+          alt={item.name}
+          onLoad={handleImageLoad} // Event-Handler zum Ermitteln der Bildgröße
+          onError={(event) => {
+            event.currentTarget.src = "/src/assets/default.jpg"; // Standardbild setzen
+          }}
+          sx={{
+            maxWidth:
+              imageDimensions.width > imageDimensions.height ? "100%" : "auto",
+            maxHeight:
+              imageDimensions.height >= imageDimensions.width ? 400 : "auto",
+            width: "auto",
+            height: "auto",
+            objectFit: "contain",
+            margin: "auto",
+          }}
+        />
+      </Card>
 
-    const discountedPrice = item.price100 * (1 - item.discount100 / 100);
+      {/* Right Column - Product Details */}
 
-    const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
-        const {naturalWidth, naturalHeight} = event.currentTarget;
-        setImageDimensions({width: naturalWidth, height: naturalHeight});
-    };
+      <Stack spacing={3}>
+        <Typography variant="h4" component="h1">
+          {item.name}
+        </Typography>
 
-    const [imageUrl, setImageUrl] = useState<string>("/src/assets/default.jpg"); // Fallback-Bild
+        <Box display="flex" alignItems="center" gap={1}>
+          <Rating value={item.rating / 2} precision={0.5} readOnly />
+          <Typography variant="body2" color="text.secondary">
+            {item.rating > 0 ? `(${item.rating / 2} / 5)` : t("noRatingsYet")}
+          </Typography>
+        </Box>
 
-    useEffect(() => {
-        const fetchImage = async () => {
-            try {
-                const response = await fetch(`http://localhost:8085/image?uuid=${item.uuid}`);
-                let data = await response.text();
-                if (data.length == 0) {
-                    console.error("Got emtpy picture for article ", item.uuid);
-                }
-                if (!data.startsWith("data:image/")) {
-                    data = "data:image/jpeg;base64," + data
-                }
-                setImageUrl(data);
-            } catch (error) {
-                console.error("Fehler beim Laden des Bildes:", error);
-            }
-        };
+        <Stack direction="row" alignItems="center" spacing={2}>
+          {item.discount100 > 0 ? (
+            <>
+              <Typography variant="h4" color="green">
+                {(discountedPrice / 100).toFixed(2)} €
+              </Typography>
+              <Typography
+                variant="h6"
+                color="text.secondary"
+                sx={{ textDecoration: "line-through" }}
+              >
+                {(item.price100 / 100).toFixed(2)} €
+              </Typography>
+              <Typography variant="h6" color="error">
+                -{item.discount100} %
+              </Typography>
+            </>
+          ) : (
+            <Typography variant="h4" color="green">
+              {(item.price100 / 100).toFixed(2)} €
+            </Typography>
+          )}
+        </Stack>
 
-        fetchImage();
-    }, [item.uuid]);
+        <Divider />
 
-    return (
-        <Grid container spacing={4}>
-            {/* Left Column - Image */}
+        <Box>
+          {item.stock > 10 ? (
+            <Alert severity="success" variant="outlined">
+              {t("inStock")} ({item.stock} {t("available")})
+            </Alert>
+          ) : item.stock > 0 ? (
+            <Alert severity="warning" variant="outlined">
+              {t("almostSoldOut")} ({item.stock} {t("available")})
+            </Alert>
+          ) : (
+            <Alert severity="error" variant="filled">
+              {t("outOfStock")}
+            </Alert>
+          )}
+        </Box>
 
-            <Card elevation={2} sx={{width: '100%', maxWidth: 400, display: 'inherit'}}>
-                <Box
-                    component="img"
-                    src={imageUrl}
-                    alt={item.name}
-                    onLoad={handleImageLoad} // Event-Handler zum Ermitteln der Bildgröße
-                    onError={(event) => {
-                        event.currentTarget.src = "/src/assets/default.jpg"; // Standardbild setzen
-                    }}
-                    sx={{
-                        maxWidth: imageDimensions.width > imageDimensions.height ? "100%" : "auto",
-                        maxHeight: imageDimensions.height >= imageDimensions.width ? 400 : "auto",
-                        width: "auto",
-                        height: "auto",
-                        objectFit: "contain",
-                    }}
-                />
-            </Card>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <TextField
+            type="number"
+            label={t("quantity")}
+            value={quantity}
+            onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value)))}
+            InputProps={{ inputProps: { min: 1, max: item.stock } }}
+            sx={{ width: 100 }}
+          />
+          <Button
+            variant="contained"
+            size="large"
+            startIcon={<ShoppingCart />}
+            onClick={handleAddToCart}
+            disabled={item.stock <= 0}
+            fullWidth
+          >
+            {t("addToCart")}
+          </Button>
+        </Stack>
 
-
-            {/* Right Column - Product Details */}
-
-            <Stack spacing={3}>
-                <Typography variant="h4" component="h1">
-                    {item.name}
-                </Typography>
-
-                <Box display="flex" alignItems="center" gap={1}>
-                    <Rating value={item.rating / 2} precision={0.5} readOnly/>
-                    <Typography variant="body2" color="text.secondary">
-                        {item.rating > 0 ? `(${item.rating / 2} / 5)` : t('noRatingsYet')}
-
-                    </Typography>
-                </Box>
-
-                <Stack direction="row" alignItems="center" spacing={2}>
-                    {item.discount100 > 0 ? (
-                        <>
-                            <Typography variant="h4" color="green">
-                                {(discountedPrice / 100).toFixed(2)} €
-                            </Typography>
-                            <Typography
-                                variant="h6"
-                                color="text.secondary"
-                                sx={{textDecoration: 'line-through'}}
-                            >
-                                {(item.price100 / 100).toFixed(2)} €
-                            </Typography>
-                            <Typography variant="h6" color="error">
-                                -{item.discount100} %
-                            </Typography>
-                        </>
-                    ) : (
-                        <Typography variant="h4" color="green">
-                            {(item.price100 / 100).toFixed(2)} €
-                        </Typography>
-                    )}
-                </Stack>
-
-                <Divider/>
-
-                <Box>
-                    {item.stock > 10 ? (
-                        <Alert severity="success" variant='outlined'>
-                            {t('inStock')} ({item.stock} {t('available')})
-                        </Alert>
-                    ) : item.stock > 0 ? (
-                        <Alert severity="warning"
-                               variant='outlined'>{t('almostSoldOut')} ({item.stock} {t('available')})</Alert>
-                    ) : (
-                        <Alert severity="error" variant='filled'>{t('outOfStock')}</Alert>
-                    )}
-                </Box>
-
-                <Stack direction="row" spacing={2} alignItems="center">
-                    <TextField
-                        type="number"
-                        label={t('quantity')}
-                        value={quantity}
-                        onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value)))}
-                        InputProps={{inputProps: {min: 1, max: item.stock}}}
-                        sx={{width: 100}}
-                    />
-                    <Button
-                        variant="contained"
-                        size="large"
-                        startIcon={<ShoppingCart/>}
-                        onClick={handleAddToCart}
-                        disabled={item.stock <= 0}
-                        fullWidth
-                    >
-                        {t('addToCart')}
-                    </Button>
-                </Stack>
-
-                <Box sx={{mt: 2}}>
-                    <Typography variant="body2" color="text.secondary">
-                        <LocalShipping sx={{mr: 1, verticalAlign: 'middle'}}/>
-                        {t('freeShipping')}
-                    </Typography>
-                </Box>
-
-            </Stack>
-            <Snackbar
-                open={open}
-                autoHideDuration={3000}
-                onClose={handleClose}
-                message={t('addedToCart')}
-                action={action}
-            />
-
-        </Grid>
-    );
-}
+        <Box sx={{ mt: 2 }}>
+          <Typography variant="body2" color="text.secondary">
+            <LocalShipping sx={{ mr: 1, verticalAlign: "middle" }} />
+            {t("freeShipping")}
+          </Typography>
+        </Box>
+      </Stack>
+      <Snackbar
+        open={open}
+        autoHideDuration={3000}
+        onClose={handleClose}
+        message={t("addedToCart")}
+        action={action}
+      />
+    </Grid>
+  );
+}

01-frontend/src/helper/productpage/RatingCard.tsx

@@ -1,55 +1,63 @@
-import {Card, CardActionArea, CardContent, Paper, Rating, Typography, useTheme} from "@mui/material";
+import {
+  Card,
+  CardActionArea,
+  CardContent,
+  Paper,
+  Rating,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import RatingType from "../../components/Rating";
-import {useTranslation} from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 export default function RatingCard(ratingType: RatingType) {
-    const {t} = useTranslation();
-    const theme = useTheme(); // Zugriff auf Light/Dark-Mode
+  const { t } = useTranslation();
+  const theme = useTheme(); // Zugriff auf Light/Dark-Mode
 
-    const handleClick = () => {
-    };
+  const handleClick = () => {};
 
-    return (
-        <Paper
-            elevation={4}
-            sx={{
-                backgroundColor: theme.palette.background.paper,
-                color: theme.palette.text.primary,
-                mb: 3
-            }}
-        >
-            <Card
-                sx={{
-                    backgroundColor: theme.palette.background.paper,
-                }}
+  return (
+    <Paper
+      elevation={4}
+      sx={{
+        backgroundColor: theme.palette.background.paper,
+        color: theme.palette.text.primary,
+        mb: 3,
+      }}
+    >
+      <Card
+        sx={{
+          backgroundColor: theme.palette.background.paper,
+        }}
+      >
+        <CardActionArea onClick={handleClick}>
+          <CardContent>
+            <Typography
+              gutterBottom
+              variant="h6"
+              component="div"
+              sx={{ color: theme.palette.text.primary }}
             >
-                <CardActionArea onClick={handleClick}>
-                    <CardContent>
-                        <Typography
-                            gutterBottom
-                            variant="h6"
-                            component="div"
-                            sx={{color: theme.palette.text.primary}}
-                        >
-                            {t('ratingFrom')} {new Date(ratingType.timestamp).toLocaleDateString('de-DE')}
-                        </Typography>
+              {t("ratingFrom")}{" "}
+              {new Date(ratingType.timestamp).toLocaleDateString("de-DE")}
+            </Typography>
 
-                        <Rating
-                            name="half-rating"
-                            readOnly
-                            defaultValue={ratingType.rating / 2}
-                            precision={0.5}
-                        />
+            <Rating
+              name="half-rating"
+              readOnly
+              defaultValue={ratingType.rating / 2}
+              precision={0.5}
+            />
 
-                        <Typography
-                            variant="body2"
-                            sx={{color: theme.palette.text.secondary, mt: 1}}
-                        >
-                            {ratingType.content}
-                        </Typography>
-                    </CardContent>
-                </CardActionArea>
-            </Card>
-        </Paper>
-    );
+            <Typography
+              variant="body2"
+              sx={{ color: theme.palette.text.secondary, mt: 1 }}
+            >
+              {ratingType.content}
+            </Typography>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    </Paper>
+  );
 }

01-frontend/src/helper/productpage/Ratings.tsx

@@ -1,166 +1,170 @@
 import {
-    Box,
-    Button,
-    Divider,
-    IconButton,
-    Rating,
-    Snackbar,
-    SnackbarCloseReason,
-    TextField,
-    Typography,
-    useTheme
+  Box,
+  Button,
+  Divider,
+  IconButton,
+  Rating,
+  Snackbar,
+  SnackbarCloseReason,
+  TextField,
+  Typography,
+  useTheme,
 } from "@mui/material";
-import {Close} from "@mui/icons-material";
-import {useQuery} from "@tanstack/react-query";
-import React, {useMemo, useState} from "react";
-import {useTranslation} from 'react-i18next';
+import { Close } from "@mui/icons-material";
+import { useQuery } from "@tanstack/react-query";
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import RatingType from "../../components/Rating";
-import {fetchRatingList, submitRating} from "../query/Queries";
+import { fetchRatingList, submitRating } from "../query/Queries";
 import RatingCard from "./RatingCard";
 import RatingSubmitType from "../../components/RatingSubmit";
 
-export default function Ratings({itemId}: { itemId: string }) {
-    const {t} = useTranslation();
-    const theme = useTheme();
+export default function Ratings({ itemId }: { itemId: string }) {
+  const { t } = useTranslation();
+  const theme = useTheme();
 
-    const [open, setOpen] = useState<boolean>(false);
-    const [ratingText, setRatingText] = useState<string>("");
-    const [ratingValue, setRatingValue] = useState<number | null>(2.5);
+  const [open, setOpen] = useState<boolean>(false);
+  const [ratingText, setRatingText] = useState<string>("");
+  const [ratingValue, setRatingValue] = useState<number | null>(2.5);
 
-    const ratingData: RatingSubmitType = {
-        rating: ratingValue || 0,
-        content: ratingText || "",
-        articleId: itemId,
-    };
+  const ratingData: RatingSubmitType = {
+    rating: ratingValue || 0,
+    content: ratingText || "",
+    articleId: itemId,
+  };
 
-    const {refetch} = useQuery({
-        queryKey: ["submitRating", ratingData],
-        queryFn: () => submitRating(ratingData),
-        retry: 3,
-        retryDelay: 1000,
-        enabled: false,
-    });
+  const { refetch } = useQuery({
+    queryKey: ["submitRating", ratingData],
+    queryFn: () => submitRating(ratingData),
+    retry: 3,
+    retryDelay: 1000,
+    enabled: false,
+  });
 
-    const handleRatingSubmit = () => {
-        setOpen(true);
-        void refetch(); // bewusst ausgelöst, kein await notwendig
-    };
+  const handleRatingSubmit = () => {
+    setOpen(true);
+    void refetch(); // bewusst ausgelöst, kein await notwendig
+  };
 
-    const handleClose = (
-        _: React.SyntheticEvent | Event,
-        reason?: SnackbarCloseReason
-    ) => {
-        if (reason === "clickaway") return;
-        setOpen(false);
-    };
+  const handleClose = (
+    _: React.SyntheticEvent | Event,
+    reason?: SnackbarCloseReason,
+  ) => {
+    if (reason === "clickaway") return;
+    setOpen(false);
+  };
 
-    const action = (
-        <React.Fragment>
-            <IconButton
-                size="small"
-                aria-label={t("close")}
-                color="inherit"
-                onClick={handleClose}
-            >
-                <Close fontSize="small"/>
-            </IconButton>
-        </React.Fragment>
-    );
+  const action = (
+    <React.Fragment>
+      <IconButton
+        size="small"
+        aria-label={t("close")}
+        color="inherit"
+        onClick={handleClose}
+      >
+        <Close fontSize="small" />
+      </IconButton>
+    </React.Fragment>
+  );
 
-    const {data = []} = useQuery<RatingType[]>({
-        queryKey: ["fetchRatingList", itemId],
-        queryFn: () => fetchRatingList(itemId),
-        retry: 3,
-        retryDelay: 1000,
-    });
+  const { data = [] } = useQuery<RatingType[]>({
+    queryKey: ["fetchRatingList", itemId],
+    queryFn: () => fetchRatingList(itemId),
+    retry: 3,
+    retryDelay: 1000,
+  });
 
-    const ratings: RatingType[] = useMemo(() => data || [], [data]);
+  const ratings: RatingType[] = useMemo(() => data || [], [data]);
 
-    const getRatings = () => {
-        if (ratings.length === 0) {
-            return (
-                <Typography variant="body1" sx={{color: theme.palette.text.secondary}}>
-                    {t("noRatingsYet")}
-                </Typography>
-            );
-        }
+  const getRatings = () => {
+    if (ratings.length === 0) {
+      return (
+        <Typography
+          variant="body1"
+          sx={{ color: theme.palette.text.secondary }}
+        >
+          {t("noRatingsYet")}
+        </Typography>
+      );
+    }
 
-        return ratings.map((ratingType: RatingType) => (
-            <RatingCard key={ratingType.timestamp} {...ratingType} />
-        ));
-    };
+    return ratings.map((ratingType: RatingType) => (
+      <RatingCard key={ratingType.timestamp} {...ratingType} />
+    ));
+  };
 
-    return (
-        <>
-            <Divider sx={{backgroundColor: theme.palette.divider, my: 3}}/>
+  return (
+    <>
+      <Divider sx={{ backgroundColor: theme.palette.divider, my: 3 }} />
 
-            <Box sx={{mb: 4}}>
-                <Typography variant="h5" sx={{color: theme.palette.text.primary, mb: 2}}>
-                    {t("rateThisProduct")}:
-                </Typography>
+      <Box sx={{ mb: 4 }}>
+        <Typography
+          variant="h5"
+          sx={{ color: theme.palette.text.primary, mb: 2 }}
+        >
+          {t("rateThisProduct")}:
+        </Typography>
 
-                <Rating
-                    name="half-rating"
-                    value={ratingValue}
-                    onChange={(_, value) => setRatingValue(value)}
-                    precision={0.5}
-                />
+        <Rating
+          name="half-rating"
+          value={ratingValue}
+          onChange={(_, value) => setRatingValue(value)}
+          precision={0.5}
+        />
 
-                <TextField
-                    label={t("review")}
-                    multiline
-                    minRows={4}
-                    maxRows={16}
-                    fullWidth
-                    sx={{
-                        mt: 2,
-                        mb: 2,
-                        backgroundColor: theme.palette.background.paper,
-                        color: theme.palette.text.primary,
-                        '& .MuiInputBase-input': {
-                            color: theme.palette.text.primary,
-                        },
-                        '& label': {
-                            color: theme.palette.text.secondary,
-                        },
-                        '& .MuiOutlinedInput-root': {
-                            '& fieldset': {
-                                borderColor: theme.palette.divider,
-                            },
-                            '&:hover fieldset': {
-                                borderColor: theme.palette.text.primary,
-                            },
-                            '&.Mui-focused fieldset': {
-                                borderColor: theme.palette.primary.main,
-                            },
-                        },
-                    }}
-                    value={ratingText}
-                    onChange={(e) => setRatingText(e.target.value)}
-                />
+        <TextField
+          label={t("review")}
+          multiline
+          minRows={4}
+          maxRows={16}
+          fullWidth
+          sx={{
+            mt: 2,
+            mb: 2,
+            backgroundColor: theme.palette.background.paper,
+            color: theme.palette.text.primary,
+            "& .MuiInputBase-input": {
+              color: theme.palette.text.primary,
+            },
+            "& label": {
+              color: theme.palette.text.secondary,
+            },
+            "& .MuiOutlinedInput-root": {
+              "& fieldset": {
+                borderColor: theme.palette.divider,
+              },
+              "&:hover fieldset": {
+                borderColor: theme.palette.text.primary,
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: theme.palette.primary.main,
+              },
+            },
+          }}
+          value={ratingText}
+          onChange={(e) => setRatingText(e.target.value)}
+        />
 
-                <Button
-                    variant="contained"
-                    color="primary"
-                    onClick={handleRatingSubmit}
-                >
-                    {t("submit")}
-                </Button>
-            </Box>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={handleRatingSubmit}
+        >
+          {t("submit")}
+        </Button>
+      </Box>
 
-            <Divider sx={{backgroundColor: theme.palette.divider, my: 3}}/>
+      <Divider sx={{ backgroundColor: theme.palette.divider, my: 3 }} />
 
-            <Box>
-                {getRatings()}
-            </Box>
+      <Box>{getRatings()}</Box>
 
-            <Snackbar
-                open={open}
-                autoHideDuration={3000}
-                onClose={handleClose}
-                message={t("thanksForRating")}
-                action={action}
-            />
-        </>
-    );
+      <Snackbar
+        open={open}
+        autoHideDuration={3000}
+        onClose={handleClose}
+        message={t("thanksForRating")}
+        action={action}
+      />
+    </>
+  );
 }

01-frontend/src/helper/query/Queries.tsx

@@ -1,323 +1,406 @@
 // api/queries.js
 
-import AccountType, {AdminAccountOperation, CustomerType, SubmitLogin, User} from "../../components/Account";
-import OrderType, {OrderPatch} from "../../components/Order";
+import AccountType, {
+  AdminAccountOperation,
+  CustomerType,
+  SubmitLogin,
+  User,
+} from "../../components/Account";
+import OrderType, { OrderPatch } from "../../components/Order";
 import RatingSubmitType from "../../components/RatingSubmit";
-import {Item, ItemWithFSImage} from "../../components/Item";
+import { Item, ItemWithFSImage } from "../../components/Item";
 
 export const fetchItemList = async () => {
-    const response = await fetch('http://localhost:8085/article/all');
-    if (!response.ok) {
-        throw new Error('Fehler beim Laden der Items');
-    }
-    const data = await response.json();
-    return data;
+  const response = await fetch("http://localhost:8085/article/all");
+  if (!response.ok) {
+    throw new Error("Fehler beim Laden der Items");
+  }
+  const data = await response.json();
+  return data;
 };
 
 export const fetchItemListWithImage = async () => {
-    const response = await fetch('http://localhost:8085/article/all/image');
-    if (!response.ok) {
-        throw new Error('Fehler beim Laden der Items');
-    }
-    const data = await response.json();
-    return data;
+  const response = await fetch("http://localhost:8085/article/all/image");
+  if (!response.ok) {
+    throw new Error("Fehler beim Laden der Items");
+  }
+  const data = await response.json();
+  return data;
 };
 
 export const submitRating = async (ratingData: RatingSubmitType) => {
-    const response = await fetch('http://localhost:8085/review?uuid=' + ratingData.articleId + '&rating=' + ratingData.rating * 2, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'text/plain',
-        },
-        body: ratingData.content,
-    });
+  const response = await fetch(
+    "http://localhost:8085/review?uuid=" +
+      ratingData.articleId +
+      "&rating=" +
+      ratingData.rating * 2,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "text/plain",
+      },
+      body: ratingData.content,
+    },
+  );
 
-    if (!response.ok) {
-        throw new Error('Fehler beim Senden der Bewertung');
-    }
+  if (!response.ok) {
+    throw new Error("Fehler beim Senden der Bewertung");
+  }
 
-    const data = await response.json();
-    return data;
-}
+  const data = await response.json();
+  return data;
+};
 
 export const fetchRatingList = async (itemId: string) => {
-    const response = await fetch('http://localhost:8085/review/all?uuid=' + itemId);
-    if (!response.ok) {
-        throw new Error('Fehler beim Laden der Items');
-    }
-    const data = await response.json();
-    return data;
+  const response = await fetch(
+    "http://localhost:8085/review/all?uuid=" + itemId,
+  );
+  if (!response.ok) {
+    throw new Error("Fehler beim Laden der Items");
+  }
+  const data = await response.json();
+  return data;
 };
 
 export const submitOrder = async (data: OrderType) => {
-    const response = await fetch('http://localhost:8085/order', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data),
-    });
+  const response = await fetch("http://localhost:8085/order", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
 
-    if (!response.ok) {
-        throw new Error('Fehler beim Senden der Bestellung');
-    }
+  if (!response.ok) {
+    throw new Error("Fehler beim Senden der Bestellung");
+  }
 
-    return await response.json();
-}
+  return await response.json();
+};
 
 export const submitAccount = async (data: AccountType) => {
-    const response = await fetch('http://localhost:8085/account', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data),
-    });
+  const response = await fetch("http://localhost:8085/account", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
 
-    if (!response.ok) {
-        throw new Error('Fehler beim Senden des Accounts');
-    }
+  if (!response.ok) {
+    throw new Error("Fehler beim Senden des Accounts");
+  }
 
-    return await response.json();
-}
+  return await response.json();
+};
 
 export const submitCustomer = async (data: CustomerType) => {
-    const response = await fetch('http://localhost:8085/customer', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data),
-    });
+  const response = await fetch("http://localhost:8085/customer", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
 
-    if (!response.ok) {
-        throw new Error('Fehler beim Senden des Accounts');
-    }
+  if (!response.ok) {
+    throw new Error("Fehler beim Senden des Accounts");
+  }
 
-    return await response.json();
-}
+  return await response.json();
+};
 
 export const submitLogin = async (loginData: SubmitLogin) => {
-    const response = await fetch("http://localhost:8085/session?email=" + loginData.email + "&password=" + loginData.password, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(loginData),
-    });
-    if (!response.ok) {
-        throw new Error("Login failed");
-    }
-    return response.json();
+  const response = await fetch(
+    "http://localhost:8085/session?email=" +
+      loginData.email +
+      "&password=" +
+      loginData.password,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(loginData),
+    },
+  );
+  if (!response.ok) {
+    throw new Error("Login failed");
+  }
+  return response.json();
 };
 
 export const fetchAccount = async (loginData: SubmitLogin) => {
-    const response = await fetch("http://localhost:8085/account?email=" + loginData.email + "&password=" + loginData.password);
-    if (!response.ok) {
-        throw new Error("Login failed");
-    }
-    return response.json();
+  const response = await fetch(
+    "http://localhost:8085/account?email=" +
+      loginData.email +
+      "&password=" +
+      loginData.password,
+  );
+  if (!response.ok) {
+    throw new Error("Login failed");
+  }
+  return response.json();
 };
 
 export const submitRegister = async (registerData: AccountType) => {
-    const response = await fetch("http://localhost:8085/account", {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(registerData),
-    });
-    if (!response.ok) {
-        throw new Error("Login failed");
-    }
-    return response.json();
+  const response = await fetch("http://localhost:8085/account", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(registerData),
+  });
+  if (!response.ok) {
+    throw new Error("Login failed");
+  }
+  return response.json();
 };
 
 export const fetchCustomer = async (userId: number) => {
-    const response = await fetch('http://localhost:8085/customer?id=' + userId);
-    if (!response.ok) {
-        throw new Error('Fehler beim Laden des Customers');
-    }
-    const data = await response.json();
-    return data;
+  const response = await fetch("http://localhost:8085/customer?id=" + userId);
+  if (!response.ok) {
+    throw new Error("Fehler beim Laden des Customers");
+  }
+  const data = await response.json();
+  return data;
 };
 
 export const deleteAccount = async (user: User) => {
-    const response = await fetch('http://localhost:8085/account?email=' + user.email + '&password=' + user.password, {
-        method: 'DELETE',
-    });
-    if (!response.ok) {
-        throw new Error('Fehler beim Löschen des Accounts');
-    }
-    return await response.json();
+  const response = await fetch(
+    "http://localhost:8085/account?email=" +
+      user.email +
+      "&password=" +
+      user.password,
+    {
+      method: "DELETE",
+    },
+  );
+  if (!response.ok) {
+    throw new Error("Fehler beim Löschen des Accounts");
+  }
+  return await response.json();
 };
 
 export const deleteAccountAdmin = async (operation: AdminAccountOperation) => {
-    const response = await fetch('http://localhost:8085/account/admin?email=' + operation.email + '&uuid=' + operation.uuid + '&id=' + operation.accountId, {
-        method: 'DELETE',
-    });
-    if (!response.ok) {
-        throw new Error('Fehler beim Löschen des Accounts');
-    }
-    return await response.json();
+  const response = await fetch(
+    "http://localhost:8085/account/admin?email=" +
+      operation.email +
+      "&uuid=" +
+      operation.uuid +
+      "&id=" +
+      operation.accountId,
+    {
+      method: "DELETE",
+    },
+  );
+  if (!response.ok) {
+    throw new Error("Fehler beim Löschen des Accounts");
+  }
+  return await response.json();
 };
 
 export const fetchOrders = async (customerId: number) => {
-    const response = await fetch('http://localhost:8085/order/all?customerId=' + customerId);
-    if (!response.ok) {
-        throw new Error('Fehler beim Laden des Customers');
-    }
-    const data = await response.json();
-    return data;
+  const response = await fetch(
+    "http://localhost:8085/order/all?customerId=" + customerId,
+  );
+  if (!response.ok) {
+    throw new Error("Fehler beim Laden des Customers");
+  }
+  const data = await response.json();
+  return data;
 };
 
 export const fetchAccounts = async (loginData: User) => {
-    const response = await fetch("http://localhost:8085/account/all?email=" + loginData.email + "&session=" + loginData.session);
-    if (!response.ok) {
-        throw new Error("Login failed");
-    }
-    return response.json();
-};
-
-export const fetchItems = async () => { //TODO: remove and use above
-    const response = await fetch("http://localhost:8085/article/all");
-    if (!response.ok) {
-        throw new Error("fetching items failed");
-    }
-    return response.json();
+  const response = await fetch(
+    "http://localhost:8085/account/all?email=" +
+      loginData.email +
+      "&session=" +
+      loginData.session,
+  );
+  if (!response.ok) {
+    throw new Error("Login failed");
+  }
+  return response.json();
 };
 
 export const fetchStatisticsVolume = async (loginData: User) => {
-    const response = await fetch("http://localhost:8085/statistics/volume?email=" + loginData.email + "&session=" + loginData.session);
-    if (!response.ok) {
-        throw new Error("fetching satistics Volume failed");
-    }
-    return response.json();
+  const response = await fetch(
+    "http://localhost:8085/statistics/volume?email=" +
+      loginData.email +
+      "&session=" +
+      loginData.session,
+  );
+  if (!response.ok) {
+    throw new Error("fetching satistics Volume failed");
+  }
+  return response.json();
 };
 
 export const fetchStatisticsRevenue = async (loginData: User) => {
-    const response = await fetch("http://localhost:8085/statistics/revenue?email=" + loginData.email + "&session=" + loginData.session);
-    if (!response.ok) {
-        throw new Error("fetching satistics Revenue failed");
-    }
-    return response.json();
+  const response = await fetch(
+    "http://localhost:8085/statistics/revenue?email=" +
+      loginData.email +
+      "&session=" +
+      loginData.session,
+  );
+  if (!response.ok) {
+    throw new Error("fetching satistics Revenue failed");
+  }
+  return response.json();
 };
 
 export const editAccount = async (customer: CustomerType) => {
-    const response = await fetch('http://localhost:8085/customer?id=' + customer.id, {
-        method: 'PUT',
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(customer),
-    });
-    if (!response.ok) {
-        throw new Error('Fehler beim Löschen des Accounts');
-    }
-    return await response.json();
+  const response = await fetch(
+    "http://localhost:8085/customer?id=" + customer.id,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(customer),
+    },
+  );
+  if (!response.ok) {
+    throw new Error("Fehler beim Löschen des Accounts");
+  }
+  return await response.json();
 };
 
 export const orderPatch = async (order: OrderPatch) => {
-    const response = await fetch("http://localhost:8085/order?id=" + order.id + "&status=" + order.status, {
-            method: "PATCH",
-        }
-    );
-    if (!response.ok) {
-        throw new Error("Order patch failed");
-    }
-    return response.json();
+  const response = await fetch(
+    "http://localhost:8085/order?id=" + order.id + "&status=" + order.status,
+    {
+      method: "PATCH",
+    },
+  );
+  if (!response.ok) {
+    throw new Error("Order patch failed");
+  }
+  return response.json();
 };
 
 export const fetchOrderStatus = async (loginData: User) => {
-    const response = await fetch("http://localhost:8085/statistics/orderstatus?email=" + loginData.email + "&session=" + loginData.session);
-    if (!response.ok) {
-        throw new Error("fetching order status failed");
-    }
-    return response.json();
+  const response = await fetch(
+    "http://localhost:8085/statistics/orderstatus?email=" +
+      loginData.email +
+      "&session=" +
+      loginData.session,
+  );
+  if (!response.ok) {
+    throw new Error("fetching order status failed");
+  }
+  return response.json();
 };
 
 export const fetchStockPercent = async (loginData: User) => {
-    const response = await fetch("http://localhost:8085/statistics/stockpercent?email=" + loginData.email + "&session=" + loginData.session);
-    if (!response.ok) {
-        throw new Error("fetching stock% failed");
-    }
-    return response.json();
+  const response = await fetch(
+    "http://localhost:8085/statistics/stockpercent?email=" +
+      loginData.email +
+      "&session=" +
+      loginData.session,
+  );
+  if (!response.ok) {
+    throw new Error("fetching stock% failed");
+  }
+  return response.json();
 };
 
-
 export const fetchOrdersAdmin = async (loginData: User) => {
-    const response = await fetch("http://localhost:8085/order/all/all?email=" + loginData.email + "&session=" + loginData.session);
-    if (!response.ok) {
-        throw new Error("fetching admin orders failed");
-    }
-    return response.json();
+  const response = await fetch(
+    "http://localhost:8085/order/all/all?email=" +
+      loginData.email +
+      "&session=" +
+      loginData.session,
+  );
+  if (!response.ok) {
+    throw new Error("fetching admin orders failed");
+  }
+  return response.json();
 };
 
 export const updateCustomer = async (customer: CustomerType) => {
-    const response = await fetch('http://localhost:8085/customer?id=' + customer.id, {
-        method: 'PUT',
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(customer),
-    });
-    if (!response.ok) {
-        throw new Error('Fehler beim Ändern des Customers');
-    }
-    return await response.json();
-}
+  const response = await fetch(
+    "http://localhost:8085/customer?id=" + customer.id,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(customer),
+    },
+  );
+  if (!response.ok) {
+    throw new Error("Fehler beim Ändern des Customers");
+  }
+  return await response.json();
+};
 
-export const fetchFarmingStationItemList = async (): Promise<ItemWithFSImage[]> => {
-    const response = await fetch('http://localhost:8085/farm/articles');
-    if (!response.ok)
-        throw new Error('Failed to fetch items');
-    return response.json();
-}
+export const fetchFarmingStationItemList = async (): Promise<
+  ItemWithFSImage[]
+> => {
+  const response = await fetch("http://localhost:8085/farm/articles");
+  if (!response.ok) throw new Error("Failed to fetch items");
+  return response.json();
+};
 
 export const submitItem = async (item: Item) => {
-    const response = await fetch("http://localhost:8085/article", {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(item),
-    });
-    if (!response.ok) {
-        throw new Error("Login failed");
-    }
-    return response.json();
+  const response = await fetch("http://localhost:8085/article", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(item),
+  });
+  if (!response.ok) {
+    throw new Error("Login failed");
+  }
+  return response.json();
 };
 
 export const deleteItemQuery = async (uuid: string) => {
-    const response = await fetch("http://localhost:8085/article?uuid=" + uuid, {
-        method: "DELETE"
-    });
-    if (!response.ok) {
-        throw new Error("Login failed");
-    }
-    return response.json();
+  const response = await fetch("http://localhost:8085/article?uuid=" + uuid, {
+    method: "DELETE",
+  });
+  if (!response.ok) {
+    throw new Error("Login failed");
+  }
+  return response.json();
 };
 
 export const updateAccountAdmin = async (account: AccountType, user: User) => {
-    const response = await fetch('http://localhost:8085/account/admin?email=' + user.email + "&uuid=" + user.session + "&id=" + account.id + "&admin=" + account.admin, {
-        method: 'POST',
-    });
-    if (!response.ok) {
-        throw new Error('Fehler beim Ändern des Customers');
-    }
-    return await response.json();
-}
+  const response = await fetch(
+    "http://localhost:8085/account/admin?email=" +
+      user.email +
+      "&uuid=" +
+      user.session +
+      "&id=" +
+      account.id +
+      "&admin=" +
+      account.admin,
+    {
+      method: "POST",
+    },
+  );
+  if (!response.ok) {
+    throw new Error("Fehler beim Ändern des Customers");
+  }
+  return await response.json();
+};
 
 export const updateItemAdmin = async (item: Item) => {
-    const response = await fetch('http://localhost:8085/article?uuid=' + item.uuid, {
-        method: 'PUT',
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(item),
-    });
-    if (!response.ok) {
-        throw new Error('Fehler beim Ändern des Items');
-    }
-    return await response.json();
-}
+  const response = await fetch(
+    "http://localhost:8085/article?uuid=" + item.uuid,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(item),
+    },
+  );
+  if (!response.ok) {
+    throw new Error("Fehler beim Ändern des Items");
+  }
+  return await response.json();
+};

01-frontend/src/index.css

@@ -1,73 +1,73 @@
 :root {
-    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 400;
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
 
-    color-scheme: light dark;
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
 
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
 }
 
 a:hover {
-    color: #535bf2;
+  color: #535bf2;
 }
 
 body {
-    margin: 0;
-    display: flex;
-    place-items: center;
-    min-width: 320px;
-    min-height: 100vh;
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
 }
 
 h1 {
-    font-size: 3.2em;
-    line-height: 1.1;
+  font-size: 3.2em;
+  line-height: 1.1;
 }
 
 button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
-    font-size: 1em;
-    font-weight: 500;
-    font-family: inherit;
-    background-color: #1a1a1a;
-    cursor: pointer;
-    transition: border-color 0.25s;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
 }
 
 button:hover {
-    border-color: #646cff;
+  border-color: #646cff;
 }
 
 button:focus,
 button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
+  outline: 4px auto -webkit-focus-ring-color;
 }
 
 @media (prefers-color-scheme: light) {
-    :root {
-        color: #213547;
-        background-color: #ffffff;
-    }
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
 
-    a:hover {
-        color: #747bff;
-    }
+  a:hover {
+    color: #747bff;
+  }
 
-    button {
-        background-color: #f9f9f9;
-    }
+  button {
+    background-color: #f9f9f9;
+  }
 }

01-frontend/src/main.tsx

@@ -1,15 +1,15 @@
-import './components/i18n/i18n';
-import {StrictMode} from 'react';
-import {createRoot} from 'react-dom/client';
-import './index.css';
-import App from './App.tsx';
+import "./components/i18n/i18n";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
 
-const rootElement = document.getElementById('root');
+const rootElement = document.getElementById("root");
 if (!rootElement) throw new Error("Root element not found");
 
 const root = createRoot(rootElement);
 root.render(
-    <StrictMode>
-        <App/>
-    </StrictMode>
-);
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

01-frontend/src/pages/Account.tsx

@@ -1,239 +1,252 @@
 import {
-    Box,
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    Divider,
-    Paper,
-    Stack,
-    TextField,
-    Typography,
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  Paper,
+  Stack,
+  TextField,
+  Typography,
 } from "@mui/material";
-import {useQuery} from "@tanstack/react-query";
-import {useEffect, useState} from "react";
-import {useTranslation} from "react-i18next";
-import {useNavigate} from "react-router-dom";
-import {CustomerType, User} from "../components/Account";
-import {useAccount} from "../helper/AccountProvider";
-import {deleteAccount, editAccount, fetchCustomer} from "../helper/query/Queries";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { CustomerType, User } from "../components/Account";
+import { useAccount } from "../helper/AccountProvider";
+import {
+  deleteAccount,
+  editAccount,
+  fetchCustomer,
+} from "../helper/query/Queries";
 import "./pages.css";
 
 export default function Account() {
-    const {t} = useTranslation();
-    const navigate = useNavigate();
-    const {user: userData, logout} = useAccount();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { user: userData, logout } = useAccount();
 
-    const [user, setUser] = useState<CustomerType>({
-        name: "",
-        surname: "",
-        address: "",
-        country: "",
-        zip: "",
-        id: userData?.customerId || 0,
-    });
+  const [user, setUser] = useState<CustomerType>({
+    name: "",
+    surname: "",
+    address: "",
+    country: "",
+    zip: "",
+    id: userData?.customerId || 0,
+  });
 
-    const [userDataState, setUserDataState] = useState<User>(userData || {
-        password: "",
-        email: "",
-        customerId: 0,
-        session: "",
-        isAdmin: false,
-    });
+  const [userDataState, setUserDataState] = useState<User>(
+    userData || {
+      password: "",
+      email: "",
+      customerId: 0,
+      session: "",
+      isAdmin: false,
+    },
+  );
 
-    useEffect(() => {
-        if (userData?.customerId) {
-            setUser((prev) => ({
-                ...prev,
-                id: userData.customerId,
-            }));
-        }
-    }, [userData]);
+  useEffect(() => {
+    if (userData?.customerId) {
+      setUser((prev) => ({
+        ...prev,
+        id: userData.customerId,
+      }));
+    }
+  }, [userData]);
 
-    const [edit, setEdit] = useState(false);
-    const [form, setForm] = useState(user);
+  const [edit, setEdit] = useState(false);
+  const [form, setForm] = useState(user);
 
-    // Neu: Passwort-Dialog-Status und Passwort-Input
-    const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
-    const [passwordInput, setPasswordInput] = useState("");
+  // Neu: Passwort-Dialog-Status und Passwort-Input
+  const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
+  const [passwordInput, setPasswordInput] = useState("");
 
-    const {data} = useQuery<CustomerType>({
-        queryKey: ["fetchCustomer", userData?.customerId],
-        queryFn: () => fetchCustomer(userData?.customerId || 0),
-        retry: 1,
-        retryDelay: 1000,
-    });
+  const { data } = useQuery<CustomerType>({
+    queryKey: ["fetchCustomer", userData?.customerId],
+    queryFn: () => fetchCustomer(userData?.customerId || 0),
+    retry: 1,
+    retryDelay: 1000,
+  });
 
-    const {refetch: deleteRefetch} = useQuery({
-        queryKey: ["deleteAccount", userDataState],
-        queryFn: () => deleteAccount(userDataState!),
-        enabled: false,
-    });
+  const { refetch: deleteRefetch } = useQuery({
+    queryKey: ["deleteAccount", userDataState],
+    queryFn: () => deleteAccount(userDataState!),
+    enabled: false,
+  });
 
-    const {refetch: editRefetch} = useQuery({
-        queryKey: ["editAccount", form],
-        queryFn: () => editAccount(form),
-        enabled: false,
-    });
+  const { refetch: editRefetch } = useQuery({
+    queryKey: ["editAccount", form],
+    queryFn: () => editAccount(form),
+    enabled: false,
+  });
 
-    useEffect(() => {
-        if (data) {
-            setUser(data);
-            setForm(data);
-        }
-    }, [data]);
+  useEffect(() => {
+    if (data) {
+      setUser(data);
+      setForm(data);
+    }
+  }, [data]);
 
-    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 = async () => {
-        setUser(form);
-        setEdit(false);
-        await editRefetch();
-    };
+  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 = async () => {
+    setUser(form);
+    setEdit(false);
+    await editRefetch();
+  };
 
-    // Neu: Passwort-Dialog öffnen
-    const handleDeleteClick = () => {
-        setPasswordInput("");
-        setPasswordDialogOpen(true);
-    };
+  // Neu: Passwort-Dialog öffnen
+  const handleDeleteClick = () => {
+    setPasswordInput("");
+    setPasswordDialogOpen(true);
+  };
 
-    // Neu: Passwort-Dialog schließen
-    const handlePasswordDialogClose = () => {
-        setPasswordDialogOpen(false);
-    };
+  // Neu: Passwort-Dialog schließen
+  const handlePasswordDialogClose = () => {
+    setPasswordDialogOpen(false);
+  };
 
-    // Neu: Passwort-Eingabe bestätigen
-    const handlePasswordConfirm = async () => {
-        if (!passwordInput) {
-            alert(t("pleaseEnterPassword"));
-            return;
-        }
-        // Passwort in Form aktualisieren (hier z.B. als field "password", anpassen falls anders)
-        setUserDataState({...userDataState, password: passwordInput});
+  // Neu: Passwort-Eingabe bestätigen
+  const handlePasswordConfirm = async () => {
+    if (!passwordInput) {
+      alert(t("pleaseEnterPassword"));
+      return;
+    }
+    // Passwort in Form aktualisieren (hier z.B. als field "password", anpassen falls anders)
+    setUserDataState({ ...userDataState, password: passwordInput });
 
-        // Erst User-Daten mit Passwort aktualisieren
-        try {
-            await editRefetch(); // Achtung: editRefetch verwendet immer noch alten form, daher call direkt mit updatedForm:
-            // Danach Account löschen
-            await deleteRefetch();
-            logout();
-            navigate("/");
-        } catch (error) {
-            console.error("Fehler beim Löschen des Accounts:", error);
-            alert(t("deleteAccountFailed"));
-        } finally {
-            setPasswordDialogOpen(false);
-        }
-    };
+    // Erst User-Daten mit Passwort aktualisieren
+    try {
+      await editRefetch(); // Achtung: editRefetch verwendet immer noch alten form, daher call direkt mit updatedForm:
+      // Danach Account löschen
+      await deleteRefetch();
+      logout();
+      navigate("/");
+    } catch (error) {
+      console.error("Fehler beim Löschen des Accounts:", error);
+      alert(t("deleteAccountFailed"));
+    } finally {
+      setPasswordDialogOpen(false);
+    }
+  };
 
-    return (
-        <Box
-            className="page-background page-background-center"
-            sx={{minHeight: "100vh", justifyContent: "flex-start", pt: 4}}
-        >
-            <Paper elevation={3} sx={{p: 4, maxWidth: 500, width: "100%", mx: "auto"}}>
-                <Typography variant="h4" gutterBottom>
-                    {t("myAccount")}
-                </Typography>
-                <Divider sx={{mb: 3}}/>
-                <Stack spacing={2}>
-                    <TextField
-                        label={t("name")}
-                        name="name"
-                        value={edit ? form.name : user.name}
-                        onChange={handleChange}
-                        disabled={!edit}
-                        fullWidth
-                    />
-                    <TextField
-                        label={t("surname")}
-                        name="surname"
-                        value={edit ? form.surname : user.surname}
-                        onChange={handleChange}
-                        disabled={!edit}
-                        fullWidth
-                    />
-                    <TextField
-                        label={t("address")}
-                        name="address"
-                        value={edit ? form.address : user.address}
-                        onChange={handleChange}
-                        disabled={!edit}
-                        fullWidth
-                    />
-                    <TextField
-                        label={t("country")}
-                        name="country"
-                        value={edit ? form.country : user.country}
-                        onChange={handleChange}
-                        disabled={!edit}
-                        fullWidth
-                    />
-                    <TextField
-                        label={t("zip")}
-                        name="zip"
-                        value={edit ? form.zip : user.zip}
-                        onChange={handleChange}
-                        disabled={!edit}
-                        fullWidth
-                    />
-                </Stack>
-                <Box sx={{display: "flex", gap: 2, mt: 4}}>
-                    {edit ? (
-                        <>
-                            <Button variant="contained" color="primary" onClick={handleSave}>
-                                {t("save")}
-                            </Button>
-                            <Button variant="outlined" color="secondary" onClick={handleCancel}>
-                                {t("cancel")}
-                            </Button>
-                        </>
-                    ) : (
-                        <Button variant="contained" color="primary" onClick={handleEdit}>
-                            {t("edit")}
-                        </Button>
-                    )}
-                    <Button
-                        variant="outlined"
-                        color="error"
-                        onClick={handleDeleteClick} // Neu: Passwort-Dialog öffnen
-                        sx={{marginLeft: "auto"}}
-                    >
-                        {t("deleteAccount")}
-                    </Button>
-                </Box>
-            </Paper>
-
-            {/* Passwort-Dialog */}
-            <Dialog open={passwordDialogOpen} onClose={handlePasswordDialogClose}>
-                <DialogTitle>{t("confirmDeleteAccount")}</DialogTitle>
-                <DialogContent>
-                    <Typography>{t("enterPasswordToConfirmDeletion")}</Typography>
-                    <TextField
-                        autoFocus
-                        margin="dense"
-                        label={t("password")}
-                        type="password"
-                        fullWidth
-                        variant="standard"
-                        value={passwordInput}
-                        onChange={(e) => setPasswordInput(e.target.value)}
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={handlePasswordDialogClose}>{t("cancel")}</Button>
-                    <Button color="error" onClick={handlePasswordConfirm}>
-                        {t("delete")}
-                    </Button>
-                </DialogActions>
-            </Dialog>
+  return (
+    <Box
+      className="page-background page-background-center"
+      sx={{ minHeight: "100vh", justifyContent: "flex-start", pt: 4 }}
+    >
+      <Paper
+        elevation={3}
+        sx={{ p: 4, maxWidth: 500, width: "100%", mx: "auto" }}
+      >
+        <Typography variant="h4" gutterBottom>
+          {t("myAccount")}
+        </Typography>
+        <Divider sx={{ mb: 3 }} />
+        <Stack spacing={2}>
+          <TextField
+            label={t("name")}
+            name="name"
+            value={edit ? form.name : user.name}
+            onChange={handleChange}
+            disabled={!edit}
+            fullWidth
+          />
+          <TextField
+            label={t("surname")}
+            name="surname"
+            value={edit ? form.surname : user.surname}
+            onChange={handleChange}
+            disabled={!edit}
+            fullWidth
+          />
+          <TextField
+            label={t("address")}
+            name="address"
+            value={edit ? form.address : user.address}
+            onChange={handleChange}
+            disabled={!edit}
+            fullWidth
+          />
+          <TextField
+            label={t("country")}
+            name="country"
+            value={edit ? form.country : user.country}
+            onChange={handleChange}
+            disabled={!edit}
+            fullWidth
+          />
+          <TextField
+            label={t("zip")}
+            name="zip"
+            value={edit ? form.zip : user.zip}
+            onChange={handleChange}
+            disabled={!edit}
+            fullWidth
+          />
+        </Stack>
+        <Box sx={{ display: "flex", gap: 2, mt: 4 }}>
+          {edit ? (
+            <>
+              <Button variant="contained" color="primary" onClick={handleSave}>
+                {t("save")}
+              </Button>
+              <Button
+                variant="outlined"
+                color="secondary"
+                onClick={handleCancel}
+              >
+                {t("cancel")}
+              </Button>
+            </>
+          ) : (
+            <Button variant="contained" color="primary" onClick={handleEdit}>
+              {t("edit")}
+            </Button>
+          )}
+          <Button
+            variant="outlined"
+            color="error"
+            onClick={handleDeleteClick} // Neu: Passwort-Dialog öffnen
+            sx={{ marginLeft: "auto" }}
+          >
+            {t("deleteAccount")}
+          </Button>
         </Box>
-    );
+      </Paper>
+
+      {/* Passwort-Dialog */}
+      <Dialog open={passwordDialogOpen} onClose={handlePasswordDialogClose}>
+        <DialogTitle>{t("confirmDeleteAccount")}</DialogTitle>
+        <DialogContent>
+          <Typography>{t("enterPasswordToConfirmDeletion")}</Typography>
+          <TextField
+            autoFocus
+            margin="dense"
+            label={t("password")}
+            type="password"
+            fullWidth
+            variant="standard"
+            value={passwordInput}
+            onChange={(e) => setPasswordInput(e.target.value)}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handlePasswordDialogClose}>{t("cancel")}</Button>
+          <Button color="error" onClick={handlePasswordConfirm}>
+            {t("delete")}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
 }

01-frontend/src/pages/AdminPanel.tsx

@@ -1,81 +1,111 @@
-import {AccountCircle, Category, QueryStats, ReceiptLong,} from "@mui/icons-material";
-import {Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, useTheme,} from "@mui/material";
-import {useState} from "react";
-import {useTranslation} from "react-i18next";
+import {
+  AccountCircle,
+  Category,
+  QueryStats,
+  ReceiptLong,
+} from "@mui/icons-material";
+import {
+  Box,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  useTheme,
+} from "@mui/material";
+import { fetchItemList } from "../helper/query/Queries.tsx";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAccount } from "../helper/AccountProvider.tsx";
 import AccountsInfo from "../helper/adminpanel/AccountsInfo";
 import ItemInfo from "../helper/adminpanel/ItemsInfo";
 import OrdersInfo from "../helper/adminpanel/OrdersInfo";
 import StatisticsInfo from "../helper/adminpanel/StatisticsInfo";
+import Item from "../components/Item";
 
 export default function AdminPanel() {
-    const {t} = useTranslation();
-    const theme = useTheme();
-    const [infoStatus, setInfoStatus] = useState<string>("statistics");
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const [infoStatus, setInfoStatus] = useState<string>("statistics");
 
-    const handleInfoStatus = (path: string) => {
-        setInfoStatus(path);
-    };
+  const handleInfoStatus = (path: string) => {
+    setInfoStatus(path);
+  };
 
-    const renderContent = () => {
-        switch (infoStatus) {
-            case "statistics":
-                return <StatisticsInfo/>;
-            case "orders":
-                return <OrdersInfo/>;
-            case "accounts":
-                return <AccountsInfo/>;
-            case "items":
-                return <ItemInfo/>;
-            default:
-                return <StatisticsInfo/>;
-        }
-    };
+  const { user: loginData } = useAccount();
 
-    const menuItems = [
-        {key: "statistics", icon: <QueryStats/>, label: t("statistics")},
-        {key: "orders", icon: <ReceiptLong/>, label: t("orders")},
-        {key: "accounts", icon: <AccountCircle/>, label: t("accounts")},
-        {key: "items", icon: <Category/>, label: t("items")},
-    ];
+  const { data: itemList, isLoading } = useQuery<Item[]>({
+    queryKey: ["fetchItemList", loginData],
+    queryFn: () => fetchItemList(),
+    retry: 3,
+    retryDelay: 1000,
+  });
 
-    return (
-        <Box className="page-container" sx={{color: theme.palette.text.primary}}>
-            <div
-                className="home-page-background"
-                style={{
-                    color: theme.palette.text.primary,
-                    backgroundColor: theme.palette.background.paper,
-                }}>
-                {/* Sidebar */}
-                <Box className="sidebar">
-                    <nav aria-label={t("mainAdminMenu")}>
-                        <List>
-                            {menuItems.map((item) => (
-                                <ListItem key={item.key} disablePadding>
-                                    <ListItemButton
-                                        selected={infoStatus === item.key}
-                                        onClick={() => handleInfoStatus(item.key)}
-                                        sx={{
-                                            "&.Mui-selected": {
-                                                bgcolor: theme.palette.action.selected,
-                                                color: theme.palette.primary.main,
-                                            },
-                                            "&:hover": {
-                                                bgcolor: theme.palette.action.hover,
-                                            },
-                                        }}>
-                                        <ListItemIcon sx={{color: "inherit"}}>{item.icon}</ListItemIcon>
-                                        <ListItemText primary={item.label}/>
-                                    </ListItemButton>
-                                </ListItem>
-                            ))}
-                        </List>
-                    </nav>
-                </Box>
+  const renderContent = (itemList: Item[]) => {
+    switch (infoStatus) {
+      case "statistics":
+        return <StatisticsInfo />;
+      case "orders":
+        return <OrdersInfo itemList={itemList} />;
+      case "accounts":
+        return <AccountsInfo />;
+      case "items":
+        return <ItemInfo itemList={itemList} />;
+      default:
+        return <StatisticsInfo />;
+    }
+  };
 
-                {/* Content */}
-                <Box className="page-background">{renderContent()}</Box>
-            </div>
+  const menuItems = [
+    { key: "statistics", icon: <QueryStats />, label: t("statistics") },
+    { key: "orders", icon: <ReceiptLong />, label: t("orders") },
+    { key: "accounts", icon: <AccountCircle />, label: t("accounts") },
+    { key: "items", icon: <Category />, label: t("items") },
+  ];
+
+  return (
+    <Box className="page-container" sx={{ color: theme.palette.text.primary }}>
+      <div
+        className="home-page-background"
+        style={{
+          color: theme.palette.text.primary,
+          backgroundColor: theme.palette.background.paper,
+        }}
+      >
+        {/* Sidebar */}
+        <Box className="sidebar">
+          <nav aria-label={t("mainAdminMenu")}>
+            <List>
+              {menuItems.map((item) => (
+                <ListItem key={item.key} disablePadding>
+                  <ListItemButton
+                    selected={infoStatus === item.key}
+                    onClick={() => handleInfoStatus(item.key)}
+                    sx={{
+                      "&.Mui-selected": {
+                        bgcolor: theme.palette.action.selected,
+                        color: theme.palette.primary.main,
+                      },
+                      "&:hover": {
+                        bgcolor: theme.palette.action.hover,
+                      },
+                    }}
+                  >
+                    <ListItemIcon sx={{ color: "inherit" }}>
+                      {item.icon}
+                    </ListItemIcon>
+                    <ListItemText primary={item.label} />
+                  </ListItemButton>
+                </ListItem>
+              ))}
+            </List>
+          </nav>
         </Box>
-    );
+
+        {/* Content */}
+        <Box className="page-background">{renderContent(itemList)}</Box>
+      </div>
+    </Box>
+  );
 }

01-frontend/src/pages/Contact.tsx

@@ -1,91 +1,130 @@
-import {Box, Divider, Typography} from "@mui/material";
+import { Box, Divider, Typography } from "@mui/material";
 import "./pages.css";
 
 export default function Impressum() {
-    return (
-        <Box className="impressum-container">
-            <Typography variant="h4" sx={{color: 'text.primary', mb: 2}}>
-                Impressum
-            </Typography>
+  return (
+    <Box className="impressum-container">
+      <Typography variant="h4" sx={{ color: "text.primary", mb: 2 }}>
+        Impressum
+      </Typography>
 
-            <Typography variant="body1" sx={{color: 'text.primary', mb: 4}}>
-                Hochschule für Technik und Wirtschaft<br/>
-                des Saarlandes<br/>
-                Goebenstraße 40<br/>
-                66117 Saarbrücken<br/><br/>
-                Telefon: (0681) 58 67 - 0<br/>
-                Telefax: (0681) 58 67 - 122<br/>
-                E-Mail: info@htwsaar.de<br/><br/>
-                Aufsichtsbehörde:<br/>
-                Ministerium der Finanzen und für Wissenschaft des Saarlandes
-            </Typography>
+      <Typography variant="body1" sx={{ color: "text.primary", mb: 4 }}>
+        Hochschule für Technik und Wirtschaft
+        <br />
+        des Saarlandes
+        <br />
+        Goebenstraße 40
+        <br />
+        66117 Saarbrücken
+        <br />
+        <br />
+        Telefon: (0681) 58 67 - 0<br />
+        Telefax: (0681) 58 67 - 122
+        <br />
+        E-Mail: info@htwsaar.de
+        <br />
+        <br />
+        Aufsichtsbehörde:
+        <br />
+        Ministerium der Finanzen und für Wissenschaft des Saarlandes
+      </Typography>
 
-            <Divider className="contact-divider"/>
+      <Divider className="contact-divider" />
 
-            <Typography variant="h5" sx={{color: 'text.primary', mt: 4, mb: 2}}>
-                Datenschutzerklärung
-            </Typography>
+      <Typography variant="h5" sx={{ color: "text.primary", mt: 4, mb: 2 }}>
+        Datenschutzerklärung
+      </Typography>
 
-            <Typography variant="body1" sx={{color: 'text.primary', mb: 2}}>
-                Personenbezogene Daten (nachfolgend zumeist nur „Daten“ genannt) ...
-            </Typography>
+      <Typography variant="body1" sx={{ color: "text.primary", mb: 2 }}>
+        Personenbezogene Daten (nachfolgend zumeist nur „Daten“ genannt) ...
+      </Typography>
 
-            <Typography variant="body1" sx={{color: 'text.primary', mb: 2}}>
-                Gemäß Art. 4 Ziffer 1. der Verordnung (EU) 2016/679, also der Datenschutz-Grundverordnung ...
-            </Typography>
+      <Typography variant="body1" sx={{ color: "text.primary", mb: 2 }}>
+        Gemäß Art. 4 Ziffer 1. der Verordnung (EU) 2016/679, also der
+        Datenschutz-Grundverordnung ...
+      </Typography>
 
-            <Typography variant="body1" sx={{color: 'text.primary', mb: 2}}>
-                Unsere Datenschutzerklärung ist wie folgt gegliedert:<br/>
-                I. Informationen über uns als Verantwortliche<br/>
-                II. Rechte der Nutzer und Betroffenen<br/>
-                III. Informationen zur Datenverarbeitung
-            </Typography>
+      <Typography variant="body1" sx={{ color: "text.primary", mb: 2 }}>
+        Unsere Datenschutzerklärung ist wie folgt gegliedert:
+        <br />
+        I. Informationen über uns als Verantwortliche
+        <br />
+        II. Rechte der Nutzer und Betroffenen
+        <br />
+        III. Informationen zur Datenverarbeitung
+      </Typography>
 
-            <Typography variant="h6" sx={{color: 'text.primary', mt: 4, mb: 1}}>
-                I. Informationen über uns als Verantwortliche
-            </Typography>
+      <Typography variant="h6" sx={{ color: "text.primary", mt: 4, mb: 1 }}>
+        I. Informationen über uns als Verantwortliche
+      </Typography>
 
-            <Typography variant="body1" sx={{color: 'text.primary', mb: 2}}>
-                Verantwortlicher Anbieter dieses Internetauftritts ...
-            </Typography>
+      <Typography variant="body1" sx={{ color: "text.primary", mb: 2 }}>
+        Verantwortlicher Anbieter dieses Internetauftritts ...
+      </Typography>
 
-            <Typography variant="h6" sx={{color: 'text.primary', mt: 4, mb: 1}}>
-                II. Rechte der Nutzer und Betroffenen
-            </Typography>
+      <Typography variant="h6" sx={{ color: "text.primary", mt: 4, mb: 1 }}>
+        II. Rechte der Nutzer und Betroffenen
+      </Typography>
 
-            <Typography variant="body1" sx={{color: 'text.primary', mb: 2}}>
-                Mit Blick auf die nachfolgend noch näher beschriebene Datenverarbeitung haben die Nutzer und Betroffenen
-                ...
-            </Typography>
+      <Typography variant="body1" sx={{ color: "text.primary", mb: 2 }}>
+        Mit Blick auf die nachfolgend noch näher beschriebene Datenverarbeitung
+        haben die Nutzer und Betroffenen ...
+      </Typography>
 
-            <Box component="ul" sx={{listStyle: 'none', p: 0, m: 0}}>
-                <li><Typography variant="body2" sx={{color: 'text.primary', mb: 0.5}}> • Auskunft über die verarbeiteten
-                    Daten (Art. 15 DSGVO)</Typography></li>
-                <li><Typography variant="body2" sx={{color: 'text.primary', mb: 0.5}}> • Berichtigung unrichtiger Daten
-                    (Art. 16 DSGVO)</Typography></li>
-                <li><Typography variant="body2" sx={{color: 'text.primary', mb: 0.5}}> • Löschung der Daten (Art. 17
-                    DSGVO)</Typography></li>
-                <li><Typography variant="body2" sx={{color: 'text.primary', mb: 0.5}}> • Einschränkung der Verarbeitung
-                    (Art. 18 DSGVO)</Typography></li>
-                <li><Typography variant="body2" sx={{color: 'text.primary', mb: 0.5}}> • Datenübertragbarkeit (Art. 20
-                    DSGVO)</Typography></li>
-            </Box>
+      <Box component="ul" sx={{ listStyle: "none", p: 0, m: 0 }}>
+        <li>
+          <Typography variant="body2" sx={{ color: "text.primary", mb: 0.5 }}>
+            {" "}
+            • Auskunft über die verarbeiteten Daten (Art. 15 DSGVO)
+          </Typography>
+        </li>
+        <li>
+          <Typography variant="body2" sx={{ color: "text.primary", mb: 0.5 }}>
+            {" "}
+            • Berichtigung unrichtiger Daten (Art. 16 DSGVO)
+          </Typography>
+        </li>
+        <li>
+          <Typography variant="body2" sx={{ color: "text.primary", mb: 0.5 }}>
+            {" "}
+            • Löschung der Daten (Art. 17 DSGVO)
+          </Typography>
+        </li>
+        <li>
+          <Typography variant="body2" sx={{ color: "text.primary", mb: 0.5 }}>
+            {" "}
+            • Einschränkung der Verarbeitung (Art. 18 DSGVO)
+          </Typography>
+        </li>
+        <li>
+          <Typography variant="body2" sx={{ color: "text.primary", mb: 0.5 }}>
+            {" "}
+            • Datenübertragbarkeit (Art. 20 DSGVO)
+          </Typography>
+        </li>
+      </Box>
 
-            <Typography variant="h6" sx={{color: 'text.primary', mt: 4, mb: 1}}>
-                III. Informationen zur Datenverarbeitung
-            </Typography>
+      <Typography variant="h6" sx={{ color: "text.primary", mt: 4, mb: 1 }}>
+        III. Informationen zur Datenverarbeitung
+      </Typography>
 
-            <Typography variant="body1" sx={{color: 'text.primary', mb: 2}}>
-                Ihre bei Nutzung unseres Internetauftritts verarbeiteten Daten ...
-            </Typography>
+      <Typography variant="body1" sx={{ color: "text.primary", mb: 2 }}>
+        Ihre bei Nutzung unseres Internetauftritts verarbeiteten Daten ...
+      </Typography>
 
-            {/* Du kannst einfach alle weiteren Absätze so fortsetzen – copy & paste,
+      {/* Du kannst einfach alle weiteren Absätze so fortsetzen – copy & paste,
                 jeweils in: <Typography variant="body1" sx={{ color: 'text.primary' }}>…</Typography> */}
 
-            <Typography variant="body2" sx={{color: 'text.primary', mt: 4}}>
-                Mehr Infos unter: <a href="https://www.cloudflare.com/privacypolicy/" target="_blank"
-                                     rel="noopener noreferrer">CloudFlare Datenschutzerklärung</a>
-            </Typography>
-        </Box>
-    );
+      <Typography variant="body2" sx={{ color: "text.primary", mt: 4 }}>
+        Mehr Infos unter:{" "}
+        <a
+          href="https://www.cloudflare.com/privacypolicy/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          CloudFlare Datenschutzerklärung
+        </a>
+      </Typography>
+    </Box>
+  );
 }

01-frontend/src/pages/FSComponents.tsx

@@ -1,106 +1,142 @@
-import {Box, Button, Typography, useTheme} from "@mui/material";
-import {useTranslation} from "react-i18next";
-import {useState} from "react";
-import {useQuery} from "@tanstack/react-query";
-import {useBasket} from "../helper/BasketProvider";
+import { Box, Button, Typography, useTheme } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useBasket } from "../helper/BasketProvider";
 import ItemCard from "../helper/homepage/ItemCard";
-import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
+import AddShoppingCartIcon from "@mui/icons-material/AddShoppingCart";
 
-import farmingStation from '../assets/fscomponents/fs_components_0.png';
-import {ItemWithFSImage} from "../components/Item";
-import {fetchFarmingStationItemList} from "../helper/query/Queries";
+import farmingStation from "../assets/fscomponents/fs_components_0.png";
+import { ItemWithFSImage } from "../components/Item";
+import { fetchFarmingStationItemList } from "../helper/query/Queries";
 
-"../components/Item";
+("../components/Item");
 
 export default function FSComponents() {
-    const {t} = useTranslation();
-    const theme = useTheme();
-    const {addToBasket} = useBasket();
-    const [hoverIndex, setHoverIndex] = useState<number | null>(null);
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { addToBasket } = useBasket();
+  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
 
-    // Sehr sehr dummer Weg das zu machen, aber wird später noch refactored
-    const wantedIds = ["60", "67", "68", "69", "70", "71", "72", "73", "74", "75"];
+  // Sehr sehr dummer Weg das zu machen, aber wird später noch refactored
+  const wantedIds = [
+    "60",
+    "67",
+    "68",
+    "69",
+    "70",
+    "71",
+    "72",
+    "73",
+    "74",
+    "75",
+  ];
 
-    // Daten mit react-query laden
-    const {data = [], isLoading, error} = useQuery<ItemWithFSImage[]>({
-        queryKey: ['fetchFarmingStationItemList'],
-        queryFn: fetchFarmingStationItemList,
-        retry: 3,
-        retryDelay: 1000,
+  // Daten mit react-query laden
+  const {
+    data = [],
+    isLoading,
+    error,
+  } = useQuery<ItemWithFSImage[]>({
+    queryKey: ["fetchFarmingStationItemList"],
+    queryFn: fetchFarmingStationItemList,
+    retry: 3,
+    retryDelay: 1000,
+  });
+
+  // Button-Funktion: alle gefilterten Items in den Warenkorb packen
+  const handleAddAllToCart = () => {
+    data.forEach((item) => {
+      addToBasket(item, 1);
     });
+  };
 
-    // Button-Funktion: alle gefilterten Items in den Warenkorb packen
-    const handleAddAllToCart = () => {
-        data.forEach(item => {
-            addToBasket(item, 1);
-        });
-    };
+  if (isLoading) return <Typography>{t("loading")}</Typography>;
+  if (error)
+    return <Typography color="error">{t("errorLoadingItems")}</Typography>;
 
-    if (isLoading) return <Typography>{t('loading')}</Typography>;
-    if (error) return <Typography color="error">{t('errorLoadingItems')}</Typography>;
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        display: "flex",
+        maxWidth: 1600,
+        mx: "auto",
+        pt: 2,
+        height: "100vh",
+      }}
+    >
+      {/* Bild links */}
+      <Box
+        sx={{
+          width: "auto",
+          height: "90vh",
+          position: "sticky",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 2,
+          overflow: "hidden",
+        }}
+      >
+        <Box
+          component="img"
+          src={
+            hoverIndex !== null ? data[hoverIndex].farmImage : farmingStation
+          }
+          alt={t("componentsFarmingStation")}
+          sx={{
+            width: "100%",
+            height: "auto",
+            maxHeight: "80vh",
+            objectFit: "contain",
+            borderRadius: 2,
+            border: `4px solid ${theme.palette.primary.main}`,
+            marginBottom: 2,
+          }}
+        />
+        <Button
+          variant="contained"
+          fullWidth
+          startIcon={<AddShoppingCartIcon />}
+          onClick={handleAddAllToCart}
+        >
+          {t("addAllToCart")}
+        </Button>
+      </Box>
 
-    return (
-        <Box sx={{width: '100%', display: 'flex', maxWidth: 1600, mx: 'auto', pt: 2, height: '100vh'}}>
-            {/* Bild links */}
-            <Box sx={{
-                width: 'auto',
-                height: '90vh',
-                position: 'sticky',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                padding: 2,
-                overflow: 'hidden',
-            }}>
-                <Box
-                    component="img"
-                    src={hoverIndex !== null ? data[hoverIndex].farmImage : farmingStation}
-                    alt={t('componentsFarmingStation')}
-                    sx={{
-                        width: '100%',
-                        height: 'auto',
-                        maxHeight: '80vh',
-                        objectFit: 'contain',
-                        borderRadius: 2,
-                        border: `4px solid ${theme.palette.primary.main}`,
-                        marginBottom: 2,
-                    }}
-                />
-                <Button
-                    variant="contained"
-                    fullWidth
-                    startIcon={<AddShoppingCartIcon/>}
-                    onClick={handleAddAllToCart}
-                >
-                    {t('addAllToCart')}
-                </Button>
-            </Box>
-
-            {/* Items rechts */}
-            <Box sx={{
-                width: '60%',
-                height: '90vh',
-                overflowY: 'auto',
-                padding: 2,
-            }}>
-                <Box mb={2}>
-                    <Typography variant="h4" align="center" gutterBottom sx={{color: 'text.primary'}}>
-                        {t('componentsFarmingStation')}
-                    </Typography>
-                </Box>
-                <Box className="cardgrid">
-                    {data.map((item, index) => (
-                        <div
-                            key={item.id}
-                            onMouseEnter={() => setHoverIndex(index)}
-                            onMouseLeave={() => setHoverIndex(null)}
-                        >
-                            <ItemCard item={item}/>
-                        </div>
-                    ))}
-                </Box>
-            </Box>
+      {/* Items rechts */}
+      <Box
+        sx={{
+          width: "60%",
+          height: "90vh",
+          overflowY: "auto",
+          padding: 2,
+        }}
+      >
+        <Box mb={2}>
+          <Typography
+            variant="h4"
+            align="center"
+            gutterBottom
+            sx={{ color: "text.primary" }}
+          >
+            {t("componentsFarmingStation")}
+          </Typography>
         </Box>
-    );
+        <Box className="cardgrid">
+          {data.map((item, index) => (
+            <div
+              key={item.id}
+              onMouseEnter={() => setHoverIndex(index)}
+              onMouseLeave={() => setHoverIndex(null)}
+            >
+              <ItemCard item={item} />
+            </div>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
 }

01-frontend/src/pages/Home.tsx

@@ -1,201 +1,206 @@
-import {Alert, Box, useTheme} from "@mui/material";
-import {useQuery} from "@tanstack/react-query";
-import {useEffect, useMemo, useRef, useState} from "react";
-import {useTranslation} from "react-i18next";
-import {useLocation, useNavigate} from "react-router-dom";
+import { Alert, Box, useTheme } from "@mui/material";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router-dom";
 import ItemWithImage from "../components/Item";
 import FilterItem from "../helper/homepage/FilterItem";
 import ItemCard from "../helper/homepage/ItemCard";
 import PriceSlider from "../helper/homepage/PriceSlider";
-import {fetchItemListWithImage} from '../helper/query/Queries';
+import { fetchItemListWithImage } from "../helper/query/Queries";
 import "./pages.css"; // Import der CSS-Datei
 
 export default function Home() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const theme = useTheme();
+  const [searchQuery, setSearchQuery] = useState<string | null>(null);
 
-    const {t} = useTranslation();
-    const navigate = useNavigate();
-    const location = useLocation();
-    const theme = useTheme();
-    const [searchQuery, setSearchQuery] = useState<string | null>(null);
+  const categoriesFilter = useMemo(
+    () => [
+      { value: "", label: t("allCategories") },
+      { value: "Seeds", label: t("seeds") },
+      { value: "GardenSupplies", label: t("gardenSupplies") },
+      { value: "TechnicalComponents", label: t("technicalComponents") },
+      { value: "Other", label: t("other") },
+    ],
+    [t],
+  );
 
-    const categoriesFilter = useMemo(() => [
-        {value: "", label: t("allCategories")},
-        {value: "Seeds", label: t("seeds")},
-        {value: "GardenSupplies", label: t("gardenSupplies")},
-        {value: "TechnicalComponents", label: t("technicalComponents")},
-        {value: "Other", label: t("other")}
-    ], [t]);
+  const ratingFilter = [
+    { value: "", label: t("allRatings") },
+    ...[5, 4, 3, 2, 1].map((value) => ({
+      value: value.toString(),
+      label: value.toString(),
+    })),
+  ];
 
-    const ratingFilter = [
-        {value: "", label: t('allRatings')},
-        ...[5, 4, 3, 2, 1].map(value => ({
-            value: value.toString(),
-            label: value.toString()
-        }))
-    ];
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [selectedRating, setSelectedRating] = useState<string | null>(null);
 
-    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-    const [selectedRating, setSelectedRating] = useState<string | null>(null);
+  const { data = [], isLoading } = useQuery<ItemWithImage[]>({
+    queryKey: ["fetchItemListWithImage"],
+    queryFn: fetchItemListWithImage,
+    retry: 3, // Versucht es 3-mal erneut
+    retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
+  });
 
-    const {data = [], isLoading} = useQuery<ItemWithImage[]>({
-        queryKey: ['fetchItemListWithImage'],
-        queryFn: fetchItemListWithImage,
-        retry: 3, // Versucht es 3-mal erneut
-        retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
-    });
+  const items: ItemWithImage[] = useMemo(() => data || [], [data]);
 
-    const items: ItemWithImage[] = useMemo(() => data || [], [data]);
+  const discountedPrices = items.map(
+    (item) => item.price100 * (1 - item.discount100 / 100),
+  );
+  const minPrice =
+    discountedPrices.length > 0 ? Math.min(...discountedPrices) : 0;
+  const maxPrice =
+    discountedPrices.length > 0 ? Math.max(...discountedPrices) : 1000;
+  const [priceRange, setPriceRange] = useState<[number, number]>([
+    minPrice,
+    maxPrice,
+  ]);
 
-    const discountedPrices = items.map(
-        (item) => item.price100 * (1 - item.discount100 / 100)
-    );
-    const minPrice = discountedPrices.length > 0 ? Math.min(...discountedPrices) : 0;
-    const maxPrice = discountedPrices.length > 0 ? Math.max(...discountedPrices) : 1000;
-    const [priceRange, setPriceRange] = useState<[number, number]>([
-        minPrice,
-        maxPrice,
-    ]);
+  // Filter aus URL übernehmen
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const category = params.get("category");
+    if (category && categoriesFilter.some((f) => f.value === category)) {
+      setSelectedCategory(category);
+    } else {
+      setSelectedCategory(null);
+    }
+  }, [location.search, categoriesFilter]);
 
-    // Filter aus URL übernehmen
-    useEffect(() => {
-        const params = new URLSearchParams(location.search);
-        const category = params.get("category");
-        if (category && categoriesFilter.some((f) => f.value === category)) {
-            setSelectedCategory(category);
-        } else {
-            setSelectedCategory(null);
-        }
-    }, [location.search, categoriesFilter]);
+  // Filterfunktion bleibt gleich
+  const filteredItems: ItemWithImage[] = useMemo(() => {
+    return items
+      .filter((item) => {
+        const discountedPrice = item.price100 * (1 - item.discount100 / 100);
+        return (
+          discountedPrice >= priceRange[0] && discountedPrice <= priceRange[1]
+        );
+      })
+      .filter((item) => {
+        if (!selectedCategory) return true;
+        return item.category.toLowerCase() === selectedCategory.toLowerCase();
+      })
+      .filter((item) => {
+        if (!selectedRating) return true;
+        const rating = item.rating;
+        return rating >= Number(selectedRating) * 2;
+      })
+      .filter((item) => {
+        if (!searchQuery) return true;
+        return item.name.toLowerCase().includes(searchQuery.toLowerCase());
+      });
+  }, [items, priceRange, selectedCategory, selectedRating, searchQuery]);
 
-    // Filterfunktion bleibt gleich
-    const filteredItems: ItemWithImage[] = useMemo(() => {
-        return items
-            .filter((item) => {
-                const discountedPrice = item.price100 * (1 - item.discount100 / 100);
-                return discountedPrice >= priceRange[0] && discountedPrice <= priceRange[1];
-            })
-            .filter((item) => {
-                if (!selectedCategory) return true;
-                return item.category.toLowerCase() === selectedCategory.toLowerCase();
-            })
-            .filter((item) => {
-                if (!selectedRating) return true;
-                const rating = item.rating;
-                return rating >= (Number(selectedRating) * 2);
-            })
-            .filter((item) => {
-                if (!searchQuery) return true;
-                return (item.name.toLowerCase().includes(searchQuery.toLowerCase())
-                );
-            });
-    }, [items, priceRange, selectedCategory, selectedRating, searchQuery]);
+  // Lese die Suchanfrage aus der URL
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const query = params.get("search");
+    setSearchQuery(query);
+  }, [location.search]);
 
+  // Container Ref
+  const containerRef = useRef<HTMLDivElement>(null);
 
-    // Lese die Suchanfrage aus der URL
-    useEffect(() => {
-        const params = new URLSearchParams(location.search);
-        const query = params.get("search");
-        setSearchQuery(query);
-    }, [location.search]);
+  const prevItemsLength = useRef(items.length);
 
+  useEffect(() => {
+    if (items.length >= prevItemsLength.current) {
+      prevItemsLength.current = items.length;
+      return;
+    }
 
-    // Container Ref
-    const containerRef = useRef<HTMLDivElement>(null);
+    setTimeout(() => {
+      containerRef.current?.scrollTo(0, 0);
+    }, 50);
 
-    const prevItemsLength = useRef(items.length);
+    prevItemsLength.current = items.length;
+  }, [items]);
 
-    useEffect(() => {
-        if (items.length >= prevItemsLength.current) {
-            prevItemsLength.current = items.length;
-            return;
-        }
+  // Kategorie-Änderung
+  const handleCategoryChange = (category: string) => {
+    if (category === "") {
+      setSelectedCategory(null);
+      navigate(`/`);
+    } else {
+      setSelectedCategory(category);
+      navigate(`/?category=${encodeURIComponent(category)}`);
+    }
+  };
 
-        setTimeout(() => {
-            containerRef.current?.scrollTo(0, 0);
-        }, 50);
+  // Rating-Änderung (bleibt gleich)
+  const handleRatingChange = (rating: string) => {
+    if (rating === "") {
+      setSelectedRating(null);
+    } else {
+      setSelectedRating(rating);
+    }
+  };
 
-        prevItemsLength.current = items.length;
-    }, [items]);
-
-    // Kategorie-Änderung
-    const handleCategoryChange = (category: string) => {
-        if (category === "") {
-            setSelectedCategory(null);
-            navigate(`/`);
-        } else {
-            setSelectedCategory(category);
-            navigate(`/?category=${encodeURIComponent(category)}`);
-        }
-    };
-
-    // Rating-Änderung (bleibt gleich)
-    const handleRatingChange = (rating: string) => {
-        if (rating === "") {
-            setSelectedRating(null);
-        } else {
-            setSelectedRating(rating);
-        }
-    };
-
-    return (
-        <div
-            className="home-page-background"
-            style={{backgroundColor: theme.palette.homepage}}
-        >
-            <div className="sidebar sidebar-filter">
-                <FilterItem
-                    filterName={t("category")}
-                    filterItems={categoriesFilter}
-                    value={selectedCategory}
-                    onChange={handleCategoryChange}
-                />
-                <PriceSlider
-                    min={minPrice}
-                    max={maxPrice}
-                    onChange={(range) => {
-                        setPriceRange(range);
-                    }}
-                />
-                <FilterItem
-                    filterName={t("rating")}
-                    filterItems={ratingFilter}
-                    value={selectedRating}
-                    onChange={handleRatingChange}
-                />
-            </div>
-            <div
-                className="home-page-background"
-                style={{backgroundColor: theme.palette.homepage}}
-            >
-                {isLoading && t('loading')}
-                {!isLoading && <main
-                    className="page-background page-background-center"
-                    ref={containerRef}
+  return (
+    <div
+      className="home-page-background"
+      style={{ backgroundColor: theme.palette.homepage }}
+    >
+      <div className="sidebar sidebar-filter">
+        <FilterItem
+          filterName={t("category")}
+          filterItems={categoriesFilter}
+          value={selectedCategory}
+          onChange={handleCategoryChange}
+        />
+        <PriceSlider
+          min={minPrice}
+          max={maxPrice}
+          onChange={(range) => {
+            setPriceRange(range);
+          }}
+        />
+        <FilterItem
+          filterName={t("ratingFrom")}
+          filterItems={ratingFilter}
+          value={selectedRating}
+          onChange={handleRatingChange}
+        />
+      </div>
+      <div
+        className="home-page-background"
+        style={{ backgroundColor: theme.palette.homepage }}
+      >
+        {isLoading && t("loading")}
+        {!isLoading && (
+          <main
+            className="page-background page-background-center"
+            ref={containerRef}
+          >
+            <Box className="cardgrid">
+              {filteredItems.length === 0 ? (
+                <Alert
+                  variant="filled"
+                  severity="error"
+                  sx={{
+                    bgcolor: theme.palette.error.main,
+                    color: theme.palette.getContrastText(
+                      theme.palette.error.main,
+                    ),
+                    width: "100%",
+                    justifyContent: "center",
+                  }}
                 >
-                    <Box className="cardgrid">
-                        {filteredItems.length === 0 ? (
-                            <Alert
-                                variant="filled"
-                                severity="error"
-                                sx={{
-                                    bgcolor: theme.palette.error.main,
-                                    color: theme.palette.getContrastText(
-                                        theme.palette.error.main
-                                    ),
-                                    width: "100%",
-                                    justifyContent: "center",
-                                }}
-                            >
-                                {t("noItemsFound")}
-                            </Alert>
-                        ) : (
-                            filteredItems.map(item => (
-                                <ItemCard key={item.id} item={item}/>
-                            ))
-                        )}
-                    </Box>
-                </main>}
-            </div>
-        </div>
-    );
+                  {t("noItemsFound")}
+                </Alert>
+              ) : (
+                filteredItems.map((item) => (
+                  <ItemCard key={item.id} item={item} />
+                ))
+              )}
+            </Box>
+          </main>
+        )}
+      </div>
+    </div>
+  );
 }

01-frontend/src/pages/NoPage.tsx

@@ -1,41 +1,40 @@
-import {Box, Button, Typography, useTheme} from "@mui/material";
-import {useNavigate} from "react-router-dom";
+import { Box, Button, Typography, useTheme } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 import "./pages.css";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 
 export default function NoPage() {
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
 
-    const theme = useTheme();
-    const {t} = useTranslation();
-    const navigate = useNavigate();
+  const handleGoHome = () => {
+    navigate("/");
+  };
 
-    const handleGoHome = () => {
-        navigate("/");
-    };
-
-    return (
-        <Box
-            className="no-page-container"
-            sx={{color: theme.palette.text.primary}}
-        >
-            <Typography variant="h1" className="no-page-title">
-                404
-            </Typography>
-            <Typography variant="h5" className="no-page-subtitle">
-                {t('pageDoesNotExist')}
-            </Typography>
-            <Typography variant="body1" className="no-page-description">
-                {t('wrongTurn')}
-            </Typography>
-            <Button
-                variant="contained"
-                color="primary"
-                size="large"
-                className="no-page-button"
-                onClick={handleGoHome}
-            >
-                {t('backToHome')}
-            </Button>
-        </Box>
-    );
-}
+  return (
+    <Box
+      className="no-page-container"
+      sx={{ color: theme.palette.text.primary }}
+    >
+      <Typography variant="h1" className="no-page-title">
+        404
+      </Typography>
+      <Typography variant="h5" className="no-page-subtitle">
+        {t("pageDoesNotExist")}
+      </Typography>
+      <Typography variant="body1" className="no-page-description">
+        {t("wrongTurn")}
+      </Typography>
+      <Button
+        variant="contained"
+        color="primary"
+        size="large"
+        className="no-page-button"
+        onClick={handleGoHome}
+      >
+        {t("backToHome")}
+      </Button>
+    </Box>
+  );
+}

01-frontend/src/pages/Orders.tsx

@@ -1,149 +1,185 @@
 import {
-    Box,
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    Divider,
-    List,
-    ListItemButton,
-    ListItemText,
-    Paper,
-    Stack,
-    Tab,
-    Tabs,
-    Typography
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  List,
+  ListItemButton,
+  ListItemText,
+  Paper,
+  Stack,
+  Tab,
+  Tabs,
+  Typography,
 } from "@mui/material";
-import {useQuery} from "@tanstack/react-query";
-import {useEffect, useState} from "react";
-import {useTranslation} from "react-i18next";
-import OrderType, {OrderStatusEnum} from "../components/Order";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import OrderType, { OrderStatusEnum } from "../components/Order";
 import "./pages.css";
-import {useAccount} from "../helper/AccountProvider";
-import {fetchOrders, orderPatch} from "../helper/query/Queries";
+import { useAccount } from "../helper/AccountProvider";
+import { fetchOrders, orderPatch } from "../helper/query/Queries";
 
 export default function Orders() {
+  const { user } = useAccount();
+  const [orders, setOrders] = useState<OrderType[]>([]);
 
-    const {user} = useAccount();
-    const [orders, setOrders] = useState<OrderType[]>([])
+  const { data: accountOrders, refetch } = useQuery<OrderType[]>({
+    queryKey: ["fetchOrders", user?.customerId], // Hier sollte die tatsächliche Kunden-ID verwendet werden
+    queryFn: () => (user ? fetchOrders(user.customerId) : Promise.resolve([])), // Simulierte API-Antwort
+    enabled: !!user, // Nur ausführen, wenn user existiert
+    retry: 3, // Versucht es 3-mal erneut
+    retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
+  });
 
-    const {data: accountOrders, refetch} = useQuery<OrderType[]>({
-        queryKey: ['fetchOrders', user?.customerId], // Hier sollte die tatsächliche Kunden-ID verwendet werden
-        queryFn: () => user ? fetchOrders(user.customerId) : Promise.resolve([]), // Simulierte API-Antwort
-        enabled: !!user, // Nur ausführen, wenn user existiert
-        retry: 3, // Versucht es 3-mal erneut
-        retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
-    });
+  useEffect(() => {
+    setOrders(accountOrders ?? []);
+    console.log("Orders fetched:", accountOrders);
+  }, [accountOrders]);
 
-    useEffect(() => {
-        setOrders(accountOrders ?? []);
-        console.log("Orders fetched:", accountOrders);
-    }, [accountOrders]);
+  const { t } = useTranslation();
 
-    const {t} = useTranslation();
+  const [tab, setTab] = useState(0);
+  const [selectedOrder, setSelectedOrder] = useState<OrderType | null>(null);
 
-    const [tab, setTab] = useState(0);
-    const [selectedOrder, setSelectedOrder] = useState<OrderType | null>(null);
+  const activeOrders = orders.filter(
+    (o) =>
+      o.status === OrderStatusEnum.ISSUES ||
+      o.status === OrderStatusEnum.IN_PROGRESS ||
+      o.status === OrderStatusEnum.ORDERED,
+  );
+  const inactiveOrders = orders.filter(
+    (o) =>
+      o.status === OrderStatusEnum.CANCELLED ||
+      o.status === OrderStatusEnum.DELIVERED,
+  );
 
-    const activeOrders = orders.filter(o => o.status === OrderStatusEnum.ISSUES || o.status === OrderStatusEnum.IN_PROGRESS || o.status === OrderStatusEnum.ORDERED);
-    const inactiveOrders = orders.filter(o => o.status === OrderStatusEnum.CANCELLED || o.status === OrderStatusEnum.DELIVERED);
+  const handleTabChange = (_: React.SyntheticEvent, newValue: number) =>
+    setTab(newValue);
 
-    const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue);
+  const { refetch: cancleOrder } = useQuery({
+    queryKey: [
+      "orderPatch",
+      { id: selectedOrder?.id || -1, status: OrderStatusEnum.CANCELLED },
+    ],
+    queryFn: () =>
+      orderPatch({
+        id: selectedOrder?.id || -1,
+        status: OrderStatusEnum.CANCELLED,
+      }),
+    retry: 0,
+    retryDelay: 1000,
+    enabled: false,
+  });
 
+  const handleCancelOrder = async () => {
+    await cancleOrder();
+    setSelectedOrder(null);
+    refetch();
+  };
 
-    const {refetch: cancleOrder} = useQuery({
-        queryKey: ["orderPatch", {id: selectedOrder?.id || -1, status: OrderStatusEnum.CANCELLED}],
-        queryFn: () => orderPatch({id: selectedOrder?.id || -1, status: OrderStatusEnum.CANCELLED}),
-        retry: 0,
-        retryDelay: 1000,
-        enabled: false,
-    });
+  return (
+    <Box
+      className="page-background page-background-center"
+      sx={{ minHeight: "100vh", pt: 4 }}
+    >
+      <Paper
+        elevation={3}
+        sx={{ p: 4, maxWidth: 700, width: "100%", mx: "auto" }}
+      >
+        <Typography variant="h4" gutterBottom>
+          {t("myOrders")}
+        </Typography>
+        <Tabs value={tab} onChange={handleTabChange} sx={{ mb: 3 }}>
+          <Tab label={t("active")} />
+          <Tab label={t("previous")} />
+        </Tabs>
+        <Divider sx={{ mb: 2 }} />
+        {tab === 0 ? (
+          activeOrders.length > 0 ? (
+            <List>
+              {activeOrders.map((order) => (
+                <ListItemButton
+                  key={order.id}
+                  onClick={() => setSelectedOrder(order)}
+                >
+                  <ListItemText
+                    primary={`${t("order")} #${order.id} • ${order.status} • ${new Date(order.time).toUTCString()}`}
+                    secondary={`${t("sum")}: ${(order.total / 100).toFixed(2)} € • ${order.orderItems.length} ${t("items")}`}
+                  />
+                </ListItemButton>
+              ))}
+            </List>
+          ) : (
+            <Typography color="text.secondary">
+              {t("noActiveOrders")}
+            </Typography>
+          )
+        ) : inactiveOrders.length > 0 ? (
+          <List>
+            {inactiveOrders.map((order) => (
+              <ListItemButton
+                key={order.id}
+                onClick={() => setSelectedOrder(order)}
+              >
+                <ListItemText
+                  primary={`${t("order")} #${order.id} • ${order.status} • ${new Date(order.time).toUTCString()}`}
+                  secondary={`${t("sum")}: ${(order.total / 100).toFixed(2)} € • ${order.orderItems.length} ${t("items")}`}
+                />
+              </ListItemButton>
+            ))}
+          </List>
+        ) : (
+          <Typography color="text.secondary">
+            {t("noPreviousOrders")}
+          </Typography>
+        )}
 
-    const handleCancelOrder = async () => {
-        await cancleOrder();
-        setSelectedOrder(null);
-        refetch();
-    };
-
-    return (
-        <Box className="page-background page-background-center" sx={{minHeight: "100vh", pt: 4}}>
-            <Paper elevation={3} sx={{p: 4, maxWidth: 700, width: "100%", mx: "auto"}}>
-                <Typography variant="h4" gutterBottom>
-                    {t('myOrders')}
+        <Dialog
+          open={!!selectedOrder}
+          onClose={() => setSelectedOrder(null)}
+          maxWidth="sm"
+          fullWidth
+        >
+          <DialogTitle>
+            {`${selectedOrder?.status === OrderStatusEnum.IN_PROGRESS ? t("activeOrder") : t("previousOrder")} #${selectedOrder?.id}`}
+          </DialogTitle>
+          <DialogContent dividers>
+            {selectedOrder && (
+              <Stack spacing={2}>
+                <Typography variant="subtitle1">{`${t("orderDate")}: ${new Date(selectedOrder.time).toUTCString()}`}</Typography>
+                <Divider />
+                <Typography variant="subtitle2">
+                  {t("orderedItems")}:
                 </Typography>
-                <Tabs value={tab} onChange={handleTabChange} sx={{mb: 3}}>
-                    <Tab label={t('active')}/>
-                    <Tab label={t('previous')}/>
-                </Tabs>
-                <Divider sx={{mb: 2}}/>
-                {tab === 0 ? (
-                    activeOrders.length > 0 ? (
-                        <List>
-                            {activeOrders.map(order => (
-                                <ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
-                                    <ListItemText
-                                        primary={`${t('order')} #${order.id} • ${order.status} • ${new Date(order.time).toUTCString()}`}
-                                        secondary={`${t('sum')}: ${(order.total / 100).toFixed(2)} € • ${order.orderItems.length} ${t('items')}`}
-                                    />
-                                </ListItemButton>
-                            ))}
-                        </List>
-                    ) : (
-                        <Typography color="text.secondary">{t('noActiveOrders')}</Typography>
-                    )
-                ) : (
-                    inactiveOrders.length > 0 ? (
-                        <List>
-                            {inactiveOrders.map(order => (
-                                <ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
-                                    <ListItemText
-                                        primary={`${t('order')} #${order.id} • ${order.status} • ${new Date(order.time).toUTCString()}`}
-                                        secondary={`${t('sum')}: ${(order.total / 100).toFixed(2)} € • ${order.orderItems.length} ${t('items')}`}
-                                    />
-                                </ListItemButton>
-                            ))}
-                        </List>
-                    ) : (
-                        <Typography color="text.secondary">{t('noPreviousOrders')}</Typography>
-                    )
-                )}
-
-                <Dialog open={!!selectedOrder} onClose={() => setSelectedOrder(null)} maxWidth="sm" fullWidth>
-                    <DialogTitle>
-                        {`${selectedOrder?.status === OrderStatusEnum.IN_PROGRESS ? t('activeOrder') : t('previousOrder')} #${selectedOrder?.id}`}
-                    </DialogTitle>
-                    <DialogContent dividers>
-                        {selectedOrder && (
-                            <Stack spacing={2}>
-                                <Typography
-                                    variant="subtitle1">{`${t('orderDate')}: ${new Date(selectedOrder.time).toUTCString()}`}</Typography>
-                                <Divider/>
-                                <Typography variant="subtitle2">{t('orderedItems')}:</Typography>
-                                <List dense>
-                                    {selectedOrder.orderItems.map((item, idx) => (
-                                        <ListItemText
-                                            key={idx}
-                                            primary={`${item.article} x${item.amount}`}
-                                        />
-                                    ))}
-                                </List>
-                                <Divider/>
-                                <Typography
-                                    variant="h6">{`${t('sum')}: ${(selectedOrder.total / 100).toFixed(2)} €`}</Typography>
-                            </Stack>
-                        )}
-                    </DialogContent>
-                    <DialogActions>
-                        {(selectedOrder?.status === OrderStatusEnum.ISSUES || selectedOrder?.status === OrderStatusEnum.IN_PROGRESS || selectedOrder?.status === OrderStatusEnum.ORDERED) && (
-                            <Button color="error" onClick={() => handleCancelOrder()}>
-                                {t('cancelOrder')}
-                            </Button>
-                        )}
-                        <Button onClick={() => setSelectedOrder(null)}>{t('close')}</Button>
-                    </DialogActions>
-                </Dialog>
-            </Paper>
-        </Box>
-    );
+                <List dense>
+                  {selectedOrder.orderItems.map((item, idx) => (
+                    <ListItemText
+                      key={idx}
+                      primary={`${item.article} x${item.amount}`}
+                    />
+                  ))}
+                </List>
+                <Divider />
+                <Typography variant="h6">{`${t("sum")}: ${(selectedOrder.total / 100).toFixed(2)} €`}</Typography>
+              </Stack>
+            )}
+          </DialogContent>
+          <DialogActions>
+            {(selectedOrder?.status === OrderStatusEnum.ISSUES ||
+              selectedOrder?.status === OrderStatusEnum.IN_PROGRESS ||
+              selectedOrder?.status === OrderStatusEnum.ORDERED) && (
+              <Button color="error" onClick={() => handleCancelOrder()}>
+                {t("cancelOrder")}
+              </Button>
+            )}
+            <Button onClick={() => setSelectedOrder(null)}>{t("close")}</Button>
+          </DialogActions>
+        </Dialog>
+      </Paper>
+    </Box>
+  );
 }

01-frontend/src/pages/Payment.tsx

@@ -1,373 +1,403 @@
 import {
-    Alert,
-    Box,
-    Button,
-    Container,
-    Divider,
-    Grid,
-    List,
-    ListItem,
-    ListItemText,
-    Paper,
-    Step,
-    StepLabel,
-    Stepper,
-    TextField,
-    Typography
-} from '@mui/material';
-import {useMutation, useQuery} from '@tanstack/react-query';
-import {TFunction} from 'i18next';
-import React, {useEffect, useState} from 'react';
-import {useTranslation} from "react-i18next";
-import {useNavigate} from 'react-router-dom';
-import {CustomerType} from '../components/Account';
-import Item from '../components/Item';
-import OrderType, {OrderStatusEnum} from '../components/Order';
-import {useAccount} from '../helper/AccountProvider';
-import {BasketItem, useBasket} from '../helper/BasketProvider';
-import {fetchCustomer, submitCustomer, submitOrder} from '../helper/query/Queries';
+  Alert,
+  Box,
+  Button,
+  Container,
+  Divider,
+  Grid,
+  List,
+  ListItem,
+  ListItemText,
+  Paper,
+  Step,
+  StepLabel,
+  Stepper,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { TFunction } from "i18next";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { CustomerType } from "../components/Account";
+import Item from "../components/Item";
+import OrderType, { OrderStatusEnum } from "../components/Order";
+import { useAccount } from "../helper/AccountProvider";
+import { BasketItem, useBasket } from "../helper/BasketProvider";
+import {
+  fetchCustomer,
+  submitCustomer,
+  submitOrder,
+} from "../helper/query/Queries";
 
 function getDiscountedPrice(item: Item): number {
-    return (item.price100 / 100 * (100 - item.discount100) / 100);
+  return ((item.price100 / 100) * (100 - item.discount100)) / 100;
 }
 
-function generateBasket(t: TFunction<"translation", undefined>, basket: BasketItem[]) {
-    return basket.length === 0 ? (
-        <Typography color="error" sx={{my: 2}}>
-            {t('basketEmpty')}
-        </Typography>
-    ) : (
-        <List>
-            {basket.map((item) => (
-                <ListItem key={item.item.uuid}>
-                    <ListItemText
-                        primary={`${item.quantity}x ${item.item.name}`}
-                        secondary={`Item ID: ${item.item.uuid}`}
-                    />
+function generateBasket(
+  t: TFunction<"translation", undefined>,
+  basket: BasketItem[],
+) {
+  return basket.length === 0 ? (
+    <Typography color="error" sx={{ my: 2 }}>
+      {t("basketEmpty")}
+    </Typography>
+  ) : (
+    <List>
+      {basket.map((item) => (
+        <ListItem key={item.item.uuid}>
+          <ListItemText
+            primary={`${item.quantity}x ${item.item.name}`}
+            secondary={`Item ID: ${item.item.uuid}`}
+          />
 
-                    <div className="rightBound">
-                        {`${(item.quantity * getDiscountedPrice(item.item)).toFixed(2)} €`}<br/>
-                        {item.item.discount100 > 0 ? <a className='rightBound red'>{-item.item.discount100}%</a> : ""}
-                    </div>
-                </ListItem>
-            ))}
-        </List>
-    )
+          <div className="rightBound">
+            {`${(item.quantity * getDiscountedPrice(item.item)).toFixed(2)} €`}
+            <br />
+            {item.item.discount100 > 0 ? (
+              <a className="rightBound red">{-item.item.discount100}%</a>
+            ) : (
+              ""
+            )}
+          </div>
+        </ListItem>
+      ))}
+    </List>
+  );
 }
 
-function generateTotal(t: TFunction<"translation", undefined>, basket: BasketItem[]) {
-    return basket.length === 0 ? "" :
-        <div className='rightBound'>
-            {t('total') + ": " + basket.map((item) => item.quantity * getDiscountedPrice(item.item))
-                .reduce((prev: number, cur: number) => prev + cur, 0).toFixed(2) + ` €`}
-        </div>
+function generateTotal(
+  t: TFunction<"translation", undefined>,
+  basket: BasketItem[],
+) {
+  return basket.length === 0 ? (
+    ""
+  ) : (
+    <div className="rightBound">
+      {t("total") +
+        ": " +
+        basket
+          .map((item) => item.quantity * getDiscountedPrice(item.item))
+          .reduce((prev: number, cur: number) => prev + cur, 0)
+          .toFixed(2) +
+        ` €`}
+    </div>
+  );
 }
 
 export default function Payment() {
+  const { t } = useTranslation();
+  const { basket, clearBasket } = useBasket();
+  const navigator = useNavigate();
+  const [activeStep, setActiveStep] = useState(0);
+  const [shippingDetails, setShippingDetails] = useState<CustomerType>({
+    id: 0, // This will be set by the backend or user data
+    name: "",
+    surname: "",
+    address: "",
+    zip: "",
+    country: "Deutschland",
+  });
+  const [orderNumber, setOrderNumber] = useState<string | null>(null);
+  const steps = [
+    t("reviewCart"),
+    t("shippingDetails"),
+    t("payment"),
+    t("orderSummary"),
+  ];
+  const { user } = useAccount();
 
+  const submitOrderData: OrderType = {
+    id: 0, // This will be set by the backend
+    customerId: user ? user.customerId : 0, // Use user ID if logged in, otherwise 0
+    time: Date.now(),
+    status: OrderStatusEnum.ORDERED, // Initial status when order is placed
+    orderItems: basket.map((item) => ({
+      id: item.item.id,
+      amount: item.quantity,
+      article: item.item.uuid, // Assuming UUID is the identifier for the item
+    })),
+    total: basket.reduce(
+      (total, item) => total + item.quantity * getDiscountedPrice(item.item),
+      0,
+    ),
+  };
 
-    const {t} = useTranslation();
-    const {basket, clearBasket} = useBasket();
-    const navigator = useNavigate();
-    const [activeStep, setActiveStep] = useState(0);
-    const [shippingDetails, setShippingDetails] = useState<CustomerType>({
-        id: 0, // This will be set by the backend or user data
-        name: '',
-        surname: '',
-        address: '',
-        zip: '',
-        country: 'Deutschland',
-    });
-    const [orderNumber, setOrderNumber] = useState<string | null>(null);
-    const steps = [t('reviewCart'), t('shippingDetails'), t('payment'), t('orderSummary')];
-    const {user} = useAccount();
+  const { refetch: refetchCustomer } = useQuery({
+    queryKey: ["submitCustomer", shippingDetails],
+    queryFn: () => submitCustomer(shippingDetails),
+    retry: 0,
+    retryDelay: 1000,
+    enabled: false,
+  });
 
-    const submitOrderData: OrderType = {
-        id: 0, // This will be set by the backend
-        customerId: user ? user.customerId : 0, // Use user ID if logged in, otherwise 0
-        time: Date.now(),
-        status: OrderStatusEnum.ORDERED, // Initial status when order is placed
-        orderItems: basket.map(item => ({
-            id: item.item.id,
-            amount: item.quantity,
-            article: item.item.uuid, // Assuming UUID is the identifier for the item
-        })),
-        total: basket.reduce((total, item) => total + (item.quantity * getDiscountedPrice(item.item)), 0),
-    };
+  const showAlert = () => {
+    return <Alert>//TODO:</Alert>;
+  };
 
-    const {refetch: refetchCustomer} = useQuery({
-        queryKey: ["submitCustomer", shippingDetails],
-        queryFn: () => submitCustomer(shippingDetails),
-        retry: 0,
-        retryDelay: 1000,
-        enabled: false,
-    });
+  const { refetch: customerData } = useQuery<CustomerType>({
+    queryKey: ["fetchCustomer", user?.customerId],
+    queryFn: () => fetchCustomer(user?.customerId || 0), // Funktion zum Abrufen der Kundendaten
+    enabled: false,
+  });
 
-    const showAlert = () => {
-        return <Alert>
-            //TODO:
-        </Alert>
-    };
-
-    const {refetch: customerData} = useQuery<CustomerType>({
-        queryKey: ['fetchCustomer', user?.customerId],
-        queryFn: () => fetchCustomer(user?.customerId || 0), // Funktion zum Abrufen der Kundendaten
-        enabled: false
-    });
-
-    useEffect(() => {
-        const fetchShippingDetails = async () => {
-            if (user) {
-                try {
-                    const userShippingDetails = (await customerData()).data;
-                    setShippingDetails(userShippingDetails || shippingDetails);
-                } catch (error) {
-                    console.error("Fehler beim Laden der Kundendaten:", error);
-                }
-            }
-        };
-
-        fetchShippingDetails();
-    }, [user, customerData]);
-
-
-    // Verwende useMutation statt useQuery für submitOrder
-    const {mutateAsync: submitOrderMutation} = useMutation({
-        mutationFn: (orderData: OrderType) => submitOrder(orderData),
-    });
-
-    const handleNext = async () => {
-        let next: boolean = true;
-
-        if (activeStep === steps.length - 2) {
-            // Simulate order placement and generate order number
-            const generatedOrderNumber = `ORD-${Math.floor(Math.random() * 1000000)}`;
-            setOrderNumber(generatedOrderNumber);
-
-            let customerId = user ? user.customerId : 0;
-            if (!customerId) {
-                const customerResponse = await refetchCustomer();
-                customerId = customerResponse.data.id;
-            }
-
-            // Erzeuge die Orderdaten mit der richtigen customerId
-            const orderData: OrderType = {
-                ...submitOrderData,
-                customerId,
-            };
-
-            try {
-                await submitOrderMutation(orderData);
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            } catch (e) {
-                next = false;
-            }
-        }
-        if (next) {
-            setActiveStep((prevStep) => prevStep + 1);
-        } else {
-            showAlert();
+  useEffect(() => {
+    const fetchShippingDetails = async () => {
+      if (user) {
+        try {
+          const userShippingDetails = (await customerData()).data;
+          setShippingDetails(userShippingDetails || shippingDetails);
+        } catch (error) {
+          console.error("Fehler beim Laden der Kundendaten:", error);
         }
+      }
     };
 
-    const handleBack = () => {
-        setActiveStep((prevStep) => prevStep - 1);
-    };
+    fetchShippingDetails();
+  }, [user, customerData]);
 
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const {name, value} = e.target;
-        setShippingDetails((prevDetails) => ({
-            ...prevDetails,
-            [name]: value,
-        }));
-    };
-    const handleClearBasket = () => {
-        clearBasket();
-    };
+  // Verwende useMutation statt useQuery für submitOrder
+  const { mutateAsync: submitOrderMutation } = useMutation({
+    mutationFn: (orderData: OrderType) => submitOrder(orderData),
+  });
 
-    // Hilfsfunktion prüfen, ob alle Pflichtfelder ausgefüllt sind
-    const isShippingDetailsValid = () => {
-        return (
-            shippingDetails.name.trim() !== '' &&
-            shippingDetails.surname.trim() !== '' &&
-            shippingDetails.address.trim() !== '' &&
-            shippingDetails.zip.trim() !== '' &&
-            shippingDetails.country.trim() !== ''
-        );
-    };
+  const handleNext = async () => {
+    let next: boolean = true;
 
-    const renderStepContent = (step: number) => {
-        switch (step) {
-            case 0:
-                return (
-                    <Box>
-                        <Typography variant="h6" gutterBottom>
-                            {t('reviewCart')}
-                        </Typography>
-                        {generateBasket(t, basket)}
-                        <Divider sx={{my: 2}}/>
-                        <Button variant="outlined" color="error" onClick={handleClearBasket}
-                                disabled={basket.length === 0}>
-                            {t('clearCart')}
-                        </Button>
-                        {generateTotal(t, basket)}
-                    </Box>
-                );
-            case 1:
-                return (
-                    <Box>
-                        <Typography variant="h6" gutterBottom>
-                            {t('shippingDetails')}
-                        </Typography>
-                        <Grid container spacing={2}>
+    if (activeStep === steps.length - 2) {
+      // Simulate order placement and generate order number
+      const generatedOrderNumber = `ORD-${Math.floor(Math.random() * 1000000)}`;
+      setOrderNumber(generatedOrderNumber);
 
-                            <TextField
-                                fullWidth
-                                label={t('firstName')}
-                                name="name"
-                                value={shippingDetails.name}
-                                onChange={handleInputChange}
-                                required
-                            />
+      let customerId = user ? user.customerId : 0;
+      if (!customerId) {
+        const customerResponse = await refetchCustomer();
+        customerId = customerResponse.data.id;
+      }
 
-                            <TextField
-                                fullWidth
-                                label={t('lastName')}
-                                name="surname"
-                                value={shippingDetails.surname}
-                                onChange={handleInputChange}
-                                required
-                            />
+      // Erzeuge die Orderdaten mit der richtigen customerId
+      const orderData: OrderType = {
+        ...submitOrderData,
+        customerId,
+      };
 
-                            <TextField
-                                fullWidth
-                                label={t('address')}
-                                name="address"
-                                value={shippingDetails.address}
-                                onChange={handleInputChange}
-                                required
-                            />
+      try {
+        await submitOrderMutation(orderData);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      } catch (e) {
+        next = false;
+      }
+    }
+    if (next) {
+      setActiveStep((prevStep) => prevStep + 1);
+    } else {
+      showAlert();
+    }
+  };
 
-                            <TextField
-                                fullWidth
-                                label={t('postalCode')}
-                                name="zip"
-                                value={shippingDetails.zip}
-                                onChange={handleInputChange}
-                                required
-                            />
+  const handleBack = () => {
+    setActiveStep((prevStep) => prevStep - 1);
+  };
 
-                            <TextField
-                                fullWidth
-                                label={t('country')}
-                                name="country"
-                                value={shippingDetails.country}
-                                onChange={handleInputChange}
-                                required
-                            />
-                        </Grid>
-                    </Box>
-                );
-            case 2:
-                return (
-                    <Box>
-                        <Typography variant="h6" gutterBottom>
-                            {t('payment')}
-                        </Typography>
-                        <Typography variant="body1">
-                            {t('paymentNotAvailable')}
-                        </Typography>
-                    </Box>
-                );
-            case 3:
-                return (
-                    <Box>
-                        <Typography variant="h6" gutterBottom>
-                            {t('orderSummary')}
-                        </Typography>
-                        <Typography variant="body1" gutterBottom>
-                            {t('thanksForOrder')}
-                        </Typography>
-                        <Typography variant="body2" gutterBottom>
-                            {t('yourOrderNumber')}: <strong>{orderNumber}</strong>
-                        </Typography>
-                        <Divider sx={{my: 2}}/>
-                        <Typography variant="h6">{t('shippingDetails')}:</Typography>
-                        <Typography variant="body2">
-                            {shippingDetails.name} {shippingDetails.surname}<br/>
-                            {shippingDetails.address}<br/>
-                            {shippingDetails.zip} {shippingDetails.country}<br/>
-                        </Typography>
-                        <Divider sx={{my: 2}}/>
-                        <Typography variant="h6">{t('orderedItems')}:</Typography>
-                        {generateBasket(t, basket)}
-                        <Divider sx={{my: 2}}/>
-                        {generateTotal(t, basket)}
-                        <br/>
-                    </Box>
-                );
-            default:
-                return <div>Unknown step</div>;
-        }
-    };
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setShippingDetails((prevDetails) => ({
+      ...prevDetails,
+      [name]: value,
+    }));
+  };
+  const handleClearBasket = () => {
+    clearBasket();
+  };
 
+  // Hilfsfunktion prüfen, ob alle Pflichtfelder ausgefüllt sind
+  const isShippingDetailsValid = () => {
     return (
-        <div className="page-background">
-            <Container
-                maxWidth="md"
-                sx={{
-                    py: 4,
-                    maxHeight: '90vh',
-                    overflowY: 'auto'
-                }}
-            >
-                <Paper elevation={3} sx={{p: 4}}>
-                    <Typography variant="h4" align="center" gutterBottom>
-                        {t('completeYourOrder')}
-                    </Typography>
-                    <Stepper activeStep={activeStep} alternativeLabel>
-                        {steps.map((label) => (
-                            <Step key={label}>
-                                <StepLabel>{label}</StepLabel>
-                            </Step>
-                        ))}
-                    </Stepper>
-                    <Box sx={{mt: 4}}>{renderStepContent(activeStep)}</Box>
-                    <Box sx={{display: 'flex', justifyContent: 'space-between', mt: 4}}>
-                        <Button
-                            disabled={activeStep === 0}
-                            onClick={handleBack}
-                            variant="outlined"
-                        >
-                            {t('back')}
-                        </Button>
-                        {activeStep === steps.length - 1 ? (
-                            <Button
-                                variant="contained"
-                                color="primary"
-                                onClick={() => {
-                                    handleClearBasket();
-                                    navigator('/');
-                                }}
-                            >
-                                {t('finish')}
-                            </Button>
-                        ) : (
-                            <Button
-                                variant="contained"
-                                color="primary"
-                                onClick={handleNext}
-                                disabled={
-                                    basket.length === 0 ||
-                                    (activeStep === 1 && !isShippingDetailsValid())
-                                }
-                            >
-                                {activeStep === steps.length - 2 ? t('placeOrder') : t('next')}
-                            </Button>
-                        )}
-                    </Box>
-                </Paper>
-            </Container>
-        </div>
+      shippingDetails.name.trim() !== "" &&
+      shippingDetails.surname.trim() !== "" &&
+      shippingDetails.address.trim() !== "" &&
+      shippingDetails.zip.trim() !== "" &&
+      shippingDetails.country.trim() !== ""
     );
-}
+  };
+
+  const renderStepContent = (step: number) => {
+    switch (step) {
+      case 0:
+        return (
+          <Box>
+            <Typography variant="h6" gutterBottom>
+              {t("reviewCart")}
+            </Typography>
+            {generateBasket(t, basket)}
+            <Divider sx={{ my: 2 }} />
+            <Button
+              variant="outlined"
+              color="error"
+              onClick={handleClearBasket}
+              disabled={basket.length === 0}
+            >
+              {t("clearCart")}
+            </Button>
+            {generateTotal(t, basket)}
+          </Box>
+        );
+      case 1:
+        return (
+          <Box>
+            <Typography variant="h6" gutterBottom>
+              {t("shippingDetails")}
+            </Typography>
+            <Grid container spacing={2}>
+              <TextField
+                fullWidth
+                label={t("firstName")}
+                name="name"
+                value={shippingDetails.name}
+                onChange={handleInputChange}
+                required
+              />
+
+              <TextField
+                fullWidth
+                label={t("lastName")}
+                name="surname"
+                value={shippingDetails.surname}
+                onChange={handleInputChange}
+                required
+              />
+
+              <TextField
+                fullWidth
+                label={t("address")}
+                name="address"
+                value={shippingDetails.address}
+                onChange={handleInputChange}
+                required
+              />
+
+              <TextField
+                fullWidth
+                label={t("postalCode")}
+                name="zip"
+                value={shippingDetails.zip}
+                onChange={handleInputChange}
+                required
+              />
+
+              <TextField
+                fullWidth
+                label={t("country")}
+                name="country"
+                value={shippingDetails.country}
+                onChange={handleInputChange}
+                required
+              />
+            </Grid>
+          </Box>
+        );
+      case 2:
+        return (
+          <Box>
+            <Typography variant="h6" gutterBottom>
+              {t("payment")}
+            </Typography>
+            <Typography variant="body1">{t("paymentNotAvailable")}</Typography>
+          </Box>
+        );
+      case 3:
+        return (
+          <Box>
+            <Typography variant="h6" gutterBottom>
+              {t("orderSummary")}
+            </Typography>
+            <Typography variant="body1" gutterBottom>
+              {t("thanksForOrder")}
+            </Typography>
+            <Typography variant="body2" gutterBottom>
+              {t("yourOrderNumber")}: <strong>{orderNumber}</strong>
+            </Typography>
+            <Divider sx={{ my: 2 }} />
+            <Typography variant="h6">{t("shippingDetails")}:</Typography>
+            <Typography variant="body2">
+              {shippingDetails.name} {shippingDetails.surname}
+              <br />
+              {shippingDetails.address}
+              <br />
+              {shippingDetails.zip} {shippingDetails.country}
+              <br />
+            </Typography>
+            <Divider sx={{ my: 2 }} />
+            <Typography variant="h6">{t("orderedItems")}:</Typography>
+            {generateBasket(t, basket)}
+            <Divider sx={{ my: 2 }} />
+            {generateTotal(t, basket)}
+            <br />
+          </Box>
+        );
+      default:
+        return <div>Unknown step</div>;
+    }
+  };
+
+  return (
+    <div className="page-background">
+      <Container
+        maxWidth="md"
+        sx={{
+          py: 4,
+          maxHeight: "90vh",
+          overflowY: "auto",
+        }}
+      >
+        <Paper elevation={3} sx={{ p: 4 }}>
+          <Typography variant="h4" align="center" gutterBottom>
+            {t("completeYourOrder")}
+          </Typography>
+          <Stepper activeStep={activeStep} alternativeLabel>
+            {steps.map((label) => (
+              <Step key={label}>
+                <StepLabel>{label}</StepLabel>
+              </Step>
+            ))}
+          </Stepper>
+          <Box sx={{ mt: 4 }}>{renderStepContent(activeStep)}</Box>
+          <Box sx={{ display: "flex", justifyContent: "space-between", mt: 4 }}>
+            <Button
+              disabled={activeStep === 0}
+              onClick={handleBack}
+              variant="outlined"
+            >
+              {t("back")}
+            </Button>
+            {activeStep === steps.length - 1 ? (
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={() => {
+                  handleClearBasket();
+                  navigator("/");
+                }}
+              >
+                {t("finish")}
+              </Button>
+            ) : (
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={handleNext}
+                disabled={
+                  basket.length === 0 ||
+                  (activeStep === 1 && !isShippingDetailsValid())
+                }
+              >
+                {activeStep === steps.length - 2 ? t("placeOrder") : t("next")}
+              </Button>
+            )}
+          </Box>
+        </Paper>
+      </Container>
+    </div>
+  );
+}

01-frontend/src/pages/Product.tsx

@@ -1,92 +1,88 @@
-import {Box, Button, Container, Divider, Typography} from '@mui/material';
-import {useLocation, useNavigate} from 'react-router-dom';
-import Item from '../components/Item';
-import ProductInfo from '../helper/productpage/ProductInfo';
-import Ratings from '../helper/productpage/Ratings';
-import {useTranslation} from "react-i18next";
-import {useTheme} from '@mui/material/styles';
+import { Box, Button, Container, Divider, Typography } from "@mui/material";
+import { useLocation, useNavigate } from "react-router-dom";
+import Item from "../components/Item";
+import ProductInfo from "../helper/productpage/ProductInfo";
+import Ratings from "../helper/productpage/Ratings";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material/styles";
 
 export default function Product() {
-    const {t} = useTranslation();
-    const location = useLocation();
-    const item = location.state?.item as Item;
-    const navigate = useNavigate();
-    const theme = useTheme(); // Zugriff auf das aktive Theme
+  const { t } = useTranslation();
+  const location = useLocation();
+  const item = location.state?.item as Item;
+  const navigate = useNavigate();
+  const theme = useTheme(); // Zugriff auf das aktive Theme
 
-    const handleGoHome = () => {
-        navigate("/");
-    };
-
-    // Wenn kein Produkt vorhanden ist
-    if (!item) {
-        return (
-            <Box
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '100vh',
-                    textAlign: 'center',
-                    backgroundColor: theme.palette.background.default,
-                    color: theme.palette.text.primary,
-                    gap: '2rem',
-                    overflow: 'auto',
-                    px: 2,
-                }}
-            >
-                <Typography variant="h1">
-                    {t('productNotFound')}
-                </Typography>
-                <Typography variant="h5">
-                    {t('productDoesNotExist')}
-                </Typography>
-                <Button
-                    variant="contained"
-                    color="primary"
-                    size="large"
-                    onClick={handleGoHome}
-                >
-                    {t('backToHome')}
-                </Button>
-            </Box>
-        );
-    }
+  const handleGoHome = () => {
+    navigate("/");
+  };
 
+  // Wenn kein Produkt vorhanden ist
+  if (!item) {
     return (
-        <Box
-            sx={{
-                backgroundColor: theme.palette.background.default,
-                color: theme.palette.text.primary,
-                height: '100vh',
-                overflow: 'auto',
-                pt: 4,
-                pb: 10,
-            }}
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100vh",
+          textAlign: "center",
+          backgroundColor: theme.palette.background.default,
+          color: theme.palette.text.primary,
+          gap: "2rem",
+          overflow: "auto",
+          px: 2,
+        }}
+      >
+        <Typography variant="h1">{t("productNotFound")}</Typography>
+        <Typography variant="h5">{t("productDoesNotExist")}</Typography>
+        <Button
+          variant="contained"
+          color="primary"
+          size="large"
+          onClick={handleGoHome}
         >
-            <Container maxWidth="lg">
-                <ProductInfo item={item}/>
-
-                <Box sx={{my: 4}}>
-                    <Divider sx={{backgroundColor: theme.palette.text.secondary}}/>
-                </Box>
-
-                <Typography
-                    variant="body2"
-                    sx={{color: theme.palette.text.secondary, mb: 1}}
-                >
-                    {t('articleNumber')}: {item.uuid}
-                </Typography>
-
-                <Typography
-                    variant="body1"
-                    sx={{color: theme.palette.text.primary, mb: 3}}
-                >
-                    {item.description}
-                </Typography>
-
-                <Ratings itemId={item.uuid}/>
-            </Container>
-        </Box>
+          {t("backToHome")}
+        </Button>
+      </Box>
     );
-};
+  }
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: theme.palette.background.default,
+        color: theme.palette.text.primary,
+        height: "100vh",
+        overflow: "auto",
+        pt: 4,
+        pb: 10,
+      }}
+    >
+      <Container maxWidth="lg">
+        <ProductInfo item={item} />
+
+        <Box sx={{ my: 4 }}>
+          <Divider sx={{ backgroundColor: theme.palette.text.secondary }} />
+        </Box>
+
+        <Typography
+          variant="body2"
+          sx={{ color: theme.palette.text.secondary, mb: 1 }}
+        >
+          {t("articleNumber")}: {item.uuid}
+        </Typography>
+
+        <Typography
+          variant="body1"
+          sx={{ color: theme.palette.text.primary, mb: 3 }}
+        >
+          {item.description}
+        </Typography>
+
+        <Ratings itemId={item.uuid} />
+      </Container>
+    </Box>
+  );
+}

01-frontend/src/pages/pages.css

@@ -1,170 +1,170 @@
 .no-page-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-    text-align: center;
-    gap: 2%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  text-align: center;
+  gap: 2%;
 }
 
 .no-page-title {
-    font-size: 8rem;
-    font-weight: bold;
-    margin-bottom: 16px;
+  font-size: 8rem;
+  font-weight: bold;
+  margin-bottom: 16px;
 }
 
 .no-page-subtitle {
-    font-size: 1.5rem;
-    margin-bottom: 8px;
+  font-size: 1.5rem;
+  margin-bottom: 8px;
 }
 
 .no-page-description {
-    font-size: 1rem;
-    margin-bottom: 24px;
+  font-size: 1rem;
+  margin-bottom: 24px;
 }
 
 .no-page-button {
-    font-size: 1rem;
-    padding: 12px 24px;
-    background-color: #0fd13f;
-    color: white;
-    border-radius: 8px;
-    transition: background-color 0.3s ease;
+  font-size: 1rem;
+  padding: 12px 24px;
+  background-color: #0fd13f;
+  color: white;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
 }
 
 .no-page-button:hover {
-    background-color: #0cc634;
+  background-color: #0cc634;
 }
 
 .cardgrid {
-    display: grid;
-    gap: 24px;
-    width: 90%;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    padding: 16px 16px 64px 16px;
-    margin: 0 auto;
-    box-sizing: border-box;
+  display: grid;
+  gap: 24px;
+  width: 90%;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  padding: 16px 16px 64px 16px;
+  margin: 0 auto;
+  box-sizing: border-box;
 }
 
 .page-background {
-    background-color: var(--background-color);
-    min-height: var(--page-height);
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    box-sizing: border-box;
-    width: 100%;
-    color: var(--text-color);
+  background-color: var(--background-color);
+  min-height: var(--page-height);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  box-sizing: border-box;
+  width: 100%;
+  color: var(--text-color);
 }
 
 .toppad {
-    padding: 20px 0;
+  padding: 20px 0;
 }
 
 .page-background-center {
-    align-items: center;
-    justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .page-background.page-background--no-space-between {
-    justify-content: flex-start !important;
+  justify-content: flex-start !important;
 }
 
 .page-table {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    height: var(--page-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: var(--page-height);
 }
 
 .impressum-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    padding: 20px;
-    text-align: left;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    height: var(--page-height);
-    margin: 0;
-    width: 100%;
-    box-sizing: border-box;
-    overflow: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 20px;
+  text-align: left;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  height: var(--page-height);
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: auto;
 }
 
 .impressum-title {
-    font-size: 2.5rem;
-    font-weight: bold;
-    margin-bottom: 16px;
-    color: var(--text-color);
+  font-size: 2.5rem;
+  font-weight: bold;
+  margin-bottom: 16px;
+  color: var(--text-color);
 }
 
 .impressum-content {
-    font-size: 1rem;
-    line-height: 1.6;
-    color: var(--text-color);
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--text-color);
 }
 
 .contact-divider {
-    background-color: var(--text-color);
-    height: 2px;
+  background-color: var(--text-color);
+  height: 2px;
 }
 
 .contact-divider-box {
-    width: 100%;
-    margin: 25px 0;
+  width: 100%;
+  margin: 25px 0;
 }
 
 .product-page-background {
-    background-color: var(--background-color);
-    height: 100%;
-    min-height: 600px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px 0;
-    box-sizing: border-box;
-    color: var(--text-color);
+  background-color: var(--background-color);
+  height: 100%;
+  min-height: 600px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+  box-sizing: border-box;
+  color: var(--text-color);
 }
 
 .home-page-background {
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-    scroll-behavior: smooth;
-    height: 100vh;
-    box-sizing: border-box;
-    color: var(--text-color);
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  scroll-behavior: smooth;
+  height: 100vh;
+  box-sizing: border-box;
+  color: var(--text-color);
 }
 
 .sidebar {
-    width: fit-content;
-    display: grid;
-    place-self: start;
-    white-space: nowrap;
-    margin-top: 2vh;
+  width: fit-content;
+  display: grid;
+  place-self: start;
+  white-space: nowrap;
+  margin-top: 2vh;
 }
 
 .sidebar-filter {
-    margin: 30px
+  margin: 30px;
 }
 
 .no-results {
-    text-align: center;
-    font-size: 1rem;
-    min-width: 600px;
-    background-color: var(--background-color);
-    color: var(--text-color);
+  text-align: center;
+  font-size: 1rem;
+  min-width: 600px;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 .rightBound {
-    float: right;
+  float: right;
 }
 
 .red {
-    color: #F00;
+  color: #f00;
 }

01-frontend/src/theme/ThemeContext.tsx

@@ -1,185 +1,204 @@
-'use client';
-import React, {createContext, ReactNode, useContext, useEffect, useState} from 'react';
-import {createTheme, ThemeProvider} from '@mui/material/styles';
-import {CssBaseline, GlobalStyles} from '@mui/material';
-import useMediaQuery from '@mui/material/useMediaQuery';
+"use client";
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { CssBaseline, GlobalStyles } from "@mui/material";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
-type ThemeMode = 'light' | 'dark';
+type ThemeMode = "light" | "dark";
 
 interface ThemeContextType {
-    mode: ThemeMode;
-    toggleMode: () => void;
+  mode: ThemeMode;
+  toggleMode: () => void;
 }
 
 const ThemeContext = createContext<ThemeContextType>({
-    mode: 'light',
-    toggleMode: () => {
-    },
+  mode: "light",
+  toggleMode: () => {},
 });
 
 export const useThemeMode = () => useContext(ThemeContext);
 
 interface CustomThemeProviderProps {
-    children: ReactNode;
+  children: ReactNode;
 }
 
-export const CustomThemeProvider: React.FC<CustomThemeProviderProps> = ({children}) => {
-    // SSR-sichere System-Präferenz-Erkennung
-    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', {noSsr: true});
+export const CustomThemeProvider: React.FC<CustomThemeProviderProps> = ({
+  children,
+}) => {
+  // SSR-sichere System-Präferenz-Erkennung
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)", {
+    noSsr: true,
+  });
 
-    // SSR-sichere Initialisierung
-    const [mode, setMode] = useState<ThemeMode>('light');
-    const [mounted, setMounted] = useState(false);
+  // SSR-sichere Initialisierung
+  const [mode, setMode] = useState<ThemeMode>("light");
+  const [mounted, setMounted] = useState(false);
 
-    // Nach dem ersten Render ausführen (SSR-sicher)
-    useEffect(() => {
-        setMounted(true);
+  // Nach dem ersten Render ausführen (SSR-sicher)
+  useEffect(() => {
+    setMounted(true);
 
-        if (typeof window !== 'undefined') {
-            const savedMode = localStorage.getItem('themeMode') as ThemeMode;
-            if (savedMode === 'light' || savedMode === 'dark') {
-                setMode(savedMode);
-            } else {
-                setMode(prefersDarkMode ? 'dark' : 'light');
-            }
-        }
-    }, [prefersDarkMode]);
-
-    // Mode in localStorage speichern
-    useEffect(() => {
-        if (mounted && typeof window !== 'undefined') {
-            localStorage.setItem('themeMode', mode);
-        }
-    }, [mode, mounted]);
-
-    // Browser-only DOM-Manipulation
-    useEffect(() => {
-        if (mounted && typeof window !== 'undefined') {
-            const backgroundColor = mode === 'dark' ? '#121212' : '#fafafa';
-
-            // Warten bis DOM geladen ist
-            const updateBackground = () => {
-                document.documentElement.style.setProperty('--background-color', backgroundColor);
-                document.documentElement.style.backgroundColor = backgroundColor;
-                document.body.style.backgroundColor = backgroundColor;
-
-                const root = document.getElementById('root');
-                if (root) {
-                    root.style.backgroundColor = backgroundColor;
-                }
-            };
-
-            // Sofort ausführen
-            updateBackground();
-
-            // Nach einem kurzen Delay nochmal (für hartnäckige Cases)
-            const timeoutId = setTimeout(updateBackground, 100);
-
-            return () => clearTimeout(timeoutId);
-        }
-    }, [mode, mounted]);
-
-    const toggleMode = () => {
-        setMode(prevMode => prevMode === 'light' ? 'dark' : 'light');
-    };
-
-    // Theme basierend auf Mode erstellen
-    const theme = React.useMemo(() =>
-            createTheme({
-                palette: {
-                    mode,
-                    primary: {
-                        main: '#0fd13f', // Grüne NavBar
-                        light: mode === 'dark' ? '#4caf50' : '#42a5f5',
-                        dark: mode === 'dark' ? '#388e3c' : '#1565c0',
-                        contrastText: '#fff',
-                    },
-                    secondary: {
-                        main: mode === 'dark' ? '#bb86fc' : '#9c27b0',
-                        light: mode === 'dark' ? '#d7aefb' : '#ba68c8',
-                        dark: mode === 'dark' ? '#985eff' : '#7b1fa2',
-                        contrastText: '#fff',
-                    },
-                    background: {
-                        default: mode === 'dark' ? '#121212' : '#fafafa',
-                        paper: mode === 'dark' ? '#1e1e1e' : '#ffffff',
-                    },
-                    text: {
-                        primary: mode === 'dark' ? '#ffffff' : '#000000',
-                        secondary: mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.6)',
-                    },
-                    homepage: mode === 'dark' ? '#1e1e1e' : '#f4f4f4',
-                },
-                components: {
-                    MuiCssBaseline: {
-                        styleOverrides: {
-                            html: {
-                                backgroundColor: `${mode === 'dark' ? '#121212' : '#fafafa'} !important`,
-                                transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
-                            },
-                            body: {
-                                backgroundColor: `${mode === 'dark' ? '#121212' : '#fafafa'} !important`,
-                                transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
-                                margin: 0,
-                            },
-                        },
-                    },
-                    MuiAppBar: {
-                        styleOverrides: {
-                            colorPrimary: {
-                                backgroundColor: mode === 'dark' ? '#388e3c' : '#0fd13f',
-                                color: '#ffffff',
-                            },
-                        },
-                    },
-                },
-            }),
-        [mode]
-    );
-
-    // Aggressive GlobalStyles mit CSS-Variablen
-    const globalStyles = mounted ? (
-        <GlobalStyles
-            styles={{
-                ':root': {
-                    '--background-color': mode === 'dark' ? '#121212' : '#fafafa',
-                    '--text-color': mode === 'dark' ? '#ffffff' : '#000000',
-                },
-                '*': {
-                    boxSizing: 'border-box',
-                },
-                'html, body, #root': {
-                    backgroundColor: `var(--background-color) !important`,
-                    color: `var(--text-color) !important`,
-                    transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
-                    margin: 0,
-                    padding: 0,
-                    minHeight: '100vh',
-                },
-                'div, section, main, article': {
-                    backgroundColor: 'transparent',
-                },
-            }}
-        />
-    ) : null;
-
-    // SSR-Fallback während mounted = false
-    if (!mounted) {
-        return (
-            <ThemeProvider theme={createTheme({palette: {mode: 'light'}})}>
-                <CssBaseline/>
-                {children}
-            </ThemeProvider>
-        );
+    if (typeof window !== "undefined") {
+      const savedMode = localStorage.getItem("themeMode") as ThemeMode;
+      if (savedMode === "light" || savedMode === "dark") {
+        setMode(savedMode);
+      } else {
+        setMode(prefersDarkMode ? "dark" : "light");
+      }
     }
+  }, [prefersDarkMode]);
 
+  // Mode in localStorage speichern
+  useEffect(() => {
+    if (mounted && typeof window !== "undefined") {
+      localStorage.setItem("themeMode", mode);
+    }
+  }, [mode, mounted]);
+
+  // Browser-only DOM-Manipulation
+  useEffect(() => {
+    if (mounted && typeof window !== "undefined") {
+      const backgroundColor = mode === "dark" ? "#121212" : "#fafafa";
+
+      // Warten bis DOM geladen ist
+      const updateBackground = () => {
+        document.documentElement.style.setProperty(
+          "--background-color",
+          backgroundColor,
+        );
+        document.documentElement.style.backgroundColor = backgroundColor;
+        document.body.style.backgroundColor = backgroundColor;
+
+        const root = document.getElementById("root");
+        if (root) {
+          root.style.backgroundColor = backgroundColor;
+        }
+      };
+
+      // Sofort ausführen
+      updateBackground();
+
+      // Nach einem kurzen Delay nochmal (für hartnäckige Cases)
+      const timeoutId = setTimeout(updateBackground, 100);
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [mode, mounted]);
+
+  const toggleMode = () => {
+    setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
+  };
+
+  // Theme basierend auf Mode erstellen
+  const theme = React.useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode,
+          primary: {
+            main: "#0fd13f", // Grüne NavBar
+            light: mode === "dark" ? "#4caf50" : "#42a5f5",
+            dark: mode === "dark" ? "#388e3c" : "#1565c0",
+            contrastText: "#fff",
+          },
+          secondary: {
+            main: mode === "dark" ? "#bb86fc" : "#9c27b0",
+            light: mode === "dark" ? "#d7aefb" : "#ba68c8",
+            dark: mode === "dark" ? "#985eff" : "#7b1fa2",
+            contrastText: "#fff",
+          },
+          background: {
+            default: mode === "dark" ? "#121212" : "#fafafa",
+            paper: mode === "dark" ? "#1e1e1e" : "#ffffff",
+          },
+          text: {
+            primary: mode === "dark" ? "#ffffff" : "#000000",
+            secondary:
+              mode === "dark"
+                ? "rgba(255, 255, 255, 0.7)"
+                : "rgba(0, 0, 0, 0.6)",
+          },
+          homepage: mode === "dark" ? "#1e1e1e" : "#f4f4f4",
+        },
+        components: {
+          MuiCssBaseline: {
+            styleOverrides: {
+              html: {
+                backgroundColor: `${mode === "dark" ? "#121212" : "#fafafa"} !important`,
+                transition:
+                  "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+              },
+              body: {
+                backgroundColor: `${mode === "dark" ? "#121212" : "#fafafa"} !important`,
+                transition:
+                  "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+                margin: 0,
+              },
+            },
+          },
+          MuiAppBar: {
+            styleOverrides: {
+              colorPrimary: {
+                backgroundColor: mode === "dark" ? "#388e3c" : "#0fd13f",
+                color: "#ffffff",
+              },
+            },
+          },
+        },
+      }),
+    [mode],
+  );
+
+  // Aggressive GlobalStyles mit CSS-Variablen
+  const globalStyles = mounted ? (
+    <GlobalStyles
+      styles={{
+        ":root": {
+          "--background-color": mode === "dark" ? "#121212" : "#fafafa",
+          "--text-color": mode === "dark" ? "#ffffff" : "#000000",
+        },
+        "*": {
+          boxSizing: "border-box",
+        },
+        "html, body, #root": {
+          backgroundColor: `var(--background-color) !important`,
+          color: `var(--text-color) !important`,
+          transition:
+            "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+          margin: 0,
+          padding: 0,
+          minHeight: "100vh",
+        },
+        "div, section, main, article": {
+          backgroundColor: "transparent",
+        },
+      }}
+    />
+  ) : null;
+
+  // SSR-Fallback während mounted = false
+  if (!mounted) {
     return (
-        <ThemeContext.Provider value={{mode, toggleMode}}>
-            <ThemeProvider theme={theme}>
-                <CssBaseline enableColorScheme/>
-                {globalStyles}
-                {children}
-            </ThemeProvider>
-        </ThemeContext.Provider>
+      <ThemeProvider theme={createTheme({ palette: { mode: "light" } })}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
     );
+  }
+
+  return (
+    <ThemeContext.Provider value={{ mode, toggleMode }}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline enableColorScheme />
+        {globalStyles}
+        {children}
+      </ThemeProvider>
+    </ThemeContext.Provider>
+  );
 };

01-frontend/src/theme/ThemeToggle.tsx

@@ -1,31 +1,30 @@
 // theme/ThemeToggle.tsx
-import React from 'react';
-import {IconButton, Tooltip} from '@mui/material';
-import {Brightness4, Brightness7} from '@mui/icons-material';
-import {useThemeMode} from './ThemeContext';
-import {useTranslation} from "react-i18next";
+import React from "react";
+import { IconButton, Tooltip } from "@mui/material";
+import { Brightness4, Brightness7 } from "@mui/icons-material";
+import { useThemeMode } from "./ThemeContext";
+import { useTranslation } from "react-i18next";
 
 const ThemeToggle: React.FC = () => {
-    const {mode, toggleMode} = useThemeMode();
-    const {t} = useTranslation();
+  const { mode, toggleMode } = useThemeMode();
+  const { t } = useTranslation();
 
-    return (
-        <Tooltip title={mode === 'dark' ? t('lightMode') : t('darkMode')}>
-
-            <IconButton
-                onClick={toggleMode}
-                color="inherit"
-                sx={{
-                    transition: 'transform 0.2s',
-                    '&:hover': {
-                        transform: 'scale(1.1)',
-                    },
-                }}
-            >
-                {mode === 'dark' ? <Brightness7/> : <Brightness4/>}
-            </IconButton>
-        </Tooltip>
-    );
+  return (
+    <Tooltip title={mode === "dark" ? t("lightMode") : t("darkMode")}>
+      <IconButton
+        onClick={toggleMode}
+        color="inherit"
+        sx={{
+          transition: "transform 0.2s",
+          "&:hover": {
+            transform: "scale(1.1)",
+          },
+        }}
+      >
+        {mode === "dark" ? <Brightness7 /> : <Brightness4 />}
+      </IconButton>
+    </Tooltip>
+  );
 };
 
 export default ThemeToggle;

01-frontend/src/theme/theme-augmentation.d.ts

@@ -1,13 +1,13 @@
-import '@mui/material/styles';
+import "@mui/material/styles";
 
-declare module '@mui/material/styles' {
-    interface Palette {
-        tertiary: Palette['primary'];
-        homepage: string;
-    }
+declare module "@mui/material/styles" {
+  interface Palette {
+    tertiary: Palette["primary"];
+    homepage: string;
+  }
 
-    interface PaletteOptions {
-        tertiary?: PaletteOptions['primary'];
-        homepage?: string;
-    }
+  interface PaletteOptions {
+    tertiary?: PaletteOptions["primary"];
+    homepage?: string;
+  }
 }

01-frontend/src/theme/theme.ts

@@ -1,206 +1,206 @@
-import {createTheme} from '@mui/material/styles';
-import './theme-augmentation.d.ts'; // Falls vorhanden
+import { createTheme } from "@mui/material/styles";
+import "./theme-augmentation.d.ts"; // Falls vorhanden
 
 export const darkmode = createTheme({
-    palette: {
-        primary: {
-            main: '#0fd13f', // Grüne Standardfarbe
-            light: '#42a5f5',
-            dark: '#15650',
-            contrastText: '#fff',
-        },
-        secondary: {
-            main: '#9c27b0',
-            light: '#ba68c8',
-            dark: '#7b1fa2',
-            contrastText: '#fff',
-        },
-        error: {
-            main: '#f44336',
-            light: '#e57373',
-            dark: '#d32f2f',
-            contrastText: '#fff',
-        },
-        warning: {
-            main: '#ed6c02',
-            light: '#ff9800',
-            dark: '#e65100',
-            contrastText: '#fff',
-        },
-        info: {
-            main: '#0288d1',
-            light: '#03a9f4',
-            dark: '#01579b',
-            contrastText: '#fff',
-        },
-        success: {
-            main: '#2e7d32',
-            light: '#4caf50',
-            dark: '#1b5e20',
-            contrastText: '#fff',
-        },
-        background: {
-            default: '#fafafa',
-            paper: '#ffffff',
-        },
-        text: {
-            primary: '#000000',
-            secondary: 'rgba(0, 0, 0, 0.6)',
-        },
+  palette: {
+    primary: {
+      main: "#0fd13f", // Grüne Standardfarbe
+      light: "#42a5f5",
+      dark: "#15650",
+      contrastText: "#fff",
     },
-    // Sanfte Übergänge
-    transitions: {
-        duration: {
-            shortest: 150,
-            shorter: 200,
-            short: 250,
-            standard: 300,
-            complex: 375,
-            enteringScreen: 225,
-            leavingScreen: 195,
-        },
-        easing: {
-            easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
-            easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
-            easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
-            sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
-        },
+    secondary: {
+      main: "#9c27b0",
+      light: "#ba68c8",
+      dark: "#7b1fa2",
+      contrastText: "#fff",
     },
-    // Verbesserte Komponenten-Overrides
-    components: {
-        MuiCssBaseline: {
-            styleOverrides: {
-                body: {
-                    backgroundColor: '#fafafa',
-                    transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
-                },
-                html: {
-                    backgroundColor: '#fafafa',
-                    transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
-                },
-            },
-        },
-        MuiAppBar: {
-            styleOverrides: {
-                colorPrimary: {
-                    backgroundColor: '#0fd13f', // Grüne NavBar
-                    color: '#ffffff',
-                },
-            },
-        },
-        MuiButton: {
-            styleOverrides: {
-                root: {
-                    borderRadius: 8,
-                    textTransform: 'none', // Entfernt automatische Großschreibung
-                    fontWeight: 600,
-                },
-                contained: {
-                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-                    '&:hover': {
-                        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-                    },
-                },
-            },
-        },
-        MuiCard: {
-            styleOverrides: {
-                root: {
-                    borderRadius: 12,
-                    boxShadow: '0 2px 12px rgba(0,0,0,0.08)',
-                    transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1)',
-                    '&:hover': {
-                        boxShadow: '0 4px 20px rgba(0,0,0,0.12)',
-                    },
-                },
-            },
-        },
-        MuiTextField: {
-            styleOverrides: {
-                root: {
-                    '& .MuiOutlinedInput-root': {
-                        borderRadius: 8,
-                    },
-                },
-            },
-        },
-        MuiChip: {
-            styleOverrides: {
-                root: {
-                    borderRadius: 16,
-                },
-            },
-        },
-        MuiPaper: {
-            styleOverrides: {
-                root: {
-                    borderRadius: 8,
-                },
-                elevation1: {
-                    boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
-                },
-                elevation2: {
-                    boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
-                },
-            },
-        },
+    error: {
+      main: "#f44336",
+      light: "#e57373",
+      dark: "#d32f2f",
+      contrastText: "#fff",
     },
-    // Benutzerdefinierte Typografie
-    typography: {
-        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-        h1: {
-            fontWeight: 700,
-            fontSize: '2.5rem',
-            lineHeight: 1.2,
-        },
-        h2: {
-            fontWeight: 600,
-            fontSize: '2rem',
-            lineHeight: 1.3,
-        },
-        h3: {
-            fontWeight: 600,
-            fontSize: '1.75rem',
-            lineHeight: 1.3,
-        },
-        h4: {
-            fontWeight: 600,
-            fontSize: '1.5rem',
-            lineHeight: 1.4,
-        },
-        h5: {
-            fontWeight: 600,
-            fontSize: '1.25rem',
-            lineHeight: 1.4,
-        },
-        h6: {
-            fontWeight: 600,
-            fontSize: '1rem',
-            lineHeight: 1.4,
-        },
-        body1: {
-            fontSize: '1rem',
-            lineHeight: 1.5,
-        },
-        body2: {
-            fontSize: '0.875rem',
-            lineHeight: 1.4,
-        },
-        button: {
-            fontWeight: 600,
-            textTransform: 'none',
-        },
+    warning: {
+      main: "#ed6c02",
+      light: "#ff9800",
+      dark: "#e65100",
+      contrastText: "#fff",
     },
-    // Benutzerdefinierte Breakpoints
-    breakpoints: {
-        values: {
-            xs: 0,
-            sm: 600,
-            md: 960,
-            lg: 1280,
-            xl: 1920,
-        },
+    info: {
+      main: "#0288d1",
+      light: "#03a9f4",
+      dark: "#01579b",
+      contrastText: "#fff",
     },
-    // Angepasste Spacing-Funktion
-    spacing: 8, // 8px als Basis-Einheit
+    success: {
+      main: "#2e7d32",
+      light: "#4caf50",
+      dark: "#1b5e20",
+      contrastText: "#fff",
+    },
+    background: {
+      default: "#fafafa",
+      paper: "#ffffff",
+    },
+    text: {
+      primary: "#000000",
+      secondary: "rgba(0, 0, 0, 0.6)",
+    },
+  },
+  // Sanfte Übergänge
+  transitions: {
+    duration: {
+      shortest: 150,
+      shorter: 200,
+      short: 250,
+      standard: 300,
+      complex: 375,
+      enteringScreen: 225,
+      leavingScreen: 195,
+    },
+    easing: {
+      easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+      easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+      easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+      sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
+    },
+  },
+  // Verbesserte Komponenten-Overrides
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          backgroundColor: "#fafafa",
+          transition: "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+        },
+        html: {
+          backgroundColor: "#fafafa",
+          transition: "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+        },
+      },
+    },
+    MuiAppBar: {
+      styleOverrides: {
+        colorPrimary: {
+          backgroundColor: "#0fd13f", // Grüne NavBar
+          color: "#ffffff",
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          textTransform: "none", // Entfernt automatische Großschreibung
+          fontWeight: 600,
+        },
+        contained: {
+          boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+          "&:hover": {
+            boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+          },
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 12,
+          boxShadow: "0 2px 12px rgba(0,0,0,0.08)",
+          transition: "box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+          "&:hover": {
+            boxShadow: "0 4px 20px rgba(0,0,0,0.12)",
+          },
+        },
+      },
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          "& .MuiOutlinedInput-root": {
+            borderRadius: 8,
+          },
+        },
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 16,
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+        },
+        elevation1: {
+          boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
+        },
+        elevation2: {
+          boxShadow: "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",
+        },
+      },
+    },
+  },
+  // Benutzerdefinierte Typografie
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    h1: {
+      fontWeight: 700,
+      fontSize: "2.5rem",
+      lineHeight: 1.2,
+    },
+    h2: {
+      fontWeight: 600,
+      fontSize: "2rem",
+      lineHeight: 1.3,
+    },
+    h3: {
+      fontWeight: 600,
+      fontSize: "1.75rem",
+      lineHeight: 1.3,
+    },
+    h4: {
+      fontWeight: 600,
+      fontSize: "1.5rem",
+      lineHeight: 1.4,
+    },
+    h5: {
+      fontWeight: 600,
+      fontSize: "1.25rem",
+      lineHeight: 1.4,
+    },
+    h6: {
+      fontWeight: 600,
+      fontSize: "1rem",
+      lineHeight: 1.4,
+    },
+    body1: {
+      fontSize: "1rem",
+      lineHeight: 1.5,
+    },
+    body2: {
+      fontSize: "0.875rem",
+      lineHeight: 1.4,
+    },
+    button: {
+      fontWeight: 600,
+      textTransform: "none",
+    },
+  },
+  // Benutzerdefinierte Breakpoints
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920,
+    },
+  },
+  // Angepasste Spacing-Funktion
+  spacing: 8, // 8px als Basis-Einheit
 });

01-frontend/src/util/ColorUtil.tsx

@@ -1,58 +1,66 @@
-export function mapValueToColor(minVal: number, maxVal: number, actualVal: number): string {
-    const clamped = Math.min(Math.max(actualVal, minVal), maxVal);
+export function mapValueToColor(
+  minVal: number,
+  maxVal: number,
+  actualVal: number,
+): string {
+  const clamped = Math.min(Math.max(actualVal, minVal), maxVal);
 
-    // Calculate interpolation ratio (0-1)
-    const ratio = maxVal !== minVal
-        ? (clamped - minVal) / (maxVal - minVal)
-        : 0;
-    return hsvDegToHex(120 * ratio);//120° is green, 0° is red
+  // Calculate interpolation ratio (0-1)
+  const ratio = maxVal !== minVal ? (clamped - minVal) / (maxVal - minVal) : 0;
+  return hsvDegToHex(120 * ratio); //120° is green, 0° is red
 }
 
 export function getColorFromPercent(percent: string): string {
-    let perc = Number(percent) / 100
-    if (perc > 1) {
-        perc = 2.5;
-    }
-    return hsvDegToHex(120 * perc);
+  let perc = Number(percent) / 100;
+  if (perc > 1) {
+    perc = 2.5;
+  }
+  return hsvDegToHex(120 * perc);
 }
 
 export function hsvDegToHex(h: number): string {
-    h = Math.max(0, Math.min(360, h));
+  h = Math.max(0, Math.min(360, h));
 
-    const c = 1;
-    const x = (1 - Math.abs(((h / 60) % 2) - 1));
+  const c = 1;
+  const x = 1 - Math.abs(((h / 60) % 2) - 1);
 
-    let r, g, b;
-    if (h < 60) {
-        r = c;
-        g = x;
-        b = 0;
-    } else if (h < 120) {
-        r = x;
-        g = c;
-        b = 0;
-    } else if (h < 180) {
-        r = 0;
-        g = c;
-        b = x;
-    } else if (h < 240) {
-        r = 0;
-        g = x;
-        b = c;
-    } else if (h < 300) {
-        r = x;
-        g = 0;
-        b = c;
-    } else {
-        r = c;
-        g = 0;
-        b = x;
-    }
+  let r, g, b;
+  if (h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
 
-    // scale to 0-255
-    const rHex = Math.round(r * 255).toString(16).padStart(2, '0');
-    const gHex = Math.round(g * 255).toString(16).padStart(2, '0');
-    const bHex = Math.round(b * 255).toString(16).padStart(2, '0');
+  // scale to 0-255
+  const rHex = Math.round(r * 255)
+    .toString(16)
+    .padStart(2, "0");
+  const gHex = Math.round(g * 255)
+    .toString(16)
+    .padStart(2, "0");
+  const bHex = Math.round(b * 255)
+    .toString(16)
+    .padStart(2, "0");
 
-    return `#${rHex}${gHex}${bHex}`;
+  return `#${rHex}${gHex}${bHex}`;
 }

start.sh

@@ -1,16 +1,16 @@
 #!/bin/sh
-
+LANG="C"
 
 cleanup() {
+  trap - INT EXIT TERM
   echo "[DPS] Cleaning up..."
-  pkill $backend_pid # pkill because subshells
-  pkill $frontend_pid
+  pgrep -P "$backend_pid" | xargs kill -TERM > /dev/null 2>&1
+  pgrep -P "$frontend_pid" | xargs kill -TERM > /dev/null 2>&1
   echo "[DPS] Cleaned up..."
   exit
 }
 
-# Trap INT (Ctrl+C)
-trap cleanup INT
+trap cleanup INT EXIT TERM
 echo "[DPS] trapped"
 
 cd ./00-backend
@@ -25,4 +25,5 @@ echo "[DPS] Frontend started with PID $frontend_pid"
 
 echo "[DPS] Ctrl+C to stop"
 # Wait for cleanup
-wait
+wait $backend_pid
+wait $frontend_pid