feat: Add navigation controls to onboarding flow

Allow users to freely navigate between onboarding steps:
- Add "Back to Videos" button on Quiz step
- Add "Back to Quiz" button on Commitment step
- Make stepper steps clickable to jump directly to any step
- Add hover effects and visual feedback on stepper
- Add handleStepClick to manage step navigation logic

Benefits:
- Users can review previous videos even after completing them
- More flexible onboarding experience
- Better UX for users who want to revisit content
- Helpful for testing and debugging onboarding flow

Also added reset_onboarding_progress.sql helper script for database resets.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: Zeff01

apps/codebility/app/applicant/onboarding/_components/OnboardingClient.tsx

@@ -109,6 +109,32 @@ export default function OnboardingClient({
     setCurrentStep("quiz");
   };
 
+  const handleBackToVideos = () => {
+    setCurrentStep("videos");
+  };
+
+  const handleBackToQuiz = () => {
+    setCurrentStep("quiz");
+  };
+
+  const handleStepClick = (stepNumber: number) => {
+    if (stepNumber >= 1 && stepNumber <= 4) {
+      // Navigate to video step
+      setCurrentStep("videos");
+      setProgress((prev) => ({
+        ...prev,
+        currentVideo: stepNumber as 1 | 2 | 3 | 4,
+      }));
+    } else if (stepNumber === 5) {
+      // Navigate to quiz/commitment based on quiz status
+      if (applicantData.quiz_passed && !applicantData.commitment_signed_at) {
+        setCurrentStep("commitment");
+      } else {
+        setCurrentStep("quiz");
+      }
+    }
+  };
+
   const handleQuizComplete = (score: number, total: number) => {
     setQuizScore(score);
     setQuizTotal(total);
@@ -186,6 +212,7 @@ export default function OnboardingClient({
           <OnboardingStepper
             progress={progress}
             currentVideo={currentStep === "videos" ? progress.currentVideo : 5}
+            onStepClick={handleStepClick}
           />
         </div>
 
@@ -235,17 +262,43 @@ export default function OnboardingClient({
           )}
 
           {currentStep === "quiz" && (
-            <Quiz
-              applicantId={applicantId}
-              onQuizComplete={handleQuizComplete}
-            />
+            <>
+              <Quiz
+                applicantId={applicantId}
+                onQuizComplete={handleQuizComplete}
+              />
+
+              {/* Back to Videos Button */}
+              <div className="mt-6">
+                <Button
+                  onClick={handleBackToVideos}
+                  variant="outline"
+                  className="w-full sm:w-auto"
+                >
+                  ← Back to Videos
+                </Button>
+              </div>
+            </>
           )}
 
           {currentStep === "commitment" && (
-            <Commitment
-              userName={`${user.first_name} ${user.last_name}`}
-              onComplete={handleCommitmentComplete}
-            />
+            <>
+              <Commitment
+                userName={`${user.first_name} ${user.last_name}`}
+                onComplete={handleCommitmentComplete}
+              />
+
+              {/* Back to Quiz Button */}
+              <div className="mt-6">
+                <Button
+                  onClick={handleBackToQuiz}
+                  variant="outline"
+                  className="w-full sm:w-auto"
+                >
+                  ← Back to Quiz
+                </Button>
+              </div>
+            </>
           )}
         </div>
 

apps/codebility/app/applicant/onboarding/_components/OnboardingStepper.tsx

@@ -6,11 +6,13 @@ import { OnboardingProgressType } from "../_service/type";
 interface OnboardingStepperProps {
   progress: OnboardingProgressType;
   currentVideo: number;
+  onStepClick?: (step: number) => void;
 }
 
 export default function OnboardingStepper({
   progress,
   currentVideo,
+  onStepClick,
 }: OnboardingStepperProps) {
   const steps = [
     { number: 1, title: "Introduction", completed: progress.video1 },
@@ -20,6 +22,12 @@ export default function OnboardingStepper({
     { number: 5, title: "Quiz & Commitment", completed: false }, // Will be updated based on quiz/commitment status
   ];
 
+  const handleStepClick = (stepNumber: number) => {
+    if (onStepClick) {
+      onStepClick(stepNumber);
+    }
+  };
+
   return (
     <div className="w-full">
       <div className="flex items-center justify-between">
@@ -28,12 +36,13 @@ export default function OnboardingStepper({
             {/* Step Circle */}
             <div className="flex flex-col items-center">
               <div
-                className={`flex h-12 w-12 items-center justify-center rounded-full border-2 transition-all ${
+                onClick={() => handleStepClick(step.number)}
+                className={`flex h-12 w-12 items-center justify-center rounded-full border-2 transition-all cursor-pointer hover:scale-110 ${
                   step.completed
-                    ? "border-green-500 bg-green-500 text-white"
+                    ? "border-green-500 bg-green-500 text-white hover:bg-green-600"
                     : currentVideo === step.number
                       ? "border-blue-500 bg-blue-500 text-white"
-                      : "border-gray-700 bg-gray-900 text-gray-500"
+                      : "border-gray-700 bg-gray-900 text-gray-500 hover:border-gray-600"
                 }`}
               >
                 {step.completed ? (

apps/codebility/supabase/migrations/reset_onboarding_progress.sql

@@ -0,0 +1,30 @@
+-- Reset Onboarding Progress Script
+-- This script resets an applicant's onboarding progress completely
+-- Replace 'YOUR_APPLICANT_ID' with the actual applicant ID
+
+-- Step 1: Reset all video progress to incomplete
+UPDATE public.onboarding_videos
+SET
+    completed = FALSE,
+    watched_duration = 0,
+    completed_at = NULL,
+    updated_at = NOW()
+WHERE applicant_id = 'YOUR_APPLICANT_ID';
+
+-- Step 2: Reset quiz and commitment data in applicant table
+UPDATE public.applicant
+SET
+    quiz_score = NULL,
+    quiz_total = NULL,
+    quiz_passed = FALSE,
+    quiz_completed_at = NULL,
+    signature_data = NULL,
+    commitment_signed_at = NULL,
+    can_do_mobile = NULL,
+    updated_at = NOW()
+WHERE id = 'YOUR_APPLICANT_ID';
+
+-- Step 3: Verify the reset (optional - for checking)
+-- SELECT * FROM public.onboarding_videos WHERE applicant_id = 'YOUR_APPLICANT_ID';
+-- SELECT quiz_score, quiz_total, quiz_passed, quiz_completed_at, commitment_signed_at
+-- FROM public.applicant WHERE id = 'YOUR_APPLICANT_ID';