From 3203ea081bda1a9cd27e4e4fb2f5c18331ddb587 Mon Sep 17 00:00:00 2001
From: ANIMASHAUN Michael <michaeloncode@gmail.com>
Date: Thu, 9 Apr 2026 12:48:00 +0100
Subject: [PATCH 1/8] feat: public profile components moved to sdk now used
 here

---
 .claude/settings.json                     |   8 +
 app/profile/courses/page.tsx              |  32 +-
 app/profile/credentials/page.tsx          |  13 +-
 app/profile/layout.tsx                    |   2 +-
 app/profile/page.tsx                      |  91 ++++--
 app/profile/pathways/page.tsx             | 340 +++++++++++++++++++---
 app/profile/programs/page.tsx             | 312 +++++++++++++++++---
 app/profile/public/page.tsx               | 253 +++++++++++++++-
 app/profile/skills/page.tsx               |  52 +++-
 hooks/search/use-personnalized-catalog.ts |  45 +--
 package.json                              |  15 +-
 11 files changed, 993 insertions(+), 170 deletions(-)
 create mode 100644 .claude/settings.json

diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000..cdbd03f
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(pnpm prettier:*)",
+      "Bash(pnpm typecheck:*)"
+    ]
+  }
+}
diff --git a/app/profile/courses/page.tsx b/app/profile/courses/page.tsx
index b16c48a..0da21f0 100644
--- a/app/profile/courses/page.tsx
+++ b/app/profile/courses/page.tsx
@@ -3,15 +3,18 @@
 import { useState } from 'react';
 
 import { Search, Plus } from 'lucide-react';
-import { useUserCourses } from '@/hooks/courses/use-user-courses';
-import { CourseBox } from '@/components/course-box';
-import { SkeletonMultiplier } from '@/components/skeleton-multiplier';
-import { CourseCardSkeleton } from '@/components/course-card-skeleton';
-import { DefaultEmptyBox } from '@/components/default-empty-box';
-import { Course } from '@/types/courses';
+import {
+  CourseCardSkeleton,
+  DefaultEmptyBox,
+  SkeletonMultiplier,
+  useUserCourses,
+  getRandomCourseImage,
+} from '@iblai/iblai-js/web-containers';
+import { CourseBox } from '@iblai/iblai-js/web-containers/next';
 import ReactPaginate from 'react-paginate';
 import { useTenantMetadata } from '@iblai/iblai-js/web-utils';
 import { getTenant } from '@/utils/helpers';
