Fix UI issues

frontend/src/components/domain/forecasting/DemandChart.tsx

@@ -377,26 +377,31 @@ const DemandChart: React.FC<DemandChartProps> = ({
                 iconType="line"
               />
 
-              {/* Confidence interval area */}
+              {/* Confidence interval area - rendered as a range between lower and upper bounds */}
               {showConfidenceInterval && (
                 <Area
                   type="monotone"
                   dataKey="confidenceUpper"
-                  stackId={1}
-                  stroke="none"
+                  stroke="#10b981"
+                  strokeWidth={1}
+                  strokeOpacity={0.3}
                   fill="url(#confidenceGradient)"
-                  fillOpacity={0.4}
+                  fillOpacity={0.3}
                   name="Límite Superior"
+                  legendType="none"
                 />
               )}
               {showConfidenceInterval && (
                 <Area
                   type="monotone"
                   dataKey="confidenceLower"
-                  stackId={1}
-                  stroke="none"
-                  fill="#ffffff"
+                  stroke="#10b981"
+                  strokeWidth={1}
+                  strokeOpacity={0.3}
+                  fill="var(--bg-primary, #1a1a2e)"
+                  fillOpacity={1}
                   name="Límite Inferior"
+                  legendType="none"
                 />
               )}
 

frontend/src/locales/en/production.json

@@ -29,6 +29,8 @@
     "active_equipment": "Active Equipment",
     "one_in_maintenance": "1 in maintenance",
     "excellent_standards": "excellent standards",
+    "current_capacity": "Current capacity",
+    "completion_rate": "Completion rate",
     "yield_performance_leaderboard": "Yield Performance Leaderboard",
     "product_yield_rankings_trends": "Product yield rankings and trends",
     "no_yield_data": "No yield data available",

frontend/src/locales/es/production.json

@@ -29,6 +29,8 @@
     "active_equipment": "Equipos Activos",
     "one_in_maintenance": "1 en mantenimiento",
     "excellent_standards": "Estándares excelentes",
+    "current_capacity": "Capacidad actual",
+    "completion_rate": "Tasa de finalización",
     "planned_batches": "Lotes Planificados",
     "batches": "lotes",
     "best": "mejor",

frontend/src/locales/eu/production.json

@@ -29,6 +29,8 @@
     "active_equipment": "Ekipo Aktiboak",
     "one_in_maintenance": "1 mantentze lanetan",
     "excellent_standards": "Estandar bikainak",
+    "current_capacity": "Uneko ahalmena",
+    "completion_rate": "Amaiera tasa",
     "planned_batches": "Planifikatutako Sortak",
     "batches": "sortak",
     "best": "onena",

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" />