From a21b5a1f7e2a8f42b2556684e33925a303337f59 Mon Sep 17 00:00:00 2001
From: Tim <47184194+imgde@users.noreply.github.com>
Date: Fri, 13 Jun 2025 19:26:17 +0200
Subject: [PATCH] Initial ItemsInfo (to be improved)

---
 00-backend/datasource/database.sqlite         | Bin 2629632 -> 2629632 bytes
 .../public/locales/de/translation.json        |   9 +-
 .../public/locales/en/translation.json        |   9 +-
 01-frontend/src/components/Item.tsx           |   1 +
 .../src/helper/adminpanel/ItemsInfo.tsx       | 202 ++++++++++++++++--
 5 files changed, 202 insertions(+), 19 deletions(-)

diff --git a/00-backend/datasource/database.sqlite b/00-backend/datasource/database.sqlite
index 6049a259d37110ba512e0de9f0161af59168be62..3ed449be160ab76c9e4f80af9c6b89856adf952c 100644
GIT binary patch
delta 451
zcmZY4JxCjI9L90)CEl5ri%nx~lhY=e`iDb=F1lDURCH)!6@(08d5nod*LJ8PsD-Cp
z99lZuBB-E~6s5i-ojlP(D>w#%3ZhFXb#M?|^)klcw|qa#^P6>+q}jXs5|v6{&6iSX
z4unL=ghHr<ho~hqLMQ47FX1EnM1U}eAW=^|AVS1LB1|+8kBCO%G4X_m5K+P;nuuoN
zDG?*$L<`YMB#383+cw0?x{_CWZEZvB>*|vFQO&8no6qatD>G)^Q`7E|#+O$!Z_m;P
zn@R8C@Osy&WY15Q71_*HwBy_KRc7t=<<1~?|Hk^i-|2^q71<oCXn3#Oz4)W2uaK}q
z6DPrAS65TAnXTyZn~?RwO8?vGc_+@DIpONSfNYLdwD4<7Bz;z1E7s_Ld`V+LkJo()
zr1V$%mNBAT1S5fM<Fog_|EJOHRgDwv$hI6|$y(7KazvY~-4v!A(WwoEmG*l-<lR_3
UJ?F;i#ba))9-1xqe~atPEoF6{L;wH)

delta 223
zcmWN=yGp}Q0LNitqB+gwG~TtXt@V-v4uXrTg5aXNAPT>}NfrLODh^p39NZOb2`(kz
zqGM+t!L<*dAAJ4l+3WwmZ+hd0*0DFfMtEXc_#zN9VpfF0h?<B*EE16lE9xQ>b7EdB
zh()m^mc@!#6>Fj)nxZAvMO$>lhUkh-u_d;}j>w0&msh_RjEeBheZKE!6Tch{+)14G
zOfqG@<3syoy0zQ%%$%Bmy{b3Tp}mWKlMmaD0{c_!Rc^Pqs9av&RPG>rJjyQ1<jYOY
F{{RyXO7s8#

diff --git a/01-frontend/public/locales/de/translation.json b/01-frontend/public/locales/de/translation.json
index d0d83b1..1ec3081 100644
--- a/01-frontend/public/locales/de/translation.json
+++ b/01-frontend/public/locales/de/translation.json
@@ -102,6 +102,11 @@
   "surname": "Nachname",
   "language": "Sprache",
   "password": "Passwort",
-  "adminize": "Admin ernennen",
-  "unadminize": "Admin abernennen",
+  "actualPrice": "Endpreis in €",
+  "stock": "Bestand",
+  "price100": "Preis in ct",
+  "discount100": "Rabatt in %",
+  "deleteProduct": "Produkt löschen",
+  "description": "Beschreibung",
+  "images": "Bilder"
 }
diff --git a/01-frontend/public/locales/en/translation.json b/01-frontend/public/locales/en/translation.json
index 98eb829..baac535 100644
--- a/01-frontend/public/locales/en/translation.json
+++ b/01-frontend/public/locales/en/translation.json
@@ -102,6 +102,11 @@
   "surname": "Surname",
   "language": "Language",
   "password": "Password",
-  "adminize": "Make Admin",
-  "unadminize": "Revoke Admin"
+  "actualPrice": "Price in €",
+  "stock": "Stock",
+  "price100": "Price in ct",
+  "discount100": "Discount in %",
+  "deleteProduct": "Delete Product",
+  "description": "Description",
+  "images": "Images"
 }
\ No newline at end of file
diff --git a/01-frontend/src/components/Item.tsx b/01-frontend/src/components/Item.tsx
index 8c1ddd9..81895ca 100644
--- a/01-frontend/src/components/Item.tsx
+++ b/01-frontend/src/components/Item.tsx
@@ -5,6 +5,7 @@ type Item = {
     description: string;
     price100: number;
     stock: number;
+    stockExpected: number;
     category: string;
     rating: number;
     discount100: number;
diff --git a/01-frontend/src/helper/adminpanel/ItemsInfo.tsx b/01-frontend/src/helper/adminpanel/ItemsInfo.tsx
index c233e0d..ed5ae6c 100644
--- a/01-frontend/src/helper/adminpanel/ItemsInfo.tsx
+++ b/01-frontend/src/helper/adminpanel/ItemsInfo.tsx
@@ -1,27 +1,199 @@
-import { Typography, Box, useTheme } from "@mui/material";
+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} from "@mui/x-charts";
 
-export default function ItemInfo() {
+export default function ItemsInfo() {
     const theme = useTheme();
+    const {t} = useTranslation();
+
+    //TODO: add colors to gauges for rating adn stock
+    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;
+
+        const red = Math.floor(255 * (1 - ratio));
+        const green = Math.floor(255 * ratio)
+
+        const redHex = red.toString(16).padStart(2, '0').toUpperCase();
+        const greenHex = green.toString(16).padStart(2, '0').toUpperCase();
+
+        return `#${redHex}${greenHex}00`; // Blue is always 00
+    }
+
+    function handleIconEdit(item: Item) {
+        //TODO: implement
+        console.log("IconEdit", item);
+    }
+
+    const _rows: Item[] = [
+        {
+            id: "1",
+            uuid: "uuid123",
+            name: "Item",
+            description: "Super duper geil <b>wichtiger text </b>",
+            price100: 1000,
+            stock: 100,
+            stockExpected: 1200,
+            category: "garden",
+            rating: 5,
+            discount100: 21,
+        },
+        {
+            id: "2",
+            uuid: "uuid12312412",
+            name: "Schlauch",
+            description: "Schlauchiger Schlauch für Schlauchige Angelegenheiten",
+            price100: 10,
+            stock: 50,
+            stockExpected: 100,
+            category: "technicalComponents",
+            rating: 10,
+            discount100: 21,
+        },
+    ]
+
+    //TODO: get per REST
+    const [rows, setRows] = useState<Item[]>(_rows);
+    const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());
+
+    const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
+        setSelectedRows(newSelection.ids);
+    };
+
+    const handleDeleteSelected = async () => {
+        selectedRows.forEach((row) => {
+            //TODO: send delete command, or send deleteall
+            console.log(row);
+        })
+
+        setRows(rows.filter((row) => !selectedRows.has(row.id)));
+    };
+
+    const columns: GridColDef<(typeof rows)[number]>[] = [
+        {field: 'id', headerName: 'ID', width: 60},
+        {
+            field: 'uuid',
+            headerName: "UUID",
+            type: "string",
+            width: 120,
+            editable: true
+        },
+        {
+            field: 'name',
+            headerName: t('name'),
+            width: 150,
+            editable: true,
+        },
+        {
+            field: 'category',
+            headerName: t('category'),
+            width: 150,
+            editable: true,
+        },
+        {
+            field: 'description',
+            headerName: t('description'),
+            width: 150,
+            editable: true,
+        },
+        {
+            field: 'price100',
+            headerName: t('price100'),
+            width: 100,
+            editable: true,
+            type: 'number'
+        },
+        {
+            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={params.row.stock} valueMin={0} valueMax={params.row.stockExpected} startAngle={-90} endAngle={90} />
+        },
+        {
+            field: 'rating',
+            headerName: t('rating'),
+            width: 100,
+            editable: true,
+            type: 'number',
+            renderCell: params => <Gauge value={params.row.rating} valueMin={0} valueMax={10} startAngle={-90} endAngle={90}/>
+        },
+        { //edit billing information button
+            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={() => handleIconEdit(params.row)}> <EditIcon/> </IconButton>,
+        }
+    ];
+
+    useEffect(() => {
+        console.log(mapValueToColor(0,10,2))
+        console.log(mapValueToColor(0,10,7))
+    }, []);
 
     return (
         <Box
+            className="page-table"
             sx={{
-                minHeight: 200,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
                 backgroundColor: theme.palette.background.paper,
-                color: theme.palette.text.secondary,
-                borderRadius: 2,
-                boxShadow: 2,
-                mt: 4,
-                p: 4,
-                textAlign: "center",
+                color: theme.palette.text.secondary
             }}
         >
-            <Typography variant="h6">
-                🚧 Under construction...
-            </Typography>
+            <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>
+                        </Toolbar>
+                    )}}
+                showToolbar
+                processRowUpdate={(updatedRow, originalRow) => {
+                    setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row));
+                    //TODO: make REST callback
+                    return updatedRow;
+                }}
+            />
         </Box>
     );
 }