REFACTOR external service and improve websocket training

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

@@ -131,6 +131,7 @@ const DemandChart: React.FC<DemandChartProps> = ({
   // Update zoomed data when filtered data changes
   useEffect(() => {
     console.log('🔍 Setting zoomed data from filtered data:', filteredData);
+    // Always update zoomed data when filtered data changes, even if empty
     setZoomedData(filteredData);
   }, [filteredData]);
 
@@ -236,11 +237,19 @@ const DemandChart: React.FC<DemandChartProps> = ({
     );
   }
 
-  // Use filteredData if zoomedData is empty but we have data
-  const displayData = zoomedData.length > 0 ? zoomedData : filteredData;
+  // Robust fallback logic for display data
+  const displayData = zoomedData.length > 0 ? zoomedData : (filteredData.length > 0 ? filteredData : chartData);
+
+  console.log('📊 Final display data:', {
+    chartDataLength: chartData.length,
+    filteredDataLength: filteredData.length,
+    zoomedDataLength: zoomedData.length,
+    displayDataLength: displayData.length,
+    displayData: displayData
+  });
 
   // Empty state - only show if we truly have no data
-  if (displayData.length === 0 && chartData.length === 0) {
+  if (displayData.length === 0) {
     return (
       <Card className={className}>
         <CardHeader>

frontend/src/components/domain/onboarding/steps/MLTrainingStep.tsx

@@ -95,21 +95,24 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
     }
   );
 
-  // Handle training status updates from HTTP polling (fallback only)
+  // Handle training status updates from React Query cache (updated by WebSocket or HTTP fallback)
   useEffect(() => {
     if (!jobStatus || !jobId || trainingProgress?.stage === 'completed') {
       return;
     }
 
-    console.log('📊 HTTP fallback status update:', jobStatus);
+    console.log('📊 Training status update from cache:', jobStatus,
+                `(source: ${isConnected ? 'WebSocket' : 'HTTP polling'})`);
 
-    // Check if training completed via HTTP polling fallback
+    // Check if training completed
     if (jobStatus.status === 'completed' && trainingProgress?.stage !== 'completed') {
-      console.log('✅ Training completion detected via HTTP fallback');
+      console.log(`✅ Training completion detected (source: ${isConnected ? 'WebSocket' : 'HTTP polling'})`);
       setTrainingProgress({
         stage: 'completed',
         progress: 100,
-        message: 'Entrenamiento completado exitosamente (detectado por verificación HTTP)'
+        message: isConnected
+          ? 'Entrenamiento completado exitosamente'
+          : 'Entrenamiento completado exitosamente (detectado por verificación HTTP)'
       });
       setIsTraining(false);
 
@@ -122,15 +125,15 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
         });
       }, 2000);
     } else if (jobStatus.status === 'failed') {
-      console.log('❌ Training failure detected via HTTP fallback');
+      console.log(`❌ Training failure detected (source: ${isConnected ? 'WebSocket' : 'HTTP polling'})`);
       setError('Error detectado durante el entrenamiento (verificación de estado)');
       setIsTraining(false);
       setTrainingProgress(null);
     } else if (jobStatus.status === 'running' && jobStatus.progress !== undefined) {
-      // Update progress if we have newer information from HTTP polling fallback
+      // Update progress if we have newer information
       const currentProgress = trainingProgress?.progress || 0;
       if (jobStatus.progress > currentProgress) {
-        console.log(`📈 Progress update via HTTP fallback: ${jobStatus.progress}%`);
+        console.log(`📈 Progress update (source: ${isConnected ? 'WebSocket' : 'HTTP polling'}): ${jobStatus.progress}%`);
         setTrainingProgress(prev => ({
           ...prev,
           stage: 'training',
@@ -140,7 +143,7 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
         }) as TrainingProgress);
       }
     }
-  }, [jobStatus, jobId, trainingProgress?.stage, onComplete]);
+  }, [jobStatus, jobId, trainingProgress?.stage, onComplete, isConnected]);
 
   // Auto-trigger training when component mounts
   useEffect(() => {

frontend/src/components/ui/Button/Button.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, ButtonHTMLAttributes } from 'react';
 import { clsx } from 'clsx';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning';
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning' | 'gradient';
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   isLoading?: boolean;
   isFullWidth?: boolean;
@@ -29,8 +29,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
     'transition-all duration-200 ease-in-out',
     'focus:outline-none focus:ring-2 focus:ring-offset-2',
     'disabled:opacity-50 disabled:cursor-not-allowed',
-    'border rounded-md shadow-sm',
-    'hover:shadow-md active:shadow-sm'
+    'border rounded-md',
   ];
 
   const variantClasses = {
@@ -38,19 +37,22 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
       'bg-[var(--color-primary)] text-[var(--text-inverse)] border-[var(--color-primary)]',
       'hover:bg-[var(--color-primary-dark)] hover:border-[var(--color-primary-dark)]',
       'focus:ring-[var(--color-primary)]/20',
-      'active:bg-[var(--color-primary-dark)]'
+      'active:bg-[var(--color-primary-dark)]',
+      'shadow-sm hover:shadow-md active:shadow-sm'
     ],
     secondary: [
       'bg-[var(--color-secondary)] text-[var(--text-inverse)] border-[var(--color-secondary)]',
       'hover:bg-[var(--color-secondary-dark)] hover:border-[var(--color-secondary-dark)]',
       'focus:ring-[var(--color-secondary)]/20',
-      'active:bg-[var(--color-secondary-dark)]'
+      'active:bg-[var(--color-secondary-dark)]',
+      'shadow-sm hover:shadow-md active:shadow-sm'
     ],
     outline: [
       'bg-transparent text-[var(--color-primary)] border-[var(--color-primary)]',
       'hover:bg-[var(--color-primary)] hover:text-[var(--text-inverse)]',
       'focus:ring-[var(--color-primary)]/20',
-      'active:bg-[var(--color-primary-dark)] active:border-[var(--color-primary-dark)]'
+      'active:bg-[var(--color-primary-dark)] active:border-[var(--color-primary-dark)]',
+      'shadow-sm hover:shadow-md active:shadow-sm'
     ],
     ghost: [
       'bg-transparent text-[var(--text-primary)] border-transparent',
@@ -62,19 +64,30 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
       'bg-[var(--color-error)] text-[var(--text-inverse)] border-[var(--color-error)]',
       'hover:bg-[var(--color-error-dark)] hover:border-[var(--color-error-dark)]',
       'focus:ring-[var(--color-error)]/20',
-      'active:bg-[var(--color-error-dark)]'
+      'active:bg-[var(--color-error-dark)]',
+      'shadow-sm hover:shadow-md active:shadow-sm'
     ],
     success: [
       'bg-[var(--color-success)] text-[var(--text-inverse)] border-[var(--color-success)]',
       'hover:bg-[var(--color-success-dark)] hover:border-[var(--color-success-dark)]',
       'focus:ring-[var(--color-success)]/20',
-      'active:bg-[var(--color-success-dark)]'
+      'active:bg-[var(--color-success-dark)]',
+      'shadow-sm hover:shadow-md active:shadow-sm'
     ],
     warning: [
       'bg-[var(--color-warning)] text-[var(--text-inverse)] border-[var(--color-warning)]',
       'hover:bg-[var(--color-warning-dark)] hover:border-[var(--color-warning-dark)]',
       'focus:ring-[var(--color-warning)]/20',
-      'active:bg-[var(--color-warning-dark)]'
+      'active:bg-[var(--color-warning-dark)]',
+      'shadow-sm hover:shadow-md active:shadow-sm'
+    ],
+    gradient: [
+      'bg-[var(--color-primary)] text-white border-[var(--color-primary)]',
+      'hover:bg-[var(--color-primary-dark)] hover:border-[var(--color-primary-dark)]',
+      'focus:ring-[var(--color-primary)]/20',
+      'shadow-lg hover:shadow-xl',
+      'transform hover:scale-105',
+      'font-semibold'
     ]
   };