From 967ecb56411b02d9becef0426616c1ce2a1f934c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Nov 2025 19:16:29 +0000
Subject: [PATCH] Add navigation buttons to UnifiedOnboardingWizard for setup
 wizard steps

Fixed issue where setup wizard steps (QualitySetupStep, SuppliersSetupStep, etc.)
used in the UnifiedOnboardingWizard didn't show navigation buttons:

1. **Added canContinue state tracking**:
   - Added canContinue state to track whether Continue button should be enabled
   - Initialized to true (optimistic default)

2. **Updated handleStepUpdate to handle canContinue**:
   - Setup wizard steps call onUpdate({ canContinue: true/false })
   - handleStepUpdate now receives and sets canContinue state
   - Allows steps to dynamically enable/disable Continue button

3. **Added navigation footer for setup wizard steps**:
   - Conditionally renders navigation buttons for setup wizard steps only
   - Includes Back button (when not first step)
   - Includes Continue button (disabled based on canContinue state)
   - Shows loading state during step completion
   - Only applies to: suppliers-setup, inventory-setup, recipes-setup,
     quality-setup, team-setup, setup-review

This fixes the issue where QualitySetupStep and other setup wizard steps
appeared in the onboarding flow without any way to proceed to the next step,
even though they were optional.

Note: ConfigurationProgressWidget navigation buttons are already correctly
implemented and should work as expected.
---
 .../onboarding/UnifiedOnboardingWizard.tsx    | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx b/frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx
index dfb6cd90..eb898e41 100644
--- a/frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx
+++ b/frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx
@@ -205,6 +205,7 @@ const OnboardingWizardContent: React.FC = () => {
   const isNewTenant = searchParams.get('new') === 'true';
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
   const [isInitialized, setIsInitialized] = useState(isNewTenant);
+  const [canContinue, setCanContinue] = useState(true); // Track if current step allows continuation
 
   useTenantInitializer();
 
@@ -407,6 +408,11 @@ const OnboardingWizardContent: React.FC = () => {
   };
 
   const handleStepUpdate = (data?: any) => {
+    // Handle canContinue state updates from setup wizard steps
+    if (data?.canContinue !== undefined) {
+      setCanContinue(data.canContinue);
+    }
+
     // Handle intermediate updates without marking step complete
     if (currentStep.id === 'bakery-type-selection' && data?.bakeryType) {
       wizardContext.updateBakeryType(data.bakeryType as BakeryType);
@@ -538,6 +544,48 @@ const OnboardingWizardContent: React.FC = () => {
             isLastStep={currentStepIndex === VISIBLE_STEPS.length - 1}
           />
         </CardBody>
+
+        {/* Navigation Footer - Only for setup wizard steps that don't render their own buttons */}
+        {['suppliers-setup', 'inventory-setup', 'recipes-setup', 'quality-setup', 'team-setup', 'setup-review'].includes(currentStep.id) && (
+          <div className="border-t border-[var(--border-primary)] px-6 py-4 bg-[var(--bg-secondary)]/30">
+            <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
+              {/* Left side - Back button */}
+              <div className="w-full sm:w-auto">
+                {currentStepIndex > 0 && (
+                  <Button
+                    variant="secondary"
+                    onClick={() => setCurrentStepIndex(currentStepIndex - 1)}
+                    disabled={markStepCompleted.isPending}
+                    className="w-full sm:w-auto"
+                  >
+                    ← {t('onboarding:wizard.navigation.back', 'Atrás')}
+                  </Button>
+                )}
+              </div>
+
+              {/* Right side - Continue button */}
+              <div className="w-full sm:w-auto">
+                <Button
+                  variant="primary"
+                  onClick={handleStepComplete}
+                  disabled={!canContinue || markStepCompleted.isPending}
+                  className="w-full sm:w-auto min-w-[200px]"
+                >
+                  {markStepCompleted.isPending ? (
+                    <span className="flex items-center gap-2">
+                      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                      {t('common:saving', 'Guardando...')}
+                    </span>
+                  ) : currentStepIndex === VISIBLE_STEPS.length - 1 ? (
+                    t('onboarding:wizard.navigation.finish', 'Finalizar →')
+                  ) : (
+                    t('onboarding:wizard.navigation.next', 'Continuar →')
+                  )}
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
       </Card>
     </div>
   );