Added NewItemDialog without query connection.

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

@@ -149,5 +149,8 @@
   "imageUploadedSuccessfully": "Bild hochgeladen",
   "uploading": "Lädt hoch...",
   "upload": "Hochladen",
-  "imageUploadNoticeFs": "Die Auflösung der Farming Station beträgt 720 x 960 px"
+  "imageUploadNoticeFs": "Die Auflösung der Farming Station beträgt 720 x 960 px",
+  "itemCreatedSuccessfully": "Artikel erfolgreich erstellt",
+  "createNewItem": "Neuen Artikel erstellen",
+  "stockExpected": "Erwarteter Bestand"
 }

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

@@ -149,5 +149,8 @@
   "imageUploadedSuccessfully": "Uploaded Image Successfully",
   "uploading": "Uploading...",
   "upload": "Upload",
-  "imageUploadNoticeFs": "The Resolution of the Farming Station is 720 x 960 px"
+  "imageUploadNoticeFs": "The Resolution of the Farming Station is 720 x 960 px",
+  "itemCreatedSuccessfully": "Item created successfully",
+  "createNewItem": "Create New Item",
+  "stockExpected": "Expected Stock"
 }

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

@@ -1,16 +1,17 @@
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import { Box, Button, IconButton, Toolbar, useTheme } from "@mui/material";
-import Item from "../../components/Item";
-import {useTranslation} from "react-i18next";
-import {DataGrid, GridColDef, GridRowId, GridRowSelectionModel} from "@mui/x-data-grid";
-import {useEffect, useState} from "react";
 import { Gauge, gaugeClasses } from "@mui/x-charts";
-import {useAccount} from "../AccountProvider.tsx";
+import { DataGrid, GridColDef, GridRowId, GridRowSelectionModel } from "@mui/x-data-grid";
 import { useQuery } from "@tanstack/react-query";
-import {fetchItems} from "../query/Queries.tsx";
+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 { fetchItems } from "../query/Queries.tsx";
 import ItemImageDialog from "./ItemImageDialog.tsx";
+import NewItemDialog from "./NewItemDialog.tsx";
 
 export default function ItemsInfo() {
     const theme = useTheme();
@@ -20,6 +21,7 @@ export default function ItemsInfo() {
     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);
 
@@ -41,7 +43,7 @@ export default function ItemsInfo() {
 
 
     function handleAddItem() {
-        //TODO: flsp
+        setNewItemDialog(true);
     }
 
     const { user: loginData } = useAccount();
@@ -177,7 +179,8 @@ export default function ItemsInfo() {
                 checkboxSelection
                 disableRowSelectionOnClick
                 onRowSelectionModelChange={handleSelectionChange}
-                slots={{ toolbar: () => (
+                slots={{
+                    toolbar: () => (
                         <Toolbar>
                             <Button
                                 variant="contained"
@@ -196,7 +199,6 @@ export default function ItemsInfo() {
                                 color="primary"
                                 startIcon={<DeleteIcon />}
                                 onClick={handleAddItem}
-                                disabled={selectedRows.size === 0}
                                 sx={{
                                     marginRight: 1
                                 }}
@@ -204,7 +206,8 @@ export default function ItemsInfo() {
                                 {t('addProduct')}
                             </Button>
                         </Toolbar>
-                    )}}
+                    )
+                }}
                 showToolbar
                 processRowUpdate={(updatedRow) => {
                     setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row));
@@ -224,6 +227,11 @@ export default function ItemsInfo() {
                     isFarmStationImage={isFarmStationImage}
                 />
             )}
+
+            <NewItemDialog
+                open={newItemDialog}
+                onClose={() => setNewItemDialog(false)}
+            />
         </Box>
     );
 }

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

@@ -0,0 +1,157 @@
+
+import CloseIcon from '@mui/icons-material/Close';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import {
+    Alert,
+    Box,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    TextField,
+    Typography
+} from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Item } from '../../components/Item';
+
+interface NewItemDialogProps {
+    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);
+
+    const handleClose = () => {
+        setError(null);
+        setSuccess(false);
+        setLoading(false);
+        onClose();
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setItem({ ...item, [e.target.name]: e.target.value });
+    };
+
+    const handleSave = async () => {
+        setLoading(true);
+        setError(null);
+        setSuccess(false);
+    };
+
+    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
+                    />
+                    <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>
+                    )}
+
+                    {/* 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>
+    );
+}