feat: implement confirmation dialog for deleting inventory items

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

@@ -1,63 +1,58 @@
-"use client";
-
 import { useState } from "react";
-import { CalendarIcon } from "lucide-react";
-import { format } from "date-fns";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
 import {
   Dialog,
+  DialogTrigger,
   DialogContent,
+  DialogTitle,
   DialogDescription,
   DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { cn } from "@/lib/utils";
-// import { deleteInventoryItem } from "@/api/inventory";
-// import type { DeleteInventoryItemInput } from "@/types";
 
-export function DeleteInventoryItem() {
+export function DeleteInventoryItem({ id }: { id: string }) {
-  const [date, setDate] = useState<Date | undefined>();
   const [open, setOpen] = useState(false);
-  const [itemName, setItemName] = useState("");
-  const [itemType, setItemType] = useState("");
-  const [itemCategory, setItemCategory] = useState("");
-  const [itemQuantity, setItemQuantity] = useState(0);
-  const [itemUnit, setItemUnit] = useState("");
-
-  // const queryClient = useQueryClient();
 
   const handleDelete = () => {
-    // handle delete item
+    console.log(`Item with ID ${id} deleted.`);
+    setOpen(false);
   };
 
   return (
-    <Button
+    <div>
-      type="submit"
+      {/* trigger button for the confirmation dialog */}
-      className="bg-red-500 hover:bg-red-800 text-white"
+      <Dialog open={open} onOpenChange={setOpen}>
-      onClick={handleDelete}
+        <DialogTrigger asChild>
-    >
+          <Button
-      Delete Item
+            type="button"
-    </Button>
+            className="bg-red-500 hover:bg-red-800 text-white"
+          >
+            Delete Item
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogTitle>Confirm Deletion</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this item? This action cannot be
+            undone.
+          </DialogDescription>
+
+          {/* footer with confirm and cancel buttons */}
+          <DialogFooter>
+            <Button
+              className="bg-gray-500 hover:bg-gray-700 text-white"
+              onClick={() => setOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              className="bg-red-600 hover:bg-red-800 text-white"
+              onClick={handleDelete}
+            >
+              Confirm Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
   );
 }

frontend/app/(sidebar)/inventory/page.tsx

@@ -162,7 +162,9 @@ export default function InventoryPage() {
     {
       accessorKey: "delete",
       header: "Delete",
-      cell: () => <DeleteInventoryItem />,
+      cell: ({ row }: { row: { original: EditInventoryItemProps } }) => (
+        <DeleteInventoryItem id={row.original.id} />
+      ),
       enableSorting: false,
     },
   ];