From 5670601fbeca4490184d6171c407f8ba29eca549 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Nov 2025 19:00:57 +0000
Subject: [PATCH] Fix setup wizard navigation and button interaction issues

Fixed two critical issues in the setup wizard:

1. **Missing onUpdate callback**:
   - Added onUpdate prop to SetupStepProps interface
   - Created handleStepUpdate callback in SetupWizard to receive canContinue updates
   - Passed onUpdate to all step components
   - Added onUpdate implementation in SuppliersSetupStep (was missing)
   - This fixes the issue where Continue/Skip buttons were incorrectly disabled for optional steps

2. **Button interaction issues in QualitySetupStep**:
   - Added explicit e.preventDefault() and e.stopPropagation() to Check Type buttons
   - Added explicit e.preventDefault() and e.stopPropagation() to Applicable Stages buttons
   - Added cursor-pointer class for better UX
   - This fixes the issue where buttons weren't responding to clicks

The Quality Setup and Suppliers Setup steps now properly:
- Show enabled Continue button when requirements are met
- Show Skip button for optional steps
- Allow clicking Check Type and Applicable Stages buttons without form submission interference
---
 .../domain/setup-wizard/SetupWizard.tsx          |  9 +++++++++
 .../setup-wizard/steps/QualitySetupStep.tsx      | 16 ++++++++++++----
 .../setup-wizard/steps/SuppliersSetupStep.tsx    |  9 +++++++++
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/domain/setup-wizard/SetupWizard.tsx b/frontend/src/components/domain/setup-wizard/SetupWizard.tsx
index 435de719..5f5a1f6c 100644
--- a/frontend/src/components/domain/setup-wizard/SetupWizard.tsx
+++ b/frontend/src/components/domain/setup-wizard/SetupWizard.tsx
@@ -45,6 +45,7 @@ export interface SetupStepProps {
   onPrevious: () => void;
   onComplete: (data?: any) => void;
   onSkip?: () => void;
+  onUpdate?: (state: { itemsCount?: number; canContinue?: boolean }) => void;
   isFirstStep: boolean;
   isLastStep: boolean;
   canContinue?: boolean;
@@ -141,6 +142,13 @@ export const SetupWizard: React.FC = () => {
   const [isInitialized, setIsInitialized] = useState(false);
   const [canContinue, setCanContinue] = useState(false);
 
+  // Handle updates from step components
+  const handleStepUpdate = (state: { itemsCount?: number; canContinue?: boolean }) => {
+    if (state.canContinue !== undefined) {
+      setCanContinue(state.canContinue);
+    }
+  };
+
   // Get user progress from backend
   const { data: userProgress, isLoading: isLoadingProgress } = useUserProgress(
     user?.id || '',
@@ -352,6 +360,7 @@ export const SetupWizard: React.FC = () => {
             onPrevious={handlePrevious}
             onComplete={handleStepComplete}
             onSkip={handleSkip}
+            onUpdate={handleStepUpdate}
             isFirstStep={currentStepIndex === 0}
             isLastStep={currentStepIndex === SETUP_STEPS.length - 1}
             canContinue={canContinue}
diff --git a/frontend/src/components/domain/setup-wizard/steps/QualitySetupStep.tsx b/frontend/src/components/domain/setup-wizard/steps/QualitySetupStep.tsx
index 83595c9d..024a1b83 100644
--- a/frontend/src/components/domain/setup-wizard/steps/QualitySetupStep.tsx
+++ b/frontend/src/components/domain/setup-wizard/steps/QualitySetupStep.tsx
@@ -262,8 +262,12 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
                   <button
                     key={option.value}
                     type="button"
-                    onClick={() => setFormData({ ...formData, check_type: option.value })}
-                    className={`p-3 text-left border rounded-lg transition-colors ${
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setFormData({ ...formData, check_type: option.value });
+                    }}
+                    className={`p-3 text-left border rounded-lg transition-colors cursor-pointer ${
                       formData.check_type === option.value
                         ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10'
                         : 'border-[var(--border-secondary)] hover:border-[var(--border-primary)]'
@@ -302,8 +306,12 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
                   <button
                     key={option.value}
                     type="button"
-                    onClick={() => toggleStage(option.value)}
-                    className={`p-2 text-sm text-left border rounded-lg transition-colors ${
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      toggleStage(option.value);
+                    }}
+                    className={`p-2 text-sm text-left border rounded-lg transition-colors cursor-pointer ${
                       formData.applicable_stages.includes(option.value)
                         ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10 text-[var(--color-primary)]'
                         : 'border-[var(--border-secondary)] text-[var(--text-secondary)] hover:border-[var(--border-primary)]'
diff --git a/frontend/src/components/domain/setup-wizard/steps/SuppliersSetupStep.tsx b/frontend/src/components/domain/setup-wizard/steps/SuppliersSetupStep.tsx
index 8dfdc5d0..98ea13a4 100644
--- a/frontend/src/components/domain/setup-wizard/steps/SuppliersSetupStep.tsx
+++ b/frontend/src/components/domain/setup-wizard/steps/SuppliersSetupStep.tsx
@@ -13,6 +13,7 @@ export const SuppliersSetupStep: React.FC<SetupStepProps> = ({
   onPrevious,
   onComplete,
   onSkip,
+  onUpdate,
   isFirstStep,
   isLastStep
 }) => {
@@ -47,6 +48,14 @@ export const SuppliersSetupStep: React.FC<SetupStepProps> = ({
   // Track if minimum requirement is met
   const canContinue = suppliers.length >= 1;
 
+  // Notify parent when count changes
+  useEffect(() => {
+    onUpdate?.({
+      itemsCount: suppliers.length,
+      canContinue: suppliers.length >= 1,
+    });
+  }, [suppliers.length, onUpdate]);
+
   // Validation
   const validateForm = (): boolean => {
     const newErrors: Record<string, string> = {};