Simplify the onboardinf flow components 4

2025-09-08 22:28:26 +02:00
parent a8f6e9d593
commit ddb75f8e55
3 changed files with 101 additions and 109 deletions
--- a/frontend/src/components/domain/onboarding/OnboardingWizard.tsx
+++ b/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 {
--- a/frontend/src/components/domain/onboarding/steps/MLTrainingStep.tsx
+++ b/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>
  );
 };
--- a/frontend/src/components/domain/onboarding/steps/UploadSalesDataStep.tsx
+++ b/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>
  );