Fix new services implementation 1

frontend/src/pages/inventory/InventoryPage.tsx

@@ -5,7 +5,7 @@ import {
   Filter,
   Download,
   Upload,
-  Grid3X3,
+  LayoutGrid,
   List,
   Package,
   TrendingDown,
@@ -143,6 +143,14 @@ const InventoryPage: React.FC = () => {
     console.log('View details:', item);
   };
 
+  // Handle view item by ID (for alerts)
+  const handleViewItemById = (itemId: string) => {
+    const item = items.find(item => item.id === itemId);
+    if (item) {
+      handleItemViewDetails(item);
+    }
+  };
+
   // Handle alert acknowledgment
   const handleAcknowledgeAlert = async (alertId: string) => {
     await acknowledgeAlert(alertId);
@@ -302,7 +310,7 @@ const InventoryPage: React.FC = () => {
                           : 'bg-white text-gray-600 hover:bg-gray-50'
                       }`}
                     >
-                      <Grid3X3 className="w-4 h-4" />
+                      <LayoutGrid className="w-4 h-4" />
                     </button>
                     <button
                       onClick={() => setViewMode('list')}
@@ -529,7 +537,7 @@ const InventoryPage: React.FC = () => {
                 alerts={alerts}
                 onAcknowledge={handleAcknowledgeAlert}
                 onAcknowledgeAll={handleBulkAcknowledgeAlerts}
-                onViewItem={handleItemViewDetails}
+                onViewItem={handleViewItemById}
               />
             </div>
           )}

frontend/src/pages/recipes/RecipesPage.tsx

@@ -4,7 +4,7 @@ import {
   Search,
   Plus,
   Filter,
-  Grid3X3,
+  LayoutGrid,
   List,
   ChefHat,
   TrendingUp,
@@ -304,7 +304,7 @@ const RecipesPage: React.FC = () => {
                       : 'bg-white text-gray-600 hover:bg-gray-50'
                   }`}
                 >
-                  <Grid3X3 className="w-4 h-4" />
+                  <LayoutGrid className="w-4 h-4" />
                 </button>
                 <button
                   onClick={() => setViewMode('list')}