Simplify the onboardinf flow components 4

frontend/src/components/domain/onboarding/OnboardingWizard.tsx

@@ -192,6 +192,27 @@ export const OnboardingWizard: React.FC = () => {
       
       console.log(`✅ Successfully completed step: "${currentStep.id}"`);
 
+      // Special handling for smart-inventory-setup: auto-complete suppliers step
+      if (currentStep.id === 'smart-inventory-setup' && data?.shouldAutoCompleteSuppliers) {
+        try {
+          console.log('🔄 Auto-completing suppliers step to enable ML training...');
+          await markStepCompleted.mutateAsync({
+            userId: user.id,
+            stepName: 'suppliers',
+            data: {
+              auto_completed: true,
+              completed_at: new Date().toISOString(),
+              source: 'inventory_creation_auto_completion',
+              message: 'Suppliers step auto-completed to proceed with ML training'
+            }
+          });
+          console.log('✅ Suppliers step auto-completed successfully');
+        } catch (supplierError) {
+          console.warn('⚠️ Could not auto-complete suppliers step:', supplierError);
+          // Don't fail the entire flow if suppliers step completion fails
+        }
+      }
+
       if (currentStep.id === 'completion') {
         navigate('/app');
       } else {

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { Button } from '../../../ui/Button';
 import { useCurrentTenant } from '../../../../stores/tenant.store';
 import { useCreateTrainingJob, useTrainingWebSocket } from '../../../../api/hooks/training';
@@ -20,9 +20,7 @@ interface TrainingProgress {
 }
 
 export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
-  onPrevious,
-  onComplete,
-  isFirstStep
+  onComplete
 }) => {
   const [trainingProgress, setTrainingProgress] = useState<TrainingProgress | null>(null);
   const [isTraining, setIsTraining] = useState(false);
@@ -87,6 +85,14 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
     } : undefined
   );
 
+  // Auto-trigger training when component mounts
+  useEffect(() => {
+    if (currentTenant?.id && !isTraining && !trainingProgress && !error) {
+      console.log('🚀 Auto-starting ML training for tenant:', currentTenant.id);
+      handleStartTraining();
+    }
+  }, [currentTenant?.id]); // Only run when tenant is available
+
   const handleStartTraining = async () => {
     if (!currentTenant?.id) {
       setError('No se encontró información del tenant');
@@ -140,7 +146,7 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
     <div className="space-y-6">
       <div className="text-center">
         <p className="text-[var(--text-secondary)] mb-6">
-          Ahora entrenaremos tu modelo de inteligencia artificial utilizando los datos de ventas 
+          Perfecto! Ahora entrenaremos automáticamente tu modelo de inteligencia artificial utilizando los datos de ventas 
           e inventario que has proporcionado. Este proceso puede tomar varios minutos.
         </p>
       </div>
@@ -151,14 +157,12 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
           {!isTraining && !trainingProgress && (
             <div className="space-y-4">
               <div className="mx-auto w-16 h-16 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
-                <svg className="w-8 h-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-                </svg>
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--color-primary)]"></div>
               </div>
               <div>
-                <h3 className="text-lg font-semibold mb-2">Listo para Entrenar</h3>
+                <h3 className="text-lg font-semibold mb-2">Iniciando Entrenamiento Automático</h3>
                 <p className="text-[var(--text-secondary)] text-sm">
-                  Tu modelo está listo para ser entrenado con los datos proporcionados.
+                  Preparando el entrenamiento de tu modelo con los datos proporcionados...
                 </p>
               </div>
             </div>
@@ -246,36 +250,7 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
         </div>
       )}
 
-      {/* Actions */}
-      <div className="flex justify-between">
-        <Button
-          variant="outline"
-          onClick={onPrevious}
-          disabled={isFirstStep || isTraining}
-        >
-          Anterior
-        </Button>
-
-        {!isTraining && !trainingProgress && (
-          <Button
-            onClick={handleStartTraining}
-            size="lg"
-            disabled={!currentTenant?.id}
-          >
-            Iniciar Entrenamiento
-          </Button>
-        )}
-
-        {trainingProgress?.stage === 'completed' && (
-          <Button
-            onClick={() => onComplete()}
-            size="lg"
-            variant="success"
-          >
-            Continuar
-          </Button>
-        )}
-      </div>
+      {/* Auto-completion when training finishes - no manual buttons needed */}
     </div>
   );
 };

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

@@ -7,6 +7,7 @@ import { useCurrentTenant } from '../../../../stores/tenant.store';
 import { useCreateIngredient } from '../../../../api/hooks/inventory';
 import { useImportFileOnly } from '../../../../api/hooks/dataImport';
 import { useClassifyProductsBatch } from '../../../../api/hooks/classification';
