Updated logic for user inventory to close selection modal and open item edit modal

Author: KushPatel-18

client/src/components/ui/popups/user_inventory_select_popup.tsx

@@ -13,15 +13,19 @@ type ItemModalProps = {
   isOpen: boolean;
   item: InventoryItem | null;
   onClose: () => void;
+  onEdit: (item: InventoryItem) => void;
 };
 
-function UserInventorySelectPopup({ isOpen, item, onClose }: ItemModalProps) {
+function UserInventorySelectPopup({
+  isOpen,
+  item,
+  onClose,
+  onEdit,
+}: ItemModalProps) {
   if (!isOpen || !item) return null;
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
-      onClick={onClose}
-    >
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      {/* onClick={onClose} */}
       <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
         {/* Header */}
         <div className="mb-3 flex items-center justify-between">
@@ -67,11 +71,20 @@ function UserInventorySelectPopup({ isOpen, item, onClose }: ItemModalProps) {
 
         {/* Footer */}
         <div className="flex justify-end gap-3 border-t pt-4">
-          <Link href="/user_inventory">
+          {/* <Link href="/user_inventory">
             <button className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
               Edit
             </button>
-          </Link>
+          </Link> */}
+          <button
+            className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+            onClick={() => {
+              onClose(); // close current modal
+              onEdit(item); // tell parent to open edit modal
+            }}
+          >
+            Edit
+          </button>
           <button
             onClick={onClose}
             className="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"

client/src/components/ui/user_tables/user_inventory_table.tsx

@@ -1,7 +1,8 @@
 // src/pages/user_dashboard.tsx (Update the import path)
 //import "";
-import { useEffect,useState } from "react";
+import { useEffect, useState } from "react";
 
+import UserInventoryEditPopup from "../popups/user_inventory_edit_popup";
 import InventoryItemModal from "../popups/user_inventory_select_popup";
 
 export type InventoryItem = {
@@ -14,6 +15,7 @@ const UserInventoryTable = () => {
   const [inventory, setInventory] = useState<InventoryItem[]>([]);
   const [selectedItem, setSelectedItem] = useState<InventoryItem | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
   // Mock data (replace with Django API call later)
   useEffect(() => {
@@ -67,6 +69,16 @@ const UserInventoryTable = () => {
         isOpen={isModalOpen}
         item={selectedItem}
         onClose={() => setIsModalOpen(false)}
+        onEdit={(item) => {
+          setIsModalOpen(false);
+          setSelectedItem(item);
+          setIsEditModalOpen(true);
+        }}
+      />
+      <UserInventoryEditPopup
+        isOpen={isEditModalOpen}
+        item={selectedItem}
+        onClose={() => setIsEditModalOpen(false)}
       />
     </>
   );