@visns-studio/visns-components 5.14.2 → 5.14.3

package/package.json

@@ -88,7 +88,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.14.2",
+    "version": "5.14.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/generic/OcrTemplateEnhanced.jsx

@@ -122,15 +122,17 @@ const OcrTemplateEnhanced = ({
         });
         setCompletedSteps(newCompletedSteps);
 
-        // Auto-advance to next step if current step is completed
-        const currentStepData = journeySteps.find(s => s.id === currentStep);
-        if (currentStepData?.isCompleted() && currentStep < journeySteps.length) {
-            const nextIncompleteStep = journeySteps.find(s => s.id > currentStep && !newCompletedSteps.has(s.id));
-            if (nextIncompleteStep) {
-                setCurrentStep(nextIncompleteStep.id);
+        // Only auto-advance if we haven't manually navigated
+        if (!hasAutoJumped) {
+            const currentStepData = journeySteps.find(s => s.id === currentStep);
+            if (currentStepData?.isCompleted() && currentStep < journeySteps.length) {
+                const nextIncompleteStep = journeySteps.find(s => s.id > currentStep && !newCompletedSteps.has(s.id));
+                if (nextIncompleteStep) {
+                    setCurrentStep(nextIncompleteStep.id);
+                }
             }
         }
-    }, [ocrTemplateBuilder, data, currentStep]);
+    }, [ocrTemplateBuilder, data, currentStep, hasAutoJumped]);
 
     // Initial step detection - jump to latest completed step on load (only once)
     React.useEffect(() => {
@@ -168,8 +170,31 @@ const OcrTemplateEnhanced = ({
 
     // Manual navigation function to prevent auto-jump interference
     const navigateToStep = (stepId) => {
-        setCurrentStep(stepId);
-        setHasAutoJumped(true); // Prevent future auto-jumping after manual navigation
+        // Validate step ID
+        if (stepId < 1 || stepId > journeySteps.length) {
+            console.warn(`Invalid step ID: ${stepId}`);
+            return;
+        }
+        
+        const targetStep = journeySteps.find(s => s.id === stepId);
+        if (!targetStep) {
+            console.warn(`Step not found: ${stepId}`);
+            return;
+        }
+        
+        // Check if we can access this step
+        const stepIndex = journeySteps.findIndex(s => s.id === stepId);
+        const canAccess = stepIndex === 0 || 
+                         completedSteps.has(stepId) || 
+                         completedSteps.has(journeySteps[stepIndex - 1].id);
+        
+        if (canAccess) {
+            console.log(`Navigating to step ${stepId}`);
+            setCurrentStep(stepId);
+            setHasAutoJumped(true); // Prevent future auto-jumping after manual navigation
+        } else {
+            console.warn(`Cannot access step ${stepId}. Step index: ${stepIndex}, Completed steps:`, Array.from(completedSteps));
+        }
     };
 
     // Enhanced smart categorization utility
@@ -1125,7 +1150,14 @@ const OcrTemplateEnhanced = ({
                         <div 
                             key={step.id}
                             className={`${styles.progressStep} ${isActive ? styles.active : ''} ${isCompleted ? styles.completed : ''} ${!canAccess ? styles.disabled : ''}`}
-                            onClick={() => canAccess && navigateToStep(step.id)}
+                            onClick={() => {
+                                if (canAccess) {
+                                    navigateToStep(step.id);
+                                } else {
+                                    console.log(`Step ${step.id} not accessible. Completed steps:`, Array.from(completedSteps));
+                                }
+                            }}
+                            style={{ cursor: canAccess ? 'pointer' : 'not-allowed' }}
                         >
                             <div className={styles.stepIcon}>
                                 {isCompleted ? (
@@ -1294,7 +1326,7 @@ const OcrTemplateEnhanced = ({
             <div className={styles.journeyNavigation}>
                 <button 
                     className={styles.navBtn}
-                    onClick={() => navigateToStep(Math.max(1, currentStep - 1))}
+                    onClick={() => navigateToStep(currentStep - 1)}
                     disabled={currentStep === 1}
                 >
                     <ArrowLeft size={16} />
@@ -1303,11 +1335,17 @@ const OcrTemplateEnhanced = ({
                 
                 <div className={styles.stepIndicator}>
                     Step {currentStep} of {journeySteps.length}
+                    {completedSteps.has(currentStep) && (
+                        <span className={styles.completedBadge}>
+                            <CheckCircle2 size={14} />
+                            Completed
+                        </span>
+                    )}
                 </div>
                 
                 <button 
                     className={styles.navBtn}
-                    onClick={() => navigateToStep(Math.min(journeySteps.length, currentStep + 1))}
+                    onClick={() => navigateToStep(currentStep + 1)}
                     disabled={currentStep === journeySteps.length}
                 >
                     Next Step