Refactor code structure for improved readability and maintainability

web/experience/src/app/courses/[id]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { lmsApi, Course, Module, Recommendation, UserGrade, Meeting } from "@/lib/api";
+import { lmsApi, Course, Module, Recommendation, UserGrade, Meeting, normalizeProgressPercent } from "@/lib/api";
 import { Sparkles, AlertTriangle, ArrowRight, CheckCircle2, XCircle, Circle, Video, ExternalLink } from "lucide-react";
 import Link from "next/link";
 import { BookOpen, ChevronRight, PlayCircle, Calendar, Clock, Info, Lock } from "lucide-react";
@@ -51,7 +51,7 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                     setIsEnrolled(!!enrollment || isPreview);
 
                     if (enrollment) {
-                        setProgress(enrollment.progress * 100);
+                        setProgress(normalizeProgressPercent(enrollment.progress));
                     }
                 } else {
                     // Even if not logged in, if there's a preview token, consider "enrolled" for UI

web/experience/src/app/my-learning/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { lmsApi, Course, Module } from "@/lib/api";
+import { lmsApi, Course, Module, normalizeProgressPercent } from "@/lib/api";
 import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
 import { BookOpen, TrendingUp, Clock, CheckCircle2, Award, Target } from "lucide-react";
@@ -40,7 +40,7 @@ export default function MyLearningPage() {
                     try {
                         const { course, modules } = await lmsApi.getCourseOutline(enrollment.course_id);
 
-                        const progress = enrollment.progress || 0;
+                        const progress = normalizeProgressPercent(enrollment.progress);
 
                         enrichedEnrollments.push({
                             course: { ...course, modules },