added delete function to product table

frontend/src/pages/Inventory.tsx

@@ -25,8 +25,8 @@ import FilterListIcon from "@mui/icons-material/FilterList";
 import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import { useQuery } from "@tanstack/react-query";
-import { getProducts } from "../utils/uxFncs";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getProducts, deleteSelectedProducts } from "../utils/uxFncs";
 import { visuallyHidden } from "@mui/utils";
 import { formatDate } from "../utils/uxFncs";
 import Cookies from "js-cookie";
@@ -182,8 +182,22 @@ const EnhancedTableHead = (props: EnhancedTableHeadProps) => {
   );
 };
 
-const EnhancedTableToolbar = ({ numSelected }: { numSelected: number }) => {
+const EnhancedTableToolbar = ({
+  numSelected,
+  selected,
+}: {
+  numSelected: number;
+  selected: readonly string[];
+}) => {
   const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  const { mutate } = useMutation({
+    mutationFn: (values: string[]) => deleteSelectedProducts(values),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["products"] });
+    },
+  });
 
   return (
     <Box
@@ -205,16 +219,26 @@ const EnhancedTableToolbar = ({ numSelected }: { numSelected: number }) => {
     >
       {numSelected > 0 ? (
         <Typography sx={{ flex: "1 1 100%" }} component="div">
-          {numSelected} ausgewahlt
+          {numSelected} {t("selected")}
         </Typography>
       ) : (
-        <Typography level="body-lg" sx={{ flex: "1 1 100%" }} component="div">
+        <Typography
+          level="body-lg"
+          fontWeight={"bold"}
+          sx={{ flex: "1 1 100%" }}
+          component="div"
+        >
           {t("inventory")}
         </Typography>
       )}
       {numSelected > 0 ? (
         <Tooltip title="Delete">
-          <IconButton size="sm" color="danger" variant="solid">
+          <IconButton
+            onClick={() => mutate([...selected])}
+            size="sm"
+            color="danger"
+            variant="solid"
+          >
             <DeleteIcon />
           </IconButton>
         </Tooltip>
@@ -346,7 +370,10 @@ export const InventoryPage = () => {
         variant="outlined"
         className="mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm"
       >
-        <EnhancedTableToolbar numSelected={selected.length} />
+        <EnhancedTableToolbar
+          numSelected={selected.length}
+          selected={selected}
+        />
         <Table
           aria-labelledby="tableTitle"
           hoverRow

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

@@ -38,5 +38,6 @@
     "quick-tips-1": "Update the app name to personalize the sidebar and login header.",
     "quick-tips-2": "Choose a currency code that matches your pricing display, e.g. EUR, CHF, or USD.",
     "settings-sub": "Manage your app preferences and store defaults.",
-    "preferences": "Preferences"
+    "preferences": "Preferences",
+    "selected": "selected"
 }

frontend/src/utils/uxFncs.ts

@@ -273,3 +273,19 @@ export const fetchSettings = async () => {
     return { success: true, data: response.data, code: response.code };
   }
 };
+
+export const deleteSelectedProducts = async (uuids: string[]) => {
+  const result = await fetch(`${API_BASE}/products/delete-selection`, {
+    method: "POST",
+    body: JSON.stringify(uuids),
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+
+  const response = await result.json();
+
+  console.log(response);
+};