feat(5-plan-02-t3,t4): create useItemSearch hook and integrate search button into inventory page

frontend/app/inventory/page.tsx

@@ -8,6 +8,8 @@ import Scanner from '@/components/Scanner';
 import StatCard from '@/components/StatCard';
 import InventoryTable from '@/components/InventoryTable';
 import FilterBar from '@/components/FilterBar';
+import SearchModal from '@/components/inventory/SearchModal';
+import QuantityAdjustmentModal from '@/components/inventory/QuantityAdjustmentModal';
 import { useInventoryFilter } from '@/hooks/useInventoryFilter';
 import { toast } from 'react-hot-toast';
 import {
@@ -80,6 +82,11 @@ export default function InventoryPage() {
   const [showBoxManager, setShowBoxManager] = useState(false);
   const [selectedBoxLabel, setSelectedBoxLabel] = useState<string | null>(null);
 
+  // Search Modal State
+  const [showSearchModal, setShowSearchModal] = useState(false);
+  const [selectedSearchItem, setSelectedSearchItem] = useState<Item | null>(null);
+  const [showQuantityModal, setShowQuantityModal] = useState(false);
+
   useEffect(() => {
     setMounted(true);
     const savedUser = localStorage.getItem('inventory_user');
@@ -238,6 +245,16 @@ export default function InventoryPage() {
     }
   }, [inventory]);
 
+  const handleSearchItemSelect = (item: Item) => {
+    setSelectedSearchItem(item);
+    setShowQuantityModal(true);
+  };
+
+  const handleQuantityModalClose = () => {
+    setShowQuantityModal(false);
+    setSelectedSearchItem(null);
+  };
+
   // Extract unique item types and box labels for suggestions
   const existingTypes = Array.from(new Set(inventory.map(i => i.type).filter(Boolean))).sort() as string[];
   const existingBoxes = Array.from(new Set(inventory.map(i => i.box_label).filter(Boolean))).sort() as string[];
@@ -263,8 +280,15 @@ export default function InventoryPage() {
            <p className="text-xs md:text-sm text-secondary font-normal mt-1 tracking-widest">Enterprise Stock Overview</p>
          </div>
         <button
-          onClick={() => setShowBoxManager(true)}
+          onClick={() => setShowSearchModal(true)}
           className="ml-auto p-3 bg-surface border border-slate-800 text-secondary rounded-2xl hover:text-primary transition-all active:scale-95 shadow-xl"
+          title="Search inventory"
+        >
+          <Search size={20} />
+        </button>
+        <button
+          onClick={() => setShowBoxManager(true)}
+          className="p-3 bg-surface border border-slate-800 text-secondary rounded-2xl hover:text-primary transition-all active:scale-95 shadow-xl"
           title="Manage Boxes"
         >
           <Layout size={20} />
@@ -784,6 +808,20 @@ export default function InventoryPage() {
            </div>
         </div>
       )}
+
+      {/* Search Modal */}
+      <SearchModal
+        isOpen={showSearchModal}
+        onClose={() => setShowSearchModal(false)}
+        onSelectItem={handleSearchItemSelect}
+      />
+
+      {/* Quantity Adjustment Modal */}
+      <QuantityAdjustmentModal
+        item={selectedSearchItem}
+        isOpen={showQuantityModal}
+        onClose={handleQuantityModalClose}
+      />
     </PageShell>
   );
 }