added english translation

frontend/src/components/StorageRow.tsx

@@ -5,12 +5,15 @@ import { useStore } from "@tanstack/react-store";
 import { Input, Button } from "@mui/joy";
 import type { Storage } from "../misc/interfaces";
 import { formatDate } from "../utils/uxFncs";
+import { useTranslation } from "react-i18next";
 
 interface StorageRowProps {
   storage: Storage;
 }
 
 export const StorageRow = ({ storage }: StorageRowProps) => {
+  const { t } = useTranslation();
+
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
@@ -90,7 +93,7 @@ export const StorageRow = ({ storage }: StorageRowProps) => {
             size="sm"
             className="rounded-xl"
           >
-            {mutation.isPending ? "..." : "Save"}
+            {mutation.isPending ? "..." : t("save")}
           </Button>
           <Button
             color="danger"
@@ -99,7 +102,7 @@ export const StorageRow = ({ storage }: StorageRowProps) => {
             size="sm"
             className="rounded-xl"
           >
-            {deleteMutation.isPending ? "..." : "Delete"}
+            {deleteMutation.isPending ? "..." : t("delete")}
           </Button>
         </div>
       </td>

frontend/src/pages/AddProduct.tsx

@@ -57,7 +57,7 @@ export const AddProduct = () => {
               {t("add-product")}
             </Typography>
             <Typography level="body-lg" className="text-slate-500">
-              {t("inventory-header")}
+              {t("add-product-subtitle")}
             </Typography>
           </div>
           <Chip

frontend/src/pages/Inventory.tsx

@@ -104,7 +104,7 @@ const EnhancedTableHead = (props: EnhancedTableHeadProps) => {
     { id: "stock", label: t("stock"), numeric: true },
     { id: "location", label: t("storage-place"), numeric: false },
     { id: "expiryDate", label: t("expiry-date"), numeric: false },
-    { id: "refillDate", label: t("refill-date"), numeric: false },
+    { id: "refillDate", label: t("bottling-date"), numeric: false },
   ];
 
   return (
@@ -175,7 +175,7 @@ const EnhancedTableHead = (props: EnhancedTableHeadProps) => {
             </th>
           );
         })}
-        <th className="px-6 py-4 text-right">Aktionen</th>
+        <th className="px-6 py-4 text-right">{t("actions")}</th>
       </tr>
     </thead>
   );
@@ -251,13 +251,11 @@ export const InventoryPage = () => {
     (product: any, index: number) => ({
       id: String(product?.uuid ?? index),
       uuid: String(product?.uuid ?? ""),
-      name: product?.name ?? "Produktname",
+      name: product?.name ?? t("product-name"),
       description: product?.description ?? "",
       imageUrl: product?.picture ?? undefined,
       price: product?.price ?? "-",
       stock: `${product?.amount ?? 0} Stk.`,
-      stockLabel: product?.amount === 0 ? "FEHLT" : "OK",
-      stockStatus: product?.amount === 0 ? "missing" : "ok",
       location: product?.storage_location_name ?? "-",
       locationDetail: "",
       expiryDate: formatDate(product?.expiry_date),
@@ -272,7 +270,7 @@ export const InventoryPage = () => {
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
 
   const handleRequestSort = (
-    event: React.MouseEvent<unknown>,
+    _event: React.MouseEvent<unknown>,
     property: keyof ProductRow,
   ) => {
     const isAsc = orderBy === property && order === "asc";
@@ -289,7 +287,7 @@ export const InventoryPage = () => {
     setSelected([]);
   };
 
-  const handleClick = (event: React.MouseEvent<unknown>, id: string) => {
+  const handleClick = (_event: React.MouseEvent<unknown>, id: string) => {
     const selectedIndex = selected.indexOf(id);
     let newSelected: readonly string[] = [];
     if (selectedIndex === -1) {
@@ -311,7 +309,7 @@ export const InventoryPage = () => {
     setPage(newPage);
   };
 
-  const handleChangeRowsPerPage = (event: any, newValue: number | null) => {
+  const handleChangeRowsPerPage = (_event: any, newValue: number | null) => {
     setRowsPerPage(parseInt(newValue!.toString(), 10));
     setPage(0);
   };
@@ -330,8 +328,8 @@ export const InventoryPage = () => {
 
   return (
     <>
-      <Typography level="h2">{t("inventory-subtitle")}</Typography>
+      <Typography level="h2">{t("inventory")}</Typography>
-      <Typography level="body-lg">{t("inventory-header")}</Typography>
+      <Typography level="body-lg">{t("inventory-subtitle")}</Typography>
       <div className="mt-4 flex items-center gap-3">
         <Button
           startDecorator={<AddIcon />}
@@ -435,24 +433,12 @@ export const InventoryPage = () => {
                     <td className="px-6 py-5">
                       <Chip
                         variant="soft"
-                        color={
+                        color={"neutral"}
-                          row.stockStatus === "low" ? "warning" : "success"
-                        }
                         size="lg"
                         className="px-3"
                       >
                         {row.stock}
                       </Chip>
-                      <Chip
-                        variant="soft"
-                        color={
-                          row.stockStatus === "missing" ? "danger" : "success"
-                        }
-                        size="md"
-                        className="ml-2 mt-2"
-                      >
-                        {row.stockLabel}
-                      </Chip>
                     </td>
                     <td className="px-6 py-5">
                       <Typography level="title-md">{row.location}</Typography>

frontend/src/pages/Storages.tsx

@@ -67,7 +67,7 @@ export const Storages = () => {
           >
             <thead>
               <tr>
-                <th>{t("name")}</th>
+                <th>{t("storage-name")}</th>
                 <th>{t("description")}</th>
                 <th>{t("created-at")}</th>
                 <th>{t("updated-at")}</th>

frontend/src/utils/i18n/locales/en/en.json

@@ -1,6 +1,33 @@
 {
+    "app-title": "Stockhome",
+    "add": "Add",
+    "storages": "Storages",
+    "rows-per-page": "Rows per page",
+    "details": "Details",
     "username": "Username",
     "password": "Password",
     "eu001": "Wrong username or password!",
-    "login": "Login"
+    "login": "Login",
+    "product-name": "Product name",
+    "price": "Price",
+    "stock": "Stock",
+    "storage-place": "Storage place",
+    "expiry-date": "Expiry Date",
+    "bottling-date": "Bottling Date",
+    "inventory": "Inventory",
+    "actions": "Actions",
+    "description": "Description",
+    "product-details": "Product Details",
+    "save": "Save",
+    "profile": "Profile",
+    "settings": "Settings",
+    "storage-delete-info": "WARNING: If you remove a storage all items/products that are stored in this storage will also get removed. This cannot be undone!",
+    "storage-name": "Storage name",
+    "created-at": "Created at",
+    "updated-at": "Updated at",
+    "delete": "Delete",
+    "amount": "Amount",
+    "inventory-subtitle": "Here you can inspect all of your stored items.",
+    "add-product": "Add product",
+    "add-product-subtitle": "Here you can enter information for a new product."
 }