feat: add deleteInventoryItem function and integrate with DeleteInventoryItem component

frontend/api/inventory.ts

@@ -96,12 +96,6 @@ export async function fetchInventoryItems(): Promise<InventoryItem[]> {
   }
 }
 
-/**
- * Simulates creating a new inventory item.
- * Uses axios POST and if unavailable, returns a simulated response.
- *
- * Note: The function accepts all fields except id, lastUpdated, and status.
- */
 export async function createInventoryItem(
   item: Omit<CreateInventoryItemInput, "id" | "lastUpdated" | "status">
 ): Promise<InventoryItem> {
@@ -116,3 +110,15 @@ export async function createInventoryItem(
     throw new Error("Failed to create inventory item: " + error);
   }
 }
+
+export async function deleteInventoryItem(id: string) {
+  try {
+    const response = await axiosInstance.delete<InventoryItem>(
+      "/inventory/" + id
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error while deleting Inventory Item! " + error);
+    throw new Error("Failed to deleting inventory item: " + error);
+  }
+}

frontend/app/(sidebar)/inventory/delete-inventory-item.tsx

@@ -8,13 +8,26 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { deleteInventoryItem } from "@/api/inventory";
 
 export function DeleteInventoryItem({ id }: { id: string }) {
   const [open, setOpen] = useState(false);
+  const queryClient = useQueryClient();
+
+  const { mutate: deleteItem, status } = useMutation({
+    mutationFn: deleteInventoryItem,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["inventoryItems"] });
+      setOpen(false); // Close dialog on success
+    },
+    onError: (error) => {
+      console.error("Failed to delete item:", error);
+    },
+  });
 
   const handleDelete = () => {
-    console.log(`Item with ID ${id} deleted.`);
+    deleteItem(id.toString());
-    setOpen(false);
   };
 
   return (
@@ -47,8 +60,9 @@ export function DeleteInventoryItem({ id }: { id: string }) {
             <Button
               className="bg-red-600 hover:bg-red-800 text-white"
               onClick={handleDelete}
+              disabled={status === "pending"}
             >
-              Confirm Delete
+              {status === "pending" ? "Deleting..." : "Delete"}
             </Button>
           </DialogFooter>
         </DialogContent>