Fix UI issues

frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx

@@ -109,28 +109,28 @@ const ProductionAnalyticsPage: React.FC = () => {
       stats={[
         {
           title: t('stats.overall_efficiency'),
-          value: dashboard?.efficiency_percentage ? `${dashboard.efficiency_percentage.toFixed(1)}%` : '94%',
+          value: `${(dashboard?.efficiency_percentage ?? 0).toFixed(1)}%`,
           variant: 'success' as const,
           icon: Target,
           subtitle: t('stats.vs_target_95')
         },
         {
-          title: t('stats.average_cost_per_unit'),
-          value: '€2.45',
+          title: t('stats.capacity_utilization'),
+          value: `${(dashboard?.capacity_utilization ?? 0).toFixed(1)}%`,
           variant: 'info' as const,
           icon: DollarSign,
-          subtitle: t('stats.down_3_vs_last_week')
+          subtitle: t('stats.current_capacity')
         },
         {
-          title: t('stats.active_equipment'),
-          value: '8/9',
+          title: t('stats.on_time_completion'),
+          value: `${(dashboard?.on_time_completion_rate ?? 0).toFixed(1)}%`,
           variant: 'warning' as const,
           icon: Settings,
-          subtitle: t('stats.one_in_maintenance')
+          subtitle: t('stats.completion_rate')
         },
         {
           title: t('stats.quality_score'),
-          value: dashboard?.average_quality_score ? `${dashboard.average_quality_score.toFixed(1)}/10` : '9.2/10',
+          value: `${(dashboard?.average_quality_score ?? 0).toFixed(1)}/10`,
           variant: 'success' as const,
           icon: Award,
           subtitle: t('stats.excellent_standards')

frontend/src/pages/app/analytics/forecasting/ForecastingPage.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react';
-import { Calendar, TrendingUp, AlertTriangle, BarChart3, Settings, Loader, Zap, Brain, Target, Activity } from 'lucide-react';
+import { Calendar, TrendingUp, AlertTriangle, BarChart3, Settings, Loader, Zap, Brain, Target, Activity, Package } from 'lucide-react';
 import { Button, Card, Badge, StatusCard, getStatusColor } from '../../../../components/ui';
 import { AnalyticsPageLayout, AnalyticsCard } from '../../../../components/analytics';
 import { LoadingSpinner } from '../../../../components/ui';
@@ -137,7 +137,8 @@ const ForecastingPage: React.FC = () => {
 
   // Use current forecast data from multi-day API response
   const forecasts = currentForecastData;
-  const isLoading = ingredientsLoading || modelsLoading || isGenerating;
+  // Separate initial data loading from forecast generation
+  const isInitialLoading = ingredientsLoading || modelsLoading;
   const hasError = ingredientsError || modelsError;
 
   // Calculate metrics from real data
@@ -189,7 +190,8 @@ const ForecastingPage: React.FC = () => {
 
 
   // Loading and error states - using project patterns
-  if (isLoading || !tenantId) {
+  // Only show full-page loading for initial data fetch, not for forecast generation
+  if (isInitialLoading || !tenantId) {
     return (
       <div className="flex items-center justify-center min-h-64">
         <LoadingSpinner text="Cargando datos de predicción..." />
@@ -220,7 +222,7 @@ const ForecastingPage: React.FC = () => {
       description="Sistema inteligente de predicción de demanda basado en IA"
       subscriptionLoading={false}
       hasAccess={true}
-      dataLoading={isLoading}
+      dataLoading={isInitialLoading}
       stats={[
         {
           title: 'Ingredientes con Modelos',
@@ -430,7 +432,7 @@ const ForecastingPage: React.FC = () => {
                 data={forecasts}
                 product={selectedProduct}
                 period={forecastPeriod}
-                loading={isLoading}
+                loading={isGenerating}
                 error={hasError ? 'Error al cargar las predicciones' : null}
                 height={450}
                 title=""
@@ -472,7 +474,7 @@ const ForecastingPage: React.FC = () => {
       )}
 
       {/* Help Section - Only when no models available */}
-      {!isLoading && !hasError && products.length === 0 && (
+      {!isInitialLoading && !hasError && products.length === 0 && (
         <Card className="p-6 text-center">
           <div className="py-8">
             <Brain className="h-12 w-12 text-[var(--color-info)] mx-auto mb-4" />