+import { config } from '@/lib/config';
 
 export default function CoursesPage() {
   const { metadataLoaded, isSkillsAssignmentsFeatureHidden } = useTenantMetadata({
@@ -99,9 +102,20 @@ export default function CoursesPage() {
         )}
         {!isLoadingUserCourses &&
           !errorUserCourses &&
-          userCourses.map((course: Course, index: number) => (
-            <CourseBox key={`course-${course.course_id}-${index}`} course={course} />
-          ))}
+          userCourses.map((course, index: number) => {
+            const fallback = getRandomCourseImage();
+            const imageSrc = course.edx_data?.course_image_asset_path
+              ? config.urls.lms() + course.edx_data.course_image_asset_path
+              : fallback;
+            return (
+              <CourseBox
+                key={`course-${course.course_id}-${index}`}
+                course={course}
+                imageSrc={imageSrc}
+                fallbackImageSrc={fallback}
+              />
+            );
+          })}
       </div>
       {/* Pagination */}
       <div className="mt-8 mb-10 flex justify-end">
diff --git a/app/profile/credentials/page.tsx b/app/profile/credentials/page.tsx
index e33fca5..2318534 100644
--- a/app/profile/credentials/page.tsx
+++ b/app/profile/credentials/page.tsx
@@ -2,12 +2,13 @@
 
 import { useState } from 'react';
 import { Search } from 'lucide-react';
-import { CredentialDetailModal } from '@/components/credential-detail-modal';
-import { useProfileCredentials } from '@/hooks/profile/use-profile-credentials';
-import { SkeletonMultiplier } from '@/components/skeleton-multiplier';
-import { CredentialMiniBoxSkeleton } from '@/components/skeleton-credential-mini-box';
-import { DefaultEmptyBox } from '@/components/default-empty-box';
-import { CredentialMiniBox } from '@/components/credential-mini-box';
+import {
+  CredentialMiniBoxSkeleton,
+  DefaultEmptyBox,
+  SkeletonMultiplier,
+  useProfileCredentials,
+} from '@iblai/iblai-js/web-containers';
+import { CredentialDetailModal, CredentialMiniBox } from '@iblai/iblai-js/web-containers/next';
 import { Assertion } from '@iblai/iblai-api';
 
 export default function CredentialsPage() {
diff --git a/app/profile/layout.tsx b/app/profile/layout.tsx
index eb4a9df..9eceb76 100644
--- a/app/profile/layout.tsx
+++ b/app/profile/layout.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { ProfileTabs } from '@/components/profile-tabs';
+import { ProfileTabs } from '@iblai/iblai-js/web-containers/next';
 
 export default function ProfileLayout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index 4cc1df1..18e4331 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -1,30 +1,75 @@
 'use client';
 
-import { ProfileTimeChart } from '@/components/profile-time-chart';
-import { ProfileInfoCards } from '@/components/profile-info-cards';
-import { SkillLeaderboardChart } from '@/components/skill-leaderboard-chart';
-import { useProfileActivityStats } from '@/hooks/profile/use-profile-activity-stats';
-import { ActivityStats } from '@/types/catalog';
-import { SkeletonActivityStatBox } from '@/components/skeleton-activity-stat-box';
-import { getTenant, getUserName } from '@/utils/helpers';
+import { useEffect, useState } from 'react';
+import _ from 'lodash';
+import {
+  ProfileTimeChart,
+  SkillLeaderboardChart,
+  SkeletonActivityStatBox,
+  useProfileActivityStats,
+  useProfileTimeSpent,
+  useUserMetadata,
+  type ActivityStats,
+} from '@iblai/iblai-js/web-containers';
+import { ProfileInfoCards } from '@iblai/iblai-js/web-containers/next';
+import { getTenant } from '@/utils/helpers';
 import { useTenantMetadata } from '@iblai/iblai-js/web-utils';
 // @ts-ignore
-import { useGetUserMetadataQuery } from '@iblai/iblai-js/data-layer';
+import { useGetUserPerLearnerInfoQuery } from '@/services/perlearner';
+// @ts-ignore
+import { useLazyGetPerLearnerActivityQuery } from '@/services/perlearner';
 
 export default function ProfilePage() {
   const { stats } = useProfileActivityStats();
   const { metadataLoaded, isSkillsLeaderBoardEnabled } = useTenantMetadata({
     org: getTenant(),
   });
-  const username = getUserName();
-  const { data: userMetadata, isLoading: isUserMetadataLoading } = useGetUserMetadataQuery(
-    {
-      params: { username },
-    },
-    {
-      skip: !username,
-    },
-  );
+  const { userMetaData: userMetadata, userMetaDataLoading: isUserMetadataLoading } =
+    useUserMetadata();
+  const { timeSpent, timeSpentLoading } = useProfileTimeSpent();
+
+  // ProfileInfoCards wiring
+  const { data: userInfo, isLoading: isUserInfoLoading } = useGetUserPerLearnerInfoQuery({
+    org: getTenant(),
+    username: userMetadata?.username || '',
+  });
+  const [getPerLearnerActivity] = useLazyGetPerLearnerActivityQuery();
+  const [topContent, setTopContent] = useState<{
+    name?: string | null;
+    course_id?: string | null;
+    time_invested?: number | null;
+  } | null>(null);
+  const [topContentLoading, setTopContentLoading] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        setTopContentLoading(true);
+        const response = await getPerLearnerActivity({
+          org: getTenant(),
+          username: userMetadata?.username || '',
+        });
+        if (cancelled) return;
+        if (_.isEmpty(response.data)) {
+          throw new Error('Empty per-learner activity');
+        }
+        const sortedData = [...(response.data as any).data].sort(
+          (a: any, b: any) => b.time_invested - a.time_invested,
+        );
+        setTopContent(sortedData[0]);
+      } catch {
+        if (!cancelled) {
+          setTopContent({ name: '-', time_invested: 0, course_id: '-' });
+        }
+      } finally {
+        if (!cancelled) setTopContentLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [getPerLearnerActivity, userMetadata?.username]);
 
   return (
     <>
@@ -55,7 +100,7 @@ export default function ProfilePage() {
         <div className="mb-6 rounded-md border border-amber-100 bg-amber-50/30 p-6 shadow-sm">
           <h2 className="mb-4 text-lg font-medium text-gray-700">Time Spent</h2>
           <div className="rounded-lg border border-amber-200 bg-white p-4">
-            <ProfileTimeChart />
+            <ProfileTimeChart data={timeSpent} loading={timeSpentLoading} />
           </div>
         </div>
 
@@ -63,7 +108,13 @@ export default function ProfilePage() {
         <div className="mb-6 rounded-md border border-gray-200 bg-gray-50 p-6 shadow-sm">
           <h2 className="mb-4 text-lg font-medium text-gray-700">Profile Information</h2>
           <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <ProfileInfoCards />
+            <ProfileInfoCards
+              userInfo={(userInfo as any)?.data ?? null}
+              topContent={topContent}
+              loading={isUserInfoLoading}
+              topContentLoading={topContentLoading}
+              courseHrefTemplate="/courses/{courseId}"
+            />
           </div>
         </div>
 
@@ -71,7 +122,7 @@ export default function ProfilePage() {
         {metadataLoaded &&
           isSkillsLeaderBoardEnabled() &&
           !isUserMetadataLoading &&
-          userMetadata?.enable_skills_leaderboard_display !== false && (
+          (userMetadata as any)?.enable_skills_leaderboard_display !== false && (
             <div className="rounded-md border border-amber-100 bg-amber-50/30 p-6 shadow-sm">
               <h2 className="mb-4 text-lg font-medium text-gray-700">Skill Leaderboard</h2>
               <div className="rounded-lg border border-amber-200 bg-white p-4">
diff --git a/app/profile/pathways/page.tsx b/app/profile/pathways/page.tsx
index 68f9d37..a1fc853 100644
--- a/app/profile/pathways/page.tsx
+++ b/app/profile/pathways/page.tsx
@@ -1,28 +1,51 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { Search, Plus } from 'lucide-react';
-import { PathwayDetailModal } from '@/components/pathway-detail-modal';
-import { CreatePathwayModal } from '@/components/create-pathway-modal';
-import { useProfilePathways } from '@/hooks/profile/use-profile-pathways';
-import { SkeletonMultiplier } from '@/components/skeleton-multiplier';
-import { SkeletonPathwayBox } from '@/components/skeleton-pathway-box';
-import { DefaultEmptyBox } from '@/components/default-empty-box';
-import { PathwayEnrollmentPlus } from '@iblai/iblai-api';
-import { getRandomCourseImage, getTenant } from '@/utils/helpers';
+import { toast } from 'sonner';
+import {
+  DefaultEmptyBox,
+  SkeletonMultiplier,
+  SkeletonPathwayBox,
+  useProfilePathways,
+  getRandomCourseImage,
+} from '@iblai/iblai-js/web-containers';
+import {
+  PathwayDetailModal,
+  CreatePathwayModal,
+  type CreatePathwayFormData,
+  type PathwayDetailCourse,
+} from '@iblai/iblai-js/web-containers/next';
+import { PathwayCompletionResponse, PathwayEnrollmentPlus } from '@iblai/iblai-api';
+import { getTenant, getUserId, getUserName } from '@/utils/helpers';
 import { useTenantMetadata } from '@iblai/iblai-js/web-utils';
+import { config } from '@/lib/config';
+// @ts-ignore
+import {
+  useLazyGetPathwayCompletionQuery,
+  useLazyGetUserEnrolledPathwaysQuery,
+  useCreateCatalogPathwaySelfEnrollmentMutation,
+  useLazyGetPathwayListQuery,
+  useLazyGetResourceSearchQuery,
+  useCreateCatalogPathwayMutation,
+} from '@iblai/iblai-js/data-layer';
+import { usePersonnalizedCatalog } from '@/hooks/search/use-personnalized-catalog';
+import { slugify } from '@/utils/helpers';
+import { useDebouncedCallback } from 'use-debounce';
 
 export default function PathwaysPage() {
   const { metadataLoaded, isSkillsAssignmentsFeatureHidden } = useTenantMetadata({
     org: getTenant(),
   });
+  const router = useRouter();
   const [searchQuery, setSearchQuery] = useState('');
   const CATALOG_TAB = 'catalog';
   const ASSIGNED_TAB = 'assigned';
   const ENROLLED_TAB = 'enrolled';
-  const [activeTab, setActiveTab] = useState<'catalog' | 'assigned' | 'enrolled'>(CATALOG_TAB); // "my" or "assigned"
-  const [selectedPathway, setSelectedPathway] = useState<any>(null);
+  const [activeTab, setActiveTab] = useState<'catalog' | 'assigned' | 'enrolled'>(CATALOG_TAB);
+  const [selectedPathway, setSelectedPathway] = useState<PathwayEnrollmentPlus | null>(null);
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const {
     filteredPathways,
@@ -35,8 +58,11 @@ export default function PathwaysPage() {
   } = useProfilePathways({
     searchQuery,
     contentType: activeTab,
+    lmsUrl: config.urls.lms(),
   });
 
+  const [randomImage] = useState(() => getRandomCourseImage());
+
   const handlePathwayTabChange = (tab: 'catalog' | 'assigned' | 'enrolled') => {
     if (activeTab === tab) return;
     setActiveTab(tab);
@@ -44,13 +70,240 @@ export default function PathwaysPage() {
     setFilteredPathways([]);
   };
 
-  const handleCreatePathway = (pathwayData: PathwayEnrollmentPlus) => {
-    // In a real app, you would send this data to your API
-    setPathways([...pathways, pathwayData]);
-    setFilteredPathways([...filteredPathways, pathwayData]);
+  // ----- PathwayDetailModal wiring -----
+  const [getPathwayList] = useLazyGetPathwayListQuery();
+  const [getPathwayCompletion] = useLazyGetPathwayCompletionQuery();
+  const [getUserEnrolledPathways, { isLoading: isEnrollmentLoading }] =
+    useLazyGetUserEnrolledPathwaysQuery();
+  const [
+    createCatalogPathwaySelfEnrollment,
+    { isError: isEnrollmentError, isSuccess: isEnrollmentSuccess },
+  ] = useCreateCatalogPathwaySelfEnrollmentMutation();
+
+  const [paths, setPaths] = useState<PathwayDetailCourse[]>([]);
+  const [pathwayDetailLoading, setPathwayDetailLoading] = useState(false);
+  const [pathwayCompletion, setPathwayCompletion] = useState<PathwayCompletionResponse | null>(
+    null,
+  );
+  const [enrollmentStatus, setEnrollmentStatus] = useState(false);
+  const [isEnrollmentSubmitting, setIsEnrollmentSubmitting] = useState(false);
+
+  // For pathways page we use user-related pathway list (matches old default)
+  useEffect(() => {
+    if (!selectedPathway) {
+      setPaths([]);
+      setPathwayCompletion(null);
+      setEnrollmentStatus(false);
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      try {
+        setPathwayDetailLoading(true);
+        const resp = await getPathwayList([
+          {
+            pathwayUuid: selectedPathway.pathway_uuid,
+            username: getUserName(),
+          },
+        ]);
+        const list = (resp?.data as any) ?? [];
+        if (Array.isArray(list) && list.length > 0) {
+          const pathwayCourses: PathwayDetailCourse[] = (list[0]?.path || []).map(
+            (course: any) => ({
+              ...course,
+              edx_data: {
+                ...course?.edx_data,
+                course_image_asset_path: course?.edx_data?.course_image_asset_path
+                  ? config.urls.lms() + course.edx_data.course_image_asset_path
+                  : getRandomCourseImage(),
+              },
+            }),
+          );
+          if (!cancelled) setPaths(pathwayCourses);
+        }
+      } catch {
+        if (!cancelled) {
+          toast.error('Error fetching pathway details');
+          setPaths([]);
+        }
+      } finally {
+        if (!cancelled) setPathwayDetailLoading(false);
+      }
+    })();
+    (async () => {
+      try {
+        const resp = await getPathwayCompletion([
+          {
+            pathwayUuid: selectedPathway.pathway_uuid || '',
+            username: getUserName(),
+          },
+        ]);
+        if (!cancelled) setPathwayCompletion((resp.data as PathwayCompletionResponse) || null);
+      } catch {
+        if (!cancelled) setPathwayCompletion(null);
+      }
+    })();
+    (async () => {
+      try {
+        const resp = await getUserEnrolledPathways([
+          {
+            username: getUserName(),
+            pathwayUuid: selectedPathway.pathway_uuid || '',
+          },
+        ]);
+        if (!cancelled) {
+          setEnrollmentStatus(
+            Array.isArray(resp.data) &&
+              resp.data.findIndex(
+                (pre: any) => pre.active && pre?.pathway_uuid === selectedPathway.pathway_uuid,
+              ) !== -1,
+          );
+        }
+      } catch {
+        if (!cancelled) setEnrollmentStatus(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedPathway, getPathwayList, getPathwayCompletion, getUserEnrolledPathways]);
+
+  const handleEnrollIntoPathway = async (pathway: PathwayEnrollmentPlus) => {
+    if (isEnrollmentSubmitting) return;
+    try {
+      setIsEnrollmentSubmitting(true);
+      await createCatalogPathwaySelfEnrollment([
+        {
+          requestBody: {
+            // @ts-ignore
+            pathway_uuid: pathway.pathway_uuid || '',
+            pathway_key: pathway.platform_key || '',
+            username: getUserName(),
+            active: true,
+          },
+        },
+      ]);
+      if (isEnrollmentError) {
+        throw new Error('Failed to enroll into pathway');
+      }
+      toast.success('Enrolled into pathway successfully');
+      setTimeout(() => setIsEnrollmentSubmitting(false), 500);
+    } catch {
+      toast.error('Failed to enroll into pathway');
+      setIsEnrollmentSubmitting(false);
+    }
   };
 
-  const [randomImage] = useState(() => getRandomCourseImage());
+  const handleCourseClick = (course: PathwayDetailCourse) => {
+    if (course?.item_type === 'course') {
+      router.push(`/courses/${course.course_id}`);
+    } else if (course?.url) {
+      window.open(course.url, '_blank');
+    }
+  };
+
+  // ----- CreatePathwayModal wiring -----
+  const [createSearchQuery, setCreateSearchQuery] = useState('');
+  const [searchedCourses, setSearchedCourses] = useState<any[]>([]);
+  const [searchedResources, setSearchedResources] = useState<any[]>([]);
+  const [getResourceSearch, { isLoading: isResourceSearchLoading }] =
+    useLazyGetResourceSearchQuery();
+  const { handleSearch: handleCatalogSearch, isLoading: isCoursesLoading } =
+    usePersonnalizedCatalog();
+  const [createCatalogPathway, { isError: isCreateCatalogPathwayError }] =
+    useCreateCatalogPathwayMutation();
+
+  const debouncedSearch = useDebouncedCallback(async (q: string) => {
+    const resourceSearch = await getResourceSearch([
+      {
+        platformKey: getTenant(),
+        ...(q.length > 2 ? { name: q } : {}),
+      },
+    ]);
+    const response = await handleCatalogSearch({
+      username: getUserName(),
+      query: q,
+      limit: 10,
+      content: ['courses'],
+      tenant: getTenant(),
+    });
+    setSearchedResources(
+      (resourceSearch?.data || []).map((resource: any) => ({
+        ...resource,
+        image: resource?.image || resource?.data?.banner_image || getRandomCourseImage(),
+      })),
+    );
+    setSearchedCourses(
+      (response?.data?.results || []).map((result: any) => ({
+        ...result,
+        data: {
+          ...result.data,
+          edx_data: {
+            ...result.data.edx_data,
+            course_image_asset_path: result.data.edx_data?.course_image_asset_path
+              ? config.urls.lms() + result.data.edx_data.course_image_asset_path
+              : getRandomCourseImage(),
+          },
+        },
+      })),
+    );
+  }, 500);
+
+  useEffect(() => {
+    if (createDialogOpen) {
+      debouncedSearch(createSearchQuery);
+    }
+  }, [createDialogOpen, createSearchQuery, debouncedSearch]);
+
+  const handleCreatePathwaySave = async (form: CreatePathwayFormData) => {
+    const newPathway = {
+      name: form.name,
+      path: [
+        ...form.selectedCourses.map((courseId) => ({
+          item_type: 'course',
+          course_id: courseId,
+        })),
+        ...form.selectedResources.map((resourceId) => ({
+          item_type: 'resource',
+          id: resourceId,
+        })),
+      ],
+      platform_key: getTenant(),
+      user_id: getUserId(),
+      username: getUserName(),
+      visible: false,
+      pathway_id: slugify(form.name),
+      data: {
+        description: form.description,
+        subject: form.subject,
+      },
+    };
+    try {
+      const response = await createCatalogPathway([
+        {
+          requestBody: newPathway,
+          userId: getUserId(),
+          username: getUserName(),
+        },
+      ]);
+      if (isCreateCatalogPathwayError) {
+        throw new Error();
+      }
+      toast.success('Pathway created successfully');
+      const created = response?.data as PathwayEnrollmentPlus | undefined;
+      if (created) {
+        setPathways([...pathways, created]);
+        setFilteredPathways([...filteredPathways, created]);
+      }
+      setCreateDialogOpen(false);
+    } catch {
+      toast.error('Failed to create pathway.');
+    }
+  };
+
+  const selectedPathwayBannerSrc = selectedPathway?.metadata?.banner_image_asset_path
+    ? config.urls.lms() + selectedPathway.metadata.banner_image_asset_path
+    : randomImage;
 
   return (
     <>
@@ -153,24 +406,20 @@ export default function PathwaysPage() {
                   <h3 className="mb-2 text-sm font-medium text-gray-800">{pathway?.name || ''}</h3>
                   {pathwayCompletions.length > 0 && pathwayCompletions[index] && (
                     <div className="space-y-1">
-                      {pathwayCompletions.length > 0 && pathwayCompletions[index] && (
-                        <>
-                          <div className="flex justify-between text-xs">
-                            <span className="text-gray-600">Progress</span>
-                            <span className="font-medium text-gray-800">
-                              {pathwayCompletions[index].completion_percentage || 0}%
-                            </span>
-                          </div>
-                          <div className="h-1.5 w-full rounded-full bg-gray-200">
-                            <div
-                              className="h-1.5 rounded-full bg-amber-500"
-                              style={{
-                                width: `${pathwayCompletions[index].completion_percentage}%`,
-                              }}
-                            ></div>
-                          </div>
-                        </>
-                      )}
+                      <div className="flex justify-between text-xs">
+                        <span className="text-gray-600">Progress</span>
+                        <span className="font-medium text-gray-800">
+                          {pathwayCompletions[index].completion_percentage || 0}%
+                        </span>
+                      </div>
+                      <div className="h-1.5 w-full rounded-full bg-gray-200">
+                        <div
+                          className="h-1.5 rounded-full bg-amber-500"
+                          style={{
+                            width: `${pathwayCompletions[index].completion_percentage}%`,
+                          }}
+                        ></div>
+                      </div>
                     </div>
                   )}
                 </div>
@@ -180,7 +429,20 @@ export default function PathwaysPage() {
       </div>
       {/* Pathway Detail Modal */}
       {selectedPathway && (
-        <PathwayDetailModal pathway={selectedPathway} onClose={() => setSelectedPathway(null)} />
+        <PathwayDetailModal
+          pathway={selectedPathway}
+          paths={paths}
+          pathwayDetailLoading={pathwayDetailLoading}
+          pathwayCompletion={pathwayCompletion}
+          enrollmentStatus={enrollmentStatus}
+          isEnrollmentSuccess={isEnrollmentSuccess}
+          isEnrollmentLoading={isEnrollmentLoading}
+          isEnrollmentSubmitting={isEnrollmentSubmitting}
+          bannerImageSrc={selectedPathwayBannerSrc}
+          onClose={() => setSelectedPathway(null)}
+          onEnroll={handleEnrollIntoPathway}
+          onCourseClick={handleCourseClick}
+        />
       )}
 
       {/* Create Pathway Dialog */}
@@ -188,8 +450,12 @@ export default function PathwaysPage() {
         <CreatePathwayModal
           open={createDialogOpen}
           onOpenChange={setCreateDialogOpen}
-          // @ts-expect-error investigate
-          onSave={handleCreatePathway}
+          onSearchChange={setCreateSearchQuery}
+          onSave={handleCreatePathwaySave}
+          searchedCourses={searchedCourses}
+          searchedResources={searchedResources}
+          isCoursesLoading={isCoursesLoading}
+          isResourceSearchLoading={isResourceSearchLoading}
         />
       )}
     </>
diff --git a/app/profile/programs/page.tsx b/app/profile/programs/page.tsx
index a92c998..603cfca 100644
--- a/app/profile/programs/page.tsx
+++ b/app/profile/programs/page.tsx
@@ -1,27 +1,47 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { Search } from 'lucide-react';
-import { ProgramDetailModal } from '@/components/program-detail-modal';
-import { DefaultEmptyBox } from '@/components/default-empty-box';
-import { SkeletonMultiplier } from '@/components/skeleton-multiplier';
-import { SkeletonPathwayBox } from '@/components/skeleton-pathway-box';
-import { useProfilePrograms } from '@/hooks/profile/use-profile-programs';
+import { toast } from 'sonner';
+import {
+  DefaultEmptyBox,
+  SkeletonMultiplier,
+  SkeletonPathwayBox,
+  useProfilePrograms,
+  getRandomCourseImage,
+} from '@iblai/iblai-js/web-containers';
+import {
+  ProgramDetailModal,
+  type ProgramSettingsFormData,
+  type ProgramDetailCourse,
+} from '@iblai/iblai-js/web-containers/next';
+import { ProgramCompletionResponse } from '@iblai/iblai-api';
 import { useTenantMetadata } from '@iblai/iblai-js/web-utils';
-import { getTenant } from '@/utils/helpers';
+import { getTenant, getUserName } from '@/utils/helpers';
+import { useIsAdmin } from '@/utils/localstorage';
 import { CustomProgramEnrollmentPlus } from '@/types/program';
-import { getRandomCourseImage } from '@/utils/helpers';
 import { config } from '@/lib/config';
+// @ts-ignore
+import {
+  useLazyGetProgramCompletionQuery,
+  useLazyGetUserEnrolledProgramsQuery,
+  useCreateCatalogProgramSelfEnrollmentMutation,
+} from '@iblai/iblai-js/data-layer';
+import { useGetProgramMetadataQuery, useUpdateProgramMetadataMutation } from '@/services/studio';
+import { usePersonnalizedCatalog } from '@/hooks/search/use-personnalized-catalog';
 
 export default function ProgramsPage() {
   const { metadataLoaded, isSkillsAssignmentsFeatureHidden } = useTenantMetadata({
     org: getTenant(),
   });
+  const router = useRouter();
+  const isAdmin = useIsAdmin();
   const [searchQuery, setSearchQuery] = useState('');
   const ENROLLED_TAB = 'enrolled';
   const ASSIGNED_TAB = 'assigned';
-  const [activeTab, setActiveTab] = useState<'enrolled' | 'assigned' | 'catalog'>(ENROLLED_TAB); // "my" or "assigned"
+  const [activeTab, setActiveTab] = useState<'enrolled' | 'assigned' | 'catalog'>(ENROLLED_TAB);
   const [selectedProgram, setSelectedProgram] = useState<CustomProgramEnrollmentPlus | null>(null);
   const [randomImage] = useState(() => getRandomCourseImage());
   const {
@@ -45,6 +65,212 @@ export default function ProgramsPage() {
     setPrograms([]);
   };
 
+  // ----- ProgramDetailModal wiring -----
+  const { handleSearch } = usePersonnalizedCatalog();
+  const [getUserEnrolledPrograms, { isLoading: isEnrollmentLoading }] =
+    useLazyGetUserEnrolledProgramsQuery();
+  const [getProgramCompletion] = useLazyGetProgramCompletionQuery();
+  const [
+    createCatalogProgramSelfEnrollment,
+    { isError: isEnrollmentError, isSuccess: isEnrollmentSuccess },
+  ] = useCreateCatalogProgramSelfEnrollmentMutation();
+
+  const programOrg =
+    (selectedProgram as any)?.org || (selectedProgram as any)?.platform_key || getTenant();
+
+  const showSettings = !!isAdmin && selectedProgram?.platform_key === getTenant();
+
+  const {
+    data: programMetadata,
+    isLoading: isLoadingMetadata,
+    refetch: refetchMetadata,
+  } = useGetProgramMetadataQuery(
+    { programId: selectedProgram?.program_id || '', org: programOrg },
+    { skip: !selectedProgram?.program_id || !showSettings },
+  );
+
+  const [updateProgramMetadata, { isLoading: isSavingSettings }] =
+    useUpdateProgramMetadataMutation();
+
+  const [programCourses, setProgramCourses] = useState<ProgramDetailCourse[]>([]);
+  const [programDetailLoading, setProgramDetailLoading] = useState(false);
+  const [programCompletion, setProgramCompletion] = useState<ProgramCompletionResponse | null>(
+    null,
+  );
+  const [enrollmentStatus, setEnrollmentStatus] = useState(false);
+  const [isEnrollmentSubmitting, setIsEnrollmentSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!selectedProgram) {
+      setProgramCourses([]);
+      setProgramCompletion(null);
+      setEnrollmentStatus(false);
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      try {
+        setProgramDetailLoading(true);
+        const response = await handleSearch({
+          username: getUserName(),
+          content: ['programs'],
+          programId: selectedProgram.program_id,
+          returnItems: true,
+          tenant:
+            (selectedProgram as any)?.platform || selectedProgram?.platform_key || getTenant(),
+        });
+        const results: any[] = response?.data?.results || [];
+        const allCourses = results.reduce((acc: any[], program: any) => {
+          if (program?.courses && Array.isArray(program.courses)) {
+            return [...acc, ...program.courses];
+          }
+          return acc;
+        }, []);
+        const uniqueCourses = allCourses.filter(
+          (course: any, index: number, self: any) =>
+            index === self.findIndex((c: any) => c.course?.course_id === course.course?.course_id),
+        );
+        const mapped: ProgramDetailCourse[] = uniqueCourses.map((course: any) => ({
+          ...course,
+          course: {
+            ...course?.course,
+            edx_data: {
+              ...course?.course?.edx_data,
+              course_image_asset_path: course?.course?.edx_data?.course_image_asset_path
+                ? config.urls.lms() + course.course.edx_data.course_image_asset_path
+                : getRandomCourseImage(),
+            },
+          },
+        }));
+        if (!cancelled) setProgramCourses(mapped);
+      } catch {
+        if (!cancelled) {
+          toast.error('Error fetching program details');
+          setProgramCourses([]);
+        }
+      } finally {
+        if (!cancelled) setProgramDetailLoading(false);
+      }
+    })();
+    (async () => {
+      try {
+        const resp = await getUserEnrolledPrograms([
+          {
+            username: getUserName(),
+            programId: selectedProgram.program_id || '',
+          },
+        ]);
+        if (!cancelled) {
+          setEnrollmentStatus(
+            Array.isArray(resp.data) &&
+              resp.data.findIndex(
+                (pre: any) => pre.active && pre?.program_id === selectedProgram.program_id,
+              ) !== -1,
+          );
+        }
+      } catch {
+        if (!cancelled) setEnrollmentStatus(false);
+      }
+    })();
+    (async () => {
+      try {
+        const resp = await getProgramCompletion([
+          {
+            programKey: selectedProgram.program_key || '',
+            username: getUserName(),
+          },
+        ]);
+        if (!cancelled) setProgramCompletion((resp.data as ProgramCompletionResponse) || null);
+      } catch {
+        if (!cancelled) setProgramCompletion(null);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedProgram, handleSearch, getProgramCompletion, getUserEnrolledPrograms]);
+
+  const handleEnrollIntoProgram = async (program: any) => {
+    if (isEnrollmentSubmitting) return;
+    try {
+      setIsEnrollmentSubmitting(true);
+      await createCatalogProgramSelfEnrollment([
+        {
+          requestBody: {
+            program_key: program.program_key || '',
+            username: getUserName(),
+            active: true,
+            ended: null,
+          },
+        },
+      ]);
+      if (isEnrollmentError) {
+        throw new Error('Failed to enroll into program');
+      }
+      toast.success('Enrolled into program successfully');
+      setTimeout(() => setIsEnrollmentSubmitting(false), 500);
+    } catch {
+      toast.error('Failed to enroll into program');
+      setIsEnrollmentSubmitting(false);
+    }
+  };
+
+  const handleSaveSettings = async (settingsForm: ProgramSettingsFormData) => {
+    if (settingsForm.start_date && settingsForm.end_date) {
+      if (new Date(settingsForm.end_date) < new Date(settingsForm.start_date)) {
+        toast.error('End date must be after start date');
+        return;
+      }
+    }
+    if (settingsForm.enrollment_start && settingsForm.enrollment_end) {
+      if (new Date(settingsForm.enrollment_end) < new Date(settingsForm.enrollment_start)) {
+        toast.error('Enrollment end date must be after enrollment start date');
+        return;
+      }
+    }
+    try {
+      const settings = {
+        slug: settingsForm.slug || null,
+        subject: settingsForm.subject || null,
+        tags: settingsForm.tags.length > 0 ? settingsForm.tags : null,
+        level: settingsForm.level || null,
+        topics: settingsForm.topics.length > 0 ? settingsForm.topics : null,
+        promotion: settingsForm.promotion || null,
+        social_team: settingsForm.social_team || null,
+        social_channels: settingsForm.social_channels || null,
+        description: settingsForm.description || null,
+        display_price: settingsForm.display_price || null,
+        start_date: settingsForm.start_date || null,
+        end_date: settingsForm.end_date || null,
+        enrollment_start: settingsForm.enrollment_start || null,
+        enrollment_end: settingsForm.enrollment_end || null,
+        language: settingsForm.language || null,
+        credential: settingsForm.credential || null,
+        catalog_visibility: settingsForm.catalog_visibility || null,
+        invitation_only: settingsForm.invitation_only,
+        banner_image: settingsForm.banner_image || null,
+        card_image: settingsForm.card_image || null,
+        platform_key: programOrg,
+      };
+      await updateProgramMetadata({
+        programId: selectedProgram?.program_id || '',
+        org: programOrg,
+        settings,
+      }).unwrap();
+      refetchMetadata();
+      toast.success('Program settings saved successfully');
+    } catch (error) {
+      console.error('Error saving program settings:', error);
+      toast.error('Failed to save program settings');
+    }
+  };
+
+  const selectedProgramBannerSrc = selectedProgram?.program_metadata?.card_image
+    ? String(selectedProgram.program_metadata.card_image).startsWith('http')
+      ? (selectedProgram.program_metadata.card_image as string)
+      : config.urls.lms() + selectedProgram.program_metadata.card_image
+    : randomImage;
+
   return (
     <>
       <div className="p-6">
@@ -73,20 +299,9 @@ export default function ProgramsPage() {
                 Assigned programs
               </button>
             )}
-            {/* <button
-              onClick={() => handleProgramTabChange(ENROLLED_TAB)}
-              className={`py-2 px-1 text-sm font-medium border-b-2 ${
-                activeTab === ENROLLED_TAB
-                  ? "border-amber-500 text-amber-500"
-                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
-              }`}
-            >
-              Enrolled programs
-            </button> */}
           </div>
         </div>
 
-        {/* Search Bar and Create Program Button */}
         <div className="mb-6 flex items-center justify-between">
           <div className="relative w-64">
             <div className="pointer-events-none absolute inset-y-0 left-3 flex items-center">
@@ -112,14 +327,12 @@ export default function ProgramsPage() {
             <DefaultEmptyBox message={`No programs found matching "${searchQuery}" query.`} />
           )}
 
-        {/* Programs Grid */}
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
-          {/* Program Cards */}
           {isLoading && <SkeletonMultiplier Skeleton={SkeletonPathwayBox} multiplier={4} />}
           {!isLoading &&
             !isError &&
             filteredPrograms.length > 0 &&
-            filteredPrograms.map((program: CustomProgramEnrollmentPlus, index: number) => (
+            filteredPrograms.map((program: any, index: number) => (
               <div
                 key={index}
                 className="cursor-pointer overflow-hidden rounded-lg border border-gray-200 bg-white transition-shadow hover:shadow-md"
@@ -153,24 +366,20 @@ export default function ProgramsPage() {
                   <h3 className="mb-2 text-sm font-medium text-gray-800">{program.name || ''}</h3>
                   {programCompletions.length > 0 && programCompletions[index] && (
                     <div className="space-y-1">
-                      {programCompletions.length > 0 && programCompletions[index] && (
-                        <>
-                          <div className="flex justify-between text-xs">
-                            <span className="text-gray-600">Progress</span>
-                            <span className="font-medium text-gray-800">
-                              {programCompletions[index].completion_percentage || 0}%
-                            </span>
-                          </div>
-                          <div className="h-1.5 w-full rounded-full bg-gray-200">
-                            <div
-                              className="h-1.5 rounded-full bg-amber-500"
-                              style={{
-                                width: `${programCompletions[index].completion_percentage}%`,
-                              }}
-                            ></div>
-                          </div>
-                        </>
-                      )}
+                      <div className="flex justify-between text-xs">
+                        <span className="text-gray-600">Progress</span>
+                        <span className="font-medium text-gray-800">
+                          {programCompletions[index].completion_percentage || 0}%
+                        </span>
+                      </div>
+                      <div className="h-1.5 w-full rounded-full bg-gray-200">
+                        <div
+                          className="h-1.5 rounded-full bg-amber-500"
+                          style={{
+                            width: `${programCompletions[index].completion_percentage}%`,
+                          }}
+                        ></div>
+                      </div>
                     </div>
                   )}
                 </div>
@@ -178,9 +387,26 @@ export default function ProgramsPage() {
             ))}
         </div>
       </div>
-      {/* Program Detail Modal */}
       {selectedProgram && (
-        <ProgramDetailModal program={selectedProgram} onClose={() => setSelectedProgram(null)} />
+        <ProgramDetailModal
+          program={selectedProgram as any}
+          courses={programCourses}
+          courseListLoading={programDetailLoading}
+          programCompletion={programCompletion}
+          enrollmentStatus={enrollmentStatus}
+          isEnrollmentLoading={isEnrollmentLoading}
+          isEnrollmentSuccess={isEnrollmentSuccess}
+          isEnrollmentSubmitting={isEnrollmentSubmitting}
+          showSettings={showSettings}
+          settingsLoading={isLoadingMetadata}
+          isSavingSettings={isSavingSettings}
+          initialSettings={(programMetadata as any)?.formData}
+          bannerImageSrc={selectedProgramBannerSrc}
+          onClose={() => setSelectedProgram(null)}
+          onEnroll={handleEnrollIntoProgram}
+          onCourseClick={(courseId) => router.push(`/courses/${courseId}`)}
+          onSaveSettings={handleSaveSettings}
+        />
       )}
     </>
   );
diff --git a/app/profile/public/page.tsx b/app/profile/public/page.tsx
index 5b84af1..5932ade 100644
--- a/app/profile/public/page.tsx
+++ b/app/profile/public/page.tsx
@@ -2,29 +2,162 @@
 
 import { useState, useContext, useCallback } from 'react';
 import { Facebook, Linkedin, Twitter, Edit2, Edit } from 'lucide-react';
-import { useUserMetadata } from '@/hooks/users/use-usermetadata';
-import { EducationBox } from '@/components/profile/education-box';
-import { ExperienceBox } from '@/components/profile/experience-box';
-import { SkillsBox } from '@/components/profile/skills-box';
-import { CredentialBox } from '@/components/profile/credential-box';
-import { ResumeBox } from '@/components/profile/resume-box';
-import { MediaBox } from '@/components/profile/media-box';
-import { UserAvatar } from '@/components/header/profile/user-avatar';
+import { toast } from 'sonner';
+import {
+  CredentialBox,
+  EducationBox,
+  ExperienceBox,
+  ResumeBox,
+  SkillsBox,
+  UserAvatar,
+  useProfileCredentials,
+  useProfileSkills,
+  useUserMetadata,
+} from '@iblai/iblai-js/web-containers';
+import { EducationDialog, ExperienceDialog } from '@iblai/iblai-js/web-containers';
+import {
+  MediaBox,
+  type UploadedFile as PortedUploadedFile,
+} from '@iblai/iblai-js/web-containers/next';
 import { AppContext } from '@/components/client-layout';
+import { AddInstitutionDialog } from '@/components/add-institution-dialog';
+import { AddCompanyDialog } from '@/components/add-company-dialog';
 import { useTenantMetadata } from '@iblai/iblai-js/web-utils';
-import { getTenant, onAccountDeleted } from '@/utils/helpers';
+import { getTenant, getUserName, onAccountDeleted } from '@/utils/helpers';
 import { config } from '@/lib/config';
 import { Tenant } from '@iblai/iblai-js/web-utils';
 import { UserProfileModal } from '@iblai/iblai-js/web-containers/next';
 import { useIsAdmin, useUserTenants } from '@/utils/localstorage';
 import { useAppSelector } from '@/lib/hooks';
 import { selectRbacPermissions } from '@/features/rbac';
+import { Education, Experience } from '@iblai/iblai-api';
+// @ts-ignore
+import {
+  useGetUserEducationQuery,
+  useGetUserExperienceQuery,
+  useGetUserResumeQuery,
+} from '@iblai/iblai-js/data-layer';
+import { useCreateUserResumeMutation } from '@/services/career';
 
 export default function PublicProfilePage() {
   const { userMetaData } = useUserMetadata();
   const { metadataLoaded, isSkillsResumeFeatureHidden } = useTenantMetadata({
     org: getTenant(),
   });
+  const enableGravatar = config.settings.enableGravatarOnProfilePic() !== 'false';
+
+  // Education
+  const {
+    data: educationData,
+    isLoading: educationLoading,
+    error: educationError,
+  } = useGetUserEducationQuery([{ org: getTenant(), username: getUserName() }]);
+  const [editEducationOpen, setEditEducationOpen] = useState(false);
+  const [selectedEducation, setSelectedEducation] = useState<Education | undefined>(undefined);
+  const [openAddInstitutionDialog, setOpenAddInstitutionDialog] = useState(false);
+
+  // Experience
+  const {
+    data: experienceData,
+    isLoading: experienceLoading,
+    error: experienceError,
+  } = useGetUserExperienceQuery([{ org: getTenant(), username: getUserName() }]);
+  const [editExperienceOpen, setEditExperienceOpen] = useState(false);
+  const [selectedExperience, setSelectedExperience] = useState<Experience | undefined>(undefined);
+  const [openAddCompanyDialog, setOpenAddCompanyDialog] = useState(false);
+
+  // Skills
+  const {
+    earnedSkills,
+    earnedSkillsLoading,
+    earnedSkillsError,
+    selfReportedSkills,
+    selfReportedSkillsLoading,
+    selfReportedSkillsError,
+    desiredSkills,
+    desiredSkillsLoading,
+    desiredSkillsError,
+  } = useProfileSkills();
+
+  // Credentials
+  const {
+    fetchedCredentials,
+    isLoading: credentialsLoading,
+    isError: credentialsError,
+  } = useProfileCredentials({ search: '' });
+
+  // Resume + Media (uses same useGetUserResumeQuery)
+  const {
+    data: resumeData,
+    isLoading: resumeLoading,
+    isError: resumeError,
+    refetch: refetchResume,
+  } = useGetUserResumeQuery([{ org: getTenant(), username: getUserName() }]);
+  const [createUserResume, { isLoading: isUploading }] = useCreateUserResumeMutation();
+
+  const resumeUrl = Array.isArray((resumeData as any)?.files)
+    ? ((resumeData as any).files.find((f: any) => f.type === 'resume')?.url as string | undefined)
+    : undefined;
+
+  const uploadedMedia: PortedUploadedFile[] = (() => {
+    const files = Array.isArray((resumeData as any)?.files) ? (resumeData as any).files : [];
+    const links = Array.isArray((resumeData as any)?.links)
+      ? (resumeData as any).links.map((link: any) => ({
+          name: link.url,
+          url: link.url,
+          type: 'link',
+        }))
+      : [];
+    return [...files, ...links];
+  })();
+
+  const handleUploadFile = async (file: File, isResume: boolean) => {
+    const formData = new FormData();
+    formData.append('user', getUserName());
+    formData.append('platform', getTenant());
+    if (isResume) {
+      formData.append('resume', file);
+    } else {
+      formData.append('additional_files', file);
+      formData.append('file_type_portfolio_sample.pdf', 'portfolio');
+    }
+    try {
+      await createUserResume({
+        username: getUserName(),
+        platform_key: getTenant(),
+        resume: formData,
+        method: 'POST',
+      });
+      refetchResume();
+      toast.success('Media uploaded successfully');
+    } catch {
+      toast.error('Error uploading media');
+    }
+  };
+
+  const handleUploadLink = async (url: string) => {
+    const formData = new FormData();
+    formData.append('user', getUserName());
+    formData.append('platform', getTenant());
+    const existingLinks: any[] = (resumeData as any)?.links || [];
+    const totalLinks = existingLinks.length;
+    existingLinks.forEach((link: any, index: number) => {
+      formData.append('link_' + (totalLinks + 1 - index), link?.url || '');
+    });
+    formData.append('link_1', url);
+    try {
+      await createUserResume({
+        username: getUserName(),
+        platform_key: getTenant(),
+        resume: formData,
+      });
+      refetchResume();
+      toast.success('Media uploaded successfully');
+    } catch {
+      toast.error('Error uploading media');
+    }
+  };
+
   const { isUserProfileOpen, setIsUserProfileOpen, userProfileTargetTab, setUserProfileTargetTab } =
     useContext(AppContext);
   const [activeTab, setActiveTab] = useState('about'); // about, education, experience, skills, credentials, resume, media
@@ -87,7 +220,11 @@ export default function PublicProfilePage() {
           {/* Profile Picture */}
           <div className="absolute bottom-0 left-6 translate-y-1/2 transform">
             <div className="h-24 w-24 overflow-hidden rounded-full border-4 border-white shadow-lg md:h-32 md:w-32">
-              <UserAvatar size={120} containerClassName="h-full w-full" />
+              <UserAvatar
+                size={120}
+                containerClassName="h-full w-full"
+                enableGravatar={enableGravatar}
+              />
             </div>
           </div>
         </div>
@@ -161,21 +298,105 @@ export default function PublicProfilePage() {
             </div>
           )}
 
-          {activeTab === 'education' && <EducationBox />}
+          {activeTab === 'education' && (
+            <EducationBox
+              education={(educationData as unknown as Education[]) || []}
+              isLoading={educationLoading}
+              isError={!!educationError}
+              onEditEducation={(edu) => {
+                setSelectedEducation(edu);
+                setEditEducationOpen(true);
+              }}
+            />
+          )}
 
-          {activeTab === 'experience' && <ExperienceBox />}
+          {activeTab === 'experience' && (
+            <ExperienceBox
+              experience={(experienceData as unknown as Experience[]) || []}
+              isLoading={experienceLoading}
+              isError={!!experienceError}
+              onEditExperience={(exp) => {
+                setSelectedExperience(exp);
+                setEditExperienceOpen(true);
+              }}
+            />
+          )}
 
-          {activeTab === 'skills' && <SkillsBox />}
+          {activeTab === 'skills' && (
+            <SkillsBox
+              earnedSkills={earnedSkills as any}
+              earnedSkillsLoading={earnedSkillsLoading}
+              earnedSkillsError={earnedSkillsError}
+              selfReportedSkills={selfReportedSkills as any}
+              selfReportedSkillsLoading={selfReportedSkillsLoading}
+              selfReportedSkillsError={selfReportedSkillsError}
+              desiredSkills={desiredSkills as any}
+              desiredSkillsLoading={desiredSkillsLoading}
+              desiredSkillsError={desiredSkillsError}
+            />
+          )}
 
-          {activeTab === 'credentials' && <CredentialBox />}
+          {activeTab === 'credentials' && (
+            <CredentialBox
+              credentials={fetchedCredentials}
+              isLoading={credentialsLoading}
+              isError={credentialsError}
+            />
+          )}
 
           {activeTab === 'resume' && metadataLoaded && !isSkillsResumeFeatureHidden() && (
-            <ResumeBox />
+            <ResumeBox resumeUrl={resumeUrl} isLoading={resumeLoading} isError={resumeError} />
           )}
 
-          {activeTab === 'media' && <MediaBox />}
+          {activeTab === 'media' && (
+            <MediaBox
+              uploadedMedia={uploadedMedia}
+              isLoading={resumeLoading}
+              isError={resumeError}
+              isUploading={isUploading}
+              resumeCheckboxEnabled={metadataLoaded && !isSkillsResumeFeatureHidden()}
+              onUploadFile={handleUploadFile}
+              onUploadLink={handleUploadLink}
+              onError={(message: string) => toast.error(message)}
+            />
+          )}
         </div>
       </div>
+      {editEducationOpen && (
+        <EducationDialog
+          open={editEducationOpen}
+          onOpenChange={setEditEducationOpen}
+          education={selectedEducation}
+          org={getTenant()}
+          username={getUserName()}
+          onComplete={() => setEditEducationOpen(false)}
+        />
+      )}
+      {openAddInstitutionDialog && (
+        <AddInstitutionDialog
+          open={openAddInstitutionDialog}
+          onOpenChange={setOpenAddInstitutionDialog}
+          // @ts-expect-error - investigate
+          onSave={() => setOpenAddInstitutionDialog(false)}
+        />
+      )}
+      {editExperienceOpen && (
+        <ExperienceDialog
+          open={editExperienceOpen}
+          onOpenChange={setEditExperienceOpen}
+          experience={selectedExperience}
+          org={getTenant()}
+          username={getUserName()}
+          onComplete={() => setEditExperienceOpen(false)}
+        />
+      )}
+      {openAddCompanyDialog && (
+        <AddCompanyDialog
+          open={openAddCompanyDialog}
+          onOpenChange={setOpenAddCompanyDialog}
+          onSave={() => setOpenAddCompanyDialog(false)}
+        />
+      )}
       {isUserProfileOpen && (
         <UserProfileModal
           isOpen={isUserProfileOpen}
diff --git a/app/profile/skills/page.tsx b/app/profile/skills/page.tsx
index b629433..676b653 100644
--- a/app/profile/skills/page.tsx
+++ b/app/profile/skills/page.tsx
@@ -2,15 +2,19 @@
 
 import { useState, useRef } from 'react';
 import { Search, Plus, ChevronLeft, ChevronRight } from 'lucide-react';
-import { AddSkillDialog } from '@/components/add-skill-dialog';
-import { SkillDetailModal } from '@/components/skill-detail-modal';
-import { useProfileSkills } from '@/hooks/profile/use-profile-skills';
-import { SkillBox } from '@/components/skill-box';
-import { SkeletonSkillBox } from '@/components/skeleton-skill-box';
-import { DefaultEmptyBox } from '@/components/default-empty-box';
+import {
+  AddSkillDialog,
+  DefaultEmptyBox,
+  SkeletonMultiplier,
+  SkeletonSkillBox,
+  SkillBox,
+  SkillDetailModal,
+  useProfileSkills,
+  type UserSkill,
+} from '@iblai/iblai-js/web-containers';
+import { toast } from 'sonner';
 import _ from 'lodash';
-import { SkeletonMultiplier } from '@/components/skeleton-multiplier';
-import { UserSkill } from '@/types/skills';
+import type { Skill } from '@iblai/iblai-api';
 
 export default function SkillsPage() {
   const {
@@ -30,6 +34,11 @@ export default function SkillsPage() {
     updatingSkill,
     deletingSkill,
     handleSkillsUpdate,
+    handleSkillsCreate,
+    handleFetchAllSkills,
+    fetchedSkills,
+    isFetchingSkills,
+    isFetchingSkillsError,
   } = useProfileSkills();
   const [searchQuery, setSearchQuery] = useState('');
   const [addSkillDialogOpen, setAddSkillDialogOpen] = useState(false);
@@ -355,9 +364,30 @@ export default function SkillsPage() {
         open={addSkillDialogOpen}
         onOpenChange={setAddSkillDialogOpen}
         type={skillTypeToAdd}
-        existingSkills={{
-          selfReported: selfReportedSkills,
-          desired: desiredSkills,
+        fetchedSkills={fetchedSkills as any}
+        isFetchingSkills={isFetchingSkills}
+        isFetchingSkillsError={isFetchingSkillsError}
+        updatingSkill={updatingSkill}
+        onSearch={(query) => handleFetchAllSkills(query)}
+        onAddSkill={async (skill: Skill) => {
+          const targetBucket = skillTypeToAdd === 'desired' ? desiredSkills : selfReportedSkills;
+          const existing = (targetBucket?.skills || []) as any[];
+          const existingLevels = (targetBucket?.data?.level || []) as number[];
+          const newPayload: any = {
+            skills: [...existing, { name: skill.name }],
+            data: {
+              ...(targetBucket?.data || {}),
+              level: [...existingLevels, 0],
+            },
+            type: skillTypeToAdd,
+          };
+          const ok = await handleSkillsCreate(newPayload);
+          if (ok) {
+            toast.success('Skill added successfully');
+            setAddSkillDialogOpen(false);
+          } else {
+            toast.error('Failed to add skill');
+          }
         }}
       />
       {/* Skill Detail Modal */}
diff --git a/hooks/search/use-personnalized-catalog.ts b/hooks/search/use-personnalized-catalog.ts
index 6c62660..63cb7b4 100644
--- a/hooks/search/use-personnalized-catalog.ts
+++ b/hooks/search/use-personnalized-catalog.ts
@@ -1,7 +1,7 @@
 import { GenericPagination } from '@/types/discover';
 // @ts-ignore
 import { useLazyGetPersonnalizedSearchQuery } from '@iblai/iblai-js/data-layer';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export type PersonnalizedCatalogSearchParams = {
   username: string;
@@ -44,26 +44,29 @@ export const usePersonnalizedCatalog = () => {
 
   const [pagination, setPagination] = useState<GenericPagination | null>(null);
 
-  const handleSearch = async (searchParams: PersonnalizedCatalogSearchParams) => {
-    try {
-      const response = await getPersonnalizedSearch(
-        [
-          {
-            ...searchParams,
-          },
-        ],
-        true,
-      );
-      setPagination({
-        count: response?.data?.count || 0,
-        current_page: response?.data?.current_page || 0,
-        total_pages: response?.data?.total_pages || 0,
-      });
-      return response;
-    } catch (error) {
-      return undefined;
-    }
-  };
+  const handleSearch = useCallback(
+    async (searchParams: PersonnalizedCatalogSearchParams) => {
+      try {
+        const response = await getPersonnalizedSearch(
+          [
+            {
+              ...searchParams,
+            },
+          ],
+          true,
+        );
+        setPagination({
+          count: response?.data?.count || 0,
+          current_page: response?.data?.current_page || 0,
+          total_pages: response?.data?.total_pages || 0,
+        });
+        return response;
+      } catch (error) {
+        return undefined;
+      }
+    },
+    [getPersonnalizedSearch],
+  );
 
   return {
     isLoading,
diff --git a/package.json b/package.json
index 5c733b5..f6c37f3 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,12 @@
   "dependencies": {
     "@emotion/is-prop-valid": "1.4.0",
     "@hookform/resolvers": "3.10.0",
+    "@iblai/data-layer": "file:.yalc/@iblai/data-layer",
     "@iblai/iblai-api": "4.166.0-ai",
-    "@iblai/iblai-js": "1.3.5",
+    "@iblai/iblai-js": "file:.yalc/@iblai/iblai-js",
     "@iblai/iblai-web-mentor": "2.0.1",
+    "@iblai/web-containers": "file:.yalc/@iblai/web-containers",
+    "@iblai/web-utils": "file:.yalc/@iblai/web-utils",
     "@radix-ui/react-accordion": "1.2.2",
     "@radix-ui/react-alert-dialog": "1.1.13",
     "@radix-ui/react-aspect-ratio": "1.1.1",
@@ -94,8 +97,11 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "4.11.1",
+    "@commitlint/cli": "20.5.0",
+    "@commitlint/config-conventional": "20.5.0",
     "@eslint/eslintrc": "3.3.4",
     "@playwright/test": "1.58.2",
+    "@release-it/conventional-changelog": "10.0.6",
     "@tailwindcss/postcss": "4.1.4",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
@@ -112,20 +118,17 @@
     "eslint-config-next": "15.5.12",
     "husky": "9.1.7",
     "jsdom": "26.1.0",
+    "lint-staged": "16.4.0",
     "postcss": "8.5.8",
     "postcss-loader": "8.2.1",
     "prettier": "3.8.1",
     "prettier-plugin-tailwindcss": "0.6.11",
     "release-it": "19.2.4",
-    "@release-it/conventional-changelog": "10.0.6",
     "tailwind-scrollbar": "4.0.2",
     "tailwindcss": "4.2.1",
     "typescript": "5.9.3",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.2.4",
-    "lint-staged": "16.4.0",
-    "@commitlint/cli": "20.5.0",
-    "@commitlint/config-conventional": "20.5.0"
+    "vitest": "3.2.4"
   },
   "lint-staged": {
     "*.ts?(x)": [

From 984498956b983036eec2803c2f5a012ba94a0a32 Mon Sep 17 00:00:00 2001
From: ANIMASHAUN Michael <michaeloncode@gmail.com>
Date: Thu, 9 Apr 2026 20:18:04 +0100
Subject: [PATCH 2/8] feat: course tab content components reused from the sdk

---
 .claude/settings.json                         |   3 +-
 .../[course_id]/bookmarks/page.tsx            |  20 +-
 .../[course_id]/course/page.tsx               |  21 +-
 app/course-content/[course_id]/dates/page.tsx |  20 +-
 .../[course_id]/discussion/page.tsx           |  21 +-
 .../[course_id]/instructor/page.tsx           |  35 +-
 app/course-content/[course_id]/layout.tsx     | 327 ++----------------
 app/course-content/[course_id]/loading.tsx    |  87 +----
 .../[course_id]/progress/page.tsx             |  22 +-
 pnpm-lock.yaml                                |  48 +--
 10 files changed, 140 insertions(+), 464 deletions(-)

diff --git a/.claude/settings.json b/.claude/settings.json
index cdbd03f..a4ac0be 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -2,7 +2,8 @@
   "permissions": {
     "allow": [
       "Bash(pnpm prettier:*)",
-      "Bash(pnpm typecheck:*)"
+      "Bash(pnpm typecheck:*)",
+      "Bash(grep -rn \"config\" lib/config* config.*)"
     ]
   }
 }
diff --git a/app/course-content/[course_id]/bookmarks/page.tsx b/app/course-content/[course_id]/bookmarks/page.tsx
index dbbd968..3a93663 100644
--- a/app/course-content/[course_id]/bookmarks/page.tsx
+++ b/app/course-content/[course_id]/bookmarks/page.tsx
@@ -1,14 +1,16 @@
 'use client';
 
-import { EdxIframe } from '@/components/edx-iframe/edx-iframe';
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
-import { useContext, useEffect } from 'react';
+// @ts-ignore
+import { CourseContentTabPage } from '@iblai/iblai-js/web-containers/next';
+import { config } from '@/lib/config';
 
 export default function BookmarksTab() {
-  const { setActiveTab } = useContext(EdxIframeContext);
-  useEffect(() => {
-    setActiveTab('bookmarks');
-  }, []);
-
-  return <EdxIframe />;
+  return (
+    <CourseContentTabPage
+      tab="bookmarks"
+      lmsUrl={config.urls.lms()}
+      mfeUrl={config.urls.mfe()}
+      legacyLmsUrl={config.urls.legacyLmsUrl()}
+    />
+  );
 }
diff --git a/app/course-content/[course_id]/course/page.tsx b/app/course-content/[course_id]/course/page.tsx
index be97123..aabf9df 100644
--- a/app/course-content/[course_id]/course/page.tsx
+++ b/app/course-content/[course_id]/course/page.tsx
@@ -1,13 +1,16 @@
 'use client';
 
-import { useEffect, useContext } from 'react';
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
-import { EdxIframe } from '@/components/edx-iframe/edx-iframe';
-export default function CourseTab() {
-  const { setActiveTab } = useContext(EdxIframeContext);
-  useEffect(() => {
-    setActiveTab('course');
-  }, []);
+// @ts-ignore
+import { CourseContentTabPage } from '@iblai/iblai-js/web-containers/next';
+import { config } from '@/lib/config';
 
-  return <EdxIframe />;
+export default function CourseTab() {
+  return (
+    <CourseContentTabPage
+      tab="course"
+      lmsUrl={config.urls.lms()}
+      mfeUrl={config.urls.mfe()}
+      legacyLmsUrl={config.urls.legacyLmsUrl()}
+    />
+  );
 }
diff --git a/app/course-content/[course_id]/dates/page.tsx b/app/course-content/[course_id]/dates/page.tsx
index bd88d2f..dea8329 100644
--- a/app/course-content/[course_id]/dates/page.tsx
+++ b/app/course-content/[course_id]/dates/page.tsx
@@ -1,14 +1,16 @@
 'use client';
 
-import { EdxIframe } from '@/components/edx-iframe/edx-iframe';
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
-import { useContext, useEffect } from 'react';
+// @ts-ignore
+import { CourseContentTabPage } from '@iblai/iblai-js/web-containers/next';
+import { config } from '@/lib/config';
 
 export default function DatesTab() {
-  const { setActiveTab } = useContext(EdxIframeContext);
-  useEffect(() => {
-    setActiveTab('dates');
-  }, []);
-
-  return <EdxIframe />;
+  return (
+    <CourseContentTabPage
+      tab="dates"
+      lmsUrl={config.urls.lms()}
+      mfeUrl={config.urls.mfe()}
+      legacyLmsUrl={config.urls.legacyLmsUrl()}
+    />
+  );
 }
diff --git a/app/course-content/[course_id]/discussion/page.tsx b/app/course-content/[course_id]/discussion/page.tsx
index 39eb186..8302f1c 100644
--- a/app/course-content/[course_id]/discussion/page.tsx
+++ b/app/course-content/[course_id]/discussion/page.tsx
@@ -1,15 +1,16 @@
 'use client';
 
-import type React from 'react';
-import { useContext, useEffect } from 'react';
-import { EdxIframe } from '@/components/edx-iframe/edx-iframe';
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
+// @ts-ignore
+import { CourseContentTabPage } from '@iblai/iblai-js/web-containers/next';
+import { config } from '@/lib/config';
 
 export default function DiscussionTab() {
-  const { setActiveTab } = useContext(EdxIframeContext);
-  useEffect(() => {
-    setActiveTab('forum');
-  }, []);
-
-  return <EdxIframe />;
+  return (
+    <CourseContentTabPage
+      tab="forum"
+      lmsUrl={config.urls.lms()}
+      mfeUrl={config.urls.mfe()}
+      legacyLmsUrl={config.urls.legacyLmsUrl()}
+    />
+  );
 }
diff --git a/app/course-content/[course_id]/instructor/page.tsx b/app/course-content/[course_id]/instructor/page.tsx
index 7429520..5c9d828 100644
--- a/app/course-content/[course_id]/instructor/page.tsx
+++ b/app/course-content/[course_id]/instructor/page.tsx
@@ -1,27 +1,32 @@
 'use client';
 
-import type React from 'react';
-import { useContext, useEffect } from 'react';
-import { EdxIframe } from '@/components/edx-iframe/edx-iframe';
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
-import { useGetDepartmentMemberCheckQuery } from '@/services/core';
-import { getTenant } from '@/utils/helpers';
+import { useEffect } from 'react';
 import { redirect } from 'next/navigation';
+// @ts-ignore
+import { CourseContentTabPage } from '@iblai/iblai-js/web-containers/next';
+// @ts-ignore
+import { useGetDepartmentMemberCheckQuery } from '@iblai/iblai-js/data-layer';
+
+import { config } from '@/lib/config';
+import { getTenant } from '@/utils/helpers';
 
 export default function InstructorTab() {
-  const { setActiveTab } = useContext(EdxIframeContext);
   const { data: departmentMemberCheck, isSuccess } = useGetDepartmentMemberCheckQuery({
     platform_key: getTenant(),
   });
+
   useEffect(() => {
-    if (isSuccess) {
-      if (!departmentMemberCheck?.is_platform_admin) {
-        redirect('/');
-      } else {
-        setActiveTab('instructor');
-      }
+    if (isSuccess && !departmentMemberCheck?.is_platform_admin) {
+      redirect('/');
     }
-  }, [isSuccess, departmentMemberCheck, setActiveTab]);
+  }, [isSuccess, departmentMemberCheck]);
 
-  return <EdxIframe />;
+  return (
+    <CourseContentTabPage
+      tab="instructor"
+      lmsUrl={config.urls.lms()}
+      mfeUrl={config.urls.mfe()}
+      legacyLmsUrl={config.urls.legacyLmsUrl()}
+    />
+  );
 }
diff --git a/app/course-content/[course_id]/layout.tsx b/app/course-content/[course_id]/layout.tsx
index 03415e1..6ba27b3 100644
--- a/app/course-content/[course_id]/layout.tsx
+++ b/app/course-content/[course_id]/layout.tsx
@@ -1,24 +1,18 @@
 'use client';
 
 import type React from 'react';
-import { use, useEffect, useState } from 'react';
+import { use } from 'react';
 
-import { ChevronRight, ListTree } from 'lucide-react';
-import Link from 'next/link';
-import { useCourseDetail } from '@/hooks/courses/use-course-detail';
-import { useSearchParams } from 'next/navigation';
-import _ from 'lodash';
-import { useEdxIframe } from '@/hooks/courses/use-edx-iframe';
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
-import { getTenant, getUserId } from '@/utils/helpers';
-import { CourseOutlineContext } from '@/contexts/course-outline-context';
-import { CourseOutline } from '@/components/course-outline';
-import { CourseOutlineDrawer } from '@/components/course-outline-drawer';
-import { CourseAccessGuard } from '@/components/course-access-guard';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
 // @ts-ignore
-import { ExamInfo } from '@iblai/iblai-js/data-layer';
+import { CourseContentLayout as SharedCourseContentLayout } from '@iblai/iblai-js/web-containers/next';
+// @ts-ignore
+import { useGetDepartmentMemberCheckQuery } from '@iblai/iblai-js/data-layer';
+
+import { config } from '@/lib/config';
+import { getTenant } from '@/utils/helpers';
 import { useChatState } from '@/components/chat-button';
-import { useGetDepartmentMemberCheckQuery } from '@/services/core';
 
 export default function CourseContentLayout({
   children,
@@ -27,290 +21,35 @@ export default function CourseContentLayout({
   children: React.ReactNode;
   params: Promise<{ course_id: string }>;
 }) {
-  const { data: departmentMemberCheck } = useGetDepartmentMemberCheckQuery({
-    platform_key: getTenant(),
-  });
   const resolvedParams = use(params);
   const courseId = decodeURIComponent(resolvedParams.course_id);
-  const searchParams = useSearchParams();
+  const router = useRouter();
   const { setCourseMentor } = useChatState();
-  const {
-    handleFetchCourseInfo,
-    handleFetchCourseSyllabus,
-    handleOpenLesson,
-    handleFetchCourseProgress,
-    handleFetchCourseCompletion,
-    course,
-    courseInfoLoadingState,
-    courseOutline,
-    courseOutlineLoading,
-    courseCompletion,
-    courseGradingPolicyActive,
-  } = useCourseDetail(courseId);
-
-  const { getUnitToIframe, getParentsInfosFromSublessonId } = useEdxIframe();
-
-  useEffect(() => {
-    handleFetchCourseInfo();
-    handleFetchCourseProgress();
-    handleFetchCourseCompletion(getUserId());
-  }, [courseId]);
-
-  useEffect(() => {
-    if (!_.isEmpty(course)) {
-      if (!course?.mentor_hidden) {
-        setCourseMentor(course.mentor_uuid || null);
-      }
-      handleFetchCourseSyllabus();
-    }
-  }, [course]);
-
-  const [expandedModule, setExpandedModule] = useState('');
-  const [currentLesson, setCurrentLesson] = useState('');
-  const [currentChapter, setCurrentChapter] = useState('');
-
-  const [expandedLessons, setExpandedLessons] = useState<string[]>([]);
-  const [activeTab, setActiveTab] = useState('course');
-  const [courseOutlineDrawerOpen, setCourseOutlineDrawerOpen] = useState(false);
-  const [currentlyInExamSubsection, setCurrentlyInExamSubsection] = useState(false);
-  const [examInfo, setExamInfo] = useState<ExamInfo | null>(null);
-  const [iframeUrl, setIframeUrl] = useState('');
-  const [currentParentIds, setCurrentParentIds] = useState<
-    { module: Record<string, any>; lesson: Record<string, any> } | undefined
-  >(undefined);
-  const [currentCourseInfo, setCurrentCourseInfo] = useState<Record<string, any> | undefined>(
-    undefined,
-  );
-  const [currentUnitID, setCurrentUnitID] = useState<string | null>(null);
-  const [refresher, setRefresher] = useState<Date | null>(null);
-  useEffect(() => {
-    if (!_.isEmpty(courseOutline)) {
-      const currentCourse = getUnitToIframe(courseOutline);
-      setCurrentCourseInfo(currentCourse);
-      const unitID = currentCourse?.id;
-      setCurrentUnitID(unitID);
-      const parentsIDs = getParentsInfosFromSublessonId(courseOutline?.children || [], unitID);
-      setCurrentParentIds(parentsIDs);
-      setCurrentLesson(unitID || '');
-      setExpandedLessons([parentsIDs?.lesson.id || '']);
-      setCurrentChapter(parentsIDs?.lesson.id || '');
-      //setCurrentModule(parentsIDs?.moduleId || "");
-      setExpandedModule(parentsIDs?.module.id || '');
-    }
-  }, [searchParams, courseOutline]);
 
-  const toggleModule = (moduleId: string) => {
-    setExpandedModule(expandedModule === moduleId ? '' : moduleId);
-  };
-
-  const toggleLesson = (lessonId: string) => {
-    setExpandedLessons((prev) =>
-      prev.includes(lessonId) ? prev.filter((id) => id !== lessonId) : [...prev, lessonId],
-    );
-  };
-
-  const selectLesson = (lessonId: string) => {
-    setCurrentLesson(lessonId);
-    handleOpenLesson(lessonId);
-  };
+  const { data: departmentMemberCheck } = useGetDepartmentMemberCheckQuery({
+    platform_key: getTenant(),
+  });
 
   return (
-    <CourseAccessGuard course={course} courseInfoLoadingState={courseInfoLoadingState}>
-      <CourseOutlineContext.Provider
-        value={{
-          courseOutline,
-          courseOutlineLoading,
-          expandedModule,
-          expandedLessons,
-          selectLesson,
-          toggleModule,
-          toggleLesson,
-          currentChapter,
-          currentLesson,
-          course,
-          courseOutlineDrawerOpen,
-          setCourseOutlineDrawerOpen,
-          currentUnitID,
-          refetchCourseOutline: handleFetchCourseSyllabus,
-        }}
-      >
-        <CourseOutlineDrawer />
-        <main className="flex flex-1 overflow-hidden">
-          {/* Course sidebar */}
-          <div
-            className="hidden w-72 overflow-y-auto border-r border-gray-200 pl-4 md:block"
-            style={{ scrollbarWidth: 'none', height: 'calc(100% - 60px)' }}
-          >
-            <div className="border-b border-gray-200 p-4">
-              <h2 className="font-semibold text-gray-800">{course?.display_name}</h2>
-            </div>
-
-            <CourseOutline />
-          </div>
-
-          {/* Main content area */}
-          <div className="flex flex-1 flex-col overflow-hidden">
-            {/* Course navigation tabs */}
-            <div className="border-b border-gray-200">
-              <div className="flex w-full overflow-x-auto">
-                <Link
-                  href={`/course-content/${resolvedParams.course_id}/course${
-                    currentCourseInfo?.id ? `?unit_id=${currentCourseInfo?.id}` : ''
-                  }`}
-                  className={`border-b-2 px-4 py-3 text-sm font-medium ${
-                    activeTab === 'course'
-                      ? 'border-amber-500 text-amber-600'
-                      : 'border-transparent text-gray-500 hover:text-gray-700'
-                  }`}
-                >
-                  Course
-                </Link>
-                <Link
-                  href={`/course-content/${resolvedParams.course_id}/progress`}
-                  className={`border-b-2 px-4 py-3 text-sm font-medium ${
-                    activeTab === 'progress'
-                      ? 'border-amber-500 text-amber-600'
-                      : 'border-transparent text-gray-500 hover:text-gray-700'
-                  }`}
-                >
-                  Progress
-                </Link>
-                <Link
-                  href={`/course-content/${resolvedParams.course_id}/dates`}
-                  className={`border-b-2 px-4 py-3 text-sm font-medium ${
-                    activeTab === 'dates'
-                      ? 'border-amber-500 text-amber-600'
-                      : 'border-transparent text-gray-500 hover:text-gray-700'
-                  }`}
-                >
-                  Dates
-                </Link>
-                <Link
-                  href={`/course-content/${resolvedParams.course_id}/discussion`}
-                  className={`border-b-2 px-4 py-3 text-sm font-medium ${
-                    activeTab === 'forum'
-                      ? 'border-amber-500 text-amber-600'
-                      : 'border-transparent text-gray-500 hover:text-gray-700'
-                  }`}
-                >
-                  Discussion
-                </Link>
-                {departmentMemberCheck?.is_platform_admin && (
-                  <Link
-                    href={`/course-content/${resolvedParams.course_id}/instructor`}
-                    className={`border-b-2 px-4 py-3 text-sm font-medium ${
-                      activeTab === 'instructor'
-                        ? 'border-amber-500 text-amber-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700'
-                    }`}
-                  >
-                    Instructor
-                  </Link>
-                )}
-              </div>
-              <div className="flex items-center bg-gray-50 px-4 py-2">
-                <button
-                  onClick={() => setCourseOutlineDrawerOpen(true)} // Open the new course outline drawer
-                  className="mr-2 -ml-2 p-2 text-gray-600 hover:text-gray-900 focus:ring-2 focus:ring-amber-500 focus:outline-none focus:ring-inset xl:hidden" // Updated here
-                  aria-label="Open course outline"
-                >
-                  <ListTree className="h-5 w-5" /> {/* Changed icon to ListTree */}
-                </button>
-                <div
-                  className="flex flex-1 items-center justify-between overflow-x-auto whitespace-nowrap md:whitespace-normal"
-                  style={{
-                    scrollbarWidth: 'none',
-                    msOverflowStyle: 'none',
-                    WebkitOverflowScrolling: 'touch',
-                  }}
-                >
-                  <div className="flex min-w-0 flex-shrink-0 items-center pr-4 text-xs text-gray-500">
-                    <Link href="#" className="flex-shrink-0 hover:text-amber-600">
-                      {course?.display_name}
-                    </Link>
-                    {currentParentIds && currentParentIds.module.id && (
-                      <>
-                        <ChevronRight className="mx-1 h-3 w-3 flex-shrink-0" />
-                        <Link href="#" className="flex-shrink-0 hover:text-amber-600">
-                          {currentParentIds.module.display_name}
-                        </Link>
-                      </>
-                    )}
-                    {currentParentIds && currentParentIds.lesson.id && (
-                      <>
-                        <ChevronRight className="mx-1 h-3 w-3 flex-shrink-0" />
-                        <Link href="#" className="flex-shrink-0 hover:text-amber-600">
-                          {currentParentIds.lesson.display_name}
-                        </Link>
-                      </>
-                    )}
-                    <ChevronRight className="mx-1 h-3 w-3 flex-shrink-0" />
-                    <span className="flex-shrink-0 text-gray-700">
-                      {currentCourseInfo?.display_name}
-                    </span>
-                  </div>
-                  <div className="flex flex-shrink-0 items-center">
-                    <div className="mr-4 flex items-center text-xs text-gray-600">
-                      <span className="mr-1 font-medium">Progress:</span>
-                      <div className="mx-1 h-1.5 w-16 rounded-full bg-gray-200">
-                        <div
-                          className="h-full rounded-full bg-amber-500"
-                          style={{
-                            width: `${Math.min(
-                              100,
-                              Math.max(0, courseCompletion?.completion_percentage || 0),
-                            )}%`,
-                          }}
-                        ></div>
-                      </div>
-                      <span className="ml-1">{courseCompletion?.completion_percentage || 0}%</span>
-                    </div>
-                    {courseGradingPolicyActive && (
-                      <div className="text-xs text-gray-600">
-                        <span className="font-medium">Grade:</span>{' '}
-                        {courseCompletion?.grading_percentage || 0}%
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Content area */}
-            <div
-              /* className="flex-1 overflow-y-auto bg-amber-50 pb-[60px]" */
-              className="flex-1 overflow-y-auto pb-[60px]"
-              style={{ scrollbarWidth: 'none' }}
-            >
-              <EdxIframeContext.Provider
-                value={{
-                  iframeUrl: iframeUrl,
-                  setIframeUrl: setIframeUrl,
-                  courseOutline: courseOutline,
-                  setActiveTab: setActiveTab,
-                  activeTab: activeTab,
-                  courseID: courseId,
-                  currentlyInExamSubsection: currentlyInExamSubsection,
-                  setCurrentlyInExamSubsection: setCurrentlyInExamSubsection,
-                  examInfo: examInfo,
-                  setExamInfo: setExamInfo,
-                  refresher: refresher,
-                  setRefresher: setRefresher,
-                  //setCourseOutline: () => {},
-                }}
-              >
-                {children}
-              </EdxIframeContext.Provider>
-            </div>
-          </div>
-        </main>
-
-        <style jsx global>{`
-          ::-webkit-scrollbar {
-            display: none;
-          }
-        `}</style>
-      </CourseOutlineContext.Provider>
-    </CourseAccessGuard>
+    <SharedCourseContentLayout
+      courseId={courseId}
+      isPlatformAdmin={!!departmentMemberCheck?.is_platform_admin}
+      currentTenant={getTenant()}
+      dmUrl={config.urls.dm()}
+      courseEligibilityEnabled={config.settings.courseEligibilityEnabled()}
+      tabHrefTemplate={({ courseId: cid, tab }: { courseId: string; tab: string }) =>
+        `/course-content/${cid}/${tab === 'forum' ? 'discussion' : tab}`
+      }
+      onUnauthorized={() => router.push('/error/403')}
+      onNotFound={() => router.push('/error/404')}
+      onNavigate={(href: string, opts?: { external?: boolean }) =>
+        opts?.external ? window.location.assign(href) : router.push(href)
+      }
+      onError={(msg: string) => toast.error(msg)}
+      onSuccess={(msg: string) => toast.success(msg)}
+      onCourseMentorChange={setCourseMentor}
+    >
+      {children}
+    </SharedCourseContentLayout>
   );
 }
diff --git a/app/course-content/[course_id]/loading.tsx b/app/course-content/[course_id]/loading.tsx
index 6d8681e..0b7e6ee 100644
--- a/app/course-content/[course_id]/loading.tsx
+++ b/app/course-content/[course_id]/loading.tsx
@@ -1,85 +1,8 @@
-import { Skeleton } from '@/components/ui/skeleton';
+'use client';
 
-export default function Loading() {
-  return (
-    <div className="flex min-h-screen flex-col">
-      {/* Header skeleton */}
-      <div className="h-16 flex-shrink-0 border-b border-gray-200 bg-white md:h-20"></div>
-
-      <div className="flex flex-1 flex-col md:flex-row">
-        {/* Sidebar skeleton */}
-        <div className="w-full border-r border-gray-200 md:w-72">
-          <div className="border-b border-gray-200 p-4">
-            <Skeleton className="h-6 w-48" />
-          </div>
-
-          <div className="space-y-4 p-4">
-            {Array(6)
-              .fill(0)
-              .map((_, i) => (
-                <div key={i} className="space-y-2">
-                  <Skeleton className="h-5 w-full" />
-                  {i === 0 && (
-                    <div className="space-y-2 pl-4">
-                      <Skeleton className="h-4 w-5/6" />
-                      <Skeleton className="h-4 w-4/6" />
-                    </div>
-                  )}
-                </div>
-              ))}
-          </div>
-        </div>
-
-        {/* Main content skeleton */}
-        <div className="flex flex-1 flex-col">
-          {/* Tabs skeleton */}
-          <div className="border-b border-gray-200">
-            <div className="flex p-4">
-              {Array(5)
-                .fill(0)
-                .map((_, i) => (
-                  <Skeleton key={i} className="mx-2 h-4 w-16" />
-                ))}
-            </div>
-            <div className="flex items-center justify-between bg-gray-50 p-4">
-              <div className="flex items-center">
-                <Skeleton className="mr-2 h-3 w-24" />
-                <Skeleton className="mx-1 h-3 w-3" />
-                <Skeleton className="mr-2 h-3 w-32" />
-                <Skeleton className="mx-1 h-3 w-3" />
-                <Skeleton className="h-3 w-16" />
-              </div>
-              <div className="flex items-center">
-                <Skeleton className="mr-4 h-3 w-16" />
-                <Skeleton className="h-3 w-16" />
-              </div>
-            </div>
-          </div>
+// @ts-ignore
+import { CourseContentLoading } from '@iblai/iblai-js/web-containers';
 
-          {/* Content skeleton */}
-          <div className="h-full bg-amber-50 p-6">
-            <div className="mx-auto max-w-4xl">
-              <Skeleton className="mb-4 h-8 w-64" />
-              <Skeleton className="mb-2 h-4 w-full" />
-              <Skeleton className="mb-6 h-4 w-5/6" />
-
-              <div className="mb-6 aspect-video rounded-md bg-gray-200"></div>
-
-              <div className="mb-6 rounded-md border border-gray-200 bg-white p-4">
-                <Skeleton className="mb-2 h-5 w-40" />
-                <Skeleton className="mb-2 h-4 w-full" />
-                <Skeleton className="mb-2 h-4 w-full" />
-                <Skeleton className="h-4 w-3/4" />
-              </div>
-
-              <div className="flex items-center justify-between">
-                <Skeleton className="h-10 w-32" />
-                <Skeleton className="h-10 w-32" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+export default function Loading() {
+  return <CourseContentLoading />;
 }
diff --git a/app/course-content/[course_id]/progress/page.tsx b/app/course-content/[course_id]/progress/page.tsx
index bfec7cd..b1b0559 100644
--- a/app/course-content/[course_id]/progress/page.tsx
+++ b/app/course-content/[course_id]/progress/page.tsx
@@ -1,16 +1,16 @@
 'use client';
 
-import { EdxIframe } from '@/components/edx-iframe/edx-iframe';
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
-import { useContext, useEffect } from 'react';
+// @ts-ignore
+import { CourseContentTabPage } from '@iblai/iblai-js/web-containers/next';
+import { config } from '@/lib/config';
 
 export default function ProgressTab() {
-  // Mock course data
-  const { setActiveTab } = useContext(EdxIframeContext);
-  useEffect(() => {
-    setActiveTab('progress');
-  }, []);
-  //const { data: course } = useGetCourseQuery(resolvedParams.course_id);
-
-  return <EdxIframe />;
+  return (
+    <CourseContentTabPage
+      tab="progress"
+      lmsUrl={config.urls.lms()}
+      mfeUrl={config.urls.mfe()}
+      legacyLmsUrl={config.urls.legacyLmsUrl()}
+    />
+  );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a3b9fa..403530f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ importers:
         specifier: 4.166.0-ai
         version: 4.166.0-ai
       '@iblai/iblai-js':
-        specifier: 1.3.5
-        version: 1.3.5(@axe-core/playwright@4.11.1(playwright-core@1.58.2))(@floating-ui/dom@1.7.6)(@iblai/iblai-api@4.166.0-ai)(@playwright/test@1.58.2)(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@tauri-apps/api@2.10.1)(@tiptap/extensions@3.20.1(@tiptap/core@3.20.4(@tiptap/pm@3.20.4))(@tiptap/pm@3.20.4))(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(next@15.3.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)(redux@5.0.1)(sonner@1.7.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))
+        specifier: 1.3.9
+        version: 1.3.9(@axe-core/playwright@4.11.1(playwright-core@1.58.2))(@floating-ui/dom@1.7.6)(@iblai/iblai-api@4.166.0-ai)(@playwright/test@1.58.2)(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@tauri-apps/api@2.10.1)(@tiptap/extensions@3.20.1(@tiptap/core@3.20.4(@tiptap/pm@3.20.4))(@tiptap/pm@3.20.4))(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(next@15.3.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)(redux@5.0.1)(sonner@1.7.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))
       '@iblai/iblai-web-mentor':
         specifier: 2.0.1
         version: 2.0.1(@babel/core@7.29.0)(@types/babel__core@7.20.5)(rollup@4.59.0)(typescript@5.9.3)
@@ -794,8 +794,8 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@iblai/data-layer@1.2.6':
-    resolution: {integrity: sha512-xoMtJOWyUVQMkhAHEx/NIr8AnqHdlXKpTWmcwqg/dV8aMGPa5p/a2WNwE6wHOCPn/MV9FPJj6RbOCYb+v5oDvA==}
+  '@iblai/data-layer@1.2.8':
+    resolution: {integrity: sha512-kh0ws8etjok4I0PUw6Wh+nlWqDaiLXyfB5pY2AdOiJqCvLI3GXenoAJK5Di8ox8AqcubvyqGwsvzuGGEpIiXhA==}
     engines: {node: 25.3.0}
     peerDependencies:
       '@reduxjs/toolkit': 2.7.0
@@ -806,8 +806,8 @@ packages:
   '@iblai/iblai-api@4.166.0-ai':
     resolution: {integrity: sha512-dY9Jv+CkXEyTxRsOQFay5YvYe8K2LSQluJJvtssGQV2RbrxPPzONaKfnhcyarDs7Ft35Xqk1fuErjhUwNG3OIg==}
 
-  '@iblai/iblai-js@1.3.5':
-    resolution: {integrity: sha512-6x9mmvA9DQLf9OQ4mDgd9R7RuofXO9ccMExmJtSXT9A+mgFHcXC2QEmhpul6VarIpOFNHD2zFs8wtii31Mb0tA==}
+  '@iblai/iblai-js@1.3.9':
+    resolution: {integrity: sha512-QiRfwbIaHW6SGmszKcT7Bm0CVd5UAiOt3NUf5fr9suCuFXiOlgxpw0RvKqQSkjWYnbIZulaOVv/L2S/aoMA7Sg==}
     engines: {node: '>=20.0.0'}
     hasBin: true
     peerDependencies:
@@ -830,13 +830,13 @@ packages:
   '@iblai/iblai-web-mentor@2.0.1':
     resolution: {integrity: sha512-xmGpaKCrio93pYDWapDwpUzVqNFdZwtwvmaKqUk9l+xpoi0I1JtB5Z7p1I+1s5mSIYsIkbarhFZotRiREy0jaQ==}
 
-  '@iblai/mcp@1.2.2':
-    resolution: {integrity: sha512-FbTRTmFvslaornOEptn+qhEUkg6Dj0CRuPcq6zB7CCP+AwjGBmXFrlFaTIkbatKUKlQxEjgdqEHfpHqal4EO4Q==}
+  '@iblai/mcp@1.2.3':
+    resolution: {integrity: sha512-tuaVs2gzR8OYoCHT0gxOB3VSC9LbC8RdWGC/Nd7PVimcK+1HxPWP8mX5GWyzDgn1sJf/Pi5onFGGBHbRzbR7+Q==}
     engines: {node: '>=20.0.0'}
     hasBin: true
 
-  '@iblai/web-containers@1.2.2':
-    resolution: {integrity: sha512-cVKJHNjdFDBZo9TJr/tEHhV354+kovrWleBhD8lVHh4w+LNHCg9TriHv16QNJOfZwrPlMa5CfthWXPJlVadBCg==}
+  '@iblai/web-containers@1.2.6':
+    resolution: {integrity: sha512-ZUFOMVxeC77r+pevDelWVGgRdjBby83XqTnaaVmOiUwZrqXiO7dwJM4O3msUvOiczsO/Pa9/Z0fHeZRoueMdjg==}
     engines: {node: 25.3.0}
     peerDependencies:
       '@iblai/data-layer': ^1.1.2
@@ -854,8 +854,8 @@ packages:
       sonner:
         optional: true
 
-  '@iblai/web-utils@1.2.5':
-    resolution: {integrity: sha512-IZNjs1kL1hh4rQIEfMuSKiMfT6emaf6irvBfb1RqaLG5tELU/DxZJkxQdiMbNpHwzMCfoJvas4/qLad3Xzi9eg==}
+  '@iblai/web-utils@1.2.7':
+    resolution: {integrity: sha512-6pRcN1ExboPq9tjspjWwjfmKf23KZXos09Lywv3OYFLEiR6yanE9ppt2HnB6+VGNDNjU8VQMmb1RlGGye5u7xw==}
     engines: {node: 25.3.0}
     peerDependencies:
       '@iblai/data-layer': ^1.1.2
@@ -8156,7 +8156,7 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@iblai/data-layer@1.2.6(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)':
+  '@iblai/data-layer@1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)':
     dependencies:
       '@iblai/iblai-api': 4.166.0-ai
       '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
@@ -8170,13 +8170,13 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@iblai/iblai-js@1.3.5(@axe-core/playwright@4.11.1(playwright-core@1.58.2))(@floating-ui/dom@1.7.6)(@iblai/iblai-api@4.166.0-ai)(@playwright/test@1.58.2)(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@tauri-apps/api@2.10.1)(@tiptap/extensions@3.20.1(@tiptap/core@3.20.4(@tiptap/pm@3.20.4))(@tiptap/pm@3.20.4))(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(next@15.3.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)(redux@5.0.1)(sonner@1.7.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))':
+  '@iblai/iblai-js@1.3.9(@axe-core/playwright@4.11.1(playwright-core@1.58.2))(@floating-ui/dom@1.7.6)(@iblai/iblai-api@4.166.0-ai)(@playwright/test@1.58.2)(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@tauri-apps/api@2.10.1)(@tiptap/extensions@3.20.1(@tiptap/core@3.20.4(@tiptap/pm@3.20.4))(@tiptap/pm@3.20.4))(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(next@15.3.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)(redux@5.0.1)(sonner@1.7.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))':
     dependencies:
-      '@iblai/data-layer': 1.2.6(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
+      '@iblai/data-layer': 1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
       '@iblai/iblai-api': 4.166.0-ai
-      '@iblai/mcp': 1.2.2
-      '@iblai/web-containers': 1.2.2(109d9ca7b08c2f32c2ff9c53f8669ff6)
-      '@iblai/web-utils': 1.2.5(@iblai/data-layer@1.2.6(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@iblai/iblai-api@4.166.0-ai)(@tauri-apps/api@2.10.1)(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)
+      '@iblai/mcp': 1.2.3
+      '@iblai/web-containers': 1.2.6(b8644144625d90a2d9c984d8fca1a589)
+      '@iblai/web-utils': 1.2.7(@iblai/data-layer@1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@iblai/iblai-api@4.166.0-ai)(@tauri-apps/api@2.10.1)(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)
       '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
       axios: 1.13.6
       dotenv: 16.6.1
@@ -8213,7 +8213,7 @@ snapshots:
       - supports-color
       - typescript
 
-  '@iblai/mcp@1.2.2':
+  '@iblai/mcp@1.2.3':
     dependencies:
       '@modelcontextprotocol/sdk': 1.27.1(zod@4.3.6)
       zod: 4.3.6
@@ -8221,11 +8221,11 @@ snapshots:
       - '@cfworker/json-schema'
       - supports-color
 
-  '@iblai/web-containers@1.2.2(109d9ca7b08c2f32c2ff9c53f8669ff6)':
+  '@iblai/web-containers@1.2.6(b8644144625d90a2d9c984d8fca1a589)':
     dependencies:
-      '@iblai/data-layer': 1.2.6(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
+      '@iblai/data-layer': 1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
       '@iblai/iblai-api': 4.166.0-ai
-      '@iblai/web-utils': 1.2.5(@iblai/data-layer@1.2.6(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@iblai/iblai-api@4.166.0-ai)(@tauri-apps/api@2.10.1)(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)
+      '@iblai/web-utils': 1.2.7(@iblai/data-layer@1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@iblai/iblai-api@4.166.0-ai)(@tauri-apps/api@2.10.1)(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)
       '@radix-ui/react-accordion': 1.2.8(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-avatar': 1.1.7(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-checkbox': 1.2.3(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -8295,9 +8295,9 @@ snapshots:
       - supports-color
       - vinxi
 
-  '@iblai/web-utils@1.2.5(@iblai/data-layer@1.2.6(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@iblai/iblai-api@4.166.0-ai)(@tauri-apps/api@2.10.1)(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)':
+  '@iblai/web-utils@1.2.7(@iblai/data-layer@1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@iblai/iblai-api@4.166.0-ai)(@tauri-apps/api@2.10.1)(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)':
     dependencies:
-      '@iblai/data-layer': 1.2.6(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
+      '@iblai/data-layer': 1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
       '@iblai/iblai-api': 4.166.0-ai
       '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
       axios: 1.13.6

From 9d2ad3e4bd3c1e35632d298ba944b51953ee643c Mon Sep 17 00:00:00 2001
From: ANIMASHAUN Michael <michaeloncode@gmail.com>
Date: Tue, 14 Apr 2026 00:40:53 +0100
Subject: [PATCH 3/8] feat: course tab content components removed from the repo

---
 .../__tests__/course-outline-drawer.test.tsx  |  94 ---
 components/__tests__/course-outline.test.tsx  | 358 -----------
 .../skeleton-course-outline.test.tsx          |  17 -
 components/course-outline-drawer.tsx          |  24 -
 components/course-outline.tsx                 | 187 ------
 .../edx-iframe/__tests__/edx-iframe.test.tsx  | 299 ---------
 .../edx-iframe/__tests__/timed-exam.test.tsx  | 588 ------------------
 components/edx-iframe/edx-iframe.tsx          | 251 --------
 components/edx-iframe/timed-exam.tsx          | 326 ----------
 components/skeleton-course-outline.tsx        |  12 -
 contexts/course-outline-context.tsx           |  38 --
 .../courses/__tests__/use-edx-iframe.test.ts  | 431 -------------
 hooks/courses/edx-iframe-context.ts           |  34 -
 hooks/courses/use-edx-iframe.ts               | 316 ----------
 hooks/courses/useCourseNavigator.ts           | 100 ---
 15 files changed, 3075 deletions(-)
 delete mode 100644 components/__tests__/course-outline-drawer.test.tsx
 delete mode 100644 components/__tests__/course-outline.test.tsx
 delete mode 100644 components/__tests__/skeleton-course-outline.test.tsx
 delete mode 100644 components/course-outline-drawer.tsx
 delete mode 100644 components/course-outline.tsx
 delete mode 100644 components/edx-iframe/__tests__/edx-iframe.test.tsx
 delete mode 100644 components/edx-iframe/__tests__/timed-exam.test.tsx
 delete mode 100644 components/edx-iframe/edx-iframe.tsx
 delete mode 100644 components/edx-iframe/timed-exam.tsx
 delete mode 100644 components/skeleton-course-outline.tsx
 delete mode 100644 contexts/course-outline-context.tsx
 delete mode 100644 hooks/courses/__tests__/use-edx-iframe.test.ts
 delete mode 100644 hooks/courses/edx-iframe-context.ts
 delete mode 100644 hooks/courses/use-edx-iframe.ts
 delete mode 100644 hooks/courses/useCourseNavigator.ts

diff --git a/components/__tests__/course-outline-drawer.test.tsx b/components/__tests__/course-outline-drawer.test.tsx
deleted file mode 100644
index 018e673..0000000
--- a/components/__tests__/course-outline-drawer.test.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from 'react';
-
-vi.mock('@/components/ui/sheet', () => ({
-  Sheet: ({ children, open }: any) => (open ? <div data-testid="sheet">{children}</div> : null),
-  SheetContent: ({ children }: any) => <div data-testid="sheet-content">{children}</div>,
-  SheetHeader: ({ children }: any) => <div data-testid="sheet-header">{children}</div>,
-  SheetTitle: ({ children }: any) => <h2>{children}</h2>,
-}));
-
-vi.mock('../course-outline', () => ({
-  CourseOutline: () => <div data-testid="course-outline">Course Outline Content</div>,
-}));
-
-import { CourseOutlineContext } from '@/contexts/course-outline-context';
-import { CourseOutlineDrawer } from '../course-outline-drawer';
-
-describe('CourseOutlineDrawer', () => {
-  const mockSetCourseOutlineDrawerOpen = vi.fn();
-
-  const createWrapper = (overrides = {}) => {
-    const contextValue = {
-      courseOutline: {} as any,
-      courseOutlineLoading: false,
-      expandedModule: '',
-      expandedLessons: [],
-      selectLesson: vi.fn(),
-      toggleModule: vi.fn(),
-      toggleLesson: vi.fn(),
-      currentChapter: '',
-      currentLesson: '',
-      course: { display_name: 'Test Course' } as any,
-      courseOutlineDrawerOpen: true,
-      setCourseOutlineDrawerOpen: mockSetCourseOutlineDrawerOpen,
-      currentUnitID: null,
-      refetchCourseOutline: vi.fn(),
-      ...overrides,
-    };
-
-    function CourseOutlineDrawerTestWrapper({ children }: { children: React.ReactNode }) {
-      return (
-        <CourseOutlineContext.Provider value={contextValue}>
-          {children}
-        </CourseOutlineContext.Provider>
-      );
-    }
-
-    return CourseOutlineDrawerTestWrapper;
-  };
-
-  it('renders without crashing when open', () => {
-    const Wrapper = createWrapper();
-    const { container } = render(<CourseOutlineDrawer />, { wrapper: Wrapper });
-    expect(container).toBeTruthy();
-  });
-
-  it('does not render when closed', () => {
-    const Wrapper = createWrapper({ courseOutlineDrawerOpen: false });
-    const { queryByTestId } = render(<CourseOutlineDrawer />, { wrapper: Wrapper });
-    expect(queryByTestId('sheet')).not.toBeInTheDocument();
-  });
-
-  it('renders the course display name', () => {
-    const Wrapper = createWrapper();
-    render(<CourseOutlineDrawer />, { wrapper: Wrapper });
-    expect(screen.getByText('Test Course')).toBeInTheDocument();
-  });
-
-  it('renders the CourseOutline component', () => {
-    const Wrapper = createWrapper();
-    render(<CourseOutlineDrawer />, { wrapper: Wrapper });
-    expect(screen.getByTestId('course-outline')).toBeInTheDocument();
-  });
-
-  it('handles null course gracefully', () => {
-    const Wrapper = createWrapper({ course: null });
-    const { container } = render(<CourseOutlineDrawer />, { wrapper: Wrapper });
-    expect(container).toBeTruthy();
-  });
-
-  it('renders sheet header', () => {
-    const Wrapper = createWrapper();
-    render(<CourseOutlineDrawer />, { wrapper: Wrapper });
-    expect(screen.getByTestId('sheet-header')).toBeInTheDocument();
-  });
-
-  it('renders sheet content', () => {
-    const Wrapper = createWrapper();
-    render(<CourseOutlineDrawer />, { wrapper: Wrapper });
-    expect(screen.getByTestId('sheet-content')).toBeInTheDocument();
-  });
-});
diff --git a/components/__tests__/course-outline.test.tsx b/components/__tests__/course-outline.test.tsx
deleted file mode 100644
index 2ba2a94..0000000
--- a/components/__tests__/course-outline.test.tsx
+++ /dev/null
@@ -1,358 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { CourseOutline } from '../course-outline';
-import { CourseOutlineContext, CourseOutlineContextType } from '@/contexts/course-outline-context';
-import { CourseOutlineChildNode } from '@/types/courses';
-import '@testing-library/jest-dom';
-
-vi.mock('../skeleton-multiplier', () => ({
-  SkeletonMultiplier: () => <div data-testid="skeleton" />,
-}));
-
-vi.mock('../skeleton-course-outline', () => ({
-  SkeletonCourseOutline: () => <div />,
-}));
-
-const makeNode = (overrides: Partial<CourseOutlineChildNode> = {}): CourseOutlineChildNode => ({
-  id: 'node-1',
-  block_id: 'block-1',
-  type: 'html',
-  display_name: 'Node 1',
-  ...overrides,
-});
-
-const defaultContext: CourseOutlineContextType = {
-  courseOutline: {} as CourseOutlineChildNode,
-  courseOutlineLoading: false,
-  expandedModule: '',
-  expandedLessons: [],
-  selectLesson: vi.fn(),
-  toggleModule: vi.fn(),
-  toggleLesson: vi.fn(),
-  currentChapter: '',
-  currentLesson: '',
-  course: null,
-  courseOutlineDrawerOpen: false,
-  setCourseOutlineDrawerOpen: vi.fn(),
-  currentUnitID: null,
-  refetchCourseOutline: vi.fn(),
-};
-
-const renderWithContext = (ctx: Partial<CourseOutlineContextType> = {}) =>
-  render(
-    <CourseOutlineContext.Provider value={{ ...defaultContext, ...ctx }}>
-      <CourseOutline />
-    </CourseOutlineContext.Provider>,
-  );
-
-describe('CourseOutline', () => {
-  it('renders skeleton when loading', () => {
-    renderWithContext({ courseOutlineLoading: true });
-    expect(screen.getByTestId('skeleton')).toBeInTheDocument();
-  });
-
-  it('renders module names', () => {
-    const modules = [
-      makeNode({ id: 'mod-1', display_name: 'Module 1', children: [] }),
-      makeNode({ id: 'mod-2', display_name: 'Module 2', children: [] }),
-    ];
-    renderWithContext({
-      courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
-    });
-    expect(screen.getByText('Module 1')).toBeInTheDocument();
-    expect(screen.getByText('Module 2')).toBeInTheDocument();
-  });
-
-  it('shows lessons when module is expanded', () => {
-    const modules = [
-      makeNode({
-        id: 'mod-1',
-        display_name: 'Module 1',
-        children: [
-          makeNode({ id: 'lesson-1', display_name: 'Lesson 1' }),
-          makeNode({ id: 'lesson-2', display_name: 'Lesson 2' }),
-        ],
-      }),
-    ];
-    renderWithContext({
-      courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
-      expandedModule: 'mod-1',
-    });
-    expect(screen.getByText('Lesson 1')).toBeInTheDocument();
-    expect(screen.getByText('Lesson 2')).toBeInTheDocument();
-  });
-
-  it('calls toggleModule on module click', () => {
-    const toggleModule = vi.fn();
-    const modules = [makeNode({ id: 'mod-1', display_name: 'Module 1' })];
-    renderWithContext({
-      courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
-      toggleModule,
-    });
-    fireEvent.click(screen.getByText('Module 1'));
-    expect(toggleModule).toHaveBeenCalledWith('mod-1');
-  });
-});
-
-describe('CompletionIcon rendering', () => {
-  it('renders empty circle for incomplete leaf node', () => {
-    const modules = [
-      makeNode({
-        id: 'mod-1',
-        display_name: 'Module 1',
-        children: [makeNode({ id: 'lesson-1', display_name: 'Lesson 1', complete: false })],
-      }),
-    ];
-    const { container } = renderWithContext({
-      courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
-      expandedModule: 'mod-1',
-    });
-    const svgs = container.querySelectorAll('svg');
-    // The lesson's completion icon SVG
-    // svgs[0] is the module's ChevronRight, svgs[1] is the CompletionIcon
-    const lessonSvg = svgs[1];
-    expect(lessonSvg).toBeTruthy();
-    // Empty circle has gray stroke (#d1d5db)
-    const circle = lessonSvg.querySelector('circle');
-    expect(circle?.getAttribute('stroke')).toBe('#d1d5db');
-  });
-
-  it('renders filled amber check for fully complete leaf node', () => {
-    const modules = [
-      makeNode({
-        id: 'mod-1',
-        display_name: 'Module 1',
-        children: [makeNode({ id: 'lesson-1', display_name: 'Lesson 1', complete: true })],
-      }),
-    ];
-    const { container } = renderWithContext({
-      courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
-      expandedModule: 'mod-1',
-    });
-    const svgs = container.querySelectorAll('svg');
-    // svgs[0] is the module's ChevronRight, svgs[1] is the CompletionIcon
-    const lessonSvg = svgs[1];
-    // Filled circle has amber fill (#f59e0b)
-    const circle = lessonSvg.querySelector('circle');
-    expect(circle?.getAttribute('fill')).toBe('#f59e0b');
-    // Has a checkmark path
-    const path = lessonSvg.querySelector('path');
-    expect(path).toBeTruthy();
-  });
-
-  it('renders partial progress for parent with mixed children completion', () => {
-    const modules = [
-      makeNode({
-        id: 'mod-1',
-        display_name: 'Module 1',
-        children: [
-          makeNode({
-            id: 'lesson-1',
-            display_name: 'Lesson 1',
-            children: [
-              makeNode({ id: 'sub-1', display_name: 'Sub 1', complete: true }),
-              makeNode({ id: 'sub-2', display_name: 'Sub 2', complete: true }),
-              makeNode({ id: 'sub-3', display_name: 'Sub 3', complete: false }),
-              makeNode({ id: 'sub-4', display_name: 'Sub 4', complete: false }),
-            ],
-          }),
-        ],
-      }),
-    ];
-    const { container } = renderWithContext({
-      courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
-      expandedModule: 'mod-1',
-    });
-    const svgs = container.querySelectorAll('svg');
-    // svgs[0] is the module's ChevronRight, svgs[1] is the CompletionIcon
-    const lessonSvg = svgs[1];
-    // Partial progress has two circles (background + progress arc)
-    const circles = lessonSvg.querySelectorAll('circle');
-    expect(circles.length).toBe(2);
-    // The progress arc has amber stroke
-    const progressCircle = circles[1];
-    expect(progressCircle.getAttribute('stroke')).toBe('#f59e0b');
-  });
-
-  it('renders full completion when all children are complete', () => {
-    const modules = [
-      makeNode({
-        id: 'mod-1',
-        display_name: 'Module 1',
-        children: [
-          makeNode({
-            id: 'lesson-1',
-            display_name: 'Lesson 1',
-            children: [
-              makeNode({ id: 'sub-1', display_name: 'Sub 1', complete: true }),
-              makeNode({ id: 'sub-2', display_name: 'Sub 2', complete: true }),
-            ],
-          }),
-        ],
-      }),
-    ];
-    const { container } = renderWithContext({
-      courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
-      expandedModule: 'mod-1',
-    });
-    const svgs = container.querySelectorAll('svg');
-    // svgs[0] is the module's ChevronRight, svgs[1] is the CompletionIcon
-    const lessonSvg = svgs[1];
-    // Full completion: amber filled circle with checkmark
-    const circle = lessonSvg.querySelector('circle');
-    expect(circle?.getAttribute('fill')).toBe('#f59e0b');
-    const path = lessonSvg.querySelector('path');
-    expect(path).toBeTruthy();
-  });
-
-  it('renders empty circle when no children are complete', () => {
-    const modules = [
-      makeNode({
-        id: 'mod-1',
-        display_name: 'Module 1',
-        children: [
-          makeNode({
-            id: 'lesson-1',
-            display_name: 'Lesson 1',
-            children: [
-              makeNode({ id: 'sub-1', display_name: 'Sub 1', complete: false }),
-              makeNode({ id: 'sub-2', display_name: 'Sub 2', complete: false }),
-            ],
-          }),
-        ],
-      }),
-    ];
-    const { container } = renderWithContext({
-      courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
-      expandedModule: 'mod-1',
-    });
-    const svgs = container.querySelectorAll('svg');
-    // svgs[0] is the module's ChevronRight, svgs[1] is the CompletionIcon
-    const lessonSvg = svgs[1];
-    // Empty: single circle with gray stroke
-    const circles = lessonSvg.querySelectorAll('circle');
-    expect(circles.length).toBe(1);
-    expect(circles[0].getAttribute('stroke')).toBe('#d1d5db');
-  });
-
-  it('renders sublessons when a lesson is expanded', () => {
-    const modules = [
-      makeNode({
-        id: 'mod-1',
-        display_name: 'Module 1',
-        children: [
-          makeNode({
-            id: 'lesson-1',
-            display_name: 'Lesson 1',
-            children: [
-              makeNode({ id: 'sub-1', display_name: 'Sub 1', complete: false }),
-              makeNode({ id: 'sub-2', display_name: 'Sub 2', complete: true }),
-            ],
-          }),
-        ],
-      }),
-    ];
-    renderWithContext({
-      courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
-      expandedModule: 'mod-1',
-      expandedLessons: ['lesson-1'],
-    });
-    expect(screen.getByText('Sub 1')).toBeInTheDocument();
-    expect(screen.getByText('Sub 2')).toBeInTheDocument();
-  });
-
-  it('calls selectLesson when a sublesson is clicked', () => {
-    const selectLesson = vi.fn();
-    const modules = [
-      makeNode({
-        id: 'mod-1',
-        display_name: 'Module 1',
-        children: [
-          makeNode({
-            id: 'lesson-1',
-            display_name: 'Lesson 1',
-            children: [makeNode({ id: 'sub-1', display_name: 'Sub 1', complete: false })],
-          }),
-        ],
-      }),
-    ];
-    renderWithContext({
-      courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
-      expandedModule: 'mod-1',
-      expandedLessons: ['lesson-1'],
-      selectLesson,
-    });
-    fireEvent.click(screen.getByText('Sub 1'));
-    expect(selectLesson).toHaveBeenCalledWith('sub-1');
-  });
-
-  it('highlights the current sublesson', () => {
-    const modules = [
-      makeNode({
-        id: 'mod-1',
-        display_name: 'Module 1',
-        children: [
-          makeNode({
-            id: 'lesson-1',
-            display_name: 'Lesson 1',
-            children: [
-              makeNode({ id: 'sub-1', display_name: 'Sub 1', complete: false }),
-              makeNode({ id: 'sub-2', display_name: 'Sub 2', complete: false }),
-            ],
-          }),
-        ],
-      }),
-    ];
-    renderWithContext({
-      courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
-      expandedModule: 'mod-1',
-      expandedLessons: ['lesson-1'],
-      currentLesson: 'sub-1',
-    });
-    const sub1Button = screen.getByText('Sub 1').closest('button');
-    expect(sub1Button?.className).toContain('bg-amber-50');
-  });
-
-  it('calculates recursive completion correctly for deeply nested nodes', () => {
-    // Parent with 2 children: one fully complete, one half complete
-    // Expected ratio: (1 + 0.5) / 2 = 0.75 => level = round(0.75 * 7) = 5
-    const modules = [
-      makeNode({
-        id: 'mod-1',
-        display_name: 'Module 1',
-        children: [
-          makeNode({
-            id: 'lesson-1',
-            display_name: 'Lesson 1',
-            children: [
-              makeNode({
-                id: 'sub-1',
-                display_name: 'Sub 1',
-                complete: true,
-              }),
-              makeNode({
-                id: 'sub-2',
-                display_name: 'Sub 2',
-                children: [
-                  makeNode({ id: 'unit-1', display_name: 'Unit 1', complete: true }),
-                  makeNode({ id: 'unit-2', display_name: 'Unit 2', complete: false }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      }),
-    ];
-    const { container } = renderWithContext({
-      courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
-      expandedModule: 'mod-1',
-    });
-    const svgs = container.querySelectorAll('svg');
-    // svgs[0] is the module's ChevronRight, svgs[1] is the CompletionIcon
-    const lessonSvg = svgs[1];
-    // Partial progress (level 5 of 7) -> two circles
-    const circles = lessonSvg.querySelectorAll('circle');
-    expect(circles.length).toBe(2);
-    expect(circles[1].getAttribute('stroke')).toBe('#f59e0b');
-  });
-});
diff --git a/components/__tests__/skeleton-course-outline.test.tsx b/components/__tests__/skeleton-course-outline.test.tsx
deleted file mode 100644
index 25955b2..0000000
--- a/components/__tests__/skeleton-course-outline.test.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { SkeletonCourseOutline } from '../skeleton-course-outline';
-
-vi.mock('@/components/ui/skeleton', () => ({
-  Skeleton: ({ className }: { className?: string }) => (
-    <div data-testid="skeleton" className={className} />
-  ),
-}));
-
-describe('SkeletonCourseOutline', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<SkeletonCourseOutline />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-});
diff --git a/components/course-outline-drawer.tsx b/components/course-outline-drawer.tsx
deleted file mode 100644
index eb204be..0000000
--- a/components/course-outline-drawer.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-
-import { CourseOutlineContext } from '@/contexts/course-outline-context';
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
-import { useContext } from 'react';
-import { CourseOutline } from './course-outline';
-
-export function CourseOutlineDrawer() {
-  const { course, courseOutlineDrawerOpen, setCourseOutlineDrawerOpen } =
-    useContext(CourseOutlineContext);
-
-  return (
-    <Sheet open={courseOutlineDrawerOpen} onOpenChange={setCourseOutlineDrawerOpen}>
-      <SheetContent side="left" className="flex w-72 flex-col p-0">
-        <SheetHeader className="border-b border-gray-200 p-4">
-          <SheetTitle className="text-left font-semibold text-gray-800">
-            {course?.display_name}
-          </SheetTitle>
-        </SheetHeader>
-        <CourseOutline />
-      </SheetContent>
-    </Sheet>
-  );
-}
diff --git a/components/course-outline.tsx b/components/course-outline.tsx
deleted file mode 100644
index fcfbcea..0000000
--- a/components/course-outline.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import { CourseOutlineContext } from '@/contexts/course-outline-context';
-import { SkeletonMultiplier } from './skeleton-multiplier';
-import { ChevronRight } from 'lucide-react';
-import { useContext } from 'react';
-import { SkeletonCourseOutline } from './skeleton-course-outline';
-import { CourseOutlineChildNode } from '@/types/courses';
-
-const MAX_CHECKMARK_POINT = 7;
-
-const getCompletionRatio = (node: CourseOutlineChildNode): number => {
-  if (!Array.isArray(node.children) || node.children.length === 0) {
-    return node.complete ? 1 : 0;
-  }
-  const totalChildren = node.children.length;
-  const completedScore = node.children.reduce((acc, child) => acc + getCompletionRatio(child), 0);
-  return completedScore / totalChildren;
-};
-
-const getCompletionLevel = (node: CourseOutlineChildNode): number => {
-  return Math.round(getCompletionRatio(node) * MAX_CHECKMARK_POINT);
-};
-
-const CompletionIcon = ({ node }: { node: CourseOutlineChildNode }) => {
-  const level = getCompletionLevel(node);
-  const size = 16;
-  const strokeWidth = 2;
-  const radius = (size - strokeWidth) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const progress = level / MAX_CHECKMARK_POINT;
-  const dashOffset = circumference * (1 - progress);
-
-  if (level === MAX_CHECKMARK_POINT) {
-    // Fully complete - filled check circle
-    return (
-      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="flex-shrink-0">
-        <circle cx={size / 2} cy={size / 2} r={radius} fill="#f59e0b" stroke="none" />
-        <path
-          d="M5 8.5L7 10.5L11 6"
-          fill="none"
-          stroke="white"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    );
-  }
-
-  if (level === 0) {
-    // No progress - empty circle
-    return (
-      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="flex-shrink-0">
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          fill="none"
-          stroke="#d1d5db"
-          strokeWidth={strokeWidth}
-        />
-      </svg>
-    );
-  }
-
-  // Partial progress - arc circle
-  return (
-    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="flex-shrink-0">
-      <circle
-        cx={size / 2}
-        cy={size / 2}
-        r={radius}
-        fill="none"
-        stroke="#e5e7eb"
-        strokeWidth={strokeWidth}
-      />
-      <circle
-        cx={size / 2}
-        cy={size / 2}
-        r={radius}
-        fill="none"
-        stroke="#f59e0b"
-        strokeWidth={strokeWidth}
-        strokeDasharray={circumference}
-        strokeDashoffset={dashOffset}
-        strokeLinecap="round"
-        transform={`rotate(-90 ${size / 2} ${size / 2})`}
-      />
-    </svg>
-  );
-};
-
-export const CourseOutline = () => {
-  const {
-    courseOutline,
-    courseOutlineLoading,
-    expandedModule,
-    expandedLessons,
-    selectLesson,
-    toggleModule,
-    toggleLesson,
-    currentChapter,
-    currentLesson,
-  } = useContext(CourseOutlineContext);
-  return (
-    <div
-      className="h-full overflow-y-auto md:h-[calc(100%-35px)]"
-      style={{ scrollbarWidth: 'none' }}
-    >
-      {courseOutlineLoading ? (
-        <SkeletonMultiplier multiplier={8} Skeleton={SkeletonCourseOutline} />
-      ) : (
-        Array.isArray(courseOutline?.children) &&
-        courseOutline.children.map((module) => (
-          <div key={module.id} className="border-b border-gray-200">
-            <button
-              onClick={() => toggleModule(module.id)}
-              className={`flex w-full items-center justify-between p-3 text-left hover:bg-gray-50 ${
-                expandedModule === module.id ? 'bg-gray-50' : ''
-              }`}
-            >
-              <span className="text-sm font-medium text-gray-700">{module.display_name}</span>
-              <ChevronRight
-                className={`h-4 w-4 text-gray-500 transition-transform ${
-                  expandedModule === module.id ? 'rotate-90 transform' : ''
-                }`}
-              />
-            </button>
-
-            {expandedModule === module.id && module.children && (
-              <div className="pr-2 pb-2 pl-6">
-                {module.children.map((lesson) => (
-                  <div key={lesson.id}>
-                    <button
-                      onClick={() => toggleLesson(lesson.id)}
-                      className={`mb-1 flex w-full items-center justify-between rounded-sm p-2 text-left text-sm ${
-                        currentChapter === lesson.id
-                          ? 'bg-amber-50 text-amber-700'
-                          : 'text-gray-600 hover:bg-gray-50'
-                      }`}
-                    >
-                      <div className="flex items-center">
-                        <div className="mr-2 flex-shrink-0">
-                          <CompletionIcon node={lesson} />
-                        </div>
-                        <span>{lesson.display_name}</span>
-                      </div>
-                      {lesson.children && lesson.children.length > 0 && (
-                        <ChevronRight
-                          className={`h-4 w-4 text-gray-500 transition-transform ${
-                            expandedLessons.includes(lesson.id) ? 'rotate-90 transform' : ''
-                          }`}
-                        />
-                      )}
-                    </button>
-
-                    {lesson.children &&
-                      lesson.children.length > 0 &&
-                      expandedLessons.includes(lesson.id) && (
-                        <div className="pr-2 pb-2 pl-6">
-                          {lesson.children.map((sublesson) => (
-                            <button
-                              key={sublesson.id}
-                              onClick={() => selectLesson(sublesson.id)}
-                              className={`mb-1 flex w-full items-center rounded-sm p-2 text-left text-sm ${
-                                currentLesson === sublesson.id
-                                  ? 'bg-amber-50 text-amber-700'
-                                  : 'text-gray-600 hover:bg-gray-50'
-                              }`}
-                            >
-                              <div className="mr-2 flex-shrink-0">
-                                <CompletionIcon node={sublesson} />
-                              </div>
-                              <span>{sublesson.display_name}</span>
-                            </button>
-                          ))}
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        ))
-      )}
-    </div>
-  );
-};
diff --git a/components/edx-iframe/__tests__/edx-iframe.test.tsx b/components/edx-iframe/__tests__/edx-iframe.test.tsx
deleted file mode 100644
index 9465d8f..0000000
--- a/components/edx-iframe/__tests__/edx-iframe.test.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, waitFor, act, fireEvent } from '@testing-library/react';
-import { EdxIframe } from '../edx-iframe';
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
-import { CourseOutlineContext } from '@/contexts/course-outline-context';
-import { LOCALSTORAGE_KEYS } from '@/constants/storage';
-import '@testing-library/jest-dom';
-
-// Mock dependencies
-vi.mock('next/navigation', () => ({
-  useSearchParams: () => new URLSearchParams(),
-}));
-
-vi.mock('@/hooks/courses/use-edx-iframe', () => ({
-  useEdxIframe: () => ({
-    getIframeURL: vi.fn((_courseId, _tab, callback) => {
-      callback('https://apps.learn.example.com/discussions/course-v1:test+course/posts');
-    }),
-    findSequentialParent: vi.fn(() => null),
-  }),
-}));
-
-vi.mock('@/hooks/courses/useCourseNavigator', () => ({
-  default: () => ({
-    navigator: {
-      moveToPrevious: vi.fn(() => null),
-      moveToNext: vi.fn(() => null),
-      isPreviousHidden: vi.fn(() => true),
-      isNextHidden: vi.fn(() => true),
-      thirdLevelChildren: [],
-      currentIndex: 0,
-    },
-  }),
-}));
-
-vi.mock('@iblai/iblai-js/data-layer', () => ({
-  useLazyGetExamInfoQuery: () => [vi.fn()],
-}));
-
-vi.mock('use-debounce', () => ({
-  useDebouncedCallback: (fn: any) => fn,
-}));
-
-vi.mock('../timed-exam', () => ({
-  TimedExam: () => <div data-testid="timed-exam">Timed Exam</div>,
-}));
-
-describe('EdxIframe - JWT PostMessage', () => {
-  const mockSetIframeUrl = vi.fn();
-  const mockSetActiveTab = vi.fn();
-  const mockSetCurrentlyInExamSubsection = vi.fn();
-  const mockSetExamInfo = vi.fn();
-  const mockSelectLesson = vi.fn();
-  const mockRefetchCourseOutline = vi.fn();
-
-  const defaultContextValue = {
-    iframeUrl: 'https://apps.learn.example.com/discussions/course-v1:test+course/posts',
-    setIframeUrl: mockSetIframeUrl,
-    courseOutline: {
-      id: 'root',
-      block_id: 'root-block',
-      type: 'course',
-      display_name: 'Test Course',
-      children: [
-        {
-          id: 'test',
-          block_id: 'test-block',
-          type: 'chapter',
-          display_name: 'Test Chapter',
-          children: [],
-        },
-      ],
-    }, // Non-empty to trigger course load
-    setActiveTab: mockSetActiveTab,
-    activeTab: 'forum',
-    courseID: 'course-v1:test+course',
-    currentlyInExamSubsection: false,
-    setCurrentlyInExamSubsection: mockSetCurrentlyInExamSubsection,
-    examInfo: null,
-    setExamInfo: mockSetExamInfo,
-    refresher: null,
-    setRefresher: vi.fn(),
-  };
-
-  const defaultCourseOutlineValue = {
-    courseOutline: {} as any,
-    courseOutlineLoading: false,
-    expandedModule: '',
-    expandedLessons: [],
-    selectLesson: mockSelectLesson,
-    toggleModule: vi.fn(),
-    toggleLesson: vi.fn(),
-    currentChapter: '',
-    currentLesson: '',
-    course: null,
-    courseOutlineDrawerOpen: false,
-    setCourseOutlineDrawerOpen: vi.fn(),
-    currentUnitID: null,
-    refetchCourseOutline: mockRefetchCourseOutline,
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    localStorage.clear();
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  const renderEdxIframe = (
-    contextValue = defaultContextValue,
-    courseOutlineValue = defaultCourseOutlineValue,
-  ) => {
-    return render(
-      <EdxIframeContext.Provider value={contextValue}>
-        <CourseOutlineContext.Provider value={courseOutlineValue}>
-          <EdxIframe />
-        </CourseOutlineContext.Provider>
-      </EdxIframeContext.Provider>,
-    );
-  };
-
-  it('renders loading state initially', () => {
-    const { container } = renderEdxIframe();
-
-    // Component should render something (either loading or iframe)
-    expect(container.firstChild).toBeTruthy();
-  });
-
-  it('renders iframe after loading completes', async () => {
-    const { container } = renderEdxIframe();
-
-    await waitFor(
-      () => {
-        const iframe = container.querySelector('iframe');
-        expect(iframe).toBeInTheDocument();
-      },
-      { timeout: 1000 },
-    );
-  });
-
-  it('sets iframe src from context', async () => {
-    const { container } = renderEdxIframe();
-
-    await waitFor(
-      () => {
-        const iframe = container.querySelector('iframe');
-        expect(iframe).toBeInTheDocument();
-        expect(iframe?.getAttribute('src')).toBe(defaultContextValue.iframeUrl);
-      },
-      { timeout: 1000 },
-    );
-  });
-
-  it('responds to JWT ready message from iframe', async () => {
-    const testToken = 'test-jwt-token-12345';
-    localStorage.setItem(LOCALSTORAGE_KEYS.EDX_TOKEN_KEY, testToken);
-
-    const { container } = renderEdxIframe();
-
-    await waitFor(
-      () => {
-        const iframe = container.querySelector('iframe');
-        expect(iframe).toBeInTheDocument();
-      },
-      { timeout: 1000 },
-    );
-
-    const iframe = container.querySelector('iframe');
-    const mockPostMessage = vi.fn();
-
-    // Mock contentWindow
-    Object.defineProperty(iframe, 'contentWindow', {
-      value: { postMessage: mockPostMessage },
-      writable: true,
-      configurable: true,
-    });
-
-    // Simulate the MFE sending a ready message
-    await act(async () => {
-      window.dispatchEvent(
-        new MessageEvent('message', {
-          data: { type: 'auth.jwt.ready' },
-          origin: 'https://apps.learn.example.com',
-        }),
-      );
-    });
-
-    await waitFor(() => {
-      expect(mockPostMessage).toHaveBeenCalledWith(
-        {
-          type: 'auth.jwt.token',
-          edx_jwt_token: testToken,
-        },
-        'https://apps.learn.example.com',
-      );
-    });
-  });
-
-  it('does not send JWT token if not in localStorage', async () => {
-    // Don't set any token in localStorage
-    const { container } = renderEdxIframe();
-
-    await waitFor(
-      () => {
-        const iframe = container.querySelector('iframe');
-        expect(iframe).toBeInTheDocument();
-      },
-      { timeout: 1000 },
-    );
-
-    const iframe = container.querySelector('iframe');
-    const mockPostMessage = vi.fn();
-
-    Object.defineProperty(iframe, 'contentWindow', {
-      value: { postMessage: mockPostMessage },
-      writable: true,
-      configurable: true,
-    });
-
-    await act(async () => {
-      window.dispatchEvent(
-        new MessageEvent('message', {
-          data: { type: 'auth.jwt.ready' },
-          origin: 'https://apps.learn.example.com',
-        }),
-      );
-    });
-
-    // Should not have been called since no token
-    expect(mockPostMessage).not.toHaveBeenCalled();
-  });
-
-  it('calls refetchCourseOutline when iframe loads', async () => {
-    const { container } = renderEdxIframe();
-
-    await waitFor(
-      () => {
-        const iframe = container.querySelector('iframe');
-        expect(iframe).toBeInTheDocument();
-      },
-      { timeout: 1000 },
-    );
-
-    const iframe = container.querySelector('iframe');
-    expect(iframe).toBeTruthy();
-
-    await act(async () => {
-      fireEvent.load(iframe!);
-    });
-
-    expect(mockRefetchCourseOutline).toHaveBeenCalledWith(false);
-  });
-
-  it('rejects messages from wrong origin', async () => {
-    const testToken = 'test-jwt-token-12345';
-    localStorage.setItem(LOCALSTORAGE_KEYS.EDX_TOKEN_KEY, testToken);
-    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-
-    const { container } = renderEdxIframe();
-
-    await waitFor(
-      () => {
-        const iframe = container.querySelector('iframe');
-        expect(iframe).toBeInTheDocument();
-      },
-      { timeout: 1000 },
-    );
-
-    const iframe = container.querySelector('iframe');
-    const mockPostMessage = vi.fn();
-
-    Object.defineProperty(iframe, 'contentWindow', {
-      value: { postMessage: mockPostMessage },
-      writable: true,
-      configurable: true,
-    });
-
-    // Simulate message from wrong origin
-    await act(async () => {
-      window.dispatchEvent(
-        new MessageEvent('message', {
-          data: { type: 'auth.jwt.ready' },
-          origin: 'https://malicious-site.com',
-        }),
-      );
-    });
-
-    // Should not have been called due to origin mismatch
-    expect(mockPostMessage).not.toHaveBeenCalled();
-    expect(consoleErrorSpy).toHaveBeenCalledWith(
-      expect.stringContaining('Origin mismatch'),
-      expect.any(Object),
-    );
-
-    consoleErrorSpy.mockRestore();
-  });
-});
diff --git a/components/edx-iframe/__tests__/timed-exam.test.tsx b/components/edx-iframe/__tests__/timed-exam.test.tsx
deleted file mode 100644
index 886787c..0000000
--- a/components/edx-iframe/__tests__/timed-exam.test.tsx
+++ /dev/null
@@ -1,588 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from 'react';
-import _ from 'lodash';
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
-
-const mockUpdateExamAttempt = vi.fn();
-const mockStartExam = vi.fn();
-const mockGetExamInfo = vi.fn();
-
-vi.mock('@iblai/iblai-js/data-layer', () => ({
-  useUpdateExamAttemptMutation: vi.fn(() => [mockUpdateExamAttempt, { isLoading: false }]),
-  useStartExamMutation: vi.fn(() => [mockStartExam, { isLoading: false }]),
-  useLazyGetExamInfoQuery: vi.fn(() => [mockGetExamInfo]),
-}));
-
-vi.mock('lodash', () => ({
-  default: {
-    isEmpty: vi.fn((val: any) => {
-      if (val === null || val === undefined) return true;
-      if (typeof val === 'object' && !Array.isArray(val)) return Object.keys(val).length === 0;
-      if (Array.isArray(val)) return val.length === 0;
-      return false;
-    }),
-  },
-}));
-
-import { TimedExam } from '../timed-exam';
-
-const buildContextValue = (overrides = {}) => ({
-  iframeUrl: '',
-  setIframeUrl: vi.fn(),
-  courseOutline: {} as any,
-  setActiveTab: vi.fn(),
-  activeTab: '',
-  courseID: 'course-v1:test+101',
-  currentlyInExamSubsection: false,
-  setCurrentlyInExamSubsection: vi.fn(),
-  examInfo: null,
-  setExamInfo: vi.fn(),
-  refresher: null,
-  setRefresher: vi.fn(),
-  ...overrides,
-});
-
-const noAttemptExamInfo = {
-  exam: {
-    id: 42,
-    exam_name: 'Midterm Exam',
-    time_limit_mins: 90,
-    course_id: 'course-v1:test+101',
-    content_id: 'block-v1:test+101+type@sequential+block@abc',
-    attempt: {},
-  },
-  active_attempt: {},
-};
-
-const startedExamInfo = {
-  exam: {
-    id: 42,
-    exam_name: 'Midterm Exam',
-    time_limit_mins: 90,
-    course_id: 'course-v1:test+101',
-    content_id: 'block-v1:test+101+type@sequential+block@abc',
-    attempt: {
-      attempt_id: 'attempt-1',
-      attempt_status: 'started',
-      time_remaining_seconds: 5400,
-      low_threshold_sec: 3600,
-      critically_low_threshold_sec: 1800,
-    },
-  },
-  active_attempt: { attempt_id: 'attempt-1' },
-};
-
-const submittedExamInfo = {
-  exam: {
-    id: 42,
-    exam_name: 'Midterm Exam',
-    time_limit_mins: 90,
-    course_id: 'course-v1:test+101',
-    content_id: 'block-v1:test+101+type@sequential+block@abc',
-    attempt: {
-      attempt_id: 'attempt-1',
-      attempt_status: 'submitted',
-    },
-  },
-  active_attempt: null,
-};
-
-const renderTimedExam = (contextOverrides = {}) => {
-  const contextValue = buildContextValue(contextOverrides);
-  return render(
-    <EdxIframeContext.Provider value={contextValue}>
-      <TimedExam />
-    </EdxIframeContext.Provider>,
-  );
-};
-
-describe('TimedExam', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.useFakeTimers();
-    // Re-apply lodash mock implementation
-    vi.mocked(_.isEmpty).mockImplementation((val: any) => {
-      if (val === null || val === undefined) return true;
-      if (typeof val === 'object' && !Array.isArray(val)) return Object.keys(val).length === 0;
-      if (Array.isArray(val)) return val.length === 0;
-      return false;
-    });
-    mockUpdateExamAttempt.mockReturnValue({
-      unwrap: vi.fn().mockResolvedValue({}),
-    });
-    mockStartExam.mockReturnValue({
-      unwrap: vi.fn().mockResolvedValue({}),
-    });
-    mockGetExamInfo.mockResolvedValue({ data: startedExamInfo });
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('returns null when examInfo is null', () => {
-    const { container } = renderTimedExam({ examInfo: null });
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('returns null when exam is submitted', () => {
-    const { container } = renderTimedExam({ examInfo: submittedExamInfo });
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders ready-to-start UI when no attempt exists', () => {
-    renderTimedExam({ examInfo: noAttemptExamInfo });
-    expect(screen.getByText(/Midterm Exam is a Timed Exam/)).toBeInTheDocument();
-  });
-
-  it('renders time limit in hours and minutes format (mixed)', () => {
-    const examWith90Mins = {
-      ...noAttemptExamInfo,
-      exam: { ...noAttemptExamInfo.exam, time_limit_mins: 90 },
-    };
-    renderTimedExam({ examInfo: examWith90Mins });
-    // Use getAllByText since the time appears in multiple elements
-    const elements = screen.getAllByText(/1 hour 30 minutes/);
-    expect(elements.length).toBeGreaterThan(0);
-  });
-
-  it('renders time limit in hours only (plural)', () => {
-    const examWith120Mins = {
-      ...noAttemptExamInfo,
-      exam: { ...noAttemptExamInfo.exam, time_limit_mins: 120 },
-    };
-    renderTimedExam({ examInfo: examWith120Mins });
-    const elements = screen.getAllByText(/2 hours/);
-    expect(elements.length).toBeGreaterThan(0);
-  });
-
-  it('renders time limit in hours only (singular)', () => {
-    const examWith60Mins = {
-      ...noAttemptExamInfo,
-      exam: { ...noAttemptExamInfo.exam, time_limit_mins: 60 },
-    };
-    renderTimedExam({ examInfo: examWith60Mins });
-    const elements = screen.getAllByText(/1 hour/);
-    expect(elements.length).toBeGreaterThan(0);
-  });
-
-  it('renders time limit in minutes only (plural)', () => {
-    const examWith30Mins = {
-      ...noAttemptExamInfo,
-      exam: { ...noAttemptExamInfo.exam, time_limit_mins: 30 },
-    };
-    renderTimedExam({ examInfo: examWith30Mins });
-    const elements = screen.getAllByText(/30 minutes/);
-    expect(elements.length).toBeGreaterThan(0);
-  });
-
-  it('renders time limit in minutes only (singular)', () => {
-    const examWith1Min = {
-      ...noAttemptExamInfo,
-      exam: { ...noAttemptExamInfo.exam, time_limit_mins: 1 },
-    };
-    renderTimedExam({ examInfo: examWith1Min });
-    const elements = screen.getAllByText(/1 minute/);
-    expect(elements.length).toBeGreaterThan(0);
-  });
-
-  it('renders start exam button', () => {
-    renderTimedExam({ examInfo: noAttemptExamInfo });
-    // The text appears in button and in sr-only div, use getAllByText
-    const elements = screen.getAllByText(/I am ready to start this timed exam/);
-    expect(elements.length).toBeGreaterThan(0);
-  });
-
-  it('renders additional time allowance section', () => {
-    renderTimedExam({ examInfo: noAttemptExamInfo });
-    expect(screen.getByText(/Can I request additional time/)).toBeInTheDocument();
-  });
-
-  it('calls handleStartExam when start button clicked', async () => {
-    mockStartExam.mockReturnValue({ unwrap: vi.fn().mockResolvedValue({}) });
-    mockGetExamInfo.mockResolvedValue({ data: startedExamInfo });
-    renderTimedExam({ examInfo: noAttemptExamInfo });
-
-    // Get the actual button (not sr-only text)
-    const startBtn = screen.getByRole('button', { name: /I am ready to start this timed exam/ });
-    await act(async () => {
-      fireEvent.click(startBtn);
-    });
-    expect(mockStartExam).toHaveBeenCalled();
-  });
-
-  it('handles start exam error gracefully', async () => {
-    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    mockStartExam.mockReturnValue({
-      unwrap: vi.fn().mockRejectedValue(new Error('Start failed')),
-    });
-    renderTimedExam({ examInfo: noAttemptExamInfo });
-
-    const startBtn = screen.getByRole('button', { name: /I am ready to start this timed exam/ });
-    await act(async () => {
-      fireEvent.click(startBtn);
-    });
-    expect(consoleSpy).toHaveBeenCalledWith('Failed to start exam:', expect.any(Error));
-    consoleSpy.mockRestore();
-  });
-
-  it('renders timer UI when exam is started', () => {
-    renderTimedExam({ examInfo: startedExamInfo });
-    expect(screen.getByText(/You are taking "Midterm Exam" as a timed exam/)).toBeInTheDocument();
-  });
-
-  it('shows time remaining in hours:mm:ss format', () => {
-    renderTimedExam({ examInfo: startedExamInfo });
-    // 5400 seconds = 1:30:00
-    expect(screen.getByText('1:30:00')).toBeInTheDocument();
-  });
-
-  it('shows time remaining in mm:ss format for sub-hour', () => {
-    const examWithShortTime = {
-      ...startedExamInfo,
-      exam: {
-        ...startedExamInfo.exam,
-        attempt: {
-          ...startedExamInfo.exam.attempt,
-          time_remaining_seconds: 305,
-        },
-      },
-    };
-    renderTimedExam({ examInfo: examWithShortTime });
-    // 305 seconds = 5:05
-    expect(screen.getByText('5:05')).toBeInTheDocument();
-  });
-
-  it('shows End My Exam button when exam is started', () => {
-    renderTimedExam({ examInfo: startedExamInfo });
-    expect(screen.getByText('End My Exam')).toBeInTheDocument();
-  });
-
-  it('shows Show more link', () => {
-    renderTimedExam({ examInfo: startedExamInfo });
-    expect(screen.getByText('Show more')).toBeInTheDocument();
-  });
-
-  it('toggles to full instructions when Show more is clicked', () => {
-    renderTimedExam({ examInfo: startedExamInfo });
-    fireEvent.click(screen.getByText('Show more'));
-    expect(screen.getByText('Show less')).toBeInTheDocument();
-    expect(screen.getByText(/To receive credit for problems/)).toBeInTheDocument();
-  });
-
-  it('toggles back to short instructions when Show less is clicked', () => {
-    renderTimedExam({ examInfo: startedExamInfo });
-    fireEvent.click(screen.getByText('Show more'));
-    fireEvent.click(screen.getByText('Show less'));
-    expect(screen.getByText('Show more')).toBeInTheDocument();
-  });
-
-  it('opens end exam confirmation modal when End My Exam is clicked', () => {
-    renderTimedExam({ examInfo: startedExamInfo });
-    fireEvent.click(screen.getByText('End My Exam'));
-    expect(
-      screen.getByText(/Are you sure that you want to submit your timed exam/),
-    ).toBeInTheDocument();
-  });
-
-  it('closes end exam modal when Cancel is clicked', () => {
-    renderTimedExam({ examInfo: startedExamInfo });
-    fireEvent.click(screen.getByText('End My Exam'));
-    expect(screen.getByText(/Are you sure/)).toBeInTheDocument();
-    fireEvent.click(screen.getByText(/No, I want to continue working/));
-    expect(screen.queryByText(/Are you sure/)).not.toBeInTheDocument();
-  });
-
-  it('submits exam when confirm end exam is clicked', async () => {
-    mockUpdateExamAttempt.mockReturnValue({ unwrap: vi.fn().mockResolvedValue({}) });
-    mockGetExamInfo.mockResolvedValue({ data: submittedExamInfo });
-
-    renderTimedExam({ examInfo: startedExamInfo });
-    fireEvent.click(screen.getByText('End My Exam'));
-
-    await act(async () => {
-      fireEvent.click(screen.getByText(/Yes, submit my timed exam/));
-    });
-    expect(mockUpdateExamAttempt).toHaveBeenCalledWith(
-      expect.objectContaining({ action: 'submit' }),
-    );
-  });
-
-  it('handles submit exam error gracefully', async () => {
-    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    mockUpdateExamAttempt.mockReturnValue({
-      unwrap: vi.fn().mockRejectedValue(new Error('Submit failed')),
-    });
-
-    renderTimedExam({ examInfo: startedExamInfo });
-    fireEvent.click(screen.getByText('End My Exam'));
-
-    await act(async () => {
-      fireEvent.click(screen.getByText(/Yes, submit my timed exam/));
-    });
-    expect(consoleSpy).toHaveBeenCalledWith('Failed to submit exam:', expect.any(Error));
-    consoleSpy.mockRestore();
-  });
-
-  it('shows normal time style (blue) when time is high', () => {
-    const examWithHighTime = {
-      ...startedExamInfo,
-      exam: {
-        ...startedExamInfo.exam,
-        attempt: {
-          ...startedExamInfo.exam.attempt,
-          time_remaining_seconds: 10000,
-          low_threshold_sec: 3600,
-          critically_low_threshold_sec: 1800,
-        },
-      },
-    };
-    const { container } = renderTimedExam({ examInfo: examWithHighTime });
-    expect(container.querySelector('.bg-blue-50')).toBeInTheDocument();
-  });
-
-  it('shows yellow style when time is low', () => {
-    const examWithLowTime = {
-      ...startedExamInfo,
-      exam: {
-        ...startedExamInfo.exam,
-        attempt: {
-          ...startedExamInfo.exam.attempt,
-          time_remaining_seconds: 2000,
-          low_threshold_sec: 3600,
-          critically_low_threshold_sec: 1800,
-        },
-      },
-    };
-    const { container } = renderTimedExam({ examInfo: examWithLowTime });
-    expect(container.querySelector('.bg-yellow-50')).toBeInTheDocument();
-  });
-
-  it('shows red style when time is critically low', () => {
-    const examWithCriticalTime = {
-      ...startedExamInfo,
-      exam: {
-        ...startedExamInfo.exam,
-        attempt: {
-          ...startedExamInfo.exam.attempt,
-          time_remaining_seconds: 500,
-          low_threshold_sec: 3600,
-          critically_low_threshold_sec: 1800,
-        },
-      },
-    };
-    const { container } = renderTimedExam({ examInfo: examWithCriticalTime });
-    expect(container.querySelector('.bg-red-50')).toBeInTheDocument();
-  });
-
-  it('countdown timer decrements time', async () => {
-    renderTimedExam({ examInfo: startedExamInfo });
-    expect(screen.getByText('1:30:00')).toBeInTheDocument();
-
-    await act(async () => {
-      vi.advanceTimersByTime(1000);
-    });
-
-    expect(screen.getByText('1:29:59')).toBeInTheDocument();
-  });
-
-  it('initializes timer from examInfo when started', () => {
-    const examWithSpecificTime = {
-      ...startedExamInfo,
-      exam: {
-        ...startedExamInfo.exam,
-        attempt: {
-          ...startedExamInfo.exam.attempt,
-          time_remaining_seconds: 3723,
-        },
-      },
-    };
-    renderTimedExam({ examInfo: examWithSpecificTime });
-    // 3723 seconds = 1:02:03
-    expect(screen.getByText('1:02:03')).toBeInTheDocument();
-  });
-
-  it('auto-submits when timer reaches zero', async () => {
-    const examWithShortTime = {
-      ...startedExamInfo,
-      exam: {
-        ...startedExamInfo.exam,
-        attempt: {
-          ...startedExamInfo.exam.attempt,
-          time_remaining_seconds: 1,
-        },
-      },
-    };
-    const mockUnwrap = vi.fn().mockResolvedValue({});
-    mockUpdateExamAttempt.mockReturnValue({ unwrap: mockUnwrap });
-
-    renderTimedExam({ examInfo: examWithShortTime });
-
-    await act(async () => {
-      vi.advanceTimersByTime(1000);
-    });
-    // Flush all pending promises
-    await act(async () => {
-      await Promise.resolve();
-    });
-
-    expect(mockUpdateExamAttempt).toHaveBeenCalledWith(
-      expect.objectContaining({ action: 'submit' }),
-    );
-  });
-
-  it('handles auto-submit error gracefully', async () => {
-    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    const examWithShortTime = {
-      ...startedExamInfo,
-      exam: {
-        ...startedExamInfo.exam,
-        attempt: {
-          ...startedExamInfo.exam.attempt,
-          time_remaining_seconds: 1,
-        },
-      },
-    };
-    const mockUnwrap = vi.fn().mockRejectedValue(new Error('Auto-submit failed'));
-    mockUpdateExamAttempt.mockReturnValue({ unwrap: mockUnwrap });
-
-    renderTimedExam({ examInfo: examWithShortTime });
-
-    await act(async () => {
-      vi.advanceTimersByTime(1000);
-    });
-    await act(async () => {
-      await Promise.resolve();
-    });
-
-    expect(consoleSpy).toHaveBeenCalledWith('Failed to auto-submit exam:', expect.any(Error));
-    consoleSpy.mockRestore();
-  });
-
-  it('does not run countdown when exam is not started', async () => {
-    renderTimedExam({ examInfo: noAttemptExamInfo });
-
-    await act(async () => {
-      vi.advanceTimersByTime(5000);
-    });
-
-    // Timer should not have been running - no timer display shown
-    expect(screen.queryByText(/End My Exam/)).not.toBeInTheDocument();
-  });
-
-  it('handles updateExamInfo call in updateExamInfo method', async () => {
-    mockGetExamInfo.mockResolvedValue({ data: submittedExamInfo });
-    mockUpdateExamAttempt.mockReturnValue({ unwrap: vi.fn().mockResolvedValue({}) });
-
-    renderTimedExam({ examInfo: startedExamInfo });
-    fireEvent.click(screen.getByText('End My Exam'));
-
-    await act(async () => {
-      fireEvent.click(screen.getByText(/Yes, submit my timed exam/));
-      await Promise.resolve();
-    });
-
-    expect(mockGetExamInfo).toHaveBeenCalled();
-  });
-
-  it('handles updateExamInfo with null data', async () => {
-    mockGetExamInfo.mockResolvedValue({ data: null });
-    mockUpdateExamAttempt.mockReturnValue({ unwrap: vi.fn().mockResolvedValue({}) });
-    const mockSetExamInfo = vi.fn();
-
-    renderTimedExam({ examInfo: startedExamInfo, setExamInfo: mockSetExamInfo });
-    fireEvent.click(screen.getByText('End My Exam'));
-
-    await act(async () => {
-      fireEvent.click(screen.getByText(/Yes, submit my timed exam/));
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(mockSetExamInfo).toHaveBeenCalledWith(null);
-  });
-
-  it('disables start button when starting exam', async () => {
-    mockStartExam.mockReturnValue({
-      unwrap: vi.fn().mockImplementation(() => new Promise<void>(() => {})),
-    });
-
-    renderTimedExam({ examInfo: noAttemptExamInfo });
-    const startBtn = screen.getByRole('button', { name: /I am ready to start this timed exam/ });
-
-    act(() => {
-      fireEvent.click(startBtn);
-    });
-
-    // After click, button should be disabled due to isReadyToStart state
-    expect(startBtn).toBeDisabled();
-  });
-
-  it('renders with default threshold values when not provided', () => {
-    const examWithNoThresholds = {
-      ...startedExamInfo,
-      exam: {
-        ...startedExamInfo.exam,
-        attempt: {
-          ...startedExamInfo.exam.attempt,
-          time_remaining_seconds: 100,
-          low_threshold_sec: undefined,
-          critically_low_threshold_sec: undefined,
-        },
-      },
-    };
-    const { container } = renderTimedExam({ examInfo: examWithNoThresholds });
-    // With default thresholds, 100 seconds should be critically low (< 3600)
-    expect(container.querySelector('.bg-red-50')).toBeInTheDocument();
-  });
-
-  it('shows hour:min:sec format correctly for zero seconds', () => {
-    const examWithZeroTime = {
-      ...startedExamInfo,
-      exam: {
-        ...startedExamInfo.exam,
-        attempt: {
-          ...startedExamInfo.exam.attempt,
-          time_remaining_seconds: 3600,
-        },
-      },
-    };
-    renderTimedExam({ examInfo: examWithZeroTime });
-    // 3600 seconds = 1:00:00
-    expect(screen.getByText('1:00:00')).toBeInTheDocument();
-  });
-
-  it('handles exam with no active_attempt', () => {
-    // When both attempt and active_attempt are empty, should show ready-to-start UI
-    vi.mocked(_.isEmpty).mockReturnValue(true);
-    const examWithNoActive = {
-      ...noAttemptExamInfo,
-      active_attempt: null,
-    };
-    renderTimedExam({ examInfo: examWithNoActive });
-    expect(screen.getByText(/Midterm Exam is a Timed Exam/)).toBeInTheDocument();
-  });
-
-  it('shows "Starting exam..." text when isStartingExam is true', async () => {
-    // @ts-ignore
-    const { useStartExamMutation } = await import('@iblai/iblai-js/data-layer');
-    vi.mocked(useStartExamMutation as any).mockReturnValue([mockStartExam, { isLoading: true }]);
-    renderTimedExam({ examInfo: noAttemptExamInfo });
-    const elements = screen.getAllByText(/Starting exam.../);
-    expect(elements.length).toBeGreaterThan(0);
-  });
-
-  it('shows "Submitting..." text when isSubmittingExam is true', async () => {
-    // @ts-ignore
-    const { useUpdateExamAttemptMutation } = await import('@iblai/iblai-js/data-layer');
-    vi.mocked(useUpdateExamAttemptMutation as any).mockReturnValue([
-      mockUpdateExamAttempt,
-      { isLoading: true },
-    ]);
-    renderTimedExam({ examInfo: startedExamInfo });
-    fireEvent.click(screen.getByText('End My Exam'));
-    expect(screen.getByText('Submitting...')).toBeInTheDocument();
-  });
-});
diff --git a/components/edx-iframe/edx-iframe.tsx b/components/edx-iframe/edx-iframe.tsx
deleted file mode 100644
index d5ecd82..0000000
--- a/components/edx-iframe/edx-iframe.tsx
+++ /dev/null
@@ -1,251 +0,0 @@
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
-import { useContext, useEffect, useState, useRef } from 'react';
-import { useSearchParams } from 'next/navigation';
-import _ from 'lodash';
-import { useEdxIframe } from '@/hooks/courses/use-edx-iframe';
-import { ChevronRight, Loader2 } from 'lucide-react';
-import { useDebouncedCallback } from 'use-debounce';
-import useCourseNavigator from '@/hooks/courses/useCourseNavigator';
-import { CourseOutlineContext } from '@/contexts/course-outline-context';
-// @ts-ignore
-import { useLazyGetExamInfoQuery } from '@iblai/iblai-js/data-layer';
-import { TimedExam } from './timed-exam';
-import { LOCALSTORAGE_KEYS } from '@/constants/storage';
-import { cn } from '@/lib/utils';
-
-export const EdxIframe = () => {
-  const {
-    courseOutline,
-    activeTab,
-    courseID,
-    setCurrentlyInExamSubsection,
-    setExamInfo,
-    examInfo,
-    iframeUrl,
-    setIframeUrl,
-    refresher,
-  } = useContext(EdxIframeContext);
-  const { selectLesson, currentUnitID, refetchCourseOutline } = useContext(CourseOutlineContext);
-
-  const searchParams = useSearchParams();
-  const [fetchingIframeData, setFetchingIframeData] = useState(true);
-  const { getIframeURL, findSequentialParent } = useEdxIframe();
-  const [iframeLoaded, setIframeLoaded] = useState(false);
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const { navigator } = useCourseNavigator(courseOutline, currentUnitID || courseID);
-
-  const [getExamInfo] = useLazyGetExamInfoQuery();
-
-  const handleLoadCourse = useDebouncedCallback(() => {
-    if (!_.isEmpty(courseOutline)) {
-      setExamInfo(null);
-      setCurrentlyInExamSubsection(false);
-      setFetchingIframeData(true);
-      if (activeTab === 'course') {
-        getIframeURL(courseID, courseOutline, async (url) => {
-          try {
-            const courseOutlineData = Array.isArray(courseOutline?.children)
-              ? courseOutline.children[
-                  navigator?.thirdLevelChildren[navigator?.currentIndex]?.chapterIndex
-                ]
-              : courseOutline;
-            const sequentialParentID = findSequentialParent(
-              courseOutlineData,
-              currentUnitID || courseID,
-            );
-            const sequentialParent = courseOutlineData?.children?.find(
-              (block) => block.id === sequentialParentID,
-            );
-            setCurrentlyInExamSubsection(sequentialParent?.special_exam_info || false);
-            if (sequentialParent?.special_exam_info) {
-              const _examInfo = await getExamInfo(
-                {
-                  course_id: courseID,
-                  content_id: sequentialParent.id,
-                  is_learning_mfe: true,
-                },
-                false,
-              );
-              setExamInfo(_examInfo?.data || null);
-            }
-          } catch (error) {
-            console.error(JSON.stringify(error));
-            setCurrentlyInExamSubsection(false);
-          }
-          //setIsExamSubsection(url.includes('exam'));
-          setIframeUrl(url);
-          setFetchingIframeData(false);
-        });
-      } else {
-        getIframeURL(courseID, activeTab, (url) => {
-          setIframeUrl(url);
-          setFetchingIframeData(false);
-        });
-      }
-    }
-  }, 300);
-
-  const navigateEdxURL = (unitID: string) => {
-    selectLesson(unitID);
-  };
-
-  const handlePreviousBtnClick = () => {
-    const target = navigator.moveToPrevious();
-    if (!target) {
-      return;
-    }
-    setTimeout(() => {
-      navigateEdxURL(target.id);
-    }, 100);
-  };
-
-  const handleNextBtnClick = () => {
-    const target = navigator.moveToNext();
-    if (!target) {
-      return;
-    }
-    setTimeout(() => {
-      navigateEdxURL(target.id);
-    }, 100);
-  };
-
-  // Store iframeUrl in a ref so we can access it in the message handler
-  const iframeUrlRef = useRef(iframeUrl);
-  useEffect(() => {
-    iframeUrlRef.current = iframeUrl;
-  }, [iframeUrl]);
-
-  // Store activeTab in a ref so we can access it in the message handler
-  const activeTabRef = useRef(activeTab);
-  useEffect(() => {
-    activeTabRef.current = activeTab;
-  }, [activeTab]);
-
-  // Listen for ready message from MFE - set up once and always active
-  // Accept messages from any origin, then validate inside the handler
-  // This listener is stable and doesn't depend on changing values
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      // Type guard for message data
-      if (!event.data || typeof event.data !== 'object') {
-        return;
-      }
-
-      // Check if this is a ready message from the MFE
-      if (event.data?.type === 'auth.jwt.ready') {
-        const currentIframeUrl = iframeUrlRef.current;
-        const currentActiveTab = activeTabRef.current;
-
-        if (currentIframeUrl) {
-          try {
-            const iframeOrigin = new URL(currentIframeUrl).origin;
-            if (event.origin !== iframeOrigin) {
-              console.error('[JWT PostMessage] Origin mismatch - rejecting message', {
-                expected: iframeOrigin,
-                received: event.origin,
-              });
-              return;
-            }
-          } catch (error) {
-            console.error('[JWT PostMessage] Failed to validate origin:', {
-              error: error instanceof Error ? error.message : String(error),
-              iframeUrl: currentIframeUrl,
-            });
-            return;
-          }
-        }
-
-        // Send JWT token now that MFE is ready - inline to avoid dependency
-        const isMFETab =
-          currentActiveTab === 'progress' ||
-          currentActiveTab === 'dates' ||
-          currentActiveTab === 'forum';
-        if (!isMFETab || !iframeRef.current || !currentIframeUrl) return;
-
-        try {
-          const jwtToken = localStorage.getItem(LOCALSTORAGE_KEYS.EDX_TOKEN_KEY);
-          if (!jwtToken) return;
-
-          const iframeOrigin = new URL(currentIframeUrl).origin;
-          const message = { type: 'auth.jwt.token', edx_jwt_token: jwtToken };
-          iframeRef.current.contentWindow?.postMessage(message, iframeOrigin);
-        } catch (error) {
-          console.error('[JWT PostMessage] Failed to send token in response to ready message:', {
-            error: error instanceof Error ? error.message : String(error),
-            iframeUrl: currentIframeUrl,
-          });
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, []); // Empty deps - listener never recreated, reads from refs
-
-  useEffect(() => {
-    handleLoadCourse();
-  }, [courseOutline?.id, searchParams, courseID, activeTab, refresher]);
-  return (
-    <>
-      {fetchingIframeData ? (
-        <div className="relative inset-0 z-50 flex h-full items-center justify-center bg-white">
-          <Loader2 className="h-10 w-10 animate-spin" />
-        </div>
-      ) : (
-        <div className={cn('w-full p-6', `active-tab-${activeTab} course-edx-iframe-container`)}>
-          {examInfo && <TimedExam />}
-          {(!examInfo || (examInfo?.exam && !_.isEmpty(examInfo?.exam?.attempt))) && (
-            <iframe
-              ref={iframeRef}
-              src={iframeUrl}
-              onLoad={() => {
-                setFetchingIframeData(false);
-                setIframeLoaded(true);
-                refetchCourseOutline(false);
-              }}
-              id="edx-iframe"
-              title="Forum InnerWare"
-              sandbox="allow-modals allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox allow-downloads"
-              frameBorder={0}
-              style={{ width: '100%', height: 'calc(100vh - 100px - 62px)' }}
-              allowFullScreen={true}
-              allow="microphone *; camera *; midi *; geolocation *; encrypted-media *"
-            />
-          )}
-          {iframeLoaded &&
-            activeTab === 'course' &&
-            !fetchingIframeData &&
-            (!navigator.isPreviousHidden() || !navigator.isNextHidden()) && (
-              <div
-                className={`flex ${
-                  navigator.isPreviousHidden() ? 'justify-end' : 'justify-between'
-                } mt-4 items-center`}
-              >
-                {!navigator.isPreviousHidden() && (
-                  <button
-                    onClick={handlePreviousBtnClick}
-                    className="flex items-center rounded-sm border border-gray-300 px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50"
-                  >
-                    <ChevronRight className="mr-1 h-4 w-4 rotate-180 transform" />
-                    Previous Lesson
-                  </button>
-                )}
-                {!navigator.isNextHidden() && (
-                  <button
-                    onClick={handleNextBtnClick}
-                    className="flex items-center rounded-sm bg-gradient-to-r from-[var(--button-primary-gradient-from)] to-[var(--button-primary-gradient-to)] px-4 py-2 text-sm font-medium text-[var(--button-primary-text)] hover:opacity-[var(--button-primary-hover-opacity)]"
-                  >
-                    Next Lesson
-                    <ChevronRight className="ml-1 h-4 w-4" />
-                  </button>
-                )}
-              </div>
-            )}
-        </div>
-      )}
-    </>
-  );
-};
diff --git a/components/edx-iframe/timed-exam.tsx b/components/edx-iframe/timed-exam.tsx
deleted file mode 100644
index 8fc9424..0000000
--- a/components/edx-iframe/timed-exam.tsx
+++ /dev/null
@@ -1,326 +0,0 @@
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
-import { useContext, useState, useEffect } from 'react';
-import { Clock, AlertCircle } from 'lucide-react';
-import _ from 'lodash';
-import {
-  // @ts-ignore
-  useUpdateExamAttemptMutation,
-  // @ts-ignore
-  useStartExamMutation,
-  // @ts-ignore
-  useLazyGetExamInfoQuery,
-} from '@iblai/iblai-js/data-layer';
-
-export const TimedExam = () => {
-  const { examInfo, setExamInfo, setRefresher } = useContext(EdxIframeContext);
-  const [isReadyToStart, setIsReadyToStart] = useState(false);
-  const [timeRemaining, setTimeRemaining] = useState<number>(0);
-  const [showFullInstructions, setShowFullInstructions] = useState(false);
-  const [showEndExamModal, setShowEndExamModal] = useState(false);
-
-  const [updateExamAttempt, { isLoading: isSubmittingExam }] = useUpdateExamAttemptMutation();
-  const [startExam, { isLoading: isStartingExam }] = useStartExamMutation();
-  const [getExamInfo] = useLazyGetExamInfoQuery();
-
-  // Initialize timer when exam is started
-  useEffect(() => {
-    if (
-      examInfo?.exam?.attempt?.attempt_status === 'started' &&
-      examInfo?.exam?.attempt?.time_remaining_seconds
-    ) {
-      setTimeRemaining(Math.floor(examInfo.exam.attempt.time_remaining_seconds));
-    }
-  }, [examInfo]);
-
-  // Countdown timer
-  useEffect(() => {
-    if (timeRemaining > 0 && examInfo?.exam?.attempt?.attempt_status === 'started') {
-      const timer = setInterval(() => {
-        setTimeRemaining((prev) => {
-          const newTime = prev > 0 ? prev - 1 : 0;
-
-          // Auto-submit when timer reaches zero
-          if (newTime === 0 && examInfo?.exam?.id) {
-            updateExamAttempt({
-              attemptID: examInfo.exam.attempt.attempt_id,
-              action: 'submit',
-            })
-              .unwrap()
-              .then(() => {
-                updateExamInfo();
-                setRefresher(new Date());
-              })
-              .catch((error: any) => {
-                console.error('Failed to auto-submit exam:', error);
-              });
-          }
-
-          return newTime;
-        });
-      }, 1000);
-
-      return () => clearInterval(timer);
-    }
-  }, [
-    timeRemaining,
-    examInfo?.exam?.attempt?.attempt_status,
-    examInfo?.exam?.attempt?.attempt_id,
-    updateExamAttempt,
-  ]);
-
-  if (!examInfo) {
-    return null;
-  }
-
-  // Format time remaining for display
-  const formatTimeRemaining = (seconds: number) => {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    const secs = seconds % 60;
-
-    if (hours > 0) {
-      return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-    } else {
-      return `${minutes}:${secs.toString().padStart(2, '0')}`;
-    }
-  };
-
-  const { exam } = examInfo;
-  const timeLimitHours = Math.floor(exam.time_limit_mins / 60);
-  const timeLimitMinutes = exam.time_limit_mins % 60;
-
-  const formatTimeLimit = () => {
-    if (timeLimitHours > 0 && timeLimitMinutes > 0) {
-      return `${timeLimitHours} hour${timeLimitHours > 1 ? 's' : ''} ${timeLimitMinutes} minute${timeLimitMinutes > 1 ? 's' : ''}`;
-    } else if (timeLimitHours > 0) {
-      return `${timeLimitHours} hour${timeLimitHours > 1 ? 's' : ''}`;
-    } else {
-      return `${timeLimitMinutes} minute${timeLimitMinutes > 1 ? 's' : ''}`;
-    }
-  };
-
-  const updateExamInfo = async () => {
-    const updatedExamInfo = await getExamInfo(
-      {
-        course_id: examInfo.exam.course_id,
-        content_id: examInfo.exam.content_id,
-        is_learning_mfe: true,
-      },
-      false,
-    );
-    setExamInfo(updatedExamInfo?.data || null);
-  };
-
-  const handleStartExam = async () => {
-    try {
-      setIsReadyToStart(true);
-
-      if (examInfo?.exam?.id) {
-        const formData = new FormData();
-        formData.append('exam_id', examInfo.exam.id.toString());
-        formData.append('start_clock', 'true');
-        await startExam(formData).unwrap();
-        await updateExamInfo();
-        console.log('Exam started successfully');
-        // Optionally refresh exam info to get the updated attempt data
-      }
-    } catch (error) {
-      console.error('Failed to start exam:', error);
-      setIsReadyToStart(false); // Reset the state if starting fails
-      // Handle error - maybe show an error message to user
-    }
-  };
-
-  const handleEndExam = () => {
-    setShowEndExamModal(true);
-  };
-
-  const handleConfirmEndExam = async () => {
-    try {
-      if (examInfo?.exam?.id) {
-        await updateExamAttempt({
-          attemptID: examInfo.exam.attempt.attempt_id,
-          action: 'submit',
-        }).unwrap();
-
-        console.log('Exam submitted successfully');
-        setShowEndExamModal(false);
-        await updateExamInfo();
-        setRefresher(new Date());
-        // Optionally refresh exam info or redirect user
-      }
-    } catch (error) {
-      console.error('Failed to submit exam:', error);
-      // Handle error - maybe show an error message to user
-    }
-  };
-
-  const handleCancelEndExam = () => {
-    setShowEndExamModal(false);
-  };
-
-  // Show timer UI when exam is started
-  if (examInfo?.exam?.attempt?.attempt_status === 'started') {
-    const isLowTime = timeRemaining <= (examInfo.exam.attempt.low_threshold_sec || 14400);
-    const isCriticalTime =
-      timeRemaining <= (examInfo.exam.attempt.critically_low_threshold_sec || 3600);
-
-    return (
-      <div className="mx-auto max-w-4xl px-6 pt-6">
-        <div
-          className={`rounded-lg border p-4 ${
-            isCriticalTime
-              ? 'border-red-200 bg-red-50'
-              : isLowTime
-                ? 'border-yellow-200 bg-yellow-50'
-                : 'border-blue-200 bg-blue-50'
-          }`}
-        >
-          <div className="mb-4 text-sm text-gray-600">
-            {showFullInstructions ? (
-              <>
-                You are taking "{examInfo.exam.exam_name}" as a timed exam. The timer below shows
-                the time remaining in the exam. To receive credit for problems, you must select
-                "Submit" for each problem before you select "End My Exam".{' '}
-                <button
-                  className="text-blue-600 underline hover:text-blue-800"
-                  onClick={() => setShowFullInstructions(false)}
-                >
-                  Show less
-                </button>
-              </>
-            ) : (
-              <>
-                You are taking "{examInfo.exam.exam_name}" as a timed exam.{' '}
-                <button
-                  className="text-blue-600 underline hover:text-blue-800"
-                  onClick={() => setShowFullInstructions(true)}
-                >
-                  Show more
-                </button>
-              </>
-            )}
-          </div>
-
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-2">
-              <Clock
-                className={`h-5 w-5 ${
-                  isCriticalTime ? 'text-red-600' : isLowTime ? 'text-yellow-600' : 'text-blue-600'
-                }`}
-              />
-              <span
-                className={`text-md font-mono font-semibold ${
-                  isCriticalTime ? 'text-red-700' : isLowTime ? 'text-yellow-700' : 'text-blue-700'
-                }`}
-                aria-live="polite"
-                aria-label={`Time remaining: ${formatTimeRemaining(timeRemaining)}`}
-              >
-                {formatTimeRemaining(timeRemaining)}
-              </span>
-            </div>
-            <button
-              onClick={handleEndExam}
-              className="rounded-md border border-gray-300 bg-white px-4 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
-              aria-describedby="end-exam-warning"
-            >
-              End My Exam
-            </button>
-            <div id="end-exam-warning" className="sr-only">
-              Warning: Ending the exam will submit all your answers and you cannot return to
-              continue.
-            </div>
-          </div>
-        </div>
-
-        {/* End Exam Confirmation Modal */}
-        {showEndExamModal && (
-          <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
-            <div className="mx-4 w-full max-w-full rounded-lg bg-white p-6 shadow-xl md:max-w-[40%]">
-              <h2 className="mb-4 text-lg font-semibold text-gray-900">
-                Are you sure that you want to submit your timed exam?
-              </h2>
-
-              <p className="mb-3 text-gray-700">
-                Make sure that you have selected "Submit" for each problem before you submit your
-                exam.
-              </p>
-
-              <p className="mb-6 text-gray-700">
-                After you submit your exam, your exam will be graded.
-              </p>
-
-              <div className="flex gap-3">
-                <button
-                  onClick={handleConfirmEndExam}
-                  disabled={isSubmittingExam}
-                  className="rounded bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                >
-                  {isSubmittingExam ? 'Submitting...' : 'Yes, submit my timed exam.'}
-                </button>
-                <button
-                  onClick={handleCancelEndExam}
-                  className="rounded px-4 py-2 font-medium text-blue-600 transition-colors hover:bg-blue-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
-                >
-                  No, I want to continue working.
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  if (examInfo?.exam?.attempt?.attempt_status === 'submitted') {
-    return null;
-  }
-
-  // Show "ready to start" UI when no active attempt exists
-  if (_.isEmpty(examInfo?.exam?.attempt) || _.isEmpty(examInfo?.active_attempt)) {
-    return (
-      <div className="sm:p-6">
-        <div className="mb-8 rounded-lg border border-blue-200 bg-blue-50 p-6">
-          <div className="flex items-start gap-3">
-            <Clock className="mt-1 h-6 w-6 flex-shrink-0 text-blue-600" />
-            <div className="flex-1">
-              <h2 className="mb-3 text-xl font-semibold text-gray-900">
-                {examInfo.exam.exam_name} is a Timed Exam ({formatTimeLimit()})
-              </h2>
-              <p className="mb-4 leading-relaxed text-gray-700">
-                This exam has a time limit associated with it. To pass this exam, you must complete
-                the problems in the time allowed. After you select I am ready to start this timed
-                exam, you will have {formatTimeLimit()} to complete and submit the exam.
-              </p>
-              <button
-                onClick={handleStartExam}
-                disabled={isStartingExam || isReadyToStart}
-                className="inline-flex items-center gap-2 rounded-md bg-blue-600 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                aria-describedby="exam-time-info"
-              >
-                <Clock className="hidden h-4 w-4 md:block" />
-                {isStartingExam ? 'Starting exam...' : 'I am ready to start this timed exam.'}
-              </button>
-              <div id="exam-time-info" className="sr-only">
-                Starting this exam will begin a {formatTimeLimit()} timer that cannot be paused.
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="mb-8">
-          <h3 className="mb-4 text-lg font-medium text-gray-900">
-            Can I request additional time to complete my exam?
-          </h3>
-          <div className="flex items-start gap-3">
-            <AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-gray-500" />
-            <p className="leading-relaxed text-gray-700">
-              If you have disabilities, you might be eligible for an additional time allowance on
-              timed exams. Ask your course team for information about additional time allowances.
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-};
diff --git a/components/skeleton-course-outline.tsx b/components/skeleton-course-outline.tsx
deleted file mode 100644
index f1754cb..0000000
--- a/components/skeleton-course-outline.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Skeleton } from '@/components/ui/skeleton';
-
-export function SkeletonCourseOutline() {
-  return (
-    <div className="border-b border-gray-200">
-      <div className="flex w-full items-center justify-between p-3">
-        <Skeleton className="h-4 w-32" />
-        <Skeleton className="h-4 w-4" />
-      </div>
-    </div>
-  );
-}
diff --git a/contexts/course-outline-context.tsx b/contexts/course-outline-context.tsx
deleted file mode 100644
index f3325e8..0000000
--- a/contexts/course-outline-context.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client';
-
-import { createContext } from 'react';
-import { CourseEdxData, CourseOutlineChildNode } from '@/types/courses';
-
-export interface CourseOutlineContextType {
-  courseOutline: CourseOutlineChildNode;
-  courseOutlineLoading: boolean;
-  expandedModule: string;
-  expandedLessons: string[];
-  selectLesson: (lessonId: string) => void;
-  toggleModule: (moduleId: string) => void;
-  toggleLesson: (lessonId: string) => void;
-  currentChapter: string;
-  currentLesson: string;
-  course: CourseEdxData | null;
-  courseOutlineDrawerOpen: boolean;
-  setCourseOutlineDrawerOpen: (open: boolean) => void;
-  currentUnitID: string | null;
-  refetchCourseOutline: (setLoadingState: boolean) => void;
-}
-
-export const CourseOutlineContext = createContext<CourseOutlineContextType>({
-  courseOutline: {} as CourseOutlineChildNode,
-  courseOutlineLoading: false,
-  expandedModule: '',
-  expandedLessons: [],
-  selectLesson: () => {},
-  toggleModule: () => {},
-  toggleLesson: () => {},
-  currentChapter: '',
-  currentLesson: '',
-  course: null,
-  courseOutlineDrawerOpen: false,
-  setCourseOutlineDrawerOpen: () => {},
-  currentUnitID: null,
-  refetchCourseOutline: () => {},
-});
diff --git a/hooks/courses/__tests__/use-edx-iframe.test.ts b/hooks/courses/__tests__/use-edx-iframe.test.ts
deleted file mode 100644
index 28b6835..0000000
--- a/hooks/courses/__tests__/use-edx-iframe.test.ts
+++ /dev/null
@@ -1,431 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { renderHook } from '@testing-library/react';
-
-vi.mock('@/utils/helpers', () => ({
-  getUserName: vi.fn(() => 'test-user'),
-}));
-
-vi.mock('@/lib/config', () => ({
-  config: {
-    urls: {
-      lms: vi.fn(() => 'http://lms.example.com'),
-      mfe: vi.fn(() => 'http://mfe.example.com'),
-      legacyLmsUrl: vi.fn(() => 'http://legacy-lms.example.com'),
-    },
-  },
-}));
-
-const mockGetEdxSsoAuthToken = vi.fn();
-vi.mock('@/services/edx-sso', () => ({
-  useLazyGetEdxSSOTokenQuery: vi.fn(() => [mockGetEdxSsoAuthToken]),
-}));
-
-import { useEdxIframe } from '../use-edx-iframe';
-
-describe('useEdxIframe', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('returns expected shape', () => {
-    const { result } = renderHook(() => useEdxIframe());
-    expect(result.current).toHaveProperty('getIframeURL');
-    expect(result.current).toHaveProperty('getUnitToIframe');
-    expect(result.current).toHaveProperty('findSequentialParent');
-    expect(result.current).toHaveProperty('flattenVerticalBlocks');
-    expect(result.current).toHaveProperty('getFirstAvailableUnit');
-    expect(result.current).toHaveProperty('findLastResumeBlock');
-    expect(result.current).toHaveProperty('getParentBlockById');
-    expect(result.current).toHaveProperty('getPreviousUnitIframe');
-    expect(result.current).toHaveProperty('getNextUnitIframe');
-    expect(result.current).toHaveProperty('addBookmarksTab');
-    expect(result.current).toHaveProperty('getParentsInfosFromSublessonId');
-  });
-
-  describe('flattenVerticalBlocks', () => {
-    it('returns empty array for null/undefined input', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      expect(result.current.flattenVerticalBlocks(null)).toEqual([]);
-      expect(result.current.flattenVerticalBlocks(undefined)).toEqual([]);
-    });
-
-    it('flattens vertical blocks from nested data', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const data = {
-        type: 'course',
-        children: [
-          {
-            type: 'chapter',
-            children: [
-              {
-                type: 'sequential',
-                children: [
-                  {
-                    type: 'vertical',
-                    id: 'v1',
-                    display_name: 'Vertical 1',
-                    children: [],
-                  },
-                  {
-                    type: 'vertical',
-                    id: 'v2',
-                    display_name: 'Vertical 2',
-                    children: [],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      };
-      const flatBlocks = result.current.flattenVerticalBlocks(data);
-      expect(flatBlocks).toEqual([
-        { id: 'v1', display_name: 'Vertical 1' },
-        { id: 'v2', display_name: 'Vertical 2' },
-      ]);
-    });
-
-    it('handles arrays', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const data = [
-        { type: 'vertical', id: 'v1', display_name: 'V1', children: [] },
-        { type: 'vertical', id: 'v2', display_name: 'V2', children: [] },
-      ];
-      const flatBlocks = result.current.flattenVerticalBlocks(data);
-      expect(flatBlocks).toEqual([
-        { id: 'v1', display_name: 'V1' },
-        { id: 'v2', display_name: 'V2' },
-      ]);
-    });
-  });
-
-  describe('findSequentialParent', () => {
-    it('finds sequential parent of a vertical block', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const data = {
-        type: 'course',
-        children: [
-          {
-            type: 'sequential',
-            id: 'seq-1',
-            children: [{ id: 'v1', type: 'vertical' }],
-          },
-        ],
-      };
-      expect(result.current.findSequentialParent(data, 'v1')).toBe('seq-1');
-    });
-
-    it('returns null when vertical not found', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const data = {
-        type: 'course',
-        children: [
-          {
-            type: 'sequential',
-            id: 'seq-1',
-            children: [{ id: 'v1', type: 'vertical' }],
-          },
-        ],
-      };
-      expect(result.current.findSequentialParent(data, 'v-nonexistent')).toBeNull();
-    });
-
-    it('returns null for empty data', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      expect(result.current.findSequentialParent({ type: 'course' }, 'v1')).toBeNull();
-    });
-  });
-
-  describe('getFirstAvailableUnit', () => {
-    it('returns first available unit', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const data = {
-        children: [
-          {
-            children: [
-              {
-                children: [
-                  { id: 'unit-1', type: 'vertical' },
-                  { id: 'unit-2', type: 'vertical' },
-                ],
-              },
-            ],
-          },
-        ],
-      };
-      expect(result.current.getFirstAvailableUnit(data)).toEqual({
-        id: 'unit-1',
-        type: 'vertical',
-      });
-    });
-
-    it('returns null when no units are available', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const data = {
-        children: [{ children: [{ children: [] }] }],
-      };
-      expect(result.current.getFirstAvailableUnit(data)).toBeNull();
-    });
-
-    it('returns parent level element on error when course has started', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const data = {
-        start: '2020-01-01',
-        children: [{ children: [{ id: 'seq-1' }] }],
-      };
-      // This triggers the catch path since children[0]?.children[0]?.children is undefined
-      expect(result.current.getFirstAvailableUnit(data)).toEqual({ id: 'seq-1' });
-    });
-  });
-
-  describe('findLastResumeBlock', () => {
-    it('finds the last vertical with resume_block true', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const data = {
-        type: 'course',
-        children: [
-          {
-            type: 'chapter',
-            children: [
-              { type: 'vertical', id: 'v1', resume_block: true },
-              { type: 'vertical', id: 'v2', resume_block: true },
-              { type: 'vertical', id: 'v3', resume_block: false },
-            ],
-          },
-        ],
-      };
-      expect(result.current.findLastResumeBlock(data)).toEqual({
-        type: 'vertical',
-        id: 'v2',
-        resume_block: true,
-      });
-    });
-
-    it('returns null when no resume block exists', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const data = {
-        type: 'course',
-        children: [
-          {
-            type: 'chapter',
-            children: [{ type: 'vertical', id: 'v1', resume_block: false }],
-          },
-        ],
-      };
-      expect(result.current.findLastResumeBlock(data)).toBeNull();
-    });
-  });
-
-  describe('getPreviousUnitIframe', () => {
-    it('returns previous unit id', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const courseData = {
-        type: 'course',
-        children: [
-          {
-            type: 'chapter',
-            children: [
-              {
-                type: 'sequential',
-                children: [
-                  { type: 'vertical', id: 'v1', display_name: 'V1', children: [] },
-                  { type: 'vertical', id: 'v2', display_name: 'V2', children: [] },
-                  { type: 'vertical', id: 'v3', display_name: 'V3', children: [] },
-                ],
-              },
-            ],
-          },
-        ],
-      };
-      expect(result.current.getPreviousUnitIframe('v2', courseData)).toBe('v1');
-    });
-
-    it('returns null for the first unit', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const courseData = {
-        type: 'course',
-        children: [
-          {
-            type: 'chapter',
-            children: [
-              {
-                type: 'sequential',
-                children: [{ type: 'vertical', id: 'v1', display_name: 'V1', children: [] }],
-              },
-            ],
-          },
-        ],
-      };
-      expect(result.current.getPreviousUnitIframe('v1', courseData)).toBeNull();
-    });
-
-    it('returns null when id is not found', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const courseData = {
-        type: 'course',
-        children: [
-          {
-            type: 'chapter',
-            children: [
-              {
-                type: 'sequential',
-                children: [{ type: 'vertical', id: 'v1', display_name: 'V1', children: [] }],
-              },
-            ],
-          },
-        ],
-      };
-      expect(result.current.getPreviousUnitIframe('nonexistent', courseData)).toBeNull();
-    });
-  });
-
-  describe('getNextUnitIframe', () => {
-    it('returns next unit id', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const courseData = {
-        type: 'course',
-        children: [
-          {
-            type: 'chapter',
-            children: [
-              {
-                type: 'sequential',
-                children: [
-                  { type: 'vertical', id: 'v1', display_name: 'V1', children: [] },
-                  { type: 'vertical', id: 'v2', display_name: 'V2', children: [] },
-                  { type: 'vertical', id: 'v3', display_name: 'V3', children: [] },
-                ],
-              },
-            ],
-          },
-        ],
-      };
-      expect(result.current.getNextUnitIframe('v2', courseData)).toBe('v3');
-    });
-
-    it('returns null for the last unit', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const courseData = {
-        type: 'course',
-        children: [
-          {
-            type: 'chapter',
-            children: [
-              {
-                type: 'sequential',
-                children: [{ type: 'vertical', id: 'v1', display_name: 'V1', children: [] }],
-              },
-            ],
-          },
-        ],
-      };
-      expect(result.current.getNextUnitIframe('v1', courseData)).toBeNull();
-    });
-
-    it('returns null when id is not found', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const courseData = {
-        type: 'course',
-        children: [
-          {
-            type: 'chapter',
-            children: [
-              {
-                type: 'sequential',
-                children: [{ type: 'vertical', id: 'v1', display_name: 'V1', children: [] }],
-              },
-            ],
-          },
-        ],
-      };
-      expect(result.current.getNextUnitIframe('nonexistent', courseData)).toBeNull();
-    });
-  });
-
-  describe('addBookmarksTab', () => {
-    it('adds a bookmarks tab to the tabs array', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const tabs: any[] = [];
-      result.current.addBookmarksTab(tabs, 'course-123');
-      expect(tabs).toHaveLength(1);
-      expect(tabs[0]).toEqual({
-        tab_id: 'bookmarks',
-        title: 'Bookmarks',
-        url: expect.stringContaining('/courses/course-123/bookmarks'),
-      });
-    });
-  });
-
-  describe('getParentBlockById', () => {
-    it('finds a block and returns indices', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const blocksArray = [
-        {
-          id: 'root',
-          children: [
-            {
-              id: 'child-1',
-              children: [{ id: 'target-block' }],
-            },
-          ],
-        },
-      ];
-      const { parentBlock, foundIndices } = result.current.getParentBlockById(
-        blocksArray,
-        'target-block',
-      );
-      expect(parentBlock).toEqual({ id: 'target-block' });
-      expect(foundIndices).toEqual([0, 0, 0]);
-    });
-
-    it('returns null when block is not found', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const blocksArray = [{ id: 'root', children: [{ id: 'child-1' }] }];
-      const { parentBlock, foundIndices } = result.current.getParentBlockById(
-        blocksArray,
-        'nonexistent',
-      );
-      expect(parentBlock).toBeNull();
-      expect(foundIndices).toEqual([]);
-    });
-  });
-
-  describe('getParentsInfosFromSublessonId', () => {
-    it('returns module and lesson for a given sublesson id', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const modules = [
-        {
-          id: 'module-1',
-          children: [
-            {
-              id: 'lesson-1',
-              children: [{ id: 'sublesson-1' }, { id: 'sublesson-2' }],
-            },
-          ],
-        },
-      ];
-      const info = result.current.getParentsInfosFromSublessonId(modules, 'sublesson-2');
-      expect(info?.module.id).toBe('module-1');
-      expect(info?.lesson.id).toBe('lesson-1');
-    });
-
-    it('returns empty objects when sublesson is not found', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const modules = [
-        {
-          id: 'module-1',
-          children: [{ id: 'lesson-1', children: [{ id: 'sublesson-1' }] }],
-        },
-      ];
-      const info = result.current.getParentsInfosFromSublessonId(modules, 'nonexistent');
-      expect(info).toEqual({ module: {}, lesson: {} });
-    });
-
-    it('handles modules without children', () => {
-      const { result } = renderHook(() => useEdxIframe());
-      const modules = [{ id: 'module-1' }];
-      const info = result.current.getParentsInfosFromSublessonId(modules, 'sublesson-1');
-      expect(info).toEqual({ module: {}, lesson: {} });
-    });
-  });
-});
diff --git a/hooks/courses/edx-iframe-context.ts b/hooks/courses/edx-iframe-context.ts
deleted file mode 100644
index 2240fe5..0000000
--- a/hooks/courses/edx-iframe-context.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { CourseOutlineChildNode } from '@/types/courses';
-// @ts-ignore
-import { ExamInfo } from '@iblai/iblai-js/data-layer';
-import { createContext } from 'react';
-
-export const EdxIframeContext = createContext<{
-  iframeUrl: string;
-  setIframeUrl: (url: string) => void;
-  courseOutline: CourseOutlineChildNode;
-  setActiveTab: (tab: string) => void;
-  activeTab: string;
-  courseID: string;
-  currentlyInExamSubsection: boolean;
-  setCurrentlyInExamSubsection: (examSubsection: boolean) => void;
-  examInfo: ExamInfo | null;
-  setExamInfo: (examInfo: ExamInfo | null) => void;
-  refresher: Date | null;
-  setRefresher: (refresher: Date) => void;
-  //setCourseOutline: (outline:CourseOutlineChildNode[]) => void;
-}>({
-  iframeUrl: '',
-  setIframeUrl: () => {},
-  courseOutline: {} as CourseOutlineChildNode,
-  setActiveTab: () => {},
-  activeTab: '',
-  courseID: '',
-  currentlyInExamSubsection: false,
-  setCurrentlyInExamSubsection: () => {},
-  examInfo: null,
-  setExamInfo: () => {},
-  refresher: null,
-  setRefresher: () => {},
-  //setCourseOutline: () => {},
-});
diff --git a/hooks/courses/use-edx-iframe.ts b/hooks/courses/use-edx-iframe.ts
deleted file mode 100644
index 9dfac83..0000000
--- a/hooks/courses/use-edx-iframe.ts
+++ /dev/null
@@ -1,316 +0,0 @@
-import { config } from '@/lib/config';
-import { useLazyGetEdxSSOTokenQuery } from '@/services/edx-sso';
-import { getUserName } from '@/utils/helpers';
-
-export const useEdxIframe = () => {
-  const [getEdxSsoAuthToken] = useLazyGetEdxSSOTokenQuery();
-
-  function getIframeURL(course_id: string, courseInfo: any, callback: (url: string) => void) {
-    //check if the courseInfo is an object, includes : or a string
-    if (typeof courseInfo === 'object' || courseInfo.includes(':')) {
-      flattenVerticalBlocks(courseInfo);
-      let unit = getUnitToIframe(courseInfo);
-      addIframeUrl(course_id, unit.id, callback);
-    } else {
-      addIframeUrl(course_id, courseInfo, callback);
-    }
-  }
-
-  function findSequentialParent(data: any, verticalId: string): string | null {
-    // Base case: if the current data block is of type 'sequential' and has children
-    if (data.type === 'sequential' && data.children) {
-      for (const child of data.children) {
-        // Check if the child is the vertical block we are looking for
-        if (child.id === verticalId) {
-          return data.id; // Return the ID of the sequential block
-        }
-        // Recursively search deeper if the child is not the vertical block
-        const foundId = findSequentialParent(child, verticalId);
-        if (foundId) {
-          return foundId; // Return the found ID if present
-        }
-      }
-    } else if (data.children) {
-      // Continue recursion if the block is not 'sequential' but has children
-      for (const child of data.children) {
-        const foundId = findSequentialParent(child, verticalId);
-        if (foundId) {
-          return foundId;
-        }
-      }
-    }
-    // Return null if no matching sequential parent is found at this level
-    return null;
-  }
-
-  function flattenVerticalBlocks(data: any) {
-    if (!data || typeof data !== 'object') {
-      return [];
-    }
-
-    if (Array.isArray(data)) {
-      const result = [];
-      for (const item of data) {
-        const flattenedItems: any[] = flattenVerticalBlocks(item);
-        result.push(...flattenedItems);
-      }
-      return result;
-    }
-
-    if (data.type === 'vertical') {
-      const block = {
-        id: data.id,
-        display_name: data.display_name,
-      };
-
-      const children: any[] = flattenVerticalBlocks(data.children);
-      return [block, ...children];
-    }
-
-    return flattenVerticalBlocks(data.children);
-  }
-
-  function getFirstAvailableUnit(data: any, maxAttempts = 2) {
-    console.log({ data });
-    try {
-      // Try to find the first available unit within the specified maxAttempts
-      for (let attempt = 0; attempt < maxAttempts; attempt++) {
-        let element = data.children[0]?.children[0]?.children[attempt];
-        if (element) return element; // Return the element if found
-      }
-    } catch (e) {
-      // In case of any error, safely return the upper level element if available
-      if (
-        data.hasOwnProperty('children') &&
-        data.children[0].hasOwnProperty('children') &&
-        new Date(data.start) < new Date()
-      ) {
-        return data.children[0]?.children[0];
-      } else {
-        /* throw new Error(
-          "Course has no content or course has not been started yet"
-        ); */
-        return null;
-      }
-    }
-
-    return null; // Return null if no element is found after attempts
-  }
-
-  function findLastResumeBlock(courseData: any) {
-    let lastResumeBlock = null;
-
-    // Helper function to recursively traverse the tree
-    function traverse(node: any) {
-      // If the current node has resume_block = true and no children, update the result
-      if (node.resume_block && node.type === 'vertical') {
-        lastResumeBlock = node;
-      }
-
-      // Traverse the children
-      if (node.children && node.children.length > 0) {
-        for (const child of node.children) {
-          traverse(child);
-        }
-      }
-    }
-
-    // Start traversing from the root node
-    traverse(courseData);
-
-    return lastResumeBlock;
-  }
-
-  function getUnitToIframe(courseOutlineData: any) {
-    //     decide if we have been given an explicit block to iframe
-    const courseUrl = new URL(window.location.href);
-    if (courseUrl.searchParams.has('unit_id')) {
-      const unitId = courseUrl.search.match(/unit_id=([^&]*)/)?.[1];
-      if (!unitId) {
-        return getFirstAvailableUnit(courseOutlineData);
-      }
-      return findVerticalById(courseOutlineData, unitId);
-    } else {
-      let lastResumeBlock = findLastResumeBlock(courseOutlineData);
-
-      if (lastResumeBlock) {
-        return lastResumeBlock;
-      }
-    }
-
-    return getFirstAvailableUnit(courseOutlineData);
-  }
-
-  async function addIframeUrl(course_id: string, xblockID: string, callback: any) {
-    let url = '';
-    let baseLMSIframeURL = `${config.urls.lms()}/xblock/${xblockID}?show_title=0&show_bookmark_button=1&recheck_access=1&view=student_view`;
-    try {
-      xblockID = xblockID.replace(/^\/|\/$/g, '');
-      switch (xblockID) {
-        case 'forum':
-          url = `${config.urls.mfe()}/discussions/${course_id}/posts`;
-          break;
-        case 'notes':
-          url = `${config.urls.mfe()}/courses/${course_id}/edxnotes`;
-          break;
-        case 'progress':
-          url = `${config.urls.mfe()}/learning/course/${course_id}/progress/`;
-          break;
-        case 'dates':
-          url = `${config.urls.mfe()}/learning/course/${course_id}/dates/`;
-          break;
-        case 'bookmarks':
-          url = `${config.urls.legacyLmsUrl()}/courses/${course_id}/bookmarks/`;
-          break;
-        case 'instructor':
-          baseLMSIframeURL = `${config.urls.lms()}/courses/${course_id}/instructor`;
-        default:
-          const { data: authSsoToken } = await getEdxSsoAuthToken({
-            username: getUserName(),
-            redirect_url: baseLMSIframeURL,
-          });
-          url = `${config.urls.legacyLmsUrl()}/ibl/ai/sso/backend/edx/iframe?sso_auth_token=${
-            authSsoToken?.sso_auth_token
-          }`;
-          break;
-      }
-      callback(url);
-    } catch (error) {
-      callback(url);
-    }
-  }
-
-  function findVerticalById(data: any, verticalId: string) {
-    // Define a recursive helper function to search through the data
-    function search(data: any) {
-      for (const item of data) {
-        if (item.id === verticalId) {
-          return item;
-        }
-        if (item.children) {
-          const result: any = search(item.children);
-          if (result) {
-            return result;
-          }
-        }
-      }
-      return null;
-    }
-
-    // Call the helper function starting from the top level
-    return search(data.children);
-  }
-
-  const getParentBlockById = (blocksArray: any, targetBlockId: string) => {
-    let foundIndices: any[] = [];
-
-    const findParentBlock = (currentBlock: any, targetBlockId: string, currentIndices: any[]) => {
-      if (currentBlock.id === targetBlockId) {
-        foundIndices = currentIndices.slice(); // Copy the current indices
-        return currentBlock;
-      }
-
-      if (currentBlock.children) {
-        for (let i = 0; i < currentBlock.children.length; i++) {
-          const childBlock = currentBlock.children[i];
-          const result: any = findParentBlock(childBlock, targetBlockId, [...currentIndices, i]);
-          if (result) {
-            return result;
-          }
-        }
-      }
-
-      return null;
-    };
-
-    for (let i = 0; i < blocksArray.length; i++) {
-      const rootBlock = blocksArray[i];
-      const parentBlock = findParentBlock(rootBlock, targetBlockId, [i]);
-      if (parentBlock) {
-        return { parentBlock, foundIndices };
-      }
-    }
-
-    return { parentBlock: null, foundIndices };
-  };
-
-  function getPreviousUnitIframe(suppliedId: string, courseData: any) {
-    let idList = flattenVerticalBlocks(courseData);
-    const index = idList.findIndex((item) => {
-      return item.id === suppliedId;
-    });
-
-    if (index === -1 || index === 0) {
-      // If the suppliedId is not found or it's the first element, return null
-      return null;
-    }
-
-    return idList[index - 1].id;
-  }
-
-  function getNextUnitIframe(suppliedId: string, courseData: any) {
-    let idList = flattenVerticalBlocks(courseData);
-    const index = idList.findIndex((item) => item.id === suppliedId);
-
-    if (index === -1 || index === idList.length - 1) {
-      // If the suppliedId is not found or it's the last element, return null
-      return null;
-    }
-
-    return idList[index + 1].id;
-  }
-
-  function addBookmarksTab(tabs: any, course_id: string) {
-    const newTab = {
-      tab_id: 'bookmarks',
-      title: 'Bookmarks',
-      url: `${process.env.REACT_APP_IBL_LMS_URL}/courses/${course_id}/bookmarks`,
-    };
-    tabs.push(newTab);
-  }
-
-  /**
-   * Finds the parent module (1st level) and lesson (2nd level) ids from a sublesson (3rd level) id.
-   * @param modules - array of modules (courseOutline or courseModules)
-   * @param sublessonId - id of the sublesson to search for
-   * @returns an object with moduleId and lessonId, or undefined if not found
-   */
-  function getParentsInfosFromSublessonId(
-    modules: any[],
-    sublessonId: string,
-  ): { module: Record<string, any>; lesson: Record<string, any> } | undefined {
-    try {
-      for (const module of modules) {
-        if (!module.children) continue;
-        for (const lesson of module.children) {
-          if (!lesson.children) continue;
-          for (const sublesson of lesson.children) {
-            if (sublesson.id === sublessonId) {
-              return { module, lesson };
-            }
-          }
-        }
-      }
-      throw new Error('Sublesson not found');
-    } catch (error) {
-      return {
-        module: {},
-        lesson: {},
-      };
-    }
-  }
-
-  return {
-    getIframeURL,
-    getUnitToIframe,
-    findSequentialParent,
-    flattenVerticalBlocks,
-    getFirstAvailableUnit,
-    findLastResumeBlock,
-    getParentBlockById,
-    getPreviousUnitIframe,
-    getNextUnitIframe,
-    addBookmarksTab,
-    getParentsInfosFromSublessonId,
-  };
-};
diff --git a/hooks/courses/useCourseNavigator.ts b/hooks/courses/useCourseNavigator.ts
deleted file mode 100644
index 38f033f..0000000
--- a/hooks/courses/useCourseNavigator.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { CourseOutlineChildNode } from '@/types/courses';
-
-const useCourseNavigator = (courseData: CourseOutlineChildNode, unitID: string) => {
-  // Helper function to flatten third-level children with reference to 1st and 2nd level blocks
-  function flattenThirdLevelChildren(data: CourseOutlineChildNode) {
-    const thirdLevelChildren: {
-      id: any;
-      chapterIndex: any;
-      sequentialIndex: any;
-      thirdLevelIndex: any;
-      display_name: any;
-    }[] = [];
-
-    Array.isArray(data.children) &&
-      data.children.forEach((chapter, chapterIndex) => {
-        Array.isArray(chapter.children) &&
-          chapter.children.forEach((sequential, sequentialIndex) => {
-            Array.isArray(sequential.children) &&
-              sequential.children.forEach((thirdLevel, thirdLevelIndex) => {
-                thirdLevelChildren.push({
-                  id: thirdLevel.id,
-                  chapterIndex,
-                  sequentialIndex,
-                  thirdLevelIndex,
-                  display_name: thirdLevel.display_name || `Block ${thirdLevel.id}`,
-                });
-              });
-          });
-      });
-
-    return thirdLevelChildren;
-  }
-
-  // Function to move to the next or previous third-level child
-  class BlockNavigator {
-    thirdLevelChildren: {
-      id: any;
-      chapterIndex: any;
-      sequentialIndex: any;
-      thirdLevelIndex: any;
-      display_name: any;
-    }[];
-    currentIndex: number;
-    constructor(data: CourseOutlineChildNode, initialId: string | null = null) {
-      this.thirdLevelChildren = flattenThirdLevelChildren(data);
-      this.currentIndex = this.findInitialIndex(initialId); // Set initial index based on ID or default to 0
-    }
-
-    // Method to find the initial index based on the given ID
-    findInitialIndex(initialId: string | null) {
-      if (initialId) {
-        const index = this.thirdLevelChildren.findIndex((block) => block.id === initialId);
-        return index !== -1 ? index : 0; // If ID not found, start at the first block
-      }
-      return 0; // Default to the first block if no ID provided
-    }
-
-    // Get current block
-    getCurrentBlock() {
-      return this.thirdLevelChildren[this.currentIndex];
-    }
-
-    // Move to the next block
-    moveToNext() {
-      if (this.currentIndex < this.thirdLevelChildren.length - 1) {
-        this.currentIndex++;
-        return this.getCurrentBlock();
-      } else {
-        console.log('Reached the last block.');
-        return null;
-      }
-    }
-
-    // Move to the previous block
-    moveToPrevious() {
-      if (this.currentIndex > 0) {
-        this.currentIndex--;
-        return this.getCurrentBlock();
-      } else {
-        console.log('Reached the first block.');
-        return null;
-      }
-    }
-
-    isPreviousHidden() {
-      return this.currentIndex === 0;
-    }
-
-    isNextHidden() {
-      return this.currentIndex === this.thirdLevelChildren.length - 1;
-    }
-  }
-  const navigator = new BlockNavigator(courseData, unitID);
-
-  return {
-    navigator,
-  };
-};
-
-export default useCourseNavigator;

From 3ee944efce32dba97ac63717fa0abc1de3e0d80d Mon Sep 17 00:00:00 2001
From: ANIMASHAUN Michael <michaeloncode@gmail.com>
Date: Wed, 15 Apr 2026 17:49:00 +0100
Subject: [PATCH 4/8] chore: bump iblai-js version to 1.4.3

---
 package.json | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/package.json b/package.json
index f6c37f3..ddd1722 100644
--- a/package.json
+++ b/package.json
@@ -24,12 +24,9 @@
   "dependencies": {
     "@emotion/is-prop-valid": "1.4.0",
     "@hookform/resolvers": "3.10.0",
-    "@iblai/data-layer": "file:.yalc/@iblai/data-layer",
     "@iblai/iblai-api": "4.166.0-ai",
-    "@iblai/iblai-js": "file:.yalc/@iblai/iblai-js",
+    "@iblai/iblai-js": "1.4.3",
     "@iblai/iblai-web-mentor": "2.0.1",
-    "@iblai/web-containers": "file:.yalc/@iblai/web-containers",
-    "@iblai/web-utils": "file:.yalc/@iblai/web-utils",
     "@radix-ui/react-accordion": "1.2.2",
     "@radix-ui/react-alert-dialog": "1.1.13",
     "@radix-ui/react-aspect-ratio": "1.1.1",

From e49d827c63fa226590eea022c317d2f60e6c97c9 Mon Sep 17 00:00:00 2001
From: ANIMASHAUN Michael <michaeloncode@gmail.com>
Date: Wed, 15 Apr 2026 17:49:11 +0100
Subject: [PATCH 5/8] chore: pnpm lock updated

---
 pnpm-lock.yaml | 48 ++++++++++++++++++++++++------------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 403530f..2bde71f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ importers:
         specifier: 4.166.0-ai
         version: 4.166.0-ai
       '@iblai/iblai-js':
-        specifier: 1.3.9
-        version: 1.3.9(@axe-core/playwright@4.11.1(playwright-core@1.58.2))(@floating-ui/dom@1.7.6)(@iblai/iblai-api@4.166.0-ai)(@playwright/test@1.58.2)(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@tauri-apps/api@2.10.1)(@tiptap/extensions@3.20.1(@tiptap/core@3.20.4(@tiptap/pm@3.20.4))(@tiptap/pm@3.20.4))(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(next@15.3.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)(redux@5.0.1)(sonner@1.7.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))
+        specifier: 1.4.3
+        version: 1.4.3(@axe-core/playwright@4.11.1(playwright-core@1.58.2))(@floating-ui/dom@1.7.6)(@iblai/iblai-api@4.166.0-ai)(@playwright/test@1.58.2)(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@tauri-apps/api@2.10.1)(@tiptap/extensions@3.20.1(@tiptap/core@3.20.4(@tiptap/pm@3.20.4))(@tiptap/pm@3.20.4))(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(next@15.3.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)(redux@5.0.1)(sonner@1.7.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))
       '@iblai/iblai-web-mentor':
         specifier: 2.0.1
         version: 2.0.1(@babel/core@7.29.0)(@types/babel__core@7.20.5)(rollup@4.59.0)(typescript@5.9.3)
@@ -794,8 +794,8 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@iblai/data-layer@1.2.8':
-    resolution: {integrity: sha512-kh0ws8etjok4I0PUw6Wh+nlWqDaiLXyfB5pY2AdOiJqCvLI3GXenoAJK5Di8ox8AqcubvyqGwsvzuGGEpIiXhA==}
+  '@iblai/data-layer@1.3.2':
+    resolution: {integrity: sha512-mdpfvmSPi97cRJ8B4P4sHzhOHAwY4IcpajtkEmUA31tLQUZ8UdGzPJiHJS+jnmy05Xx45hUsnwXrdoqolAsWHA==}
     engines: {node: 25.3.0}
     peerDependencies:
       '@reduxjs/toolkit': 2.7.0
@@ -806,8 +806,8 @@ packages:
   '@iblai/iblai-api@4.166.0-ai':
     resolution: {integrity: sha512-dY9Jv+CkXEyTxRsOQFay5YvYe8K2LSQluJJvtssGQV2RbrxPPzONaKfnhcyarDs7Ft35Xqk1fuErjhUwNG3OIg==}
 
-  '@iblai/iblai-js@1.3.9':
-    resolution: {integrity: sha512-QiRfwbIaHW6SGmszKcT7Bm0CVd5UAiOt3NUf5fr9suCuFXiOlgxpw0RvKqQSkjWYnbIZulaOVv/L2S/aoMA7Sg==}
+  '@iblai/iblai-js@1.4.3':
+    resolution: {integrity: sha512-5K4nN3TLJcOlvKbWyIThi5fLDzcrc+swZdwq6aP01ofNphT3Ku2RcCSYviKiUOwX3VwpiNL8hrWxblkTonp1GQ==}
     engines: {node: '>=20.0.0'}
     hasBin: true
     peerDependencies:
@@ -830,13 +830,13 @@ packages:
   '@iblai/iblai-web-mentor@2.0.1':
     resolution: {integrity: sha512-xmGpaKCrio93pYDWapDwpUzVqNFdZwtwvmaKqUk9l+xpoi0I1JtB5Z7p1I+1s5mSIYsIkbarhFZotRiREy0jaQ==}
 
-  '@iblai/mcp@1.2.3':
-    resolution: {integrity: sha512-tuaVs2gzR8OYoCHT0gxOB3VSC9LbC8RdWGC/Nd7PVimcK+1HxPWP8mX5GWyzDgn1sJf/Pi5onFGGBHbRzbR7+Q==}
+  '@iblai/mcp@1.3.0':
+    resolution: {integrity: sha512-tvFcGVJjZmgVttb7lqZ/JxfPewlRfdJb3rZ7MYXAH+wpXjtwJVNX28r3yrOC3QAzJIIW2+Jk1ixJJyKkOHKDPw==}
     engines: {node: '>=20.0.0'}
     hasBin: true
 
-  '@iblai/web-containers@1.2.6':
-    resolution: {integrity: sha512-ZUFOMVxeC77r+pevDelWVGgRdjBby83XqTnaaVmOiUwZrqXiO7dwJM4O3msUvOiczsO/Pa9/Z0fHeZRoueMdjg==}
+  '@iblai/web-containers@1.3.3':
+    resolution: {integrity: sha512-akcepj86PRnr2U9kI4aoGa/J1ryag5hz6+WVPXY//aEyoD1xQMnaC7WbYaMS2yzgl7HJZQQ+a9PZTfpnpDlnCw==}
     engines: {node: 25.3.0}
     peerDependencies:
       '@iblai/data-layer': ^1.1.2
@@ -854,8 +854,8 @@ packages:
       sonner:
         optional: true
 
-  '@iblai/web-utils@1.2.7':
-    resolution: {integrity: sha512-6pRcN1ExboPq9tjspjWwjfmKf23KZXos09Lywv3OYFLEiR6yanE9ppt2HnB6+VGNDNjU8VQMmb1RlGGye5u7xw==}
+  '@iblai/web-utils@1.2.8':
+    resolution: {integrity: sha512-691Jxgoqa0rqCZf2mOutAioJTVBf60ulL7U5S0mSy6zsqtNNp+JrUkzswW3tdVLzE/cPxjJ5xgJTa0QKvyGhnA==}
     engines: {node: 25.3.0}
     peerDependencies:
       '@iblai/data-layer': ^1.1.2
@@ -8156,7 +8156,7 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@iblai/data-layer@1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)':
+  '@iblai/data-layer@1.3.2(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)':
     dependencies:
       '@iblai/iblai-api': 4.166.0-ai
       '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
@@ -8170,13 +8170,13 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@iblai/iblai-js@1.3.9(@axe-core/playwright@4.11.1(playwright-core@1.58.2))(@floating-ui/dom@1.7.6)(@iblai/iblai-api@4.166.0-ai)(@playwright/test@1.58.2)(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@tauri-apps/api@2.10.1)(@tiptap/extensions@3.20.1(@tiptap/core@3.20.4(@tiptap/pm@3.20.4))(@tiptap/pm@3.20.4))(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(next@15.3.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)(redux@5.0.1)(sonner@1.7.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))':
+  '@iblai/iblai-js@1.4.3(@axe-core/playwright@4.11.1(playwright-core@1.58.2))(@floating-ui/dom@1.7.6)(@iblai/iblai-api@4.166.0-ai)(@playwright/test@1.58.2)(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@tauri-apps/api@2.10.1)(@tiptap/extensions@3.20.1(@tiptap/core@3.20.4(@tiptap/pm@3.20.4))(@tiptap/pm@3.20.4))(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(next@15.3.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)(redux@5.0.1)(sonner@1.7.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))':
     dependencies:
-      '@iblai/data-layer': 1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
+      '@iblai/data-layer': 1.3.2(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
       '@iblai/iblai-api': 4.166.0-ai
-      '@iblai/mcp': 1.2.3
-      '@iblai/web-containers': 1.2.6(b8644144625d90a2d9c984d8fca1a589)
-      '@iblai/web-utils': 1.2.7(@iblai/data-layer@1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@iblai/iblai-api@4.166.0-ai)(@tauri-apps/api@2.10.1)(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)
+      '@iblai/mcp': 1.3.0
+      '@iblai/web-containers': 1.3.3(a677bc1dd88bd6325003fe3593244238)
+      '@iblai/web-utils': 1.2.8(@iblai/data-layer@1.3.2(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@iblai/iblai-api@4.166.0-ai)(@tauri-apps/api@2.10.1)(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)
       '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
       axios: 1.13.6
       dotenv: 16.6.1
@@ -8213,7 +8213,7 @@ snapshots:
       - supports-color
       - typescript
 
-  '@iblai/mcp@1.2.3':
+  '@iblai/mcp@1.3.0':
     dependencies:
       '@modelcontextprotocol/sdk': 1.27.1(zod@4.3.6)
       zod: 4.3.6
@@ -8221,11 +8221,11 @@ snapshots:
       - '@cfworker/json-schema'
       - supports-color
 
-  '@iblai/web-containers@1.2.6(b8644144625d90a2d9c984d8fca1a589)':
+  '@iblai/web-containers@1.3.3(a677bc1dd88bd6325003fe3593244238)':
     dependencies:
-      '@iblai/data-layer': 1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
+      '@iblai/data-layer': 1.3.2(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
       '@iblai/iblai-api': 4.166.0-ai
-      '@iblai/web-utils': 1.2.7(@iblai/data-layer@1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@iblai/iblai-api@4.166.0-ai)(@tauri-apps/api@2.10.1)(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)
+      '@iblai/web-utils': 1.2.8(@iblai/data-layer@1.3.2(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@iblai/iblai-api@4.166.0-ai)(@tauri-apps/api@2.10.1)(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)
       '@radix-ui/react-accordion': 1.2.8(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-avatar': 1.1.7(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-checkbox': 1.2.3(@types/react-dom@19.2.1(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -8295,9 +8295,9 @@ snapshots:
       - supports-color
       - vinxi
 
-  '@iblai/web-utils@1.2.7(@iblai/data-layer@1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@iblai/iblai-api@4.166.0-ai)(@tauri-apps/api@2.10.1)(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)':
+  '@iblai/web-utils@1.2.8(@iblai/data-layer@1.3.2(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(@iblai/iblai-api@4.166.0-ai)(@tauri-apps/api@2.10.1)(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1)':
     dependencies:
-      '@iblai/data-layer': 1.2.8(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
+      '@iblai/data-layer': 1.3.2(@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
       '@iblai/iblai-api': 4.166.0-ai
       '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
       axios: 1.13.6

From d828a7253059ccefa3835ce90dc362d970ae5801 Mon Sep 17 00:00:00 2001
From: ANIMASHAUN Michael <michaeloncode@gmail.com>
Date: Wed, 15 Apr 2026 20:42:44 +0100
Subject: [PATCH 6/8] feat: course tab content components reused from the sdk >
 test coverage

---
 .../[course_id]/__tests__/layout.test.tsx     | 334 ++++--------------
 .../[course_id]/__tests__/loading.test.tsx    |  11 +-
 app/profile/__tests__/layout.test.tsx         |   2 +-
 app/profile/__tests__/page.test.tsx           | 103 +++---
 app/profile/courses/__tests__/page.test.tsx   |  22 +-
 .../credentials/__tests__/page.test.tsx       |  28 +-
 app/profile/pathways/__tests__/page.test.tsx  |  70 +++-
 app/profile/programs/__tests__/page.test.tsx  |  83 +++--
 app/profile/public/__tests__/page.test.tsx    | 116 +++---
 app/profile/skills/__tests__/page.test.tsx    |  46 +--
 vitest.config.ts                              |   5 +
 11 files changed, 342 insertions(+), 478 deletions(-)

diff --git a/app/course-content/[course_id]/__tests__/layout.test.tsx b/app/course-content/[course_id]/__tests__/layout.test.tsx
index f5ba864..9769a12 100644
--- a/app/course-content/[course_id]/__tests__/layout.test.tsx
+++ b/app/course-content/[course_id]/__tests__/layout.test.tsx
@@ -1,156 +1,68 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import React from 'react';
 
-// Mock next/link
-vi.mock('next/link', () => ({
-  default: ({ href, children, className }: any) => (
-    <a href={href} className={className}>
-      {children}
-    </a>
-  ),
-}));
-
-// Mock next/navigation
+const mockRouterPush = vi.fn();
 vi.mock('next/navigation', () => ({
-  useSearchParams: vi.fn(() => new URLSearchParams()),
-}));
-
-// Mock lodash
-vi.mock('lodash', () => ({
-  default: {
-    isEmpty: vi.fn(
-      (val: any) =>
-        !val || Object.keys(val).length === 0 || (Array.isArray(val) && val.length === 0),
-    ),
-  },
+  useRouter: () => ({ push: mockRouterPush }),
 }));
 
-// Mock lucide-react icons
-vi.mock('lucide-react', () => ({
-  ChevronRight: () => <span data-testid="chevron-right">&gt;</span>,
-  ListTree: () => <span data-testid="list-tree">ListTree</span>,
+vi.mock('sonner', () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
 }));
 
-// Mock helpers
 vi.mock('@/utils/helpers', () => ({
   getTenant: vi.fn(() => 'test-tenant'),
-  getUserId: vi.fn(() => 'test-user-id'),
 }));
 
-// Mock useGetDepartmentMemberCheckQuery
-vi.mock('@/services/core', () => ({
-  useGetDepartmentMemberCheckQuery: vi.fn(() => ({
-    data: { is_platform_admin: false },
-  })),
+vi.mock('@/lib/config', () => ({
+  config: {
+    urls: { dm: () => 'https://dm.test' },
+    settings: { courseEligibilityEnabled: () => false },
+  },
 }));
 
-// Mock useChatState
 const mockSetCourseMentor = vi.fn();
 vi.mock('@/components/chat-button', () => ({
-  useChatState: vi.fn(() => ({
-    setCourseMentor: mockSetCourseMentor,
-  })),
+  useChatState: vi.fn(() => ({ setCourseMentor: mockSetCourseMentor })),
 }));
 
-// Mock useCourseDetail
-const mockHandleFetchCourseInfo = vi.fn();
-const mockHandleFetchCourseSyllabus = vi.fn();
-const mockHandleOpenLesson = vi.fn();
-const mockHandleFetchCourseProgress = vi.fn();
-const mockHandleFetchCourseCompletion = vi.fn();
-
-vi.mock('@/hooks/courses/use-course-detail', () => ({
-  useCourseDetail: vi.fn(() => ({
-    handleFetchCourseInfo: mockHandleFetchCourseInfo,
-    handleFetchCourseSyllabus: mockHandleFetchCourseSyllabus,
-    handleOpenLesson: mockHandleOpenLesson,
-    handleFetchCourseProgress: mockHandleFetchCourseProgress,
-    handleFetchCourseCompletion: mockHandleFetchCourseCompletion,
-    course: null,
-    courseInfoLoadingState: 'successful',
-    courseOutline: null,
-    courseOutlineLoading: false,
-    courseCompletion: null,
-    courseGradingPolicyActive: false,
-  })),
-}));
-
-// Mock useEdxIframe
-vi.mock('@/hooks/courses/use-edx-iframe', () => ({
-  useEdxIframe: vi.fn(() => ({
-    getUnitToIframe: vi.fn(() => null),
-    getParentsInfosFromSublessonId: vi.fn(() => null),
+vi.mock('@iblai/iblai-js/data-layer', () => ({
+  useGetDepartmentMemberCheckQuery: vi.fn(() => ({
+    data: { is_platform_admin: false },
   })),
 }));
 
-// Mock EdxIframeContext
-vi.mock('@/hooks/courses/edx-iframe-context', () => ({
-  EdxIframeContext: React.createContext({}),
-}));
-
-// Mock CourseOutlineContext
-vi.mock('@/contexts/course-outline-context', () => ({
-  CourseOutlineContext: React.createContext({}),
-}));
-
-// Mock CourseOutline
-vi.mock('@/components/course-outline', () => ({
-  CourseOutline: () => <div data-testid="course-outline">CourseOutline</div>,
-}));
-
-// Mock CourseOutlineDrawer
-vi.mock('@/components/course-outline-drawer', () => ({
-  CourseOutlineDrawer: () => <div data-testid="course-outline-drawer">CourseOutlineDrawer</div>,
-}));
-
-// Mock CourseAccessGuard — renders children unconditionally so layout tests are isolated
-vi.mock('@/components/course-access-guard', () => ({
-  CourseAccessGuard: ({ children }: any) => <>{children}</>,
-}));
-
-// Mock ExamInfo from data-layer
-vi.mock('@iblai/iblai-js/data-layer', () => ({
-  ExamInfo: {},
+const capturedProps: { value?: any } = {};
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
+  CourseContentLayout: (props: any) => {
+    capturedProps.value = props;
+    return (
+      <div data-testid="shared-course-content-layout" data-course-id={props.courseId}>
+        {props.children}
+      </div>
+    );
+  },
 }));
 
-// Mock React.use
 vi.mock('react', async () => {
   const actual = await vi.importActual<typeof React>('react');
   return {
     ...actual,
-    use: vi.fn((promise: any) => {
-      if (promise && typeof promise === 'object' && 'course_id' in promise) {
-        return promise;
-      }
-      return { course_id: 'course-v1:test+course+2024' };
-    }),
+    use: vi.fn((value: any) => value),
   };
 });
 
 import CourseContentLayout from '../layout';
-import { useCourseDetail } from '@/hooks/courses/use-course-detail';
-import { useGetDepartmentMemberCheckQuery } from '@/services/core';
+import { useGetDepartmentMemberCheckQuery } from '@iblai/iblai-js/data-layer';
 
 describe('CourseContentLayout', () => {
-  const defaultParams = Promise.resolve({ course_id: 'course-v1%3Atest%2Bcourse%2B2024' });
+  const params = { course_id: 'course-v1%3Atest%2Bcourse%2B2024' } as any;
 
   beforeEach(() => {
     vi.clearAllMocks();
-    vi.mocked(useCourseDetail).mockReturnValue({
-      handleFetchCourseInfo: mockHandleFetchCourseInfo,
-      handleFetchCourseSyllabus: mockHandleFetchCourseSyllabus,
-      handleOpenLesson: mockHandleOpenLesson,
-      handleFetchCourseProgress: mockHandleFetchCourseProgress,
-      handleFetchCourseCompletion: mockHandleFetchCourseCompletion,
-      course: null,
-      courseInfoLoadingState: 'successful',
-      courseOutline: null,
-      courseOutlineLoading: false,
-      courseCompletion: null,
-      courseGradingPolicyActive: false,
-    } as any);
+    capturedProps.value = undefined;
     vi.mocked(useGetDepartmentMemberCheckQuery).mockReturnValue({
       data: { is_platform_admin: false },
     } as any);
@@ -158,229 +70,129 @@ describe('CourseContentLayout', () => {
 
   it('renders without crashing', () => {
     const { container } = render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div>children</div>
       </CourseContentLayout>,
     );
     expect(container).toBeTruthy();
   });
 
-  it('renders CourseOutlineDrawer', () => {
-    render(
-      <CourseContentLayout params={defaultParams}>
-        <div>children</div>
-      </CourseContentLayout>,
-    );
-    expect(screen.getByTestId('course-outline-drawer')).toBeInTheDocument();
-  });
-
-  it('renders CourseOutline in sidebar', () => {
-    render(
-      <CourseContentLayout params={defaultParams}>
-        <div>children</div>
-      </CourseContentLayout>,
-    );
-    expect(screen.getByTestId('course-outline')).toBeInTheDocument();
-  });
-
-  it('renders course navigation tabs (Course, Progress, Dates, Discussion)', () => {
-    render(
-      <CourseContentLayout params={defaultParams}>
-        <div>children</div>
-      </CourseContentLayout>,
-    );
-    expect(screen.getByText('Course')).toBeInTheDocument();
-    expect(screen.getByText('Progress')).toBeInTheDocument();
-    expect(screen.getByText('Dates')).toBeInTheDocument();
-    expect(screen.getByText('Discussion')).toBeInTheDocument();
-  });
-
-  it('hides Instructor tab when user is not platform admin', () => {
-    vi.mocked(useGetDepartmentMemberCheckQuery).mockReturnValue({
-      data: { is_platform_admin: false },
-    } as any);
-
-    render(
-      <CourseContentLayout params={defaultParams}>
-        <div>children</div>
-      </CourseContentLayout>,
-    );
-    expect(screen.queryByText('Instructor')).not.toBeInTheDocument();
-  });
-
-  it('shows Instructor tab when user is platform admin', () => {
-    vi.mocked(useGetDepartmentMemberCheckQuery).mockReturnValue({
-      data: { is_platform_admin: true },
-    } as any);
-
+  it('renders the shared SDK layout', () => {
     render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div>children</div>
       </CourseContentLayout>,
     );
-    expect(screen.getByText('Instructor')).toBeInTheDocument();
+    expect(screen.getByTestId('shared-course-content-layout')).toBeInTheDocument();
   });
 
-  it('renders children within layout', () => {
+  it('renders children within the shared layout', () => {
     render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div data-testid="page-content">Page Content</div>
       </CourseContentLayout>,
     );
     expect(screen.getByTestId('page-content')).toBeInTheDocument();
   });
 
-  it('shows course display_name when course is loaded', () => {
-    vi.mocked(useCourseDetail).mockReturnValue({
-      handleFetchCourseInfo: mockHandleFetchCourseInfo,
-      handleFetchCourseSyllabus: mockHandleFetchCourseSyllabus,
-      handleOpenLesson: mockHandleOpenLesson,
-      handleFetchCourseProgress: mockHandleFetchCourseProgress,
-      handleFetchCourseCompletion: mockHandleFetchCourseCompletion,
-      course: { display_name: 'My Test Course', mentor_hidden: false, mentor_uuid: 'uuid-123' },
-      courseOutline: null,
-      courseOutlineLoading: false,
-      courseCompletion: null,
-      courseGradingPolicyActive: false,
-    } as any);
-
+  it('decodes the course_id from params', () => {
     render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div>children</div>
       </CourseContentLayout>,
     );
-
-    expect(screen.getAllByText('My Test Course').length).toBeGreaterThan(0);
+    expect(capturedProps.value?.courseId).toBe('course-v1:test+course+2024');
   });
 
-  it('shows completion percentage in progress bar', () => {
-    vi.mocked(useCourseDetail).mockReturnValue({
-      handleFetchCourseInfo: mockHandleFetchCourseInfo,
-      handleFetchCourseSyllabus: mockHandleFetchCourseSyllabus,
-      handleOpenLesson: mockHandleOpenLesson,
-      handleFetchCourseProgress: mockHandleFetchCourseProgress,
-      handleFetchCourseCompletion: mockHandleFetchCourseCompletion,
-      course: null,
-      courseOutline: null,
-      courseOutlineLoading: false,
-      courseCompletion: { completion_percentage: 75, grading_percentage: 80 },
-      courseGradingPolicyActive: false,
-    } as any);
-
+  it('passes current tenant to shared layout', () => {
     render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div>children</div>
       </CourseContentLayout>,
     );
-
-    expect(screen.getByText('75%')).toBeInTheDocument();
+    expect(capturedProps.value?.currentTenant).toBe('test-tenant');
   });
 
-  it('shows grading percentage when courseGradingPolicyActive is true', () => {
-    vi.mocked(useCourseDetail).mockReturnValue({
-      handleFetchCourseInfo: mockHandleFetchCourseInfo,
-      handleFetchCourseSyllabus: mockHandleFetchCourseSyllabus,
-      handleOpenLesson: mockHandleOpenLesson,
-      handleFetchCourseProgress: mockHandleFetchCourseProgress,
-      handleFetchCourseCompletion: mockHandleFetchCourseCompletion,
-      course: null,
-      courseOutline: null,
-      courseOutlineLoading: false,
-      courseCompletion: { completion_percentage: 50, grading_percentage: 90 },
-      courseGradingPolicyActive: true,
+  it('passes isPlatformAdmin=false when user is not a platform admin', () => {
+    vi.mocked(useGetDepartmentMemberCheckQuery).mockReturnValue({
+      data: { is_platform_admin: false },
     } as any);
-
     render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div>children</div>
       </CourseContentLayout>,
     );
-
-    expect(screen.getByText('Grade:')).toBeInTheDocument();
-    expect(screen.getByText('90%')).toBeInTheDocument();
+    expect(capturedProps.value?.isPlatformAdmin).toBe(false);
   });
 
-  it('hides Grade section when courseGradingPolicyActive is false', () => {
-    vi.mocked(useCourseDetail).mockReturnValue({
-      handleFetchCourseInfo: mockHandleFetchCourseInfo,
-      handleFetchCourseSyllabus: mockHandleFetchCourseSyllabus,
-      handleOpenLesson: mockHandleOpenLesson,
-      handleFetchCourseProgress: mockHandleFetchCourseProgress,
-      handleFetchCourseCompletion: mockHandleFetchCourseCompletion,
-      course: null,
-      courseOutline: null,
-      courseOutlineLoading: false,
-      courseCompletion: { completion_percentage: 50, grading_percentage: 90 },
-      courseGradingPolicyActive: false,
+  it('passes isPlatformAdmin=true when user is a platform admin', () => {
+    vi.mocked(useGetDepartmentMemberCheckQuery).mockReturnValue({
+      data: { is_platform_admin: true },
     } as any);
-
     render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div>children</div>
       </CourseContentLayout>,
     );
-
-    expect(screen.queryByText('Grade:')).not.toBeInTheDocument();
+    expect(capturedProps.value?.isPlatformAdmin).toBe(true);
   });
 
-  it('renders open course outline button', () => {
+  it('maps forum tab href to discussion', () => {
     render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div>children</div>
       </CourseContentLayout>,
     );
-
-    const outlineButton = screen.getByLabelText('Open course outline');
-    expect(outlineButton).toBeInTheDocument();
+    const href = capturedProps.value?.tabHrefTemplate({ courseId: 'c1', tab: 'forum' });
+    expect(href).toBe('/course-content/c1/discussion');
   });
 
-  it('clicking open course outline button opens drawer', () => {
+  it('keeps non-forum tabs as-is in href template', () => {
     render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div>children</div>
       </CourseContentLayout>,
     );
-
-    const outlineButton = screen.getByLabelText('Open course outline');
-    fireEvent.click(outlineButton);
-    // Verifies no error thrown (the state is internal)
-    expect(outlineButton).toBeInTheDocument();
+    const href = capturedProps.value?.tabHrefTemplate({ courseId: 'c1', tab: 'progress' });
+    expect(href).toBe('/course-content/c1/progress');
   });
 
-  it('calls handleFetchCourseInfo on mount', () => {
+  it('pushes to /error/403 on unauthorized', () => {
     render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div>children</div>
       </CourseContentLayout>,
     );
-    expect(mockHandleFetchCourseInfo).toHaveBeenCalled();
+    capturedProps.value?.onUnauthorized();
+    expect(mockRouterPush).toHaveBeenCalledWith('/error/403');
   });
 
-  it('calls handleFetchCourseProgress on mount', () => {
+  it('pushes to /error/404 on not found', () => {
     render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div>children</div>
       </CourseContentLayout>,
     );
-    expect(mockHandleFetchCourseProgress).toHaveBeenCalled();
+    capturedProps.value?.onNotFound();
+    expect(mockRouterPush).toHaveBeenCalledWith('/error/404');
   });
 
-  it('calls handleFetchCourseCompletion on mount', () => {
+  it('uses router.push for internal navigation', () => {
     render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div>children</div>
       </CourseContentLayout>,
     );
-    expect(mockHandleFetchCourseCompletion).toHaveBeenCalled();
+    capturedProps.value?.onNavigate('/some/path');
+    expect(mockRouterPush).toHaveBeenCalledWith('/some/path');
   });
 
-  it('shows 0% when courseCompletion is null', () => {
+  it('hooks onCourseMentorChange to setCourseMentor from chat state', () => {
     render(
-      <CourseContentLayout params={defaultParams}>
+      <CourseContentLayout params={params}>
         <div>children</div>
       </CourseContentLayout>,
     );
-
-    expect(screen.getByText('0%')).toBeInTheDocument();
+    expect(capturedProps.value?.onCourseMentorChange).toBe(mockSetCourseMentor);
   });
 });
diff --git a/app/course-content/[course_id]/__tests__/loading.test.tsx b/app/course-content/[course_id]/__tests__/loading.test.tsx
index e7d6036..b1cb0e6 100644
--- a/app/course-content/[course_id]/__tests__/loading.test.tsx
+++ b/app/course-content/[course_id]/__tests__/loading.test.tsx
@@ -2,10 +2,8 @@ import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-vi.mock('@/components/ui/skeleton', () => ({
-  Skeleton: ({ className }: { className?: string }) => (
-    <div data-testid="skeleton" className={className} />
-  ),
+vi.mock('@iblai/iblai-js/web-containers', () => ({
+  CourseContentLoading: () => <div data-testid="course-content-loading" />,
 }));
 
 import Loading from '../loading';
@@ -15,9 +13,8 @@ describe('Loading (course-content)', () => {
     render(<Loading />);
   });
 
-  it('renders skeleton elements', () => {
+  it('renders the shared CourseContentLoading component', () => {
     render(<Loading />);
-    const skeletons = screen.getAllByTestId('skeleton');
-    expect(skeletons.length).toBeGreaterThan(0);
+    expect(screen.getByTestId('course-content-loading')).toBeInTheDocument();
   });
 });
diff --git a/app/profile/__tests__/layout.test.tsx b/app/profile/__tests__/layout.test.tsx
index f42d562..5c589f0 100644
--- a/app/profile/__tests__/layout.test.tsx
+++ b/app/profile/__tests__/layout.test.tsx
@@ -2,7 +2,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-vi.mock('@/components/profile-tabs', () => ({
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
   ProfileTabs: () => <div data-testid="profile-tabs" />,
 }));
 
diff --git a/app/profile/__tests__/page.test.tsx b/app/profile/__tests__/page.test.tsx
index 55906b4..e3994a8 100644
--- a/app/profile/__tests__/page.test.tsx
+++ b/app/profile/__tests__/page.test.tsx
@@ -2,20 +2,31 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-// Mock helpers
 vi.mock('@/utils/helpers', () => ({
   getTenant: vi.fn(() => 'test-tenant'),
   getUserName: vi.fn(() => 'test-user'),
 }));
 
-// Mock useProfileActivityStats
-vi.mock('@/hooks/profile/use-profile-activity-stats', () => ({
-  useProfileActivityStats: vi.fn(() => ({
-    stats: [],
+vi.mock('@iblai/iblai-js/web-containers', () => ({
+  ProfileTimeChart: () => <div data-testid="profile-time-chart">ProfileTimeChart</div>,
+  SkillLeaderboardChart: ({ userSkillPoints }: any) => (
+    <div data-testid="skill-leaderboard-chart" data-points={userSkillPoints}>
+      SkillLeaderboardChart
+    </div>
+  ),
+  SkeletonActivityStatBox: () => <div data-testid="skeleton-activity-stat-box">Loading...</div>,
+  useProfileActivityStats: vi.fn(() => ({ stats: [] })),
+  useProfileTimeSpent: vi.fn(() => ({ timeSpent: [], timeSpentLoading: false })),
+  useUserMetadata: vi.fn(() => ({
+    userMetaData: { enable_skills_leaderboard_display: true },
+    userMetaDataLoading: false,
   })),
 }));
 
-// Mock useTenantMetadata
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
+  ProfileInfoCards: () => <div data-testid="profile-info-cards">ProfileInfoCards</div>,
+}));
+
 vi.mock('@iblai/iblai-js/web-utils', () => ({
   useTenantMetadata: vi.fn(() => ({
     metadataLoaded: true,
@@ -23,43 +34,14 @@ vi.mock('@iblai/iblai-js/web-utils', () => ({
   })),
 }));
 
-// Mock useGetUserMetadataQuery
-vi.mock('@iblai/iblai-js/data-layer', () => ({
-  useGetUserMetadataQuery: vi.fn(() => ({
-    data: { enable_skills_leaderboard_display: true },
-    isLoading: false,
-  })),
-}));
-
-// Mock ProfileTimeChart
-vi.mock('@/components/profile-time-chart', () => ({
-  ProfileTimeChart: () => <div data-testid="profile-time-chart">ProfileTimeChart</div>,
-}));
-
-// Mock ProfileInfoCards
-vi.mock('@/components/profile-info-cards', () => ({
-  ProfileInfoCards: () => <div data-testid="profile-info-cards">ProfileInfoCards</div>,
-}));
-
-// Mock SkillLeaderboardChart
-vi.mock('@/components/skill-leaderboard-chart', () => ({
-  SkillLeaderboardChart: ({ userSkillPoints }: any) => (
-    <div data-testid="skill-leaderboard-chart" data-points={userSkillPoints}>
-      SkillLeaderboardChart
-    </div>
-  ),
-}));
-
-// Mock SkeletonActivityStatBox
-vi.mock('@/components/skeleton-activity-stat-box', () => ({
-  SkeletonActivityStatBox: () => <div data-testid="skeleton-activity-stat-box">Loading...</div>,
+vi.mock('@/services/perlearner', () => ({
+  useGetUserPerLearnerInfoQuery: vi.fn(() => ({ data: null, isLoading: false })),
+  useLazyGetPerLearnerActivityQuery: vi.fn(() => [vi.fn(() => Promise.resolve({ data: {} }))]),
 }));
 
 import ProfilePage from '../page';
-import { useProfileActivityStats } from '@/hooks/profile/use-profile-activity-stats';
+import { useProfileActivityStats, useUserMetadata } from '@iblai/iblai-js/web-containers';
 import { useTenantMetadata } from '@iblai/iblai-js/web-utils';
-// @ts-ignore
-import { useGetUserMetadataQuery } from '@iblai/iblai-js/data-layer';
 
 describe('ProfilePage', () => {
   beforeEach(() => {
@@ -71,9 +53,9 @@ describe('ProfilePage', () => {
       metadataLoaded: true,
       isSkillsLeaderBoardEnabled: vi.fn(() => false),
     } as any);
-    vi.mocked(useGetUserMetadataQuery).mockReturnValue({
-      data: { enable_skills_leaderboard_display: true },
-      isLoading: false,
+    vi.mocked(useUserMetadata).mockReturnValue({
+      userMetaData: { enable_skills_leaderboard_display: true },
+      userMetaDataLoading: false,
     } as any);
   });
 
@@ -166,9 +148,9 @@ describe('ProfilePage', () => {
       metadataLoaded: true,
       isSkillsLeaderBoardEnabled: vi.fn(() => true),
     } as any);
-    vi.mocked(useGetUserMetadataQuery).mockReturnValue({
-      data: undefined,
-      isLoading: true,
+    vi.mocked(useUserMetadata).mockReturnValue({
+      userMetaData: undefined,
+      userMetaDataLoading: true,
     } as any);
 
     render(<ProfilePage />);
@@ -181,9 +163,9 @@ describe('ProfilePage', () => {
       metadataLoaded: true,
       isSkillsLeaderBoardEnabled: vi.fn(() => true),
     } as any);
-    vi.mocked(useGetUserMetadataQuery).mockReturnValue({
-      data: { enable_skills_leaderboard_display: false },
-      isLoading: false,
+    vi.mocked(useUserMetadata).mockReturnValue({
+      userMetaData: { enable_skills_leaderboard_display: false },
+      userMetaDataLoading: false,
     } as any);
 
     render(<ProfilePage />);
@@ -196,9 +178,9 @@ describe('ProfilePage', () => {
       metadataLoaded: true,
       isSkillsLeaderBoardEnabled: vi.fn(() => true),
     } as any);
-    vi.mocked(useGetUserMetadataQuery).mockReturnValue({
-      data: { enable_skills_leaderboard_display: true },
-      isLoading: false,
+    vi.mocked(useUserMetadata).mockReturnValue({
+      userMetaData: { enable_skills_leaderboard_display: true },
+      userMetaDataLoading: false,
     } as any);
 
     render(<ProfilePage />);
@@ -212,9 +194,9 @@ describe('ProfilePage', () => {
       metadataLoaded: true,
       isSkillsLeaderBoardEnabled: vi.fn(() => true),
     } as any);
-    vi.mocked(useGetUserMetadataQuery).mockReturnValue({
-      data: { enable_skills_leaderboard_display: true },
-      isLoading: false,
+    vi.mocked(useUserMetadata).mockReturnValue({
+      userMetaData: { enable_skills_leaderboard_display: true },
+      userMetaDataLoading: false,
     } as any);
     vi.mocked(useProfileActivityStats).mockReturnValue({
       stats: [{ loading: false, label: 'Points', value: 250 }],
@@ -231,9 +213,9 @@ describe('ProfilePage', () => {
       metadataLoaded: true,
       isSkillsLeaderBoardEnabled: vi.fn(() => true),
     } as any);
-    vi.mocked(useGetUserMetadataQuery).mockReturnValue({
-      data: { enable_skills_leaderboard_display: true },
-      isLoading: false,
+    vi.mocked(useUserMetadata).mockReturnValue({
+      userMetaData: { enable_skills_leaderboard_display: true },
+      userMetaDataLoading: false,
     } as any);
     vi.mocked(useProfileActivityStats).mockReturnValue({
       stats: [{ loading: false, label: 'Courses', value: 10 }],
@@ -250,14 +232,13 @@ describe('ProfilePage', () => {
       metadataLoaded: true,
       isSkillsLeaderBoardEnabled: vi.fn(() => true),
     } as any);
-    vi.mocked(useGetUserMetadataQuery).mockReturnValue({
-      data: {},
-      isLoading: false,
+    vi.mocked(useUserMetadata).mockReturnValue({
+      userMetaData: {},
+      userMetaDataLoading: false,
     } as any);
 
     render(<ProfilePage />);
 
-    // enable_skills_leaderboard_display is undefined, not false - should show chart
     expect(screen.getByTestId('skill-leaderboard-chart')).toBeInTheDocument();
   });
 });
diff --git a/app/profile/courses/__tests__/page.test.tsx b/app/profile/courses/__tests__/page.test.tsx
index 79ae058..a236951 100644
--- a/app/profile/courses/__tests__/page.test.tsx
+++ b/app/profile/courses/__tests__/page.test.tsx
@@ -16,33 +16,25 @@ vi.mock('@/utils/helpers', () => ({
 const mockUserCourses: any[] = [];
 const mockPagination = { total_pages: 1, count: 0 };
 
-vi.mock('@/hooks/courses/use-user-courses', () => ({
+vi.mock('@iblai/iblai-js/web-containers', () => ({
   useUserCourses: vi.fn(() => ({
     userCourses: mockUserCourses,
     isLoadingUserCourses: false,
     errorUserCourses: false,
     pagination: mockPagination,
   })),
-}));
-
-vi.mock('@/components/course-box', () => ({
-  CourseBox: ({ course }: any) => <div data-testid="course-box">{course.course_id}</div>,
-}));
-
-vi.mock('@/components/skeleton-multiplier', () => ({
+  getRandomCourseImage: vi.fn(() => '/fallback.png'),
   SkeletonMultiplier: () => <div data-testid="skeleton-multiplier" />,
-}));
-
-vi.mock('@/components/course-card-skeleton', () => ({
   CourseCardSkeleton: () => <div data-testid="course-card-skeleton" />,
-}));
-
-vi.mock('@/components/default-empty-box', () => ({
   DefaultEmptyBox: ({ message }: { message: string }) => (
     <div data-testid="empty-box">{message}</div>
   ),
 }));
 
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
+  CourseBox: ({ course }: any) => <div data-testid="course-box">{course.course_id}</div>,
+}));
+
 vi.mock('react-paginate', () => ({
   default: ({ onPageChange }: any) => (
     <div data-testid="paginate">
@@ -54,7 +46,7 @@ vi.mock('react-paginate', () => ({
 }));
 
 import CoursesPage from '../page';
-import { useUserCourses } from '@/hooks/courses/use-user-courses';
+import { useUserCourses } from '@iblai/iblai-js/web-containers';
 import { useTenantMetadata } from '@iblai/iblai-js/web-utils';
 
 describe('CoursesPage', () => {
diff --git a/app/profile/credentials/__tests__/page.test.tsx b/app/profile/credentials/__tests__/page.test.tsx
index 97ccd54..6bda649 100644
--- a/app/profile/credentials/__tests__/page.test.tsx
+++ b/app/profile/credentials/__tests__/page.test.tsx
@@ -4,15 +4,20 @@ import '@testing-library/jest-dom';
 
 const mockFilteredCredentials: any[] = [];
 
-vi.mock('@/hooks/profile/use-profile-credentials', () => ({
+vi.mock('@iblai/iblai-js/web-containers', () => ({
   useProfileCredentials: vi.fn(() => ({
     filteredCredentials: mockFilteredCredentials,
     isLoading: false,
     isError: false,
   })),
+  CredentialMiniBoxSkeleton: () => <div data-testid="credential-skeleton" />,
+  DefaultEmptyBox: ({ message }: { message: string }) => (
+    <div data-testid="empty-box">{message}</div>
+  ),
+  SkeletonMultiplier: () => <div data-testid="skeleton-multiplier" />,
 }));
 
-vi.mock('@/components/credential-detail-modal', () => ({
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
   CredentialDetailModal: ({ credential, onClose }: any) => (
     <div data-testid="credential-modal">
       <span>{credential?.entityId}</span>
@@ -21,23 +26,6 @@ vi.mock('@/components/credential-detail-modal', () => ({
       </button>
     </div>
   ),
-}));
-
-vi.mock('@/components/skeleton-multiplier', () => ({
-  SkeletonMultiplier: () => <div data-testid="skeleton-multiplier" />,
-}));
-
-vi.mock('@/components/skeleton-credential-mini-box', () => ({
-  CredentialMiniBoxSkeleton: () => <div data-testid="credential-skeleton" />,
-}));
-
-vi.mock('@/components/default-empty-box', () => ({
-  DefaultEmptyBox: ({ message }: { message: string }) => (
-    <div data-testid="empty-box">{message}</div>
-  ),
-}));
-
-vi.mock('@/components/credential-mini-box', () => ({
   CredentialMiniBox: ({ credential, onClick }: any) => (
     <div data-testid="credential-mini-box" onClick={onClick}>
       {credential.entityId}
@@ -46,7 +34,7 @@ vi.mock('@/components/credential-mini-box', () => ({
 }));
 
 import CredentialsPage from '../page';
-import { useProfileCredentials } from '@/hooks/profile/use-profile-credentials';
+import { useProfileCredentials } from '@iblai/iblai-js/web-containers';
 
 describe('CredentialsPage', () => {
   beforeEach(() => {
diff --git a/app/profile/pathways/__tests__/page.test.tsx b/app/profile/pathways/__tests__/page.test.tsx
index 628021a..d9ebaf1 100644
--- a/app/profile/pathways/__tests__/page.test.tsx
+++ b/app/profile/pathways/__tests__/page.test.tsx
@@ -6,6 +6,14 @@ vi.mock('next/image', () => ({
   default: ({ src, alt, ...props }: any) => <img src={src} alt={alt} {...props} />,
 }));
 
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock('sonner', () => ({
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+
 vi.mock('@iblai/iblai-js/web-utils', () => ({
   useTenantMetadata: vi.fn(() => ({
     metadataLoaded: true,
@@ -15,13 +23,21 @@ vi.mock('@iblai/iblai-js/web-utils', () => ({
 
 vi.mock('@/utils/helpers', () => ({
   getTenant: vi.fn(() => 'test-tenant'),
-  getRandomCourseImage: vi.fn(() => '/random-image.jpg'),
+  getUserId: vi.fn(() => 'user-id'),
+  getUserName: vi.fn(() => 'test-user'),
+  slugify: vi.fn((s: string) => s),
+}));
+
+vi.mock('@/lib/config', () => ({
+  config: {
+    urls: { lms: vi.fn(() => 'https://lms.example.com') },
+  },
 }));
 
 const mockSetFilteredPathways = vi.fn();
 const mockSetPathways = vi.fn();
 
-vi.mock('@/hooks/profile/use-profile-pathways', () => ({
+vi.mock('@iblai/iblai-js/web-containers', () => ({
   useProfilePathways: vi.fn(() => ({
     filteredPathways: [],
     isLoading: false,
@@ -31,9 +47,15 @@ vi.mock('@/hooks/profile/use-profile-pathways', () => ({
     setFilteredPathways: mockSetFilteredPathways,
     pathwayCompletions: [],
   })),
+  getRandomCourseImage: vi.fn(() => '/random-image.jpg'),
+  DefaultEmptyBox: ({ message }: { message: string }) => (
+    <div data-testid="empty-box">{message}</div>
+  ),
+  SkeletonMultiplier: () => <div data-testid="skeleton-multiplier" />,
+  SkeletonPathwayBox: () => <div data-testid="skeleton-pathway-box" />,
 }));
 
-vi.mock('@/components/pathway-detail-modal', () => ({
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
   PathwayDetailModal: ({ pathway, onClose }: any) => (
     <div data-testid="pathway-modal">
       <span>{pathway?.name}</span>
@@ -42,9 +64,6 @@ vi.mock('@/components/pathway-detail-modal', () => ({
       </button>
     </div>
   ),
-}));
-
-vi.mock('@/components/create-pathway-modal', () => ({
   CreatePathwayModal: ({ onOpenChange, onSave }: any) => (
     <div data-testid="create-pathway-modal">
       <button data-testid="save-pathway" onClick={() => onSave({ name: 'New Pathway' })}>
@@ -57,22 +76,43 @@ vi.mock('@/components/create-pathway-modal', () => ({
   ),
 }));
 
-vi.mock('@/components/skeleton-multiplier', () => ({
-  SkeletonMultiplier: () => <div data-testid="skeleton-multiplier" />,
+// Stable references to avoid useEffect deps churn
+const stableGetPathwayList = vi.fn(() => Promise.resolve({ data: [] }));
+const stableGetPathwayCompletion = vi.fn(() => Promise.resolve({ data: null }));
+const stableGetUserEnrolledPathways = vi.fn(() => Promise.resolve({ data: [] }));
+const stableCreateEnrollment = vi.fn();
+const stableGetResourceSearch = vi.fn(() => Promise.resolve({ data: [] }));
+const stableCreatePathway = vi.fn(() => Promise.resolve({ data: null }));
+
+vi.mock('@iblai/iblai-js/data-layer', () => ({
+  useLazyGetPathwayCompletionQuery: vi.fn(() => [stableGetPathwayCompletion]),
+  useLazyGetUserEnrolledPathwaysQuery: vi.fn(() => [
+    stableGetUserEnrolledPathways,
+    { isLoading: false },
+  ]),
+  useCreateCatalogPathwaySelfEnrollmentMutation: vi.fn(() => [
+    stableCreateEnrollment,
+    { isError: false, isSuccess: false },
+  ]),
+  useLazyGetPathwayListQuery: vi.fn(() => [stableGetPathwayList]),
+  useLazyGetResourceSearchQuery: vi.fn(() => [stableGetResourceSearch, { isLoading: false }]),
+  useCreateCatalogPathwayMutation: vi.fn(() => [stableCreatePathway, { isError: false }]),
 }));
 
-vi.mock('@/components/skeleton-pathway-box', () => ({
-  SkeletonPathwayBox: () => <div data-testid="skeleton-pathway-box" />,
+const stableHandleSearch = vi.fn(() => Promise.resolve({ data: { results: [] } }));
+vi.mock('@/hooks/search/use-personnalized-catalog', () => ({
+  usePersonnalizedCatalog: vi.fn(() => ({
+    handleSearch: stableHandleSearch,
+    isLoading: false,
+  })),
 }));
 
-vi.mock('@/components/default-empty-box', () => ({
-  DefaultEmptyBox: ({ message }: { message: string }) => (
-    <div data-testid="empty-box">{message}</div>
-  ),
+vi.mock('use-debounce', () => ({
+  useDebouncedCallback: (fn: any) => fn,
 }));
 
 import PathwaysPage from '../page';
-import { useProfilePathways } from '@/hooks/profile/use-profile-pathways';
+import { useProfilePathways } from '@iblai/iblai-js/web-containers';
 import { useTenantMetadata } from '@iblai/iblai-js/web-utils';
 
 describe('PathwaysPage', () => {
diff --git a/app/profile/programs/__tests__/page.test.tsx b/app/profile/programs/__tests__/page.test.tsx
index 8fcab70..8ef7d84 100644
--- a/app/profile/programs/__tests__/page.test.tsx
+++ b/app/profile/programs/__tests__/page.test.tsx
@@ -9,10 +9,63 @@ vi.mock('next/image', () => ({
   ),
 }));
 
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+// Mock sonner
+vi.mock('sonner', () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
+}));
+
 // Mock helpers
 vi.mock('@/utils/helpers', () => ({
-  getRandomCourseImage: vi.fn(() => '/random-course-image.jpg'),
   getTenant: vi.fn(() => 'test-tenant'),
+  getUserName: vi.fn(() => 'test-user'),
+}));
+
+// Mock useIsAdmin
+vi.mock('@/utils/localstorage', () => ({
+  useIsAdmin: vi.fn(() => false),
+}));
+
+// Stable references to avoid useEffect loops
+const stableHandleSearch = vi.fn(() => Promise.resolve({ data: { results: [] } }));
+const stableGetProgramCompletion = vi.fn(() => Promise.resolve({ data: null }));
+const stableGetUserEnrolledPrograms = vi.fn(() => Promise.resolve({ data: [] }));
+const stableCreateEnrollment = vi.fn();
+const stableUpdateMetadata = vi.fn(() => ({ unwrap: vi.fn(() => Promise.resolve()) }));
+const stableRefetch = vi.fn();
+
+// Mock personnalized catalog hook
+vi.mock('@/hooks/search/use-personnalized-catalog', () => ({
+  usePersonnalizedCatalog: vi.fn(() => ({
+    handleSearch: stableHandleSearch,
+  })),
+}));
+
+// Mock studio hooks
+vi.mock('@/services/studio', () => ({
+  useGetProgramMetadataQuery: vi.fn(() => ({
+    data: undefined,
+    isLoading: false,
+    refetch: stableRefetch,
+  })),
+  useUpdateProgramMetadataMutation: vi.fn(() => [stableUpdateMetadata, { isLoading: false }]),
+}));
+
+// Mock iblai-js/data-layer
+vi.mock('@iblai/iblai-js/data-layer', () => ({
+  useLazyGetProgramCompletionQuery: vi.fn(() => [stableGetProgramCompletion]),
+  useLazyGetUserEnrolledProgramsQuery: vi.fn(() => [
+    stableGetUserEnrolledPrograms,
+    { isLoading: false },
+  ]),
+  useCreateCatalogProgramSelfEnrollmentMutation: vi.fn(() => [
+    stableCreateEnrollment,
+    { isError: false, isSuccess: false },
+  ]),
 }));
 
 // Mock config
@@ -36,7 +89,7 @@ vi.mock('@iblai/iblai-js/web-utils', () => ({
 const mockSetFilteredPrograms = vi.fn();
 const mockSetPrograms = vi.fn();
 
-vi.mock('@/hooks/profile/use-profile-programs', () => ({
+vi.mock('@iblai/iblai-js/web-containers', () => ({
   useProfilePrograms: vi.fn(() => ({
     programs: [],
     filteredPrograms: [],
@@ -47,10 +100,15 @@ vi.mock('@/hooks/profile/use-profile-programs', () => ({
     programCompletions: [],
     programCompletionsLoading: false,
   })),
+  getRandomCourseImage: vi.fn(() => '/random-course-image.jpg'),
+  DefaultEmptyBox: ({ message }: { message: string }) => (
+    <div data-testid="empty-box">{message}</div>
+  ),
+  SkeletonMultiplier: () => <div data-testid="skeleton-multiplier">Loading...</div>,
+  SkeletonPathwayBox: () => <div data-testid="skeleton-pathway-box">Skeleton</div>,
 }));
 
-// Mock ProgramDetailModal
-vi.mock('@/components/program-detail-modal', () => ({
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
   ProgramDetailModal: ({ program, onClose }: any) => (
     <div data-testid="program-detail-modal">
       Modal for: {program?.name}
@@ -59,23 +117,8 @@ vi.mock('@/components/program-detail-modal', () => ({
   ),
 }));
 
-// Mock components
-vi.mock('@/components/default-empty-box', () => ({
-  DefaultEmptyBox: ({ message }: { message: string }) => (
-    <div data-testid="empty-box">{message}</div>
-  ),
-}));
-
-vi.mock('@/components/skeleton-multiplier', () => ({
-  SkeletonMultiplier: () => <div data-testid="skeleton-multiplier">Loading...</div>,
-}));
-
-vi.mock('@/components/skeleton-pathway-box', () => ({
-  SkeletonPathwayBox: () => <div data-testid="skeleton-pathway-box">Skeleton</div>,
-}));
-
 import ProgramsPage from '../page';
-import { useProfilePrograms } from '@/hooks/profile/use-profile-programs';
+import { useProfilePrograms } from '@iblai/iblai-js/web-containers';
 import { useTenantMetadata } from '@iblai/iblai-js/web-utils';
 
 describe('ProgramsPage', () => {
diff --git a/app/profile/public/__tests__/page.test.tsx b/app/profile/public/__tests__/page.test.tsx
index 072312f..a7b5a4a 100644
--- a/app/profile/public/__tests__/page.test.tsx
+++ b/app/profile/public/__tests__/page.test.tsx
@@ -3,7 +3,6 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import React from 'react';
 
-// Mock lucide-react icons
 vi.mock('lucide-react', () => ({
   Facebook: () => <span data-testid="facebook-icon">Facebook</span>,
   Linkedin: () => <span data-testid="linkedin-icon">Linkedin</span>,
@@ -12,12 +11,16 @@ vi.mock('lucide-react', () => ({
   Edit: () => <span data-testid="edit-icon">Edit</span>,
 }));
 
-// Mock helpers
+vi.mock('sonner', () => ({
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+
 vi.mock('@/utils/helpers', () => ({
   getTenant: vi.fn(() => 'test-tenant'),
+  getUserName: vi.fn(() => 'test-user'),
+  onAccountDeleted: vi.fn(),
 }));
 
-// Mock config
 vi.mock('@/lib/config', () => ({
   config: {
     settings: {
@@ -31,28 +34,13 @@ vi.mock('@/lib/config', () => ({
   },
 }));
 
-// Mock useUserMetadata
-vi.mock('@/hooks/users/use-usermetadata', () => ({
-  useUserMetadata: vi.fn(() => ({
-    userMetaData: {
-      name: 'John Doe',
-      bio: 'Software Engineer',
-      about: 'About me section',
-      social_links: [],
-    },
-  })),
-}));
-
-// Mock useTenantMetadata
 vi.mock('@iblai/iblai-js/web-utils', () => ({
   useTenantMetadata: vi.fn(() => ({
     metadataLoaded: true,
     isSkillsResumeFeatureHidden: vi.fn(() => false),
   })),
-  Tenant: {},
 }));
 
-// Mock useIsAdmin, useUserTenants
 vi.mock('@/utils/localstorage', () => ({
   useIsAdmin: vi.fn(() => false),
   useUserTenants: vi.fn(() => ({
@@ -61,7 +49,6 @@ vi.mock('@/utils/localstorage', () => ({
   })),
 }));
 
-// Mock useAppSelector and selectRbacPermissions
 vi.mock('@/lib/hooks', () => ({
   useAppSelector: vi.fn(() => ({})),
 }));
@@ -70,8 +57,47 @@ vi.mock('@/features/rbac', () => ({
   selectRbacPermissions: vi.fn(),
 }));
 
-// Mock UserProfileModal
+vi.mock('@iblai/iblai-js/web-containers', () => ({
+  CredentialBox: () => <div data-testid="credential-box">CredentialBox</div>,
+  EducationBox: () => <div data-testid="education-box">EducationBox</div>,
+  ExperienceBox: () => <div data-testid="experience-box">ExperienceBox</div>,
+  ResumeBox: () => <div data-testid="resume-box">ResumeBox</div>,
+  SkillsBox: () => <div data-testid="skills-box">SkillsBox</div>,
+  UserAvatar: ({ size, containerClassName }: any) => (
+    <div data-testid="user-avatar" data-size={size} className={containerClassName}>
+      UserAvatar
+    </div>
+  ),
+  EducationDialog: () => <div data-testid="education-dialog">EducationDialog</div>,
+  ExperienceDialog: () => <div data-testid="experience-dialog">ExperienceDialog</div>,
+  useProfileCredentials: vi.fn(() => ({
+    fetchedCredentials: [],
+    isLoading: false,
+    isError: false,
+  })),
+  useProfileSkills: vi.fn(() => ({
+    earnedSkills: [],
+    earnedSkillsLoading: false,
+    earnedSkillsError: false,
+    selfReportedSkills: [],
+    selfReportedSkillsLoading: false,
+    selfReportedSkillsError: false,
+    desiredSkills: [],
+    desiredSkillsLoading: false,
+    desiredSkillsError: false,
+  })),
+  useUserMetadata: vi.fn(() => ({
+    userMetaData: {
+      name: 'John Doe',
+      bio: 'Software Engineer',
+      about: 'About me section',
+      social_links: [],
+    },
+  })),
+}));
+
 vi.mock('@iblai/iblai-js/web-containers/next', () => ({
+  MediaBox: () => <div data-testid="media-box">MediaBox</div>,
   UserProfileModal: ({ isOpen, onClose, targetTab }: any) =>
     isOpen ? (
       <div data-testid="user-profile-modal" data-target-tab={targetTab}>
@@ -83,41 +109,32 @@ vi.mock('@iblai/iblai-js/web-containers/next', () => ({
     ) : null,
 }));
 
-// Mock UserAvatar
-vi.mock('@/components/header/profile/user-avatar', () => ({
-  UserAvatar: ({ size, containerClassName }: any) => (
-    <div data-testid="user-avatar" data-size={size} className={containerClassName}>
-      UserAvatar
-    </div>
-  ),
-}));
-
-// Mock profile components
-vi.mock('@/components/profile/education-box', () => ({
-  EducationBox: () => <div data-testid="education-box">EducationBox</div>,
-}));
-
-vi.mock('@/components/profile/experience-box', () => ({
-  ExperienceBox: () => <div data-testid="experience-box">ExperienceBox</div>,
-}));
-
-vi.mock('@/components/profile/skills-box', () => ({
-  SkillsBox: () => <div data-testid="skills-box">SkillsBox</div>,
+// Stable references to keep hook return values referentially stable across renders
+const stableCreateUserResume = vi.fn();
+
+vi.mock('@iblai/iblai-js/data-layer', () => ({
+  useGetUserEducationQuery: vi.fn(() => ({ data: [], isLoading: false, error: null })),
+  useGetUserExperienceQuery: vi.fn(() => ({ data: [], isLoading: false, error: null })),
+  useGetUserResumeQuery: vi.fn(() => ({
+    data: { files: [], links: [] },
+    isLoading: false,
+    isError: false,
+    refetch: vi.fn(),
+  })),
 }));
 
-vi.mock('@/components/profile/credential-box', () => ({
-  CredentialBox: () => <div data-testid="credential-box">CredentialBox</div>,
+vi.mock('@/services/career', () => ({
+  useCreateUserResumeMutation: vi.fn(() => [stableCreateUserResume, { isLoading: false }]),
 }));
 
-vi.mock('@/components/profile/resume-box', () => ({
-  ResumeBox: () => <div data-testid="resume-box">ResumeBox</div>,
+vi.mock('@/components/add-institution-dialog', () => ({
+  AddInstitutionDialog: () => <div data-testid="add-institution-dialog" />,
 }));
 
-vi.mock('@/components/profile/media-box', () => ({
-  MediaBox: () => <div data-testid="media-box">MediaBox</div>,
+vi.mock('@/components/add-company-dialog', () => ({
+  AddCompanyDialog: () => <div data-testid="add-company-dialog" />,
 }));
 
-// Mock AppContext from client-layout
 const mockSetIsUserProfileOpen = vi.fn();
 const mockSetUserProfileTargetTab = vi.fn();
 
@@ -132,11 +149,10 @@ vi.mock('@/components/client-layout', () => ({
 
 import PublicProfilePage from '../page';
 import { AppContext } from '@/components/client-layout';
-import { useUserMetadata } from '@/hooks/users/use-usermetadata';
+import { useUserMetadata } from '@iblai/iblai-js/web-containers';
 import { useTenantMetadata } from '@iblai/iblai-js/web-utils';
 import { useUserTenants } from '@/utils/localstorage';
 
-// Helper component that provides context
 function renderWithContext(isUserProfileOpen = false, userProfileTargetTab = 'basic') {
   return render(
     <AppContext.Provider
@@ -365,7 +381,6 @@ describe('PublicProfilePage', () => {
     } as any);
 
     renderWithContext();
-    // Bio should not show
     expect(screen.queryByText('Software Engineer')).not.toBeInTheDocument();
   });
 
@@ -378,7 +393,6 @@ describe('PublicProfilePage', () => {
 
     renderWithContext(true, 'basic');
 
-    // The UserProfileModal is rendered - we just verify the mock was set up correctly
     expect(screen.getByTestId('user-profile-modal')).toBeInTheDocument();
   });
 });
diff --git a/app/profile/skills/__tests__/page.test.tsx b/app/profile/skills/__tests__/page.test.tsx
index 75b1469..3e7d6b9 100644
--- a/app/profile/skills/__tests__/page.test.tsx
+++ b/app/profile/skills/__tests__/page.test.tsx
@@ -19,11 +19,13 @@ vi.mock('lodash', () => ({
   },
 }));
 
-// Mock useProfileSkills
+// Mock useProfileSkills and related SDK components
 const mockHandleSkillsDeletion = vi.fn();
 const mockHandleSkillsUpdate = vi.fn();
+const mockHandleSkillsCreate = vi.fn(() => Promise.resolve(true));
+const mockHandleFetchAllSkills = vi.fn();
 
-vi.mock('@/hooks/profile/use-profile-skills', () => ({
+vi.mock('@iblai/iblai-js/web-containers', () => ({
   useProfileSkills: vi.fn(() => ({
     earnedSkills: null,
     earnedSkillsLoading: false,
@@ -41,11 +43,12 @@ vi.mock('@/hooks/profile/use-profile-skills', () => ({
     updatingSkill: false,
     deletingSkill: false,
     handleSkillsUpdate: mockHandleSkillsUpdate,
+    handleSkillsCreate: mockHandleSkillsCreate,
+    handleFetchAllSkills: mockHandleFetchAllSkills,
+    fetchedSkills: null,
+    isFetchingSkills: false,
+    isFetchingSkillsError: false,
   })),
-}));
-
-// Mock AddSkillDialog
-vi.mock('@/components/add-skill-dialog', () => ({
   AddSkillDialog: ({ open, onOpenChange, type }: any) =>
     open ? (
       <div data-testid="add-skill-dialog" data-type={type}>
@@ -55,10 +58,6 @@ vi.mock('@/components/add-skill-dialog', () => ({
         </button>
       </div>
     ) : null,
-}));
-
-// Mock SkillDetailModal
-vi.mock('@/components/skill-detail-modal', () => ({
   SkillDetailModal: ({ skill, onClose, onRatingChange, onDeleteSkill, onConfirm }: any) => (
     <div data-testid="skill-detail-modal" data-skill-name={skill?.name}>
       SkillDetailModal
@@ -76,10 +75,6 @@ vi.mock('@/components/skill-detail-modal', () => ({
       </button>
     </div>
   ),
-}));
-
-// Mock SkillBox
-vi.mock('@/components/skill-box', () => ({
   SkillBox: ({ skill, onSkillClick, showRating }: any) => (
     <div
       data-testid="skill-box"
@@ -90,24 +85,12 @@ vi.mock('@/components/skill-box', () => ({
       {skill?.name}
     </div>
   ),
-}));
-
-// Mock SkeletonSkillBox
-vi.mock('@/components/skeleton-skill-box', () => ({
   SkeletonSkillBox: () => <div data-testid="skeleton-skill-box">Loading...</div>,
-}));
-
-// Mock DefaultEmptyBox
-vi.mock('@/components/default-empty-box', () => ({
   DefaultEmptyBox: ({ message, className }: any) => (
     <div data-testid="default-empty-box" className={className}>
       {message}
     </div>
   ),
-}));
-
-// Mock SkeletonMultiplier
-vi.mock('@/components/skeleton-multiplier', () => ({
   SkeletonMultiplier: ({ multiplier }: any) => (
     <div data-testid="skeleton-multiplier" data-multiplier={multiplier}>
       Loading skeletons
@@ -115,8 +98,12 @@ vi.mock('@/components/skeleton-multiplier', () => ({
   ),
 }));
 
+vi.mock('sonner', () => ({
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+
 import SkillsPage from '../page';
-import { useProfileSkills } from '@/hooks/profile/use-profile-skills';
+import { useProfileSkills } from '@iblai/iblai-js/web-containers';
 
 describe('SkillsPage', () => {
   beforeEach(() => {
@@ -138,6 +125,11 @@ describe('SkillsPage', () => {
       updatingSkill: false,
       deletingSkill: false,
       handleSkillsUpdate: mockHandleSkillsUpdate,
+      handleSkillsCreate: mockHandleSkillsCreate,
+      handleFetchAllSkills: mockHandleFetchAllSkills,
+      fetchedSkills: null,
+      isFetchingSkills: false,
+      isFetchingSkillsError: false,
     } as any);
   });
 
diff --git a/vitest.config.ts b/vitest.config.ts
index 4f3303d..4f6f95f 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -9,6 +9,11 @@ export default defineConfig({
     setupFiles: ['./__tests__/vitest.setup.ts'],
     environment: 'jsdom',
     exclude: ['node_modules/**', 'e2e/**', '.opencode/**'],
+    server: {
+      deps: {
+        inline: [/@iblai\//],
+      },
+    },
     coverage: {
       provider: 'istanbul',
       include: [

From 2df7b1267b3047dc2a5570324052bc64d8e866c4 Mon Sep 17 00:00:00 2001
From: ANIMASHAUN Michael <michaeloncode@gmail.com>
Date: Thu, 16 Apr 2026 18:55:21 +0100
Subject: [PATCH 7/8] feat: course tab content components reused from the sdk >
 test coverage

---
 .../bookmarks/__tests__/page.test.tsx         |  46 ++
 .../course/__tests__/page.test.tsx            |  46 ++
 .../[course_id]/dates/__tests__/page.test.tsx |  46 ++
 .../discussion/__tests__/page.test.tsx        |  46 ++
 .../instructor/__tests__/page.test.tsx        | 121 +++++
 .../progress/__tests__/page.test.tsx          |  46 ++
 app/profile/__tests__/page.test.tsx           |  77 ++-
 app/profile/programs/__tests__/page.test.tsx  | 486 +++++++++++++++++-
 8 files changed, 903 insertions(+), 11 deletions(-)
 create mode 100644 app/course-content/[course_id]/bookmarks/__tests__/page.test.tsx
 create mode 100644 app/course-content/[course_id]/course/__tests__/page.test.tsx
 create mode 100644 app/course-content/[course_id]/dates/__tests__/page.test.tsx
 create mode 100644 app/course-content/[course_id]/discussion/__tests__/page.test.tsx
 create mode 100644 app/course-content/[course_id]/instructor/__tests__/page.test.tsx
 create mode 100644 app/course-content/[course_id]/progress/__tests__/page.test.tsx

diff --git a/app/course-content/[course_id]/bookmarks/__tests__/page.test.tsx b/app/course-content/[course_id]/bookmarks/__tests__/page.test.tsx
new file mode 100644
index 0000000..23a5097
--- /dev/null
+++ b/app/course-content/[course_id]/bookmarks/__tests__/page.test.tsx
@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const capturedProps: { value?: any } = {};
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
+  CourseContentTabPage: (props: any) => {
+    capturedProps.value = props;
+    return <div data-testid="course-content-tab-page" data-tab={props.tab} />;
+  },
+}));
+
+vi.mock('@/lib/config', () => ({
+  config: {
+    urls: {
+      lms: () => 'https://lms.test',
+      mfe: () => 'https://mfe.test',
+      legacyLmsUrl: () => 'https://legacy-lms.test',
+    },
+  },
+}));
+
+import BookmarksTab from '../page';
+
+describe('BookmarksTab', () => {
+  beforeEach(() => {
+    capturedProps.value = undefined;
+  });
+
+  it('renders the shared CourseContentTabPage', () => {
+    render(<BookmarksTab />);
+    expect(screen.getByTestId('course-content-tab-page')).toBeInTheDocument();
+  });
+
+  it('passes tab="bookmarks" to the shared component', () => {
+    render(<BookmarksTab />);
+    expect(capturedProps.value?.tab).toBe('bookmarks');
+  });
+
+  it('passes lmsUrl, mfeUrl, and legacyLmsUrl from config', () => {
+    render(<BookmarksTab />);
+    expect(capturedProps.value?.lmsUrl).toBe('https://lms.test');
+    expect(capturedProps.value?.mfeUrl).toBe('https://mfe.test');
+    expect(capturedProps.value?.legacyLmsUrl).toBe('https://legacy-lms.test');
+  });
+});
diff --git a/app/course-content/[course_id]/course/__tests__/page.test.tsx b/app/course-content/[course_id]/course/__tests__/page.test.tsx
new file mode 100644
index 0000000..941b1fd
--- /dev/null
+++ b/app/course-content/[course_id]/course/__tests__/page.test.tsx
@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const capturedProps: { value?: any } = {};
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
+  CourseContentTabPage: (props: any) => {
+    capturedProps.value = props;
+    return <div data-testid="course-content-tab-page" data-tab={props.tab} />;
+  },
+}));
+
+vi.mock('@/lib/config', () => ({
+  config: {
+    urls: {
+      lms: () => 'https://lms.test',
+      mfe: () => 'https://mfe.test',
+      legacyLmsUrl: () => 'https://legacy-lms.test',
+    },
+  },
+}));
+
+import CourseTab from '../page';
+
+describe('CourseTab', () => {
+  beforeEach(() => {
+    capturedProps.value = undefined;
+  });
+
+  it('renders the shared CourseContentTabPage', () => {
+    render(<CourseTab />);
+    expect(screen.getByTestId('course-content-tab-page')).toBeInTheDocument();
+  });
+
+  it('passes tab="course" to the shared component', () => {
+    render(<CourseTab />);
+    expect(capturedProps.value?.tab).toBe('course');
+  });
+
+  it('passes lmsUrl, mfeUrl, and legacyLmsUrl from config', () => {
+    render(<CourseTab />);
+    expect(capturedProps.value?.lmsUrl).toBe('https://lms.test');
+    expect(capturedProps.value?.mfeUrl).toBe('https://mfe.test');
+    expect(capturedProps.value?.legacyLmsUrl).toBe('https://legacy-lms.test');
+  });
+});
diff --git a/app/course-content/[course_id]/dates/__tests__/page.test.tsx b/app/course-content/[course_id]/dates/__tests__/page.test.tsx
new file mode 100644
index 0000000..55cc60f
--- /dev/null
+++ b/app/course-content/[course_id]/dates/__tests__/page.test.tsx
@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const capturedProps: { value?: any } = {};
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
+  CourseContentTabPage: (props: any) => {
+    capturedProps.value = props;
+    return <div data-testid="course-content-tab-page" data-tab={props.tab} />;
+  },
+}));
+
+vi.mock('@/lib/config', () => ({
+  config: {
+    urls: {
+      lms: () => 'https://lms.test',
+      mfe: () => 'https://mfe.test',
+      legacyLmsUrl: () => 'https://legacy-lms.test',
+    },
+  },
+}));
+
+import DatesTab from '../page';
+
+describe('DatesTab', () => {
+  beforeEach(() => {
+    capturedProps.value = undefined;
+  });
+
+  it('renders the shared CourseContentTabPage', () => {
+    render(<DatesTab />);
+    expect(screen.getByTestId('course-content-tab-page')).toBeInTheDocument();
+  });
+
+  it('passes tab="dates" to the shared component', () => {
+    render(<DatesTab />);
+    expect(capturedProps.value?.tab).toBe('dates');
+  });
+
+  it('passes lmsUrl, mfeUrl, and legacyLmsUrl from config', () => {
+    render(<DatesTab />);
+    expect(capturedProps.value?.lmsUrl).toBe('https://lms.test');
+    expect(capturedProps.value?.mfeUrl).toBe('https://mfe.test');
+    expect(capturedProps.value?.legacyLmsUrl).toBe('https://legacy-lms.test');
+  });
+});
diff --git a/app/course-content/[course_id]/discussion/__tests__/page.test.tsx b/app/course-content/[course_id]/discussion/__tests__/page.test.tsx
new file mode 100644
index 0000000..db28777
--- /dev/null
+++ b/app/course-content/[course_id]/discussion/__tests__/page.test.tsx
@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const capturedProps: { value?: any } = {};
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
+  CourseContentTabPage: (props: any) => {
+    capturedProps.value = props;
+    return <div data-testid="course-content-tab-page" data-tab={props.tab} />;
+  },
+}));
+
+vi.mock('@/lib/config', () => ({
+  config: {
+    urls: {
+      lms: () => 'https://lms.test',
+      mfe: () => 'https://mfe.test',
+      legacyLmsUrl: () => 'https://legacy-lms.test',
+    },
+  },
+}));
+
+import DiscussionTab from '../page';
+
+describe('DiscussionTab', () => {
+  beforeEach(() => {
+    capturedProps.value = undefined;
+  });
+
+  it('renders the shared CourseContentTabPage', () => {
+    render(<DiscussionTab />);
+    expect(screen.getByTestId('course-content-tab-page')).toBeInTheDocument();
+  });
+
+  it('passes tab="forum" to the shared component', () => {
+    render(<DiscussionTab />);
+    expect(capturedProps.value?.tab).toBe('forum');
+  });
+
+  it('passes lmsUrl, mfeUrl, and legacyLmsUrl from config', () => {
+    render(<DiscussionTab />);
+    expect(capturedProps.value?.lmsUrl).toBe('https://lms.test');
+    expect(capturedProps.value?.mfeUrl).toBe('https://mfe.test');
+    expect(capturedProps.value?.legacyLmsUrl).toBe('https://legacy-lms.test');
+  });
+});
diff --git a/app/course-content/[course_id]/instructor/__tests__/page.test.tsx b/app/course-content/[course_id]/instructor/__tests__/page.test.tsx
new file mode 100644
index 0000000..840425f
--- /dev/null
+++ b/app/course-content/[course_id]/instructor/__tests__/page.test.tsx
@@ -0,0 +1,121 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const { mockRedirect } = vi.hoisted(() => ({ mockRedirect: vi.fn() }));
+vi.mock('next/navigation', () => ({
+  redirect: mockRedirect,
+}));
+
+const capturedProps: { value?: any } = {};
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
+  CourseContentTabPage: (props: any) => {
+    capturedProps.value = props;
+    return <div data-testid="course-content-tab-page" data-tab={props.tab} />;
+  },
+}));
+
+vi.mock('@iblai/iblai-js/data-layer', () => ({
+  useGetDepartmentMemberCheckQuery: vi.fn(() => ({
+    data: { is_platform_admin: true },
+    isSuccess: true,
+  })),
+}));
+
+vi.mock('@/lib/config', () => ({
+  config: {
+    urls: {
+      lms: () => 'https://lms.test',
+      mfe: () => 'https://mfe.test',
+      legacyLmsUrl: () => 'https://legacy-lms.test',
+    },
+  },
+}));
+
+vi.mock('@/utils/helpers', () => ({
+  getTenant: vi.fn(() => 'test-tenant'),
+}));
+
+import InstructorTab from '../page';
+import { useGetDepartmentMemberCheckQuery } from '@iblai/iblai-js/data-layer';
+import { getTenant } from '@/utils/helpers';
+
+describe('InstructorTab', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    capturedProps.value = undefined;
+    vi.mocked(useGetDepartmentMemberCheckQuery).mockReturnValue({
+      data: { is_platform_admin: true },
+      isSuccess: true,
+    } as any);
+  });
+
+  it('renders the shared CourseContentTabPage', () => {
+    render(<InstructorTab />);
+    expect(screen.getByTestId('course-content-tab-page')).toBeInTheDocument();
+  });
+
+  it('passes tab="instructor" to the shared component', () => {
+    render(<InstructorTab />);
+    expect(capturedProps.value?.tab).toBe('instructor');
+  });
+
+  it('passes lmsUrl, mfeUrl, and legacyLmsUrl from config', () => {
+    render(<InstructorTab />);
+    expect(capturedProps.value?.lmsUrl).toBe('https://lms.test');
+    expect(capturedProps.value?.mfeUrl).toBe('https://mfe.test');
+    expect(capturedProps.value?.legacyLmsUrl).toBe('https://legacy-lms.test');
+  });
+
+  it('calls useGetDepartmentMemberCheckQuery with tenant platform_key', () => {
+    render(<InstructorTab />);
+    expect(useGetDepartmentMemberCheckQuery).toHaveBeenCalledWith({
+      platform_key: 'test-tenant',
+    });
+    expect(getTenant).toHaveBeenCalled();
+  });
+
+  it('does not redirect when user is a platform admin', () => {
+    vi.mocked(useGetDepartmentMemberCheckQuery).mockReturnValue({
+      data: { is_platform_admin: true },
+      isSuccess: true,
+    } as any);
+
+    render(<InstructorTab />);
+
+    expect(mockRedirect).not.toHaveBeenCalled();
+  });
+
+  it('redirects to / when query succeeded and user is not a platform admin', () => {
+    vi.mocked(useGetDepartmentMemberCheckQuery).mockReturnValue({
+      data: { is_platform_admin: false },
+      isSuccess: true,
+    } as any);
+
+    render(<InstructorTab />);
+
+    expect(mockRedirect).toHaveBeenCalledWith('/');
+  });
+
+  it('redirects to / when query succeeded and data is undefined', () => {
+    vi.mocked(useGetDepartmentMemberCheckQuery).mockReturnValue({
+      data: undefined,
+      isSuccess: true,
+    } as any);
+
+    render(<InstructorTab />);
+
+    expect(mockRedirect).toHaveBeenCalledWith('/');
+  });
+
+  it('does not redirect while query is pending (isSuccess=false)', () => {
+    vi.mocked(useGetDepartmentMemberCheckQuery).mockReturnValue({
+      data: undefined,
+      isSuccess: false,
+    } as any);
+
+    render(<InstructorTab />);
+
+    expect(mockRedirect).not.toHaveBeenCalled();
+  });
+});
diff --git a/app/course-content/[course_id]/progress/__tests__/page.test.tsx b/app/course-content/[course_id]/progress/__tests__/page.test.tsx
new file mode 100644
index 0000000..70cc4e6
--- /dev/null
+++ b/app/course-content/[course_id]/progress/__tests__/page.test.tsx
@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const capturedProps: { value?: any } = {};
+vi.mock('@iblai/iblai-js/web-containers/next', () => ({
+  CourseContentTabPage: (props: any) => {
+    capturedProps.value = props;
+    return <div data-testid="course-content-tab-page" data-tab={props.tab} />;
+  },
+}));
+
+vi.mock('@/lib/config', () => ({
+  config: {
+    urls: {
+      lms: () => 'https://lms.test',
+      mfe: () => 'https://mfe.test',
+      legacyLmsUrl: () => 'https://legacy-lms.test',
+    },
+  },
+}));
+
+import ProgressTab from '../page';
+
+describe('ProgressTab', () => {
+  beforeEach(() => {
+    capturedProps.value = undefined;
+  });
+
+  it('renders the shared CourseContentTabPage', () => {
+    render(<ProgressTab />);
+    expect(screen.getByTestId('course-content-tab-page')).toBeInTheDocument();
+  });
+
+  it('passes tab="progress" to the shared component', () => {
+    render(<ProgressTab />);
+    expect(capturedProps.value?.tab).toBe('progress');
+  });
+
+  it('passes lmsUrl, mfeUrl, and legacyLmsUrl from config', () => {
+    render(<ProgressTab />);
+    expect(capturedProps.value?.lmsUrl).toBe('https://lms.test');
+    expect(capturedProps.value?.mfeUrl).toBe('https://mfe.test');
+    expect(capturedProps.value?.legacyLmsUrl).toBe('https://legacy-lms.test');
+  });
+});
diff --git a/app/profile/__tests__/page.test.tsx b/app/profile/__tests__/page.test.tsx
index e3994a8..3882841 100644
--- a/app/profile/__tests__/page.test.tsx
+++ b/app/profile/__tests__/page.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 vi.mock('@/utils/helpers', () => ({
@@ -34,18 +34,22 @@ vi.mock('@iblai/iblai-js/web-utils', () => ({
   })),
 }));
 
+const mockGetPerLearnerActivity = vi.fn(() => Promise.resolve({ data: {} }));
 vi.mock('@/services/perlearner', () => ({
   useGetUserPerLearnerInfoQuery: vi.fn(() => ({ data: null, isLoading: false })),
-  useLazyGetPerLearnerActivityQuery: vi.fn(() => [vi.fn(() => Promise.resolve({ data: {} }))]),
+  useLazyGetPerLearnerActivityQuery: vi.fn(() => [mockGetPerLearnerActivity]),
 }));
 
 import ProfilePage from '../page';
 import { useProfileActivityStats, useUserMetadata } from '@iblai/iblai-js/web-containers';
 import { useTenantMetadata } from '@iblai/iblai-js/web-utils';
+import { useGetUserPerLearnerInfoQuery } from '@/services/perlearner';
 
 describe('ProfilePage', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockGetPerLearnerActivity.mockReset();
+    mockGetPerLearnerActivity.mockResolvedValue({ data: {} });
     vi.mocked(useProfileActivityStats).mockReturnValue({
       stats: [],
     } as any);
@@ -54,9 +58,13 @@ describe('ProfilePage', () => {
       isSkillsLeaderBoardEnabled: vi.fn(() => false),
     } as any);
     vi.mocked(useUserMetadata).mockReturnValue({
-      userMetaData: { enable_skills_leaderboard_display: true },
+      userMetaData: { enable_skills_leaderboard_display: true, username: 'test-user' },
       userMetaDataLoading: false,
     } as any);
+    vi.mocked(useGetUserPerLearnerInfoQuery).mockReturnValue({
+      data: null,
+      isLoading: false,
+    } as any);
   });
 
   it('renders without crashing', () => {
@@ -241,4 +249,67 @@ describe('ProfilePage', () => {
 
     expect(screen.getByTestId('skill-leaderboard-chart')).toBeInTheDocument();
   });
+
+  it('sorts per-learner activity by time_invested and picks the top entry', async () => {
+    mockGetPerLearnerActivity.mockResolvedValueOnce({
+      data: {
+        data: [
+          { name: 'Low', course_id: 'c-low', time_invested: 10 },
+          { name: 'High', course_id: 'c-high', time_invested: 100 },
+          { name: 'Mid', course_id: 'c-mid', time_invested: 50 },
+        ],
+      },
+    });
+
+    render(<ProfilePage />);
+
+    await waitFor(() => {
+      expect(mockGetPerLearnerActivity).toHaveBeenCalledWith({
+        org: 'test-tenant',
+        username: 'test-user',
+      });
+    });
+
+    expect(screen.getByTestId('profile-info-cards')).toBeInTheDocument();
+  });
+
+  it('falls back to placeholder topContent when per-learner activity is empty', async () => {
+    mockGetPerLearnerActivity.mockResolvedValueOnce({ data: {} });
+
+    render(<ProfilePage />);
+
+    await waitFor(() => {
+      expect(mockGetPerLearnerActivity).toHaveBeenCalled();
+    });
+
+    expect(screen.getByTestId('profile-info-cards')).toBeInTheDocument();
+  });
+
+  it('falls back to placeholder topContent when per-learner activity rejects', async () => {
+    mockGetPerLearnerActivity.mockRejectedValueOnce(new Error('boom'));
+
+    render(<ProfilePage />);
+
+    await waitFor(() => {
+      expect(mockGetPerLearnerActivity).toHaveBeenCalled();
+    });
+
+    expect(screen.getByTestId('profile-info-cards')).toBeInTheDocument();
+  });
+
+  it('passes empty username to per-learner fetch when userMetadata has no username', async () => {
+    vi.mocked(useUserMetadata).mockReturnValue({
+      userMetaData: { enable_skills_leaderboard_display: true },
+      userMetaDataLoading: false,
+    } as any);
+
+    render(<ProfilePage />);
+
+    await waitFor(() => {
+      expect(mockGetPerLearnerActivity).toHaveBeenCalledWith({
+        org: 'test-tenant',
+        username: '',
+      });
+    });
+  });
 });
diff --git a/app/profile/programs/__tests__/page.test.tsx b/app/profile/programs/__tests__/page.test.tsx
index 8ef7d84..cfa1d76 100644
--- a/app/profile/programs/__tests__/page.test.tsx
+++ b/app/profile/programs/__tests__/page.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 // Mock next/image
@@ -10,8 +10,9 @@ vi.mock('next/image', () => ({
 }));
 
 // Mock next/navigation
+const mockRouterPush = vi.fn();
 vi.mock('next/navigation', () => ({
-  useRouter: () => ({ push: vi.fn() }),
+  useRouter: () => ({ push: mockRouterPush }),
 }));
 
 // Mock sonner
@@ -30,6 +31,9 @@ vi.mock('@/utils/localstorage', () => ({
   useIsAdmin: vi.fn(() => false),
 }));
 
+// Mock toast (import reference for assertions)
+import { toast } from 'sonner';
+
 // Stable references to avoid useEffect loops
 const stableHandleSearch = vi.fn(() => Promise.resolve({ data: { results: [] } }));
 const stableGetProgramCompletion = vi.fn(() => Promise.resolve({ data: null }));
@@ -108,22 +112,63 @@ vi.mock('@iblai/iblai-js/web-containers', () => ({
   SkeletonPathwayBox: () => <div data-testid="skeleton-pathway-box">Skeleton</div>,
 }));
 
+const capturedModalProps: { value?: any } = {};
 vi.mock('@iblai/iblai-js/web-containers/next', () => ({
-  ProgramDetailModal: ({ program, onClose }: any) => (
-    <div data-testid="program-detail-modal">
-      Modal for: {program?.name}
-      <button onClick={onClose}>Close Modal</button>
-    </div>
-  ),
+  ProgramDetailModal: (props: any) => {
+    capturedModalProps.value = props;
+    return (
+      <div data-testid="program-detail-modal" data-banner={props.bannerImageSrc}>
+        Modal for: {props.program?.name}
+        <button onClick={props.onClose}>Close Modal</button>
+      </div>
+    );
+  },
 }));
 
 import ProgramsPage from '../page';
 import { useProfilePrograms } from '@iblai/iblai-js/web-containers';
 import { useTenantMetadata } from '@iblai/iblai-js/web-utils';
+import { useIsAdmin } from '@/utils/localstorage';
+import {
+  useCreateCatalogProgramSelfEnrollmentMutation,
+  useLazyGetProgramCompletionQuery,
+  useLazyGetUserEnrolledProgramsQuery,
+} from '@iblai/iblai-js/data-layer';
+import { useGetProgramMetadataQuery } from '@/services/studio';
 
 describe('ProgramsPage', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    capturedModalProps.value = undefined;
+    // Reset stable mock references so counts don't bleed across tests
+    stableHandleSearch.mockReset();
+    stableHandleSearch.mockResolvedValue({ data: { results: [] } });
+    stableGetProgramCompletion.mockReset();
+    stableGetProgramCompletion.mockResolvedValue({ data: null });
+    stableGetUserEnrolledPrograms.mockReset();
+    stableGetUserEnrolledPrograms.mockResolvedValue({ data: [] });
+    stableCreateEnrollment.mockReset();
+    stableCreateEnrollment.mockResolvedValue({});
+    stableUpdateMetadata.mockReset();
+    stableUpdateMetadata.mockImplementation(() => ({ unwrap: vi.fn(() => Promise.resolve()) }));
+    stableRefetch.mockReset();
+    vi.mocked(useIsAdmin).mockReturnValue(false);
+    vi.mocked(useCreateCatalogProgramSelfEnrollmentMutation).mockReturnValue([
+      stableCreateEnrollment,
+      { isError: false, isSuccess: false },
+    ] as any);
+    vi.mocked(useLazyGetProgramCompletionQuery).mockReturnValue([
+      stableGetProgramCompletion,
+    ] as any);
+    vi.mocked(useLazyGetUserEnrolledProgramsQuery).mockReturnValue([
+      stableGetUserEnrolledPrograms,
+      { isLoading: false },
+    ] as any);
+    vi.mocked(useGetProgramMetadataQuery).mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      refetch: stableRefetch,
+    } as any);
     // Reset default mocks
     vi.mocked(useTenantMetadata).mockReturnValue({
       metadataLoaded: true,
@@ -549,4 +594,429 @@ describe('ProgramsPage', () => {
 
     expect(screen.getByTestId('program-badge')).toHaveTextContent('PROGRAM');
   });
+
+  const openProgram = async (
+    overrides: Partial<Record<string, any>> = {},
+    programOverrides: Partial<Record<string, any>> = {},
+  ) => {
+    const program = {
+      name: 'Program 1',
+      program_id: 'prog-1',
+      program_key: 'key-1',
+      program_metadata: {},
+      platform_key: 'test-tenant',
+      ended: '',
+      ...programOverrides,
+    };
+    vi.mocked(useProfilePrograms).mockReturnValue({
+      programs: [program],
+      filteredPrograms: [program],
+      isLoading: false,
+      isError: false,
+      setFilteredPrograms: mockSetFilteredPrograms,
+      setPrograms: mockSetPrograms,
+      programCompletions: [],
+      programCompletionsLoading: false,
+      ...overrides,
+    } as any);
+
+    render(<ProgramsPage />);
+    fireEvent.click(screen.getByTestId('program-card'));
+    await waitFor(() => expect(capturedModalProps.value).toBeDefined());
+    return program;
+  };
+
+  it('fetches program detail data and maps courses when a program is selected', async () => {
+    stableHandleSearch.mockResolvedValueOnce({
+      data: {
+        results: [
+          {
+            courses: [
+              {
+                course: {
+                  course_id: 'c-1',
+                  edx_data: { course_image_asset_path: '/img/c1.jpg' },
+                },
+              },
+              {
+                course: {
+                  course_id: 'c-1',
+                  edx_data: { course_image_asset_path: '/img/c1.jpg' },
+                },
+              },
+              {
+                course: { course_id: 'c-2', edx_data: {} },
+              },
+            ],
+          },
+          { courses: undefined },
+        ],
+      },
+    });
+    stableGetUserEnrolledPrograms.mockResolvedValueOnce({
+      data: [{ active: true, program_id: 'prog-1' }],
+    });
+    stableGetProgramCompletion.mockResolvedValueOnce({
+      data: { completion_percentage: 40 },
+    });
+
+    await openProgram();
+
+    await waitFor(() => {
+      expect(stableHandleSearch).toHaveBeenCalledWith(
+        expect.objectContaining({
+          username: 'test-user',
+          content: ['programs'],
+          programId: 'prog-1',
+          returnItems: true,
+          tenant: 'test-tenant',
+        }),
+      );
+    });
+
+    await waitFor(() => {
+      expect(capturedModalProps.value?.courses).toHaveLength(2);
+    });
+    expect(capturedModalProps.value?.courses[0].course.edx_data.course_image_asset_path).toBe(
+      'https://lms.example.com/img/c1.jpg',
+    );
+    expect(capturedModalProps.value?.courses[1].course.edx_data.course_image_asset_path).toBe(
+      '/random-course-image.jpg',
+    );
+
+    await waitFor(() => {
+      expect(capturedModalProps.value?.enrollmentStatus).toBe(true);
+    });
+
+    await waitFor(() => {
+      expect(capturedModalProps.value?.programCompletion).toEqual({
+        completion_percentage: 40,
+      });
+    });
+  });
+
+  it('toasts an error and clears courses when handleSearch rejects', async () => {
+    stableHandleSearch.mockRejectedValueOnce(new Error('boom'));
+
+    await openProgram();
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Error fetching program details');
+    });
+    await waitFor(() => {
+      expect(capturedModalProps.value?.courses).toEqual([]);
+    });
+  });
+
+  it('sets enrollmentStatus=false when getUserEnrolledPrograms rejects', async () => {
+    stableGetUserEnrolledPrograms.mockRejectedValueOnce(new Error('boom'));
+
+    await openProgram();
+
+    await waitFor(() => {
+      expect(stableGetUserEnrolledPrograms).toHaveBeenCalled();
+    });
+    await waitFor(() => {
+      expect(capturedModalProps.value?.enrollmentStatus).toBe(false);
+    });
+  });
+
+  it('sets enrollmentStatus=false when resp.data is not an array', async () => {
+    stableGetUserEnrolledPrograms.mockResolvedValueOnce({ data: null });
+
+    await openProgram();
+
+    await waitFor(() => {
+      expect(capturedModalProps.value?.enrollmentStatus).toBe(false);
+    });
+  });
+
+  it('sets programCompletion=null when getProgramCompletion rejects', async () => {
+    stableGetProgramCompletion.mockRejectedValueOnce(new Error('boom'));
+
+    await openProgram();
+
+    await waitFor(() => {
+      expect(capturedModalProps.value?.programCompletion).toBeNull();
+    });
+  });
+
+  it('uses selectedProgram.platform over platform_key for tenant in search', async () => {
+    await openProgram({}, { platform: 'other-tenant' });
+
+    await waitFor(() => {
+      expect(stableHandleSearch).toHaveBeenCalledWith(
+        expect.objectContaining({ tenant: 'other-tenant' }),
+      );
+    });
+  });
+
+  it('uses relative card_image as absolute LMS URL for the modal banner', async () => {
+    await openProgram({}, { program_metadata: { card_image: '/banners/p1.jpg' } });
+
+    expect(capturedModalProps.value?.bannerImageSrc).toBe('https://lms.example.com/banners/p1.jpg');
+  });
+
+  it('uses card_image directly when it is already an absolute URL', async () => {
+    await openProgram(
+      {},
+      { program_metadata: { card_image: 'https://cdn.example.com/banners/p1.jpg' } },
+    );
+
+    expect(capturedModalProps.value?.bannerImageSrc).toBe('https://cdn.example.com/banners/p1.jpg');
+  });
+
+  it('uses the random image as banner when no card_image is set', async () => {
+    await openProgram();
+    expect(capturedModalProps.value?.bannerImageSrc).toBe('/random-course-image.jpg');
+  });
+
+  it('navigates to course page when onCourseClick is invoked from modal', async () => {
+    await openProgram();
+
+    await act(async () => {
+      capturedModalProps.value?.onCourseClick('course-xyz');
+    });
+
+    expect(mockRouterPush).toHaveBeenCalledWith('/courses/course-xyz');
+  });
+
+  it('enrolls into program via onEnroll and toasts success', async () => {
+    await openProgram();
+
+    await act(async () => {
+      await capturedModalProps.value?.onEnroll({ program_key: 'key-1' });
+    });
+
+    expect(stableCreateEnrollment).toHaveBeenCalledWith([
+      {
+        requestBody: {
+          program_key: 'key-1',
+          username: 'test-user',
+          active: true,
+          ended: null,
+        },
+      },
+    ]);
+    expect(toast.success).toHaveBeenCalledWith('Enrolled into program successfully');
+  });
+
+  it('toasts an error when enrollment rejects', async () => {
+    stableCreateEnrollment.mockRejectedValueOnce(new Error('fail'));
+    await openProgram();
+
+    await act(async () => {
+      await capturedModalProps.value?.onEnroll({ program_key: 'key-1' });
+    });
+
+    expect(toast.error).toHaveBeenCalledWith('Failed to enroll into program');
+  });
+
+  it('toasts an error when enrollment hook reports isError after call', async () => {
+    vi.mocked(useCreateCatalogProgramSelfEnrollmentMutation).mockReturnValue([
+      stableCreateEnrollment,
+      { isError: true, isSuccess: false },
+    ] as any);
+
+    await openProgram();
+
+    await act(async () => {
+      await capturedModalProps.value?.onEnroll({ program_key: 'key-1' });
+    });
+
+    expect(toast.error).toHaveBeenCalledWith('Failed to enroll into program');
+  });
+
+  it('skips enrollment when already submitting (falls back to default program_key)', async () => {
+    let resolveFn: (v?: any) => void = () => {};
+    stableCreateEnrollment.mockImplementationOnce(
+      () => new Promise((resolve) => (resolveFn = resolve)),
+    );
+
+    await openProgram();
+
+    // First invocation begins submission (does not await so guard is active for the second call)
+    act(() => {
+      void capturedModalProps.value?.onEnroll({ program_key: 'key-1' });
+    });
+
+    // Second invocation while submitting should short-circuit
+    await act(async () => {
+      await capturedModalProps.value?.onEnroll({ program_key: 'key-1' });
+    });
+
+    expect(stableCreateEnrollment).toHaveBeenCalledTimes(1);
+
+    act(() => resolveFn({}));
+  });
+
+  it('enrolls with default empty program_key when program has no program_key', async () => {
+    await openProgram();
+
+    await act(async () => {
+      await capturedModalProps.value?.onEnroll({});
+    });
+
+    expect(stableCreateEnrollment).toHaveBeenCalledWith([
+      {
+        requestBody: {
+          program_key: '',
+          username: 'test-user',
+          active: true,
+          ended: null,
+        },
+      },
+    ]);
+  });
+
+  it('validates start_date <= end_date in onSaveSettings', async () => {
+    await openProgram();
+
+    await act(async () => {
+      await capturedModalProps.value?.onSaveSettings({
+        start_date: '2026-05-01',
+        end_date: '2026-04-01',
+        tags: [],
+        topics: [],
+      });
+    });
+
+    expect(toast.error).toHaveBeenCalledWith('End date must be after start date');
+    expect(stableUpdateMetadata).not.toHaveBeenCalled();
+  });
+
+  it('validates enrollment_start <= enrollment_end in onSaveSettings', async () => {
+    await openProgram();
+
+    await act(async () => {
+      await capturedModalProps.value?.onSaveSettings({
+        enrollment_start: '2026-05-01',
+        enrollment_end: '2026-04-01',
+        tags: [],
+        topics: [],
+      });
+    });
+
+    expect(toast.error).toHaveBeenCalledWith(
+      'Enrollment end date must be after enrollment start date',
+    );
+    expect(stableUpdateMetadata).not.toHaveBeenCalled();
+  });
+
+  it('saves program settings happy path, refetches metadata and toasts success', async () => {
+    await openProgram();
+
+    await act(async () => {
+      await capturedModalProps.value?.onSaveSettings({
+        slug: 'slug',
+        subject: 'subject',
+        tags: ['t1'],
+        level: 'beginner',
+        topics: ['topic'],
+        promotion: 'p',
+        social_team: 'team',
+        social_channels: 'ch',
+        description: 'desc',
+        display_price: '10',
+        start_date: '2026-01-01',
+        end_date: '2026-12-31',
+        enrollment_start: '2026-01-01',
+        enrollment_end: '2026-06-01',
+        language: 'en',
+        credential: 'cert',
+        catalog_visibility: 'both',
+        invitation_only: false,
+        banner_image: 'banner.jpg',
+        card_image: 'card.jpg',
+      });
+    });
+
+    expect(stableUpdateMetadata).toHaveBeenCalledWith(
+      expect.objectContaining({
+        programId: 'prog-1',
+        org: 'test-tenant',
+        settings: expect.objectContaining({
+          slug: 'slug',
+          tags: ['t1'],
+          topics: ['topic'],
+          invitation_only: false,
+          platform_key: 'test-tenant',
+        }),
+      }),
+    );
+    expect(stableRefetch).toHaveBeenCalled();
+    expect(toast.success).toHaveBeenCalledWith('Program settings saved successfully');
+  });
+
+  it('coerces empty optional fields to null and empty arrays to null in onSaveSettings', async () => {
+    await openProgram();
+
+    await act(async () => {
+      await capturedModalProps.value?.onSaveSettings({
+        slug: '',
+        subject: '',
+        tags: [],
+        level: '',
+        topics: [],
+        promotion: '',
+        social_team: '',
+        social_channels: '',
+        description: '',
+        display_price: '',
+        start_date: '',
+        end_date: '',
+        enrollment_start: '',
+        enrollment_end: '',
+        language: '',
+        credential: '',
+        catalog_visibility: '',
+        invitation_only: true,
+        banner_image: '',
+        card_image: '',
+      });
+    });
+
+    const call = stableUpdateMetadata.mock.calls[0][0];
+    expect(call.settings.slug).toBeNull();
+    expect(call.settings.tags).toBeNull();
+    expect(call.settings.topics).toBeNull();
+    expect(call.settings.invitation_only).toBe(true);
+  });
+
+  it('toasts an error and logs when saving settings fails', async () => {
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    stableUpdateMetadata.mockImplementationOnce(() => ({
+      unwrap: vi.fn(() => Promise.reject(new Error('save fail'))),
+    }));
+
+    await openProgram();
+
+    await act(async () => {
+      await capturedModalProps.value?.onSaveSettings({ tags: [], topics: [] });
+    });
+
+    expect(toast.error).toHaveBeenCalledWith('Failed to save program settings');
+    errorSpy.mockRestore();
+  });
+
+  it('enables settings mode when admin and program belongs to tenant', async () => {
+    vi.mocked(useIsAdmin).mockReturnValue(true);
+
+    await openProgram();
+
+    expect(capturedModalProps.value?.showSettings).toBe(true);
+  });
+
+  it('falls back to platform_key then getTenant for programOrg', async () => {
+    vi.mocked(useIsAdmin).mockReturnValue(true);
+
+    await openProgram({}, { platform_key: undefined, platform: undefined, org: 'explicit-org' });
+
+    await act(async () => {
+      await capturedModalProps.value?.onSaveSettings({ tags: [], topics: [] });
+    });
+
+    const call = stableUpdateMetadata.mock.calls[0][0];
+    expect(call.org).toBe('explicit-org');
+  });
 });

From f2b82924380d5704088407f45963d3e0ceaf06e9 Mon Sep 17 00:00:00 2001
From: ANIMASHAUN Michael <michaeloncode@gmail.com>
Date: Thu, 16 Apr 2026 19:17:24 +0100
Subject: [PATCH 8/8] feat: course tab content components reused from the sdk >
 test coverage

---
 app/profile/programs/__tests__/page.test.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/profile/programs/__tests__/page.test.tsx b/app/profile/programs/__tests__/page.test.tsx
index cfa1d76..95f3d6d 100644
--- a/app/profile/programs/__tests__/page.test.tsx
+++ b/app/profile/programs/__tests__/page.test.tsx
@@ -35,12 +35,12 @@ vi.mock('@/utils/localstorage', () => ({
 import { toast } from 'sonner';
 
 // Stable references to avoid useEffect loops
-const stableHandleSearch = vi.fn(() => Promise.resolve({ data: { results: [] } }));
-const stableGetProgramCompletion = vi.fn(() => Promise.resolve({ data: null }));
-const stableGetUserEnrolledPrograms = vi.fn(() => Promise.resolve({ data: [] }));
-const stableCreateEnrollment = vi.fn();
-const stableUpdateMetadata = vi.fn(() => ({ unwrap: vi.fn(() => Promise.resolve()) }));
-const stableRefetch = vi.fn();
+const stableHandleSearch: any = vi.fn(() => Promise.resolve({ data: { results: [] } }));
+const stableGetProgramCompletion: any = vi.fn(() => Promise.resolve({ data: null }));
+const stableGetUserEnrolledPrograms: any = vi.fn(() => Promise.resolve({ data: [] }));
+const stableCreateEnrollment: any = vi.fn();
+const stableUpdateMetadata: any = vi.fn(() => ({ unwrap: vi.fn(() => Promise.resolve()) }));
+const stableRefetch: any = vi.fn();
 
 // Mock personnalized catalog hook
 vi.mock('@/hooks/search/use-personnalized-catalog', () => ({