Fix new services implementation 10

frontend/src/pages/forecast/ForecastPage.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { TrendingUp, TrendingDown, Calendar, Cloud, AlertTriangle, Info, RefreshCw } from 'lucide-react';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { useForecast } from '../../api/hooks/useForecast';
-import { useInventory } from '../../api/hooks/useInventory';
+import { useInventoryProducts } from '../../api/hooks/useInventory';
 import { useTenantId } from '../../hooks/useTenantId';
 import type { ForecastResponse } from '../../api/types/forecasting';
 
@@ -30,6 +30,7 @@ const ForecastPage: React.FC = () => {
   const [forecastData, setForecastData] = useState<ForecastData[]>([]);
   const [weatherAlert, setWeatherAlert] = useState<WeatherAlert | null>(null);
   const [isGenerating, setIsGenerating] = useState(false);
+  const [inventoryItems, setInventoryItems] = useState<any[]>([]);
   
   // Hooks
   const { tenantId } = useTenantId();
@@ -43,10 +44,10 @@ const ForecastPage: React.FC = () => {
     exportForecasts
   } = useForecast();
   const { 
-    items: inventoryItems, 
-    isLoading: inventoryLoading, 
-    loadItems 
-  } = useInventory(false); // Disable auto-load, we'll load manually
+    getProductsList,
+    isLoading: inventoryLoading,
+    error: inventoryError
+  } = useInventoryProducts();
 
   // Debug logging
   if (process.env.NODE_ENV === 'development') {
@@ -81,10 +82,37 @@ const ForecastPage: React.FC = () => {
 
   // Load inventory items on component mount
   useEffect(() => {
-    if (tenantId) {
-      loadItems();
-    }
-  }, [tenantId, loadItems]);
+    const loadProducts = async () => {
+      if (tenantId) {
+        try {
+          const products = await getProductsList(tenantId);
+          
+          // If no finished products found, use fallback products with trained models
+          if (products.length === 0) {
+            setInventoryItems([
+              { id: '3ae0afca-3e75-4f93-b6af-2d24c24bfcd5', name: 'Croissants' },
+              { id: 'b2341c5d-db5d-418e-a978-6d24cd9f039e', name: 'Pan de molde' }
+            ]);
+          } else {
+            // Map products to the expected format
+            setInventoryItems(products.map(p => ({ 
+              id: p.inventory_product_id, 
+              name: p.name 
+            })));
+          }
+        } catch (error) {
+          console.error('Failed to load products:', error);
+          // Use fallback products with trained models
+          setInventoryItems([
+            { id: '3ae0afca-3e75-4f93-b6af-2d24c24bfcd5', name: 'Croissants' },
+            { id: 'b2341c5d-db5d-418e-a978-6d24cd9f039e', name: 'Pan de molde' }
+          ]);
+        }
+      }
+    };
+    
+    loadProducts();
+  }, [tenantId, getProductsList]);
 
   // Transform API forecasts to our local format
   const transformForecastResponse = (forecast: ForecastResponse): ForecastData => {
@@ -142,8 +170,8 @@ const ForecastPage: React.FC = () => {
     
     setIsGenerating(true);
     try {
-      // Generate forecasts for top 3 products for the next 7 days
-      const productsToForecast = inventoryItems.slice(0, 3);
+      // Generate forecasts for products with trained models only
+      const productsToForecast = inventoryItems;
       const chartData = [];
       
       // Generate data for the next 7 days