fix(onboarding): recalculate progress bar from full STEP_ORDER position

src/features/onboarding/onboarding-stepper.tsx

@@ -2,19 +2,28 @@
 
 import { useOnboarding } from "@onboardjs/react";
 import { Progress } from "@/components/ui/progress";
+import { STEP_ORDER } from "@/features/onboarding/constants/steps";
 
 export const OnboardingStepper = () => {
-    const { state } = useOnboarding();
+  const { state } = useOnboarding();
 
-    if (!state) return null;
+  if (!state) return null;
 
-    return (
+  const currentId = String(state.currentStep?.id ?? "");
-        <div className="flex flex-col gap-2 w-full">
+  const currentIndex = Math.max(0, STEP_ORDER.indexOf(currentId));
-            <div className="flex justify-between text-xs text-muted-foreground">
+  const totalSteps = STEP_ORDER.length;
-                <span>Step {state.currentStepNumber} of {state.totalSteps}</span>
+  const stepNumber = currentIndex + 1;
-                <span>{Math.round(state.progressPercentage)}%</span>
+  const progress = Math.round((currentIndex / (totalSteps - 1)) * 100);
-            </div>
+
-            <Progress value={state.progressPercentage} />
+  return (
-        </div>
+    <div className="flex flex-col gap-2 w-full">
-    );
+      <div className="flex justify-between text-xs text-muted-foreground">
+        <span>
+          Step {stepNumber} of {totalSteps}
+        </span>
+        <span>{progress}%</span>
+      </div>
+      <Progress value={progress} />
+    </div>
+  );
 };