+import { useAuth } from '../../../../contexts/AuthContext';
 
 interface UploadSalesDataStepProps {
   onNext: () => void;
@@ -64,27 +65,34 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const currentTenant = useCurrentTenant();
+  const { user } = useAuth();
   const { validateFile } = useValidateFileOnly();
   const createIngredient = useCreateIngredient();
   const { importFile } = useImportFileOnly();
   const classifyProducts = useClassifyProductsBatch();
 
-  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
       setSelectedFile(file);
       setValidationResult(null);
       setError('');
+      
+      // Automatically trigger validation and classification
+      await handleAutoValidateAndClassify(file);
     }
   };
 
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     const file = event.dataTransfer.files[0];
     if (file) {
       setSelectedFile(file);
       setValidationResult(null);
       setError('');
+      
+      // Automatically trigger validation and classification
+      await handleAutoValidateAndClassify(file);
     }
   };
 
@@ -92,67 +100,69 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
     event.preventDefault();
   };
 
-  const handleValidateFile = async () => {
-    if (!selectedFile || !currentTenant?.id) return;
+  const handleAutoValidateAndClassify = async (file: File) => {
+    if (!currentTenant?.id) return;
 
     setIsValidating(true);
     setError('');
-    setProgressState({ stage: 'preparing', progress: 0, message: 'Preparando validación del archivo...' });
+    setProgressState({ stage: 'preparing', progress: 0, message: 'Preparando validación automática del archivo...' });
 
     try {
+      // Step 1: Validate the file
       const result = await validateFile(
         currentTenant.id,
-        selectedFile,
+        file,
         {
           onProgress: (stage: string, progress: number, message: string) => {
-            setProgressState({ stage, progress, message });
+            // Map validation progress to 0-50%
+            setProgressState({ stage, progress: Math.min(progress * 0.5, 50), message });
           }
         }
       );
 
       if (result.success && result.validationResult) {
         setValidationResult(result.validationResult);
-        setProgressState(null);
+        setProgressState({ stage: 'analyzing', progress: 60, message: 'Validación exitosa. Generando sugerencias automáticamente...' });
+        
+        // Step 2: Automatically trigger classification
+        await generateInventorySuggestionsAuto(result.validationResult);
       } else {
         setError(result.error || 'Error al validar el archivo');
         setProgressState(null);
+        setIsValidating(false);
       }
     } catch (error) {
       setError('Error validando archivo: ' + (error instanceof Error ? error.message : 'Error desconocido'));
       setProgressState(null);
-    }
-
-    setIsValidating(false);
-  };
-
-  const handleContinue = () => {
-    if (validationResult) {
-      // Generate inventory suggestions based on validation
-      generateInventorySuggestions();
+      setIsValidating(false);
     }
   };
 
-  const generateInventorySuggestions = async () => {
-    if (!currentTenant?.id || !validationResult) {
+
+  const generateInventorySuggestionsAuto = async (validationData: ImportValidationResponse) => {
+    if (!currentTenant?.id) {
       setError('No hay datos de validación disponibles para generar sugerencias');
+      setIsValidating(false);
+      setProgressState(null);
       return;
     }
 
-    setProgressState({ stage: 'analyzing', progress: 25, message: 'Analizando productos de ventas...' });
-
     try {
+      setProgressState({ stage: 'analyzing', progress: 65, message: 'Analizando productos de ventas...' });
+
       // Extract product data from validation result - use the exact backend structure
-      const products = validationResult.product_list?.map((productName: string) => ({
+      const products = validationData.product_list?.map((productName: string) => ({
         product_name: productName
       })) || [];
 
       if (products.length === 0) {
         setError('No se encontraron productos en los datos de ventas');
         setProgressState(null);
+        setIsValidating(false);
         return;
       }
 
-      setProgressState({ stage: 'classifying', progress: 50, message: 'Clasificando productos con IA...' });
+      setProgressState({ stage: 'classifying', progress: 75, message: 'Clasificando productos con IA...' });
 
       // Call the classification API
       const suggestions = await classifyProducts.mutateAsync({
@@ -160,7 +170,7 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
         batchData: { products }
       });
 
-      setProgressState({ stage: 'preparing', progress: 75, message: 'Preparando sugerencias de inventario...' });
+      setProgressState({ stage: 'preparing', progress: 90, message: 'Preparando sugerencias de inventario...' });
 
       // Convert API response to InventoryItem format - use exact backend structure plus UI fields
       const items: InventoryItem[] = suggestions.map(suggestion => {
@@ -201,13 +211,16 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
       setInventoryItems(items);
       setShowInventoryStep(true);
       setProgressState(null);
+      setIsValidating(false);
     } catch (err) {
       console.error('Error generating inventory suggestions:', err);
       setError('Error al generar sugerencias de inventario. Por favor, inténtalo de nuevo.');
       setProgressState(null);
+      setIsValidating(false);
     }
   };
 
+
   const handleToggleSelection = (id: string) => {
     setInventoryItems(items =>
       items.map(item =>
@@ -328,7 +341,10 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
         totalItems: selectedItems.length,
         validationResult,
         file: selectedFile,
-        salesImportResult
+        salesImportResult,
+        inventoryConfigured: true, // Flag for ML training dependency
+        shouldAutoCompleteSuppliers: true, // Flag to trigger suppliers auto-completion after step completion
+        userId: user?.id // Pass user ID for suppliers completion
       });
     } catch (err) {
       console.error('Error creating inventory items:', err);
@@ -354,7 +370,7 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
       <div className="space-y-6">
         <div className="text-center">
           <p className="text-[var(--text-secondary)] mb-6">
-            Basado en tus datos de ventas, hemos generado estas sugerencias de inventario. 
+            ¡Perfecto! Hemos analizado automáticamente tus datos de ventas y generado estas sugerencias de inventario inteligentes. 
             Revisa y selecciona los artículos que te gustaría agregar a tu inventario.
           </p>
         </div>
@@ -487,14 +503,7 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
         )}
 
         {/* Actions */}
-        <div className="flex flex-col sm:flex-row justify-between gap-3 sm:gap-0">
-          <Button
-            variant="outline"
-            onClick={() => setShowInventoryStep(false)}
-            className="order-2 sm:order-1 w-full sm:w-auto"
-          >
-            Volver
-          </Button>
+        <div className="flex flex-col sm:flex-row justify-end gap-3 sm:gap-0">{/* Removed back button */}
 
           <Button
             onClick={handleCreateInventory}
@@ -502,7 +511,7 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
             loadingText="Creando Inventario..."
             size="lg"
             disabled={selectedCount === 0}
-            className="order-1 sm:order-2 w-full sm:w-auto"
+            className="w-full sm:w-auto"
           >
             <span className="hidden sm:inline">
               Crear {selectedCount} Artículo{selectedCount !== 1 ? 's' : ''} de Inventario
@@ -520,7 +529,7 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
     <div className="space-y-6">
       <div className="text-center">
         <p className="text-[var(--text-secondary)] mb-6">
-          Sube tus datos de ventas (formato CSV o JSON) para generar sugerencias de inventario inteligentes.
+          Sube tus datos de ventas (formato CSV o JSON) y automáticamente validaremos y generaremos sugerencias de inventario inteligentes.
         </p>
       </div>
 
@@ -570,7 +579,8 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
               <p className="text-lg font-medium">Drop your sales data here</p>
               <p className="text-[var(--text-secondary)]">or click to browse files</p>
               <p className="text-sm text-[var(--text-tertiary)] mt-2">
-                Supported formats: CSV, JSON (max 100MB)
+                Supported formats: CSV, JSON (max 100MB)<br/>
+                <span className="text-[var(--color-primary)]">Auto-validates and generates suggestions</span>
               </p>
             </div>
             <Button
@@ -635,39 +645,25 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
       )}
 
       {/* Actions */}
-      <div className="flex flex-col sm:flex-row justify-between gap-3 sm:gap-0">
-        <Button
-          variant="outline"
-          onClick={onPrevious}
-          disabled={isFirstStep}
-          className="order-2 sm:order-1 w-full sm:w-auto"
-        >
-          Anterior
-        </Button>
+      <div className="flex flex-col sm:flex-row justify-end gap-3 sm:gap-0">{/* Removed back button */}
 
-        <div className="flex flex-col sm:flex-row gap-3 order-1 sm:order-2">
-          {selectedFile && !validationResult && (
-            <Button
-              onClick={handleValidateFile}
-              isLoading={isValidating}
-              loadingText="Validando..."
-              size="lg"
-              className="w-full sm:w-auto"
-            >
-              Validar Archivo
-            </Button>
-          )}
-
-          {validationResult && (
-            <Button
-              onClick={handleContinue}
-              size="lg"
-              className="w-full sm:w-auto"
-            >
-              Continuar con estos Datos
-            </Button>
-          )}
-        </div>
+        {selectedFile && !showInventoryStep && (
+          <div className="flex items-center justify-center px-4 py-2 bg-[var(--bg-secondary)] rounded-lg">
+            {isValidating ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-[var(--color-primary)] mr-2"></div>
+                <span className="text-sm text-[var(--text-secondary)]">Procesando automáticamente...</span>
+              </>
+            ) : validationResult ? (
+              <>
+                <svg className="w-4 h-4 text-[var(--color-success)] mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+                <span className="text-sm text-[var(--color-success)]">Archivo procesado exitosamente</span>
+              </>
+            ) : null}
+          </div>
+        )}
       </div>
     </div>
   );