Refactor selected item handling: update state management to derive selected item from name and ensure real-time inventory count

web/client/src/components/InventoryGrid.jsx

@@ -11,12 +11,19 @@ function InventoryGrid() {
   const getFilteredItems = useInventoryStore((state) => state.getFilteredItems);
   const orderItem = useInventoryStore((state) => state.orderItem);
 
-  const [selectedItem, setSelectedItem] = useState(null);
+  const [selectedItemName, setSelectedItemName] = useState(null);
   const [orderAmount, setOrderAmount] = useState(1);
   const [sortBy, setSortBy] = useState('count');
   const [activeCategory, setActiveCategory] = useState('all');
   const [selectedDropper, setSelectedDropper] = useState('');
 
+  // Derive selectedItem from live inventory so count always reflects real-time data
+  const selectedItem = useMemo(() => {
+    if (!selectedItemName) return null;
+    const items = inventory.itemList || [];
+    return items.find((i) => i.name === selectedItemName) || null;
+  }, [selectedItemName, inventory.itemList]);
+
   const droppers = inventory.droppers || [];
 
   const items = getFilteredItems();
@@ -40,7 +47,7 @@ function InventoryGrid() {
   }, [selectedItem, orderAmount, orderItem, selectedDropper]);
 
   const handleItemClick = (item) => {
-    setSelectedItem(item);
+    setSelectedItemName(item.name);
     setOrderAmount(1);
   };
 
@@ -146,7 +153,7 @@ function InventoryGrid() {
                 <h3>{formatItemName(selectedItem.name || '')}</h3>
                 <span className="detail-id">{selectedItem.name || ''}</span>
               </div>
-              <button className="detail-close" onClick={() => setSelectedItem(null)}>✕</button>
+              <button className="detail-close" onClick={() => setSelectedItemName(null)}>✕</button>
             </div>
 
             <div className="detail-stats">