@iblai/iblai-js 1.3.11 → 1.4.0

package/dist/web-containers/source/index.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { useRef, useEffect, useState, useCallback, useLayoutEffect, forwardRef, createElement as createElement$1, useMemo, createContext, useReducer, useImperativeHandle, useContext, useDebugValue, isValidElement, Children, PureComponent, cloneElement, Component } from 'react';
 import { LOCAL_STORAGE_KEYS, TimeTracker, getInitials, useTenantMetadata, isAlphaNumeric32, checkRbacPermission, getTimeAgo, formatRelativeTime as formatRelativeTime$2, ANONYMOUS_USERNAME, combineCSVData, redirectToAuthSpaJoinTenant, redirectToAuthSpa, getAuthSpaJoinUrl } from '@iblai/web-utils';
-import { useTimeTrackingMutation, useGetUserMetadataQuery, useGetUserMetadataEdxQuery, useUpdateUserMetadataMutation, useUpdateUserMetadataEdxMutation, useUploadProfileImageMutation, useResetPasswordMutation, useSelfRetireMutation, useCreateUserInstitutionMutation, useGetUserInstitutionsQuery, useCreateUserEducationMutation, useUpdateUserEducationMutation, useDeleteUserEducationMutation, useGetUserEducationQuery, useCreateUserCompanyMutation, useGetUserCompaniesQuery, useCreateUserExperienceMutation, useUpdateUserExperienceMutation, useDeleteUserExperienceMutation, useGetUserExperienceQuery, useGetUserResumeQuery, useCreateUserResumeMutation, useGetMySubscriptionsQuery, useGetItemSubscriptionQuery, useCancelSubscriptionMutation, useCreateGlobalMemoryMutation, useGetMemsearchConfigQuery, useGetUserMemorySettingsQuery, useUpdateUserMemorySettingsMutation, useGetGlobalMemoriesQuery, useDeleteGlobalMemoryMutation, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useGetNotificationsCountQuery, useLazyGetNotificationsQuery, useMarkAllAsReadMutation, useCreateNotificationPreviewMutation, useSendNotificationMutation, useGetMentorsQuery, useGetRbacPoliciesQuery, usePlatformUsersQuery, usePlatformUserGroupsQuery, useUpdateTemplateMutation, useGetTemplateDetailsQuery, useGetTemplatesQuery, useLazyGetTemplateDetailsQuery, useToggleTemplateMutation, useGetTopicsStatsQuery, useGetUsersStatsQuery, useGetSessionStatsQuery, useGetTopicsDetailsStatsQuery, useGetAccessTimeHeatmapQuery, useGetUserDetailsStatsQuery, useGetTranscriptsConversationHeadlineQuery, useGetAverageRatingQuery, useGetFinancialStatsQuery, useGetDetailedFinancialStatsQuery, useGetTranscriptsMessagesDetailsQuery, useGetTranscriptsMessagesQuery, useGetReportDetailQuery, useLazyGetDownloadReportFromURLQuery, useGetReportsQuery, useCreateReportMutation, useGetMentorPublicSettingsQuery, useGetContentAnalyticsQuery, useGetContentAnalyticsDetailsQuery, useGetRevenueQuery, useListPaywallsQuery, useListSubscribersQuery, useCreateCheckoutMutation } from '@iblai/data-layer';
+import { useTimeTrackingMutation, useGetUserMetadataQuery, useGetUserMetadataEdxQuery, useUpdateUserMetadataMutation, useUpdateUserMetadataEdxMutation, useUploadProfileImageMutation, useResetPasswordMutation, useSelfRetireMutation, useCreateUserInstitutionMutation, useGetUserInstitutionsQuery, useCreateUserEducationMutation, useUpdateUserEducationMutation, useDeleteUserEducationMutation, useGetUserEducationQuery, useCreateUserCompanyMutation, useGetUserCompaniesQuery, useCreateUserExperienceMutation, useUpdateUserExperienceMutation, useDeleteUserExperienceMutation, useGetUserExperienceQuery, useGetUserResumeQuery, useCreateUserResumeMutation, useGetMySubscriptionsQuery, useGetItemSubscriptionQuery, useCancelSubscriptionMutation, useCreateGlobalMemoryMutation, useGetMemsearchConfigQuery, useGetUserMemorySettingsQuery, useUpdateUserMemorySettingsMutation, useGetGlobalMemoriesQuery, useDeleteGlobalMemoryMutation, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useGetNotificationsCountQuery, useLazyGetNotificationsQuery, useMarkAllAsReadMutation, useCreateNotificationPreviewMutation, useSendNotificationMutation, useGetMentorsQuery, useGetRbacPoliciesQuery, usePlatformUsersQuery, usePlatformUserGroupsQuery, useUpdateTemplateMutation, useGetTemplateDetailsQuery, useGetTemplatesQuery, useLazyGetTemplateDetailsQuery, useToggleTemplateMutation, useGetTopicsStatsQuery, useGetUsersStatsQuery, useGetSessionStatsQuery, useGetTopicsDetailsStatsQuery, useGetAccessTimeHeatmapQuery, useGetUserDetailsStatsQuery, useGetTranscriptsConversationHeadlineQuery, useGetAverageRatingQuery, useGetFinancialStatsQuery, useGetDetailedFinancialStatsQuery, useGetTranscriptsMessagesDetailsQuery, useGetTranscriptsMessagesQuery, useGetReportDetailQuery, useLazyGetDownloadReportFromURLQuery, useGetReportsQuery, useCreateReportMutation, useGetMentorPublicSettingsQuery, useGetContentAnalyticsQuery, useGetContentAnalyticsDetailsQuery, useGetRevenueQuery, useListPaywallsQuery, useListSubscribersQuery, useLazyGetCourseMetaDataQuery, useLazyGetCourseCompletionOutlinesQuery, useLazyGetCourseEligibilityQuery, useLazyGetUserEnrolledCoursesQuery, useLazyGetUserAssignedCoursesQuery, useLazyGetUserCredentialsQuery, useLazyGetOverTimeActivityQuery, useLazyGetCatalogSearchQuery, useGetUserEarnedSkillsQuery, useGetUserReportedSkillsQuery, useGetUserDesiredSkillsQuery, useCreateOrUpdateUserReportedSkillMutation, useCreateOrUpdateUserDesiredSkillMutation, useLazyGetPathwayListQuery, useLazyGetUserAssignedPathwaysQuery, useLazyGetUserEnrolledPathwaysQuery, useLazyGetPathwayCompletionQuery, useLazyGetProgramListQuery, useLazyGetProgramCompletionQuery, useLazyGetUserEnrolledProgramsQuery, useLazyGetAssignedProgramsQuery, useLazyGetUserSkillsPointsQuery, useLazyGetUserReportedSkillsQuery, useLazyGetUserDesiredSkillsQuery, useLazyGetUserCatalogPathwaysQuery, useLazyGetPerLearnerInfoQuery, useLazyGetEdxSSOTokenQuery, useCreateCourseEnrollmentMutation, useCreateStripeCheckoutSessionMutation, useLazyGetCourseProgressQuery, useLazyGetCourseCompletionQuery, useUpdateExamAttemptMutation, useStartExamMutation, useLazyGetExamInfoQuery, useCreateCheckoutMutation } from '@iblai/data-layer';
 import { toast, Toaster as Toaster$1 } from 'sonner';
 import { jsx, Fragment as Fragment$1, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
@@ -10,6 +10,7 @@ import { z as z$1 } from 'zod';
 import { NotificationSourceTypeEnum, StateEnum } from '@iblai/iblai-api';
 import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { skipToken } from '@reduxjs/toolkit/query';
+import Image$4 from 'next/image';
 
 function useIframeMessageHandler({ handlers, allowedOrigins, defaultHandler, }) {
     const handlersRef = useRef(handlers);
@@ -49141,12 +49142,12 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$1o = [
+const __iconNode$1p = [
   ["path", { d: "M17 12H7", key: "16if0g" }],
   ["path", { d: "M19 18H5", key: "18s9l3" }],
   ["path", { d: "M21 6H3", key: "1jwq7v" }]
 ];
-const AlignCenter = createLucideIcon("align-center", __iconNode$1o);
+const AlignCenter = createLucideIcon("align-center", __iconNode$1p);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49156,12 +49157,12 @@ const AlignCenter = createLucideIcon("align-center", __iconNode$1o);
  */
 
 
-const __iconNode$1n = [
+const __iconNode$1o = [
   ["path", { d: "M15 12H3", key: "6jk70r" }],
   ["path", { d: "M17 18H3", key: "1amg6g" }],
   ["path", { d: "M21 6H3", key: "1jwq7v" }]
 ];
-const AlignLeft = createLucideIcon("align-left", __iconNode$1n);
+const AlignLeft = createLucideIcon("align-left", __iconNode$1o);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49171,12 +49172,12 @@ const AlignLeft = createLucideIcon("align-left", __iconNode$1n);
  */
 
 
-const __iconNode$1m = [
+const __iconNode$1n = [
   ["path", { d: "M21 12H9", key: "dn1m92" }],
   ["path", { d: "M21 18H7", key: "1ygte8" }],
   ["path", { d: "M21 6H3", key: "1jwq7v" }]
 ];
-const AlignRight = createLucideIcon("align-right", __iconNode$1m);
+const AlignRight = createLucideIcon("align-right", __iconNode$1n);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49186,12 +49187,12 @@ const AlignRight = createLucideIcon("align-right", __iconNode$1m);
  */
 
 
-const __iconNode$1l = [
+const __iconNode$1m = [
   ["rect", { width: "20", height: "5", x: "2", y: "3", rx: "1", key: "1wp1u1" }],
   ["path", { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8", key: "1s80jp" }],
   ["path", { d: "M10 12h4", key: "a56b0p" }]
 ];
-const Archive = createLucideIcon("archive", __iconNode$1l);
+const Archive = createLucideIcon("archive", __iconNode$1m);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49201,11 +49202,11 @@ const Archive = createLucideIcon("archive", __iconNode$1l);
  */
 
 
-const __iconNode$1k = [
+const __iconNode$1l = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1k);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1l);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49215,7 +49216,7 @@ const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1k);
  */
 
 
-const __iconNode$1j = [
+const __iconNode$1k = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -49225,7 +49226,7 @@ const __iconNode$1j = [
     }
   ]
 ];
-const Bell = createLucideIcon("bell", __iconNode$1j);
+const Bell = createLucideIcon("bell", __iconNode$1k);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49235,13 +49236,13 @@ const Bell = createLucideIcon("bell", __iconNode$1j);
  */
 
 
-const __iconNode$1i = [
+const __iconNode$1j = [
   [
     "path",
     { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", key: "mg9rjx" }
   ]
 ];
-const Bold$1 = createLucideIcon("bold", __iconNode$1i);
+const Bold$1 = createLucideIcon("bold", __iconNode$1j);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49251,7 +49252,7 @@ const Bold$1 = createLucideIcon("bold", __iconNode$1i);
  */
 
 
-const __iconNode$1h = [
+const __iconNode$1i = [
   ["path", { d: "M12 7v14", key: "1akyts" }],
   [
     "path",
@@ -49261,7 +49262,7 @@ const __iconNode$1h = [
     }
   ]
 ];
-const BookOpen = createLucideIcon("book-open", __iconNode$1h);
+const BookOpen = createLucideIcon("book-open", __iconNode$1i);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49271,7 +49272,7 @@ const BookOpen = createLucideIcon("book-open", __iconNode$1h);
  */
 
 
-const __iconNode$1g = [
+const __iconNode$1h = [
   ["path", { d: "M12 8V4H8", key: "hb8ula" }],
   ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
   ["path", { d: "M2 14h2", key: "vft8re" }],
@@ -49279,7 +49280,7 @@ const __iconNode$1g = [
   ["path", { d: "M15 13v2", key: "1xurst" }],
   ["path", { d: "M9 13v2", key: "rq6x2g" }]
 ];
-const Bot = createLucideIcon("bot", __iconNode$1g);
+const Bot = createLucideIcon("bot", __iconNode$1h);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49289,11 +49290,11 @@ const Bot = createLucideIcon("bot", __iconNode$1g);
  */
 
 
-const __iconNode$1f = [
+const __iconNode$1g = [
   ["path", { d: "M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16", key: "jecpp" }],
   ["rect", { width: "20", height: "14", x: "2", y: "6", rx: "2", key: "i6l2r4" }]
 ];
-const Briefcase = createLucideIcon("briefcase", __iconNode$1f);
+const Briefcase = createLucideIcon("briefcase", __iconNode$1g);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49303,13 +49304,13 @@ const Briefcase = createLucideIcon("briefcase", __iconNode$1f);
  */
 
 
-const __iconNode$1e = [
+const __iconNode$1f = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
   ["path", { d: "M3 10h18", key: "8toen8" }]
 ];
-const Calendar$1 = createLucideIcon("calendar", __iconNode$1e);
+const Calendar$1 = createLucideIcon("calendar", __iconNode$1f);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49319,11 +49320,11 @@ const Calendar$1 = createLucideIcon("calendar", __iconNode$1e);
  */
 
 
-const __iconNode$1d = [
+const __iconNode$1e = [
   ["path", { d: "M18 6 7 17l-5-5", key: "116fxf" }],
   ["path", { d: "m22 10-7.5 7.5L13 16", key: "ke71qq" }]
 ];
-const CheckCheck = createLucideIcon("check-check", __iconNode$1d);
+const CheckCheck = createLucideIcon("check-check", __iconNode$1e);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49333,8 +49334,8 @@ const CheckCheck = createLucideIcon("check-check", __iconNode$1d);
  */
 
 
-const __iconNode$1c = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$1c);
+const __iconNode$1d = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$1d);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49344,8 +49345,8 @@ const Check = createLucideIcon("check", __iconNode$1c);
  */
 
 
-const __iconNode$1b = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$1b);
+const __iconNode$1c = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$1c);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49355,11 +49356,11 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$1b);
  */
 
 
-const __iconNode$1a = [
+const __iconNode$1b = [
   ["path", { d: "m17 18-6-6 6-6", key: "1yerx2" }],
   ["path", { d: "M7 6v12", key: "1p53r6" }]
 ];
-const ChevronFirst = createLucideIcon("chevron-first", __iconNode$1a);
+const ChevronFirst = createLucideIcon("chevron-first", __iconNode$1b);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49369,8 +49370,8 @@ const ChevronFirst = createLucideIcon("chevron-first", __iconNode$1a);
  */
 
 
-const __iconNode$19 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$19);
+const __iconNode$1a = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1a);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49380,11 +49381,11 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$19);
  */
 
 
-const __iconNode$18 = [
+const __iconNode$19 = [
   ["path", { d: "m7 18 6-6-6-6", key: "lwmzdw" }],
   ["path", { d: "M17 6v12", key: "1o0aio" }]
 ];
-const ChevronLast = createLucideIcon("chevron-last", __iconNode$18);
+const ChevronLast = createLucideIcon("chevron-last", __iconNode$19);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49394,8 +49395,8 @@ const ChevronLast = createLucideIcon("chevron-last", __iconNode$18);
  */
 
 
-const __iconNode$17 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$17);
+const __iconNode$18 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$18);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49405,8 +49406,8 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$17);
  */
 
 
-const __iconNode$16 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$16);
+const __iconNode$17 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$17);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49416,11 +49417,11 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$16);
  */
 
 
-const __iconNode$15 = [
+const __iconNode$16 = [
   ["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
   ["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
 ];
-const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$15);
+const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$16);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -49430,11 +49431,26 @@ const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$15);
  */
 
 
-const __iconNode$14 = [
+const __iconNode$15 = [
   ["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
   ["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
 ];
-const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$14);
+const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$15);
+
+/**
+ * @license lucide-react v0.507.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$14 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
+  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
+];
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$14);
 
 /**
  * @license lucide-react v0.507.0 - ISC
@@ -82662,7 +82678,7 @@ TabsTrigger.displayName = Trigger$3.displayName;
 const TabsContent = React.forwardRef(({ className, ...props }, ref) => (jsx(Content$1, { ref: ref, className: cn("ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", className), ...props })));
 TabsContent.displayName = Content$1.displayName;
 
-const getUserName = () => {
+const getUserName$1 = () => {
     var _a;
     return (_a = JSON.parse(localStorage.getItem("userData"))) === null || _a === void 0 ? void 0 : _a.user_nicename;
 };
@@ -82829,7 +82845,7 @@ function UsersTab({ tenant, currentPage, itemsPerPage, onInviteSuccess }) {
                     email,
                     platform_key: tenant,
                     redirect_to: window.location.origin + window.location.pathname,
-                    source: getUserName(),
+                    source: getUserName$1(),
                     active: true,
                 },
             }).unwrap();
@@ -82909,7 +82925,7 @@ function UsersTab({ tenant, currentPage, itemsPerPage, onInviteSuccess }) {
                                 email: emailValue,
                                 platform_key: platformKey || tenant,
                                 redirect_to: window.location.origin + window.location.pathname,
-                                source: getUserName(),
+                                source: getUserName$1(),
                                 active: true,
                                 ...(companyNameIndex !== -1 &&
                                     ((_c = row[companyNameIndex]) === null || _c === void 0 ? void 0 : _c.trim()) && {
@@ -83091,7 +83107,7 @@ function CoursesTab({ tenant, currentPage, itemsPerPage, hasManageUsersPermissio
     // Search query for courses
     const { data: coursesData, isLoading: isLoadingCourses, isFetching: isFetchingCourses, } = useGetPersonnalizedSearchQuery([
         {
-            username: getUserName(),
+            username: getUserName$1(),
             content: ['courses'],
             query: debouncedCourseSearch || '',
             returnFacet: false,
@@ -83467,7 +83483,7 @@ function ProgramsTab({ tenant, currentPage, itemsPerPage, hasManageUsersPermissi
     // Search query for programs
     const { data: programsData, isLoading: isLoadingPrograms, isFetching: isFetchingPrograms, } = useGetPersonnalizedSearchQuery([
         {
-            username: getUserName(),
+            username: getUserName$1(),
             content: ['programs'],
             query: debouncedProgramSearch || '',
             returnFacet: false,
@@ -122438,7 +122454,7 @@ function EditAlertDialog({ open, onOpenChange, template, platformKey, templateTy
     }, [currentTemplateDetail, isHumanSupport, template]);
     useEffect(() => {
         try {
-            const storedUserName = getUserName();
+            const storedUserName = getUserName$1();
             if (storedUserName) {
                 setUsername(storedUserName);
             }
@@ -186823,6 +186839,2490 @@ function AnalyticsMonetizationStats({ tenantKey }) {
                                                 setPaywallPage(paywallsData.previous_page), children: "Previous" }), jsxs("span", { className: "text-xs text-gray-500", children: ["Page ", paywallPage] }), jsx(Button$1, { variant: "outline", size: "sm", className: "h-8 text-xs", disabled: paywallsData.next_page === null, onClick: () => paywallsData.next_page !== null && setPaywallPage(paywallsData.next_page), children: "Next" })] })] }))] }) })] }));
 }
 
+const SkeletonMultiplier = ({ Skeleton, multiplier }) => {
+    return (jsx(Fragment$1, { children: Array.from({ length: multiplier }).map((_, index) => (jsx(Skeleton, {}, index))) }));
+};
+
+const SkeletonActivityStatBox = () => {
+    return (jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border border-gray-100 bg-gray-50 p-3 transition-shadow hover:shadow-sm", children: [jsx("div", { className: "mb-1 h-6 w-12 animate-pulse rounded bg-gray-200" }), jsx("div", { className: "h-3 w-16 animate-pulse rounded bg-gray-200" })] }));
+};
+
+function CourseCardSkeleton() {
+    return (jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm", children: [jsx("div", { className: "animate-shimmer pointer-events-none absolute inset-0 z-10" }), jsx("div", { className: "skeleton-bg relative aspect-video w-full" }), jsxs("div", { className: "flex flex-1 flex-col justify-between p-4", children: [jsxs("div", { children: [jsx("div", { className: "skeleton-bg mb-2 h-4 w-24 rounded-sm" }), jsx("div", { className: "skeleton-bg mb-2 h-4 w-full rounded-sm" }), jsx("div", { className: "skeleton-bg h-4 w-3/4 rounded-sm" })] }), jsxs("div", { className: "mt-4 flex items-center justify-between", children: [jsx("div", { className: "skeleton-bg h-8 w-8 rounded-sm" }), jsx("div", { className: "skeleton-bg h-8 w-8 rounded-sm" })] })] })] }));
+}
+
+const DefaultEmptyBox = ({ image = '/images/empty-data-icon.svg', message = 'No data available', imageSize = 40, bordered = true, className = '', }) => {
+    return (jsx("div", { className: `border ${bordered ? 'border-gray-200' : 'border-none'} rounded-lg p-12 ${className}`, children: jsxs("div", { className: "flex flex-col items-center justify-center text-center", children: [jsx("div", { className: "mb-4 flex h-12 w-12 items-center justify-center", children: jsx("img", { src: image, alt: message, width: imageSize, height: imageSize, className: "h-10 w-10" }) }), jsx("p", { className: "text-gray-600", children: message })] }) }));
+};
+
+const CredentialMiniBoxSkeleton = () => {
+    return (jsxs("div", { className: "flex animate-pulse items-start rounded-lg border border-gray-200 bg-white p-4", children: [jsx("div", { className: "mr-4 h-12 w-12 flex-shrink-0 rounded-full bg-gray-200" }), jsxs("div", { className: "flex-1", children: [jsx("div", { className: "mb-2 h-4 w-3/4 rounded bg-gray-200" }), jsx("div", { className: "mb-2 h-3 w-1/2 rounded bg-gray-200" }), jsx("div", { className: "h-3 w-2/3 rounded bg-gray-200" })] })] }));
+};
+
+const SkillBox = ({ skill, onSkillClick, showRating = true, iconSrc = '/images/empty-data-icon.svg', }) => {
+    return (jsxs("div", { className: "flex cursor-pointer flex-col items-center rounded-lg border border-gray-200 p-6 transition-all hover:shadow-md", onClick: () => onSkillClick === null || onSkillClick === void 0 ? void 0 : onSkillClick(skill), children: [jsx("div", { className: "mb-2", children: jsx("img", { src: iconSrc, alt: "Skills icon", width: 32, height: 32, className: "h-8 w-8" }) }), jsx("p", { className: "mb-4 text-center text-sm text-gray-600", children: skill.name }), showRating && (jsxs("div", { className: "relative mb-4 h-20 w-20", children: [jsxs("svg", { className: "h-full w-full", viewBox: "0 0 100 100", children: [jsx("circle", { cx: "50", cy: "50", r: "40", fill: "none", stroke: "#E5E7EB", strokeWidth: "10" }), jsx("circle", { cx: "50", cy: "50", r: "40", fill: "none", stroke: "#F8B43A", strokeWidth: "10", strokeDasharray: "251.2", strokeDashoffset: (100 - ((skill.level || 1) / 5) * 100) * 2.512, transform: "rotate(-90 50 50)" })] }), jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx("span", { className: "text-2xl font-bold text-gray-700", children: skill.level || 1 }) })] })), jsx(Star$1, { className: "h-6 w-6 fill-amber-500 text-amber-500" })] }));
+};
+
+const SkeletonSkillBox = () => {
+    return (jsxs("div", { className: "flex w-[200px] flex-shrink-0 animate-pulse flex-col items-center rounded-lg border border-gray-200 p-6", children: [jsx("div", { className: "mb-2", children: jsx("div", { className: "h-8 w-8 rounded-full bg-gray-200" }) }), jsx("div", { className: "mb-4 h-4 w-20 rounded bg-gray-200" }), jsxs("div", { className: "relative mb-4 h-20 w-20", children: [jsx("svg", { className: "h-full w-full", viewBox: "0 0 100 100", children: jsx("circle", { cx: "50", cy: "50", r: "40", fill: "none", stroke: "#E5E7EB", strokeWidth: "10" }) }), jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx("div", { className: "h-8 w-8 rounded-full bg-gray-200" }) })] }), jsx(Star$1, { className: "h-6 w-6 text-gray-200" })] }));
+};
+
+const RATING_DESCRIPTIONS = {
+    1: 'Basic understanding of fundamentals; requires significant guidance.',
+    2: 'Familiar with core concepts; can complete routine tasks with some supervision.',
+    3: 'Capable of managing varied tasks; understands nuances but may seek guidance for complexities.',
+    4: 'Proficient with advanced concepts; can work independently on complex tasks.',
+    5: 'Expert level mastery; can innovate and teach others in this domain.',
+};
+function SkillDetailModal({ skill, updatingSkill = false, deletingSkill = false, onClose, onRatingChange, onDeleteSkill, }) {
+    const [originalRating] = useState(skill.rating || 1);
+    const [tempRating, setTempRating] = useState(skill.rating || 1);
+    const handleTempRatingChange = (rating) => {
+        setTempRating(rating);
+    };
+    const handleConfirm = () => {
+        if (updatingSkill)
+            return;
+        if (onRatingChange) {
+            onRatingChange(tempRating);
+        }
+    };
+    const handleCancel = () => {
+        onClose();
+    };
+    return (jsx("div", { className: "bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black p-4", children: jsxs("div", { className: "max-h-[85vh] w-full max-w-md overflow-y-auto rounded-lg bg-white", children: [jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 bg-gradient-to-r from-[var(--background-light)] to-[var(--primary-light)]/30 p-4", children: [jsxs("h3", { className: "text-lg font-medium text-[var(--text)]", children: ["Rate your expertise in \"", skill.name, "\""] }), jsx("button", { onClick: handleCancel, className: "rounded-full p-1 text-gray-400 hover:bg-[var(--primary-light)] hover:text-gray-500", "aria-label": "Close skill details", children: jsx(X, { className: "h-5 w-5" }) })] }), jsxs("div", { className: "max-h-[70vh] overflow-y-auto p-6", style: { scrollbarWidth: 'none', msOverflowStyle: 'none' }, children: [jsxs("div", { className: "mb-8", children: [jsxs("div", { className: "relative mb-10 pt-3", children: [jsx("div", { className: "h-2 rounded-full bg-gradient-to-r from-amber-100 to-amber-200" }), [1, 2, 3, 4, 5].map((rating) => {
+                                            const position = ((rating - 1) / 4) * 100;
+                                            return (jsx("div", { onClick: () => handleTempRatingChange(rating), className: `absolute top-3 -mt-1 -ml-2 h-4 w-4 cursor-pointer rounded-full border-2 transition-all duration-200 ${rating <= tempRating
+                                                    ? 'border-white bg-amber-500'
+                                                    : 'border-amber-200 bg-white'}`, style: { left: `${position}%` } }, rating));
+                                        }), jsx("div", { className: "absolute top-3 left-0 h-2 rounded-full bg-gradient-to-r from-amber-400 to-amber-500 transition-all duration-200", style: {
+                                                width: tempRating === 1 ? '0%' : `${((tempRating - 1) / 4) * 100}%`,
+                                            } }), [1, 2, 3, 4, 5].map((rating) => {
+                                            const position = ((rating - 1) / 4) * 100;
+                                            return (jsx("div", { onClick: () => handleTempRatingChange(rating), className: "absolute top-7 -ml-2 w-4 cursor-pointer text-center transition-all duration-200", style: { left: `${position}%` }, children: jsx("span", { className: `text-sm font-medium ${rating === tempRating ? 'text-amber-600' : 'text-gray-500'}`, children: rating }) }, `label-${rating}`));
+                                        }), jsx("div", { className: "absolute top-3 -mt-2 -ml-3 h-6 w-6 rounded-full border-2 border-white bg-amber-500 shadow-md transition-all duration-200", style: { left: `${((tempRating - 1) / 4) * 100}%` } }), jsx("input", { type: "range", min: 1, max: 5, step: 1, value: tempRating, onChange: (e) => handleTempRatingChange(Number.parseInt(e.target.value)), className: "absolute top-2 z-10 h-4 w-full cursor-pointer opacity-0", style: { margin: 0, padding: 0 }, "aria-label": "Skill rating" })] }), jsxs("div", { className: "mt-4 flex justify-between text-sm font-medium", children: [jsx("span", { className: "text-gray-600", children: "Beginner" }), jsxs("span", { className: "text-amber-600", children: ["Level ", tempRating] }), jsx("span", { className: "text-gray-600", children: "Expert" })] })] }), jsxs("div", { className: "mb-6 flex flex-col items-center", children: [jsxs("div", { className: "relative mb-4 h-20 w-20", children: [jsxs("svg", { className: "h-full w-full", viewBox: "0 0 100 100", children: [jsx("circle", { cx: "50", cy: "50", r: "40", fill: "none", stroke: "#E5E7EB", strokeWidth: "10" }), jsx("circle", { cx: "50", cy: "50", r: "40", fill: "none", stroke: "#F8B43A", strokeWidth: "10", strokeDasharray: "251.2", strokeDashoffset: `${(100 - ((tempRating || 1) / 5) * 100) * 2.512}`, transform: "rotate(-90 50 50)" })] }), jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx("span", { className: "text-3xl font-bold text-gray-700", children: tempRating }) })] }), jsx("p", { className: "max-w-xs text-center text-sm text-gray-600", children: RATING_DESCRIPTIONS[tempRating] })] })] }), jsxs("div", { className: "flex justify-between border-t border-gray-200 bg-gradient-to-r from-[var(--background-light)] to-[var(--primary-light)]/30 p-4", children: [jsxs("div", { className: "flex gap-2", children: [jsx("button", { onClick: handleCancel, className: "rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50", children: "Cancel" }), onDeleteSkill && (jsx("button", { onClick: onDeleteSkill, className: "rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50", children: deletingSkill ? 'Deleting...' : 'Delete skill' }))] }), jsx("button", { onClick: handleConfirm, className: `rounded-md 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)] transition-all ${tempRating !== originalRating
+                                ? 'animate-pulse hover:opacity-[var(--button-primary-hover-opacity)]'
+                                : 'hover:opacity-[var(--button-primary-hover-opacity)]'}`, children: updatingSkill ? 'Updating...' : 'Confirm' })] })] }) }));
+}
+
+const SkeletonPathwayBox = () => {
+    return (jsxs("div", { className: "h-[200px] animate-pulse overflow-hidden rounded-lg border border-gray-200 bg-white", children: [jsx("div", { className: "h-32 bg-gray-200" }), jsxs("div", { className: "p-4", children: [jsx("div", { className: "mb-4 h-4 w-3/4 rounded bg-gray-200" }), jsx("div", { className: "mb-1 h-2 w-full rounded bg-gray-200" }), jsx("div", { className: "h-2 w-1/4 rounded bg-gray-200" })] })] }));
+};
+
+/**
+ * Skeleton placeholder for a single profile info card (Last Accessed,
+ * Joined, Total Time Spent, Top Content). Ported from the skillsai SPA
+ * (components/skeleton-profile-info-card.tsx).
+ */
+const SkeletonProfileInfoCard = () => (jsxs("div", { className: "flex items-start rounded-sm border border-[var(--border)] p-4", children: [jsx(Skeleton, { className: "mr-4 h-12 w-12 rounded-sm" }), jsxs("div", { children: [jsx(Skeleton, { className: "mb-2 h-4 w-24" }), jsx(Skeleton, { className: "h-5 w-32" })] })] }));
+
+/**
+ * Browser-only helpers used by skills-profile hooks and components.
+ *
+ * These are sync localStorage accessors ported from the skillsai SPA. They
+ * intentionally live here (not in @iblai/web-utils) to avoid colliding with
+ * the existing async `getUserName(storageService)` helper in
+ * packages/web-utils/src/providers/auth-provider.tsx, and because no other
+ * package consumes them.
+ */
+const LS_KEYS = {
+    TENANT: 'tenant',
+    CURRENT_TENANT: 'current_tenant',
+    USER_DATA: 'userData',
+};
+const isJSON = (text) => {
+    if (typeof text !== 'string')
+        return false;
+    try {
+        JSON.parse(text);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const readLocalStorage = (key) => {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        return window.localStorage.getItem(key);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+/** Returns the current tenant slug from localStorage, or empty string. */
+function getTenant() {
+    return readLocalStorage(LS_KEYS.TENANT) || '';
+}
+/** Returns the `org` field of the currently selected tenant, or null. */
+function getOrg() {
+    var _a;
+    const currentTenant = readLocalStorage(LS_KEYS.CURRENT_TENANT);
+    return currentTenant && isJSON(currentTenant) ? (_a = JSON.parse(currentTenant)) === null || _a === void 0 ? void 0 : _a.org : null;
+}
+/** Returns the logged-in user's numeric user_id from localStorage, or null. */
+function getUserId() {
+    var _a;
+    const userData = readLocalStorage(LS_KEYS.USER_DATA);
+    return userData && isJSON(userData) ? (_a = JSON.parse(userData)) === null || _a === void 0 ? void 0 : _a.user_id : null;
+}
+/** Returns the logged-in user's nicename (username) from localStorage, or null. */
+function getUserName() {
+    var _a;
+    const userData = readLocalStorage(LS_KEYS.USER_DATA);
+    return userData && isJSON(userData) ? (_a = JSON.parse(userData)) === null || _a === void 0 ? void 0 : _a.user_nicename : null;
+}
+/**
+ * Returns true if the current document is rendered inside an iframe. Safely
+ * handles cross-origin access errors (throw → treated as embedded) and the
+ * server-rendering case (no window → treated as embedded).
+ */
+function inIframe() {
+    try {
+        return typeof window !== 'undefined' && window.self !== window.top;
+    }
+    catch (_a) {
+        return true;
+    }
+}
+/** Returns a path to a random bundled course placeholder image. */
+function getRandomCourseImage() {
+    const courseImages = [
+        '/images/courses/c1s.jpeg',
+        '/images/courses/c2s.jpeg',
+        '/images/courses/c3s.jpeg',
+        '/images/courses/c4s.jpeg',
+        '/images/courses/c5s.jpeg',
+        '/images/courses/c6s.jpeg',
+        '/images/courses/c7s.jpeg',
+        '/images/courses/c8s.jpeg',
+    ];
+    return courseImages[Math.floor(Math.random() * courseImages.length)];
+}
+/**
+ * Triggers the browser's print dialog scoped to a specific DOM element.
+ * Injects a transient @media print stylesheet and cleans it up afterward.
+ */
+function inBrowserPrint(layoutToPrint) {
+    if (!layoutToPrint)
+        return;
+    layoutToPrint.classList.add('in-browser-printable');
+    const style = document.createElement('style');
+    style.innerHTML = `
+    @media print {
+      body * { visibility: hidden; }
+      .in-browser-printable, .in-browser-printable * { visibility: visible; }
+      .in-browser-printable {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+      }
+    }
+  `;
+    document.head.appendChild(style);
+    window.print();
+    document.head.removeChild(style);
+    layoutToPrint.classList.remove('in-browser-printable');
+}
+
+/**
+ * Thin wrapper around useGetUserMetadataQuery that reads the username
+ * from localStorage and skips the request when there is no logged-in
+ * user.
+ *
+ * Ported from the skillsai SPA (hooks/users/use-usermetadata.tsx).
+ */
+const useUserMetadata = () => {
+    const username = getUserName();
+    const { data: userMetaData, isLoading: userMetaDataLoading, isError: userMetaDataError, } = useGetUserMetadataQuery({ params: { username } }, { skip: !username });
+    return { userMetaData, userMetaDataLoading, userMetaDataError };
+};
+
+/**
+ * Presentational avatar for the logged-in user. Pulls the user metadata
+ * via the shared useUserMetadata hook and picks the best available
+ * image source (uploaded profile image → Gravatar → initials fallback).
+ *
+ * Ported from the skillsai SPA (components/header/profile/user-avatar.tsx).
+ * Note: `enableGravatarOnProfilePic` config is now passed in as a prop
+ * rather than read from a skillsai-local config module.
+ */
+const UserAvatar = ({ size = 32, containerClassName = '', enableGravatar = true, }) => {
+    var _a, _b, _c, _d;
+    const { userMetaData, userMetaDataLoading } = useUserMetadata();
+    const data = userMetaData;
+    const hasImage = !!((_a = data === null || data === void 0 ? void 0 : data.profile_image) === null || _a === void 0 ? void 0 : _a.has_image);
+    return (jsx(Avatar, { className: containerClassName, children: userMetaDataLoading ? (jsx(Skeleton, { className: "h-8 w-8 rounded-full" })) : (jsxs(Fragment$1, { children: [hasImage ? (jsx(AvatarImage, { src: (_b = data === null || data === void 0 ? void 0 : data.profile_image) === null || _b === void 0 ? void 0 : _b.image_url_large, alt: (_c = data === null || data === void 0 ? void 0 : data.name) !== null && _c !== void 0 ? _c : '', className: "w-full" })) : enableGravatar ? (jsx(Gravatar$1, { className: "w-full", email: (_d = data === null || data === void 0 ? void 0 : data.email) !== null && _d !== void 0 ? _d : '', size: size })) : null, jsx(AvatarFallback, { className: cn(enableGravatar && !hasImage ? 'hidden' : ''), children: getInitials((data === null || data === void 0 ? void 0 : data.name) || (data === null || data === void 0 ? void 0 : data.username) || (data === null || data === void 0 ? void 0 : data.email) || '') })] })) }));
+};
+
+/**
+ * Presentational 7-day time-spent bar chart. Callers supply the data
+ * (typically via useProfileTimeSpent) and a loading flag; this component
+ * does no data fetching.
+ *
+ * Ported from the skillsai SPA (components/profile-time-chart.tsx),
+ * refactored to be presentational.
+ */
+const ProfileTimeChart = ({ data, loading = false }) => {
+    const renderLegend = (props) => {
+        var _a;
+        const payload = (_a = props.payload) !== null && _a !== void 0 ? _a : [];
+        return (jsx("div", { className: "flex w-full justify-center pt-0 pb-4", children: payload.map((entry, index) => (jsxs("div", { className: "mx-2 flex items-center", children: [jsx("div", { className: "mr-2 h-3 w-3 bg-amber-500 opacity-70" }), jsx("span", { className: "text-xs text-gray-600", children: entry.value })] }, `item-${index}`))) }));
+    };
+    return (jsx("div", { className: "mb-4 border-b border-gray-200 pb-2", children: loading ? (jsx("div", { "data-testid": "profile-time-chart-loading", className: "flex h-64 items-center justify-center", children: jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-amber-500 border-t-transparent" }) })) : (jsx("div", { className: "relative h-64", children: jsx(ResponsiveContainer, { width: "100%", height: "100%", children: jsxs(BarChart, { data: data, margin: { top: 10, right: 0, left: 0, bottom: 20 }, children: [jsx(CartesianGrid, { strokeDasharray: "3 3" }), jsx(XAxis, { dataKey: "date", axisLine: true, tickLine: true, tick: { fill: '#9CA3AF', fontSize: 12 }, height: 50 }), jsx(YAxis, { axisLine: true, tickLine: true, tick: { fill: '#9CA3AF', fontSize: 12 }, label: {
+                                value: 'Minutes',
+                                angle: -90,
+                                position: 'insideLeft',
+                                style: { textAnchor: 'middle', fill: '#9CA3AF', fontSize: 12 },
+                            }, domain: [0, 30], ticks: [0, 10, 20, 30, 40, 50] }), jsx(Legend, { content: renderLegend, verticalAlign: "top", height: 36 }), jsx(Bar, { dataKey: "minutes", name: "Minutes", barSize: 130, children: data === null || data === void 0 ? void 0 : data.map((_entry, index) => (jsx(Cell, { fill: "rgba(245, 158, 11, 0.7)" }, `cell-${index}`))) })] }) }) })) }));
+};
+
+const skillLevels = [
+    { name: 'Beginner', value: 0, description: 'basic knowledge' },
+    { name: 'Novice', value: 100, description: 'limited experience' },
+    { name: 'Intermediate', value: 200, description: 'practical application' },
+    { name: 'Advanced', value: 300, description: 'applied theory' },
+    { name: 'Expert', value: 400, description: 'recognized authority' },
+];
+const generateCurveData = () => {
+    const data = [];
+    for (let i = 0; i <= 100; i += 5) {
+        let value = i < 80 ? Math.pow(i, 1.5) * 3 : Math.pow(i, 1.8) * 1.5;
+        value = Math.min(value, 500);
+        let level = 'Beginner';
+        let description = 'basic knowledge';
+        if (i >= 80) {
+            level = 'Expert';
+            description = 'recognized authority';
+        }
+        else if (i >= 60) {
+            level = 'Advanced';
+            description = 'applied theory';
+        }
+        else if (i >= 40) {
+            level = 'Intermediate';
+            description = 'practical application';
+        }
+        else if (i >= 20) {
+            level = 'Novice';
+            description = 'limited experience';
+        }
+        data.push({ percentile: i, value, level, description });
+    }
+    return data;
+};
+/** @internal Exported for testing. */
+const CustomTooltip = ({ active, payload, label }) => {
+    if (active && payload && payload.length) {
+        return (jsxs("div", { className: "rounded-md border border-gray-200 bg-white p-3 shadow-sm", children: [jsx("p", { className: "text-sm font-medium", children: `Level: ${payload[0].payload.level}` }), jsx("p", { className: "text-xs text-gray-600", children: `Skill Points: ${Math.round(payload[0].value)}` }), jsx("p", { className: "text-xs text-gray-600", children: `Percentile: ${label}%` })] }));
+    }
+    return null;
+};
+/**
+ * Presentational skill-leaderboard curve chart. Takes the user's raw
+ * skill points as a prop and derives their percentile + level locally.
+ * Ported verbatim from the skillsai SPA (components/skill-leaderboard-chart.tsx).
+ */
+const SkillLeaderboardChart = ({ userSkillPoints = 0, }) => {
+    const [data, setData] = React.useState([]);
+    const [userPosition, setUserPosition] = React.useState(0);
+    React.useEffect(() => {
+        const skillPercentage = userSkillPoints / 500;
+        if (Number.isNaN(skillPercentage)) {
+            setUserPosition(0);
+        }
+        else if (skillPercentage > 1) {
+            setUserPosition(100);
+        }
+        else {
+            setUserPosition(skillPercentage * 100);
+        }
+    }, [userSkillPoints]);
+    React.useEffect(() => {
+        setData(generateCurveData());
+    }, []);
+    const getUserLevel = () => {
+        if (userPosition >= 80)
+            return 'Expert';
+        if (userPosition >= 60)
+            return 'Advanced';
+        if (userPosition >= 40)
+            return 'Intermediate';
+        if (userPosition >= 20)
+            return 'Novice';
+        return 'Beginner';
+    };
+    const getUserPoints = () => {
+        const userDataPoint = data.find((point) => point.percentile === userPosition) ||
+            data.find((point) => point.percentile > userPosition) || {
+            value: 0};
+        return Math.round(userDataPoint.value);
+    };
+    return (jsxs(Fragment$1, { children: [jsx("div", { className: "mb-2 flex justify-between px-2", children: skillLevels.map((level) => (jsx("div", { className: "text-center", children: jsx("p", { className: "text-xs font-medium text-gray-700", children: level.name }) }, level.name))) }), jsx("div", { className: "h-[250px] w-full overflow-x-auto sm:h-[300px]", children: jsx("div", { className: "h-full min-w-[600px]", children: jsx(ResponsiveContainer, { width: "100%", height: "100%", children: jsxs(LineChart, { data: data, margin: { top: 20, right: 20, left: 20, bottom: 60 }, children: [jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }), jsx(XAxis, { dataKey: "percentile", type: "number", domain: [0, 100], tickFormatter: (value) => `${value}%`, label: {
+                                        value: 'Global Learner Percentile',
+                                        position: 'bottom',
+                                        offset: 0,
+                                        dy: 30,
+                                    } }), jsx(YAxis, { domain: [0, 500], label: {
+                                        value: 'Skill Points',
+                                        angle: -90,
+                                        position: 'left',
+                                        dx: -30,
+                                    } }), jsx(Tooltip, { content: jsx(CustomTooltip, {}) }), jsx(ReferenceArea, { x1: 80, x2: 100, fill: "rgba(248, 180, 58, 0.15)", fillOpacity: 0.3 }), skillLevels.map((level, index) => (jsx(ReferenceLine, { x: index * 20, stroke: "rgba(0,0,0,0.1)", strokeDasharray: "3 3", label: {
+                                        value: level.description,
+                                        position: 'bottom',
+                                        fill: '#6B7280',
+                                        fontSize: 10,
+                                        dy: 15,
+                                    } }, level.name))), jsx(ReferenceLine, { x: userPosition, stroke: "#F8B43A", strokeWidth: 2, strokeDasharray: "3 3" }), jsx(Line, { type: "monotone", dataKey: "value", stroke: "#F8B43A", strokeWidth: 3, dot: false, activeDot: { r: 8, fill: '#F8B43A' } })] }) }) }) }), jsxs("div", { className: "mt-4 flex items-center justify-between", children: [jsxs("div", { children: [jsxs("p", { className: "text-sm text-gray-600", children: ["Your Level: ", jsx("span", { className: "font-medium text-amber-500", children: getUserLevel() })] }), jsxs("p", { className: "text-sm text-gray-600", children: ["Skill Points: ", jsx("span", { className: "font-medium", children: getUserPoints() })] })] }), jsxs("div", { className: "text-xs text-gray-500", children: ["Percentile: ", userPosition, "%"] })] })] }));
+};
+
+/**
+ * Skeleton row for the AddSkillDialog search results list. Ported from
+ * the skillsai SPA (components/skeleton-add-skills-loading.tsx).
+ */
+const SkeletonAddSkillsLoading = () => (jsxs("div", { className: "flex items-center rounded-md border border-gray-200 p-3", children: [jsx("div", { className: "flex-1", children: jsx("div", { className: "flex items-center", children: jsx("div", { className: "h-4 w-24 animate-pulse rounded bg-gray-200" }) }) }), jsx("div", { className: "h-6 w-6 animate-pulse rounded-full bg-gray-200" })] }));
+
+const DIALOG_TITLES = {
+    earned: 'Add Earned Skill',
+    desired: 'Add Desired Skill',
+    'self-reported': 'Add Self-Reported Skill',
+};
+/**
+ * Presentational "add skill" dialog with a debounced search input and
+ * single-select list of skill candidates.
+ *
+ * Ported from the skillsai SPA (components/add-skill-dialog.tsx),
+ * refactored to take data and handlers via props. Callers are expected
+ * to wire the `onSearch` → `useProfileSkills().handleFetchAllSkills`
+ * link and the `onAddSkill` → `handleSkillsUpdate` link themselves.
+ */
+const AddSkillDialog = ({ open, onOpenChange, type, fetchedSkills, isFetchingSkills, isFetchingSkillsError, updatingSkill, onSearch, onAddSkill, searchDebounceMs = 500, }) => {
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [selectedSkill, setSelectedSkill] = React.useState(null);
+    const searchInputRef = React.useRef(null);
+    const debounceTimer = React.useRef(null);
+    // Debounced search: reset timer on every keystroke.
+    React.useEffect(() => {
+        if (debounceTimer.current)
+            clearTimeout(debounceTimer.current);
+        debounceTimer.current = setTimeout(() => {
+            onSearch(searchQuery);
+        }, searchDebounceMs);
+        return () => {
+            if (debounceTimer.current)
+                clearTimeout(debounceTimer.current);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchQuery]);
+    // Focus the search input when the dialog opens.
+    React.useEffect(() => {
+        if (open && searchInputRef.current) {
+            const t = setTimeout(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
+            return () => clearTimeout(t);
+        }
+    }, [open]);
+    // Reset local state when the dialog closes.
+    React.useEffect(() => {
+        if (!open) {
+            setSearchQuery('');
+            setSelectedSkill(null);
+        }
+    }, [open]);
+    const handleAddSkill = () => {
+        if (updatingSkill || !selectedSkill)
+            return;
+        onAddSkill(selectedSkill);
+    };
+    return (jsx(Dialog$1, { open: open, onOpenChange: onOpenChange, children: jsxs(DialogContent$1, { className: "overflow-hidden p-0 sm:max-w-md", children: [jsx(DialogHeader, { className: "border-b px-6 py-4", children: jsx("div", { className: "flex items-center justify-between", children: jsx(DialogTitle$1, { className: "text-lg font-medium text-gray-600", children: DIALOG_TITLES[type] }) }) }), jsxs("div", { className: "p-6", children: [jsxs("div", { className: "relative mb-4", children: [jsx("div", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center", children: jsx(Search, { className: "h-4 w-4 text-gray-400" }) }), jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search skills...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full rounded-md border border-gray-200 bg-gray-50 py-2 pr-4 pl-10 text-sm text-gray-700 focus:ring-1 focus:ring-amber-500 focus:outline-none" })] }), ((!isFetchingSkills && isFetchingSkillsError) ||
+                            (!isFetchingSkills && fetchedSkills.length === 0)) && (jsx(DefaultEmptyBox, { message: "No skills found" })), jsxs("div", { className: "max-h-[300px] space-y-2 overflow-y-auto pr-1", children: [isFetchingSkills && (jsx(SkeletonMultiplier, { multiplier: 6, Skeleton: SkeletonAddSkillsLoading })), !isFetchingSkills &&
+                                    !isFetchingSkillsError &&
+                                    fetchedSkills.map((row, index) => {
+                                        const skill = row === null || row === void 0 ? void 0 : row.data;
+                                        const isSelected = !!(skill === null || skill === void 0 ? void 0 : skill.skill_id) && (selectedSkill === null || selectedSkill === void 0 ? void 0 : selectedSkill.skill_id) === skill.skill_id;
+                                        return (jsxs("div", { onClick: () => skill && setSelectedSkill(skill), className: `flex cursor-pointer items-center rounded-md border p-3 transition-colors ${isSelected
+                                                ? 'border-amber-500 bg-amber-50'
+                                                : 'border-gray-200 hover:bg-gray-50'}`, children: [jsx("div", { className: "flex-1", children: jsx("div", { className: "flex items-center", children: jsx("span", { className: "text-sm font-medium text-gray-700", children: skill === null || skill === void 0 ? void 0 : skill.name }) }) }), jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-full ${isSelected ? 'bg-amber-500 text-white' : 'bg-gray-100 text-gray-400'}`, children: isSelected ? jsx(Check, { className: "h-4 w-4" }) : jsx(Plus, { className: "h-4 w-4" }) })] }, `skill-${index}`));
+                                    })] })] }), jsx("div", { className: "flex justify-end border-t p-4", children: jsx("button", { onClick: handleAddSkill, disabled: !selectedSkill, className: `rounded-md px-4 py-2 font-medium text-white transition-colors ${selectedSkill
+                            ? 'bg-gradient-to-r from-[var(--button-primary-gradient-from)] to-[var(--button-primary-gradient-to)] hover:opacity-[var(--button-primary-hover-opacity)]'
+                            : 'cursor-not-allowed bg-gray-300'}`, children: updatingSkill ? 'Submitting...' : 'Add Skill' }) })] }) }));
+};
+
+/**
+ * Skeleton row for the CreatePathwayModal content search list. Ported
+ * from the skillsai SPA (components/skeleton-create-pathway-search-list.tsx).
+ */
+const SkeletonCreatePathwaySearchList = () => (jsx("div", { className: "animate-pulse overflow-hidden rounded-lg border border-gray-200", children: jsxs("div", { className: "flex items-center bg-white p-3", children: [jsx("div", { className: "relative mr-3 h-12 w-12 flex-shrink-0 overflow-hidden rounded-md bg-gray-200", children: jsx("div", { className: "h-full w-full animate-pulse bg-gray-300" }) }), jsxs("div", { className: "flex-1", children: [jsx("div", { className: "mb-2 h-4 animate-pulse rounded bg-gray-200" }), jsx("div", { className: "h-3 w-3/4 animate-pulse rounded bg-gray-100" })] }), jsx("div", { className: "h-6 w-6 animate-pulse rounded-full bg-gray-200" })] }) }));
+
+/**
+ * Skeleton row for the EducationBox / ExperienceBox lists. Ported from
+ * the skillsai SPA (components/profile/skeleton-education-box.tsx).
+ */
+const SkeletonEducationBox = () => (jsxs("div", { children: [jsxs("div", { className: "flex items-center", children: [jsx(Skeleton, { className: "h-5 w-24" }), jsx(Skeleton, { className: "ml-2 h-4 w-4" })] }), jsx("div", { className: "mt-1", children: jsx(Skeleton, { className: "h-4 w-48" }) }), jsx("div", { className: "mt-2", children: jsx(Skeleton, { className: "h-4 w-32" }) })] }));
+
+const FALLBACK_CREDENTIAL_IMG = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><circle cx="24" cy="24" r="22" fill="%23e5e7eb"/></svg>';
+const CredentialMiniBox = ({ credential, onClick = () => { }, minified = false, iconSize = 48, defaultImage = FALLBACK_CREDENTIAL_IMG, }) => {
+    var _a, _b, _c, _d;
+    return (jsxs("div", { className: "flex cursor-pointer items-start rounded-lg border border-gray-200 bg-white p-4 transition-shadow hover:shadow-md", onClick: onClick, children: [jsx("div", { className: "mr-4 h-12 w-12 flex-shrink-0 overflow-hidden rounded-full", children: jsx(Image$4, { src: ((_a = credential.credentialDetails) === null || _a === void 0 ? void 0 : _a.iconImage) || defaultImage, alt: ((_b = credential.credentialDetails) === null || _b === void 0 ? void 0 : _b.name) || 'Credential', width: iconSize, height: iconSize, className: "h-full w-full object-cover" }) }), jsxs("div", { children: [jsx("h3", { className: "text-sm font-medium text-gray-800", children: (_c = credential.credentialDetails) === null || _c === void 0 ? void 0 : _c.name }), !minified && jsx("p", { className: "text-xs text-gray-600", children: (_d = credential.course) === null || _d === void 0 ? void 0 : _d.name }), jsxs("p", { className: "mt-1 text-xs text-gray-500", children: ["Earned on: ", credential.issuedOn ? dayjs(credential.issuedOn).format('MMM D, YYYY') : '-'] })] })] }));
+};
+
+/**
+ * Presentational credentials grid for the public profile page. Caller
+ * supplies the credentials list + loading flags (typically from the
+ * useProfileCredentials hook).
+ *
+ * Ported from the skillsai SPA (components/profile/credential-box.tsx).
+ */
+const CredentialBox = ({ credentials, isLoading = false, isError = false, }) => {
+    const isEmpty = !isLoading && !isError && credentials.length === 0;
+    return (jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-6", children: [jsx("h2", { className: "mb-4 text-lg font-medium text-gray-800", children: "Credentials" }), (isError || isEmpty) && (jsx(DefaultEmptyBox, { message: "No credentials found.", className: "w-full" })), jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: [isLoading && jsx(SkeletonMultiplier, { Skeleton: CredentialMiniBoxSkeleton, multiplier: 8 }), !isLoading &&
+                        !isError &&
+                        credentials.length > 0 &&
+                        credentials.map((credential) => (jsx(CredentialMiniBox, { credential: credential }, credential.entityId)))] })] }));
+};
+
+const formatYearRange$1 = (start, end) => {
+    if (!start && !end)
+        return '';
+    const startYear = start ? dayjs(start).format('YYYY') : '';
+    const endYear = end ? dayjs(end).format('YYYY') : 'Present';
+    if (start && end && startYear === endYear)
+        return endYear;
+    return `${startYear} - ${endYear}`;
+};
+/**
+ * Presentational education list for the public profile page. The
+ * skillsai SPA also rendered an inline EducationDialog and
+ * AddInstitutionDialog — both are caller-managed now (the caller can
+ * open them in response to onEditEducation).
+ *
+ * Ported from the skillsai SPA (components/profile/education-box.tsx).
+ */
+const EducationBox = ({ education = [], isLoading = false, isError = false, onEditEducation, }) => {
+    const isEmpty = !isLoading && !isError && education.length === 0;
+    return (jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-6", children: [jsx("h2", { className: "mb-4 text-lg font-medium text-gray-800", children: "Education" }), jsxs("div", { className: "space-y-8", children: [isLoading && jsx(SkeletonMultiplier, { multiplier: 4, Skeleton: SkeletonEducationBox }), (isError || isEmpty) && jsx(DefaultEmptyBox, { message: "No education found." }), !isLoading &&
+                        !isError &&
+                        education.map((entry, index) => {
+                            var _a;
+                            return (jsxs("div", { children: [jsxs("div", { className: "flex items-center", children: [jsx("h3", { className: "text-base font-medium text-amber-500", children: entry.degree }), onEditEducation && (jsx("button", { onClick: () => onEditEducation(entry), "aria-label": "Edit education entry", className: "ml-2 text-amber-500 transition-colors hover:text-amber-600", children: jsx(Pen, { className: "h-4 w-4" }) }))] }), jsxs("div", { className: "mt-1 text-gray-700", children: [(_a = entry === null || entry === void 0 ? void 0 : entry.institution) === null || _a === void 0 ? void 0 : _a.name, " | ", formatYearRange$1(entry.start_date, entry.end_date), entry.grade ? ` | Grade: ${entry.grade}` : ''] }), entry.description && jsx("p", { className: "mt-2 text-gray-600", children: entry.description })] }, index));
+                        })] })] }));
+};
+
+const formatYearRange = (start, end) => {
+    if (!start && !end)
+        return '';
+    const startYear = start ? dayjs(start).format('YYYY') : '';
+    const endYear = end ? dayjs(end).format('YYYY') : 'Present';
+    if (start && end && startYear === endYear)
+        return endYear;
+    return `${startYear} - ${endYear}`;
+};
+/**
+ * Presentational work-experience list for the public profile page.
+ *
+ * Ported from the skillsai SPA (components/profile/experience-box.tsx).
+ */
+const ExperienceBox = ({ experience = [], isLoading = false, isError = false, onEditExperience, }) => {
+    const isEmpty = !isLoading && !isError && experience.length === 0;
+    return (jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-6", children: [jsx("h2", { className: "mb-4 text-lg font-medium text-gray-800", children: "Work Experience" }), jsxs("div", { className: "space-y-8", children: [isLoading && jsx(SkeletonMultiplier, { multiplier: 4, Skeleton: SkeletonEducationBox }), (isError || isEmpty) && jsx(DefaultEmptyBox, { message: "No experience found." }), !isLoading &&
+                        !isError &&
+                        experience.map((entry, index) => {
+                            var _a;
+                            return (jsxs("div", { children: [jsxs("div", { className: "flex items-center", children: [jsx("h3", { className: "text-base font-medium text-amber-500", children: entry.title }), onEditExperience && (jsx("button", { onClick: () => onEditExperience(entry), "aria-label": "Edit experience entry", className: "ml-2 text-amber-500 transition-colors hover:text-amber-600", children: jsx(Pen, { className: "h-4 w-4" }) }))] }), jsxs("div", { className: "mt-1 text-gray-700", children: [(_a = entry.company) === null || _a === void 0 ? void 0 : _a.name, " | ", formatYearRange(entry.start_date, entry.end_date)] }), entry.description && jsx("p", { className: "mt-2 text-gray-600", children: entry.description })] }, index));
+                        })] })] }));
+};
+
+const isEmpty$1 = (xs) => !xs || xs.length === 0;
+/**
+ * Presentational skills list for the public profile page. Splits the
+ * three skill buckets (earned, self-reported, desired) into their own
+ * sections, each with its own loading skeleton and empty state.
+ *
+ * Ported from the skillsai SPA (components/profile/skills-box.tsx).
+ */
+const SkillsBox = ({ earnedSkills, earnedSkillsLoading = false, earnedSkillsError = false, selfReportedSkills, selfReportedSkillsLoading = false, selfReportedSkillsError = false, desiredSkills, desiredSkillsLoading = false, desiredSkillsError = false, }) => {
+    var _a, _b, _c;
+    return (jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-6", children: [jsx("h2", { className: "mb-4 text-lg font-medium text-gray-800", children: "Skills" }), jsxs("div", { className: "mb-6", children: [jsx("h3", { className: "mb-4 text-base font-medium text-gray-700", children: "Earned" }), !earnedSkillsLoading && (earnedSkillsError || isEmpty$1(earnedSkills === null || earnedSkills === void 0 ? void 0 : earnedSkills.resources)) && (jsx(DefaultEmptyBox, { className: "w-full", message: "You don't have any earned skills yet." })), jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: [earnedSkillsLoading && jsx(SkeletonMultiplier, { Skeleton: SkeletonSkillBox, multiplier: 6 }), !earnedSkillsLoading &&
+                                !earnedSkillsError &&
+                                ((_a = earnedSkills === null || earnedSkills === void 0 ? void 0 : earnedSkills.resources) === null || _a === void 0 ? void 0 : _a.map((skill, index) => (jsx(SkillBox, { onSkillClick: () => { }, skill: {
+                                        name: skill.name || '',
+                                        level: skill.points || 0,
+                                        starred: false,
+                                    } }, index))))] })] }), jsxs("div", { className: "mb-6", children: [jsx("h3", { className: "mb-4 text-base font-medium text-gray-700", children: "Self-Reported" }), !selfReportedSkillsLoading &&
+                        (selfReportedSkillsError || isEmpty$1(selfReportedSkills === null || selfReportedSkills === void 0 ? void 0 : selfReportedSkills.skills)) && (jsx(DefaultEmptyBox, { className: "w-full", message: "You don't have any self-reported skills yet." })), jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: [selfReportedSkillsLoading && (jsx(SkeletonMultiplier, { Skeleton: SkeletonSkillBox, multiplier: 6 })), !selfReportedSkillsLoading &&
+                                !selfReportedSkillsError &&
+                                ((_b = selfReportedSkills === null || selfReportedSkills === void 0 ? void 0 : selfReportedSkills.skills) === null || _b === void 0 ? void 0 : _b.map((skill, index) => {
+                                    var _a, _b;
+                                    return (jsx(SkillBox, { skill: {
+                                            name: skill.name || '',
+                                            level: ((_b = (_a = selfReportedSkills === null || selfReportedSkills === void 0 ? void 0 : selfReportedSkills.data) === null || _a === void 0 ? void 0 : _a.level) === null || _b === void 0 ? void 0 : _b[index]) || 0,
+                                            starred: true,
+                                        } }, index));
+                                }))] })] }), jsxs("div", { children: [jsx("h3", { className: "mb-4 text-base font-medium text-gray-700", children: "Desired" }), !desiredSkillsLoading && (desiredSkillsError || isEmpty$1(desiredSkills === null || desiredSkills === void 0 ? void 0 : desiredSkills.skills)) && (jsx(DefaultEmptyBox, { className: "w-full", message: "You don't have any desired skills yet." })), jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: [desiredSkillsLoading && (jsx(SkeletonMultiplier, { Skeleton: SkeletonSkillBox, multiplier: 6 })), !desiredSkillsLoading &&
+                                !desiredSkillsError &&
+                                ((_c = desiredSkills === null || desiredSkills === void 0 ? void 0 : desiredSkills.skills) === null || _c === void 0 ? void 0 : _c.map((skill, index) => {
+                                    var _a, _b;
+                                    return (jsx(SkillBox, { showRating: false, skill: {
+                                            name: skill.name || '',
+                                            level: ((_b = (_a = desiredSkills === null || desiredSkills === void 0 ? void 0 : desiredSkills.data) === null || _a === void 0 ? void 0 : _a.level) === null || _b === void 0 ? void 0 : _b[index]) || 0,
+                                            starred: true,
+                                        } }, index));
+                                }))] })] })] }));
+};
+
+try {
+    __webpack_exports__GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${__webpack_exports__version}/build/pdf.worker.min.mjs`;
+}
+catch (_a) {
+    // pdfjs may not be configurable in non-browser environments; ignore silently.
+}
+const ResumeBoxSkeleton = () => (jsx("div", { className: "h-[200px] w-full animate-pulse rounded-lg bg-gray-200" }));
+/**
+ * Presentational PDF resume viewer with paging, zoom, and rotation
+ * controls. Uses react-pdf, so it must run client-side.
+ *
+ * Ported from the skillsai SPA (components/profile/resume-box.tsx).
+ */
+const ResumeBox = ({ resumeUrl, isLoading = false, isError = false, }) => {
+    const [resumeLoadError, setResumeLoadError] = React.useState(false);
+    const [numPages, setNumPages] = React.useState(null);
+    const [pageNumber, setPageNumber] = React.useState(1);
+    const [scale, setScale] = React.useState(1.0);
+    const [rotation, setRotation] = React.useState(0);
+    const onDocumentLoadSuccess = ({ numPages }) => {
+        setNumPages(numPages);
+    };
+    const onDocumentLoadError = () => setResumeLoadError(true);
+    const goToPrevPage = () => setPageNumber((p) => p - 1);
+    const goToNextPage = () => setPageNumber((p) => p + 1);
+    const zoomIn = () => setScale((s) => s + 0.2);
+    const zoomOut = () => setScale((s) => (s > 0.4 ? s - 0.2 : s));
+    const rotateLeft = () => setRotation((r) => r - 90);
+    const rotateRight = () => setRotation((r) => r + 90);
+    return (jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-6", children: [jsx("h2", { className: "mb-4 text-lg font-medium text-gray-800", children: "Resume" }), isLoading && jsx(ResumeBoxSkeleton, {}), ((!isLoading && isError) || (!isLoading && !isError && !resumeUrl)) && (jsx(DefaultEmptyBox, { message: "No resume found.", className: "w-full" })), !isLoading && !isError && resumeUrl && !resumeLoadError && (jsxs(Fragment$1, { children: [jsxs("div", { className: "mb-5 flex flex-col items-center justify-center rounded-lg bg-gray-100 p-2.5 md:flex-row", children: [jsxs("div", { className: "mb-2.5 flex items-center md:mr-5 md:mb-0", children: [jsx("button", { onClick: goToPrevPage, disabled: pageNumber <= 1, className: "mx-1 rounded border-none bg-amber-500 px-3 py-2 text-white transition-colors hover:bg-amber-400 disabled:cursor-not-allowed disabled:bg-gray-300", children: "Previous Page" }), jsxs("span", { className: "mx-2.5 font-bold", children: ["Page ", pageNumber, " of ", numPages] }), jsx("button", { onClick: goToNextPage, disabled: pageNumber >= (numPages !== null && numPages !== void 0 ? numPages : 0), className: "mx-1 rounded border-none bg-amber-500 px-3 py-2 text-white transition-colors hover:bg-amber-400 disabled:cursor-not-allowed disabled:bg-gray-300", children: "Next Page" })] }), jsxs("div", { className: "mb-2.5 flex items-center md:mr-5 md:mb-0", children: [jsx("button", { onClick: zoomOut, disabled: scale <= 0.4, "aria-label": "Zoom out", className: "mx-1 rounded border-none bg-amber-500 px-3 py-2 text-white transition-colors hover:bg-amber-400 disabled:cursor-not-allowed disabled:bg-gray-300", children: "-" }), jsxs("span", { className: "mx-2.5 font-bold", children: ["Zoom: ", Math.round(scale * 100), "%"] }), jsx("button", { onClick: zoomIn, "aria-label": "Zoom in", className: "mx-1 rounded border-none bg-amber-500 px-3 py-2 text-white transition-colors hover:bg-amber-400 disabled:cursor-not-allowed disabled:bg-gray-300", children: "+" })] }), jsxs("div", { className: "flex items-center", children: [jsx("button", { onClick: rotateLeft, className: "mx-1 rounded border-none bg-amber-500 px-3 py-2 text-white transition-colors hover:bg-amber-400", children: "Rotate Left" }), jsx("button", { onClick: rotateRight, className: "mx-1 rounded border-none bg-amber-500 px-3 py-2 text-white transition-colors hover:bg-amber-400", children: "Rotate Right" })] })] }), jsx("div", { className: "flex min-h-[80vh] items-center justify-center", children: jsx(Document$1, { file: resumeUrl, onLoadSuccess: onDocumentLoadSuccess, onLoadError: onDocumentLoadError, loading: jsx(ResumeBoxSkeleton, {}), children: jsx(Page, { pageNumber: pageNumber, scale: scale, rotate: rotation }) }) })] })), resumeLoadError && jsx(DefaultEmptyBox, { message: "Error loading resume.", className: "w-full" })] }));
+};
+
+/**
+ * Wrapper around the course-metadata RTK endpoints that exposes
+ * promise-returning fetch helpers for use inside effects/callbacks.
+ *
+ * Ported from the skillsai SPA (hooks/courses/use-course-metadata.ts).
+ */
+const useCourseMetadata = () => {
+    const [getCourseMetaData, { isLoading, isError }] = useLazyGetCourseMetaDataQuery();
+    const [getCourseCompletionOutlines, { isLoading: isLoadingCompletionOutlines, isError: isErrorCompletionOutlines },] = useLazyGetCourseCompletionOutlinesQuery();
+    const [getCourseEligibility] = useLazyGetCourseEligibilityQuery();
+    const handleFetchCourseMetaData = async (courseKey) => {
+        try {
+            const { data: courseMetaData } = await getCourseMetaData({ courseKey }, true);
+            return courseMetaData;
+        }
+        catch (_a) {
+            return undefined;
+        }
+    };
+    const handleFetchCourseEligibility = async (courseKey) => {
+        try {
+            const { data: courseEligibility } = await getCourseEligibility({ courseKey });
+            return courseEligibility || null;
+        }
+        catch (_a) {
+            return null;
+        }
+    };
+    const handleFetchCourseCompletionOutlines = async (courseKey) => {
+        try {
+            const { data: courseCompletionOutlines } = await getCourseCompletionOutlines({ courseKey });
+            return courseCompletionOutlines;
+        }
+        catch (_a) {
+            return undefined;
+        }
+    };
+    return {
+        handleFetchCourseMetaData,
+        handleFetchCourseCompletionOutlines,
+        handleFetchCourseEligibility,
+        isLoading,
+        isError,
+        isLoadingCompletionOutlines,
+        isErrorCompletionOutlines,
+    };
+};
+
+/**
+ * Fetches the current user's enrolled or assigned courses (paged), then
+ * hydrates each row with course metadata from the LMS. Search can either
+ * hit the API or filter client-side on the already-fetched page.
+ *
+ * Ported from the skillsai SPA (hooks/courses/use-user-courses.ts).
+ */
+const useUserCourses = ({ limit = 8, search = '', page = 1, courseType = 'enrolled', useAPISearch = false, }) => {
+    const { metadata } = useTenantMetadata({ org: getTenant() });
+    const [getUserEnrolledCourses, { isLoading: isLoadingEnrolledCourses, isError: errorEnrolledCourses },] = useLazyGetUserEnrolledCoursesQuery();
+    const [getUserAssignedCourses, { isLoading: isLoadingAssignedCourses, isError: errorAssignedCourses },] = useLazyGetUserAssignedCoursesQuery();
+    const { handleFetchCourseMetaData } = useCourseMetadata();
+    const [userCoursesWithMetaData, setUserCoursesWithMetaData] = useState([]);
+    const [filteredCoursesWithMetaData, setFilteredCoursesWithMetaData] = useState([]);
+    const [isLoadingCoursesMetaData, setIsLoadingCoursesMetaData] = useState(false);
+    const [pagination, setPagination] = useState(null);
+    const handleFetchAllCoursesMetaData = async (enrolledCourses) => {
+        try {
+            const coursesMetaData = await Promise.all(enrolledCourses.map((course) => handleFetchCourseMetaData(course.course_id)));
+            const coursesWithMetaData = enrolledCourses.map((course, index) => ({
+                ...course,
+                name: course.course_name,
+                edx_data: coursesMetaData[index],
+            }));
+            setUserCoursesWithMetaData(coursesWithMetaData);
+            setFilteredCoursesWithMetaData(coursesWithMetaData);
+        }
+        catch (_a) {
+            setUserCoursesWithMetaData([]);
+            setFilteredCoursesWithMetaData([]);
+        }
+        finally {
+            setIsLoadingCoursesMetaData(false);
+        }
+    };
+    const handleFetchCourses = async () => {
+        try {
+            setUserCoursesWithMetaData([]);
+            setFilteredCoursesWithMetaData([]);
+            setIsLoadingCoursesMetaData(true);
+            if (courseType === 'assigned') {
+                const userId = getUserId();
+                if (userId == null) {
+                    setIsLoadingCoursesMetaData(false);
+                    return;
+                }
+                const { data: assignedCourses } = await getUserAssignedCourses({
+                    user_id: userId,
+                    query: {
+                        page_size: limit,
+                        ...(search && { search }),
+                        ...(page && { page }),
+                    },
+                }, true);
+                if (Array.isArray(assignedCourses === null || assignedCourses === void 0 ? void 0 : assignedCourses.results)) {
+                    setPagination({
+                        count: (assignedCourses === null || assignedCourses === void 0 ? void 0 : assignedCourses.count) || 0,
+                        current_page: page,
+                        total_pages: Math.ceil(((assignedCourses === null || assignedCourses === void 0 ? void 0 : assignedCourses.count) || 0) / limit),
+                    });
+                    await handleFetchAllCoursesMetaData(assignedCourses.results);
+                }
+                else {
+                    setIsLoadingCoursesMetaData(false);
+                }
+            }
+            else {
+                const username = getUserName();
+                if (!username) {
+                    setIsLoadingCoursesMetaData(false);
+                    return;
+                }
+                const { data: enrolledCourses } = await getUserEnrolledCourses({
+                    username,
+                    query: {
+                        page_size: limit,
+                        ...(search && { search }),
+                        ...(page && { page }),
+                        platform_key: getTenant(),
+                        ...((metadata === null || metadata === void 0 ? void 0 : metadata.skills_include_community_courses) && { include_default_platform: 1 }),
+                    },
+                }, true);
+                if (Array.isArray(enrolledCourses === null || enrolledCourses === void 0 ? void 0 : enrolledCourses.results)) {
+                    setPagination({
+                        count: (enrolledCourses === null || enrolledCourses === void 0 ? void 0 : enrolledCourses.count) || 0,
+                        current_page: page,
+                        total_pages: Math.ceil(((enrolledCourses === null || enrolledCourses === void 0 ? void 0 : enrolledCourses.count) || 0) / limit),
+                    });
+                    await handleFetchAllCoursesMetaData(enrolledCourses.results);
+                }
+                else {
+                    setIsLoadingCoursesMetaData(false);
+                }
+            }
+        }
+        catch (_a) {
+            setUserCoursesWithMetaData([]);
+            setFilteredCoursesWithMetaData([]);
+            setIsLoadingCoursesMetaData(false);
+        }
+    };
+    const handleInPageSearch = () => {
+        if (search.length > 2) {
+            const filtered = userCoursesWithMetaData.filter((course) => course.name.toLowerCase().includes(search.toLowerCase()));
+            setFilteredCoursesWithMetaData(filtered);
+        }
+        else {
+            setFilteredCoursesWithMetaData(userCoursesWithMetaData);
+        }
+    };
+    useEffect(() => {
+        if (!useAPISearch) {
+            handleInPageSearch();
+        }
+        else {
+            handleFetchCourses();
+        }
+    }, [search, useAPISearch]);
+    useEffect(() => {
+        handleFetchCourses();
+    }, [
+        courseType,
+        page,
+        metadata === null || metadata === void 0 ? void 0 : metadata.skills_include_community_courses,
+    ]);
+    return {
+        userCourses: filteredCoursesWithMetaData,
+        isLoadingUserCourses: isLoadingEnrolledCourses || isLoadingAssignedCourses || isLoadingCoursesMetaData,
+        errorUserCourses: errorEnrolledCourses || errorAssignedCourses,
+        pagination,
+    };
+};
+
+/**
+ * Fetches the logged-in user's credential assertions and maintains a
+ * client-side filtered list based on a search string.
+ *
+ * Ported from the skillsai SPA (hooks/profile/use-profile-credentials.ts).
+ */
+const useProfileCredentials = ({ search = '', maxCredentials, }) => {
+    const [getUserCredentials, { isLoading, isError }] = useLazyGetUserCredentialsQuery();
+    const [filteredCredentials, setFilteredCredentials] = useState([]);
+    const [fetchedCredentials, setFetchedCredentials] = useState([]);
+    const [credentialsLoading, setCredentialsLoading] = useState(false);
+    const handleFetchCredentials = async () => {
+        var _a, _b, _c;
+        try {
+            setCredentialsLoading(true);
+            const response = await getUserCredentials({
+                platformKey: getTenant(),
+                username: (_a = getUserName()) !== null && _a !== void 0 ? _a : '',
+                ...(maxCredentials && { pageSize: maxCredentials }),
+            }, true);
+            const data = ((_c = (_b = response === null || response === void 0 ? void 0 : response.data) === null || _b === void 0 ? void 0 : _b.data) !== null && _c !== void 0 ? _c : []);
+            setFetchedCredentials(data);
+            setFilteredCredentials(data);
+        }
+        catch (_d) {
+            setFetchedCredentials([]);
+            setFilteredCredentials([]);
+        }
+        finally {
+            setCredentialsLoading(false);
+        }
+    };
+    useEffect(() => {
+        handleFetchCredentials();
+    }, []);
+    useEffect(() => {
+        if (search.length > 2) {
+            setFilteredCredentials(fetchedCredentials.filter((credential) => {
+                var _a;
+                return String(((_a = credential === null || credential === void 0 ? void 0 : credential.credentialDetails) === null || _a === void 0 ? void 0 : _a.name) || '')
+                    .toLowerCase()
+                    .includes(search.toLowerCase());
+            }));
+        }
+        else {
+            setFilteredCredentials(fetchedCredentials);
+        }
+    }, [search, fetchedCredentials]);
+    return {
+        filteredCredentials,
+        fetchedCredentials,
+        isLoading: isLoading || credentialsLoading,
+        isError,
+    };
+};
+
+var duration$1 = {exports: {}};
+
+(function (module, exports) {
+	!function(t,s){module.exports=s();}(commonjsGlobal,(function(){var t,s,n=1e3,i=6e4,e=36e5,r=864e5,o=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,u=31536e6,d=2628e6,a=/^(-|\+)?P(?:([-+]?[0-9,.]*)Y)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)W)?(?:([-+]?[0-9,.]*)D)?(?:T(?:([-+]?[0-9,.]*)H)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)S)?)?$/,h={years:u,months:d,days:r,hours:e,minutes:i,seconds:n,milliseconds:1,weeks:6048e5},c=function(t){return t instanceof g},f=function(t,s,n){return new g(t,n,s.$l)},m=function(t){return s.p(t)+"s"},l=function(t){return t<0},$=function(t){return l(t)?Math.ceil(t):Math.floor(t)},y=function(t){return Math.abs(t)},v=function(t,s){return t?l(t)?{negative:true,format:""+y(t)+s}:{negative:false,format:""+t+s}:{negative:false,format:""}},g=function(){function l(t,s,n){var i=this;if(this.$d={},this.$l=n,void 0===t&&(this.$ms=0,this.parseFromMilliseconds()),s)return f(t*h[m(s)],this);if("number"==typeof t)return this.$ms=t,this.parseFromMilliseconds(),this;if("object"==typeof t)return Object.keys(t).forEach((function(s){i.$d[m(s)]=t[s];})),this.calMilliseconds(),this;if("string"==typeof t){var e=t.match(a);if(e){var r=e.slice(2).map((function(t){return null!=t?Number(t):0}));return this.$d.years=r[0],this.$d.months=r[1],this.$d.weeks=r[2],this.$d.days=r[3],this.$d.hours=r[4],this.$d.minutes=r[5],this.$d.seconds=r[6],this.calMilliseconds(),this}}return this}var y=l.prototype;return y.calMilliseconds=function(){var t=this;this.$ms=Object.keys(this.$d).reduce((function(s,n){return s+(t.$d[n]||0)*h[n]}),0);},y.parseFromMilliseconds=function(){var t=this.$ms;this.$d.years=$(t/u),t%=u,this.$d.months=$(t/d),t%=d,this.$d.days=$(t/r),t%=r,this.$d.hours=$(t/e),t%=e,this.$d.minutes=$(t/i),t%=i,this.$d.seconds=$(t/n),t%=n,this.$d.milliseconds=t;},y.toISOString=function(){var t=v(this.$d.years,"Y"),s=v(this.$d.months,"M"),n=+this.$d.days||0;this.$d.weeks&&(n+=7*this.$d.weeks);var i=v(n,"D"),e=v(this.$d.hours,"H"),r=v(this.$d.minutes,"M"),o=this.$d.seconds||0;this.$d.milliseconds&&(o+=this.$d.milliseconds/1e3,o=Math.round(1e3*o)/1e3);var u=v(o,"S"),d=t.negative||s.negative||i.negative||e.negative||r.negative||u.negative,a=e.format||r.format||u.format?"T":"",h=(d?"-":"")+"P"+t.format+s.format+i.format+a+e.format+r.format+u.format;return "P"===h||"-P"===h?"P0D":h},y.toJSON=function(){return this.toISOString()},y.format=function(t){var n=t||"YYYY-MM-DDTHH:mm:ss",i={Y:this.$d.years,YY:s.s(this.$d.years,2,"0"),YYYY:s.s(this.$d.years,4,"0"),M:this.$d.months,MM:s.s(this.$d.months,2,"0"),D:this.$d.days,DD:s.s(this.$d.days,2,"0"),H:this.$d.hours,HH:s.s(this.$d.hours,2,"0"),m:this.$d.minutes,mm:s.s(this.$d.minutes,2,"0"),s:this.$d.seconds,ss:s.s(this.$d.seconds,2,"0"),SSS:s.s(this.$d.milliseconds,3,"0")};return n.replace(o,(function(t,s){return s||String(i[t])}))},y.as=function(t){return this.$ms/h[m(t)]},y.get=function(t){var s=this.$ms,n=m(t);return "milliseconds"===n?s%=1e3:s="weeks"===n?$(s/h[n]):this.$d[n],s||0},y.add=function(t,s,n){var i;return i=s?t*h[m(s)]:c(t)?t.$ms:f(t,this).$ms,f(this.$ms+i*(n?-1:1),this)},y.subtract=function(t,s){return this.add(t,s,true)},y.locale=function(t){var s=this.clone();return s.$l=t,s},y.clone=function(){return f(this.$ms,this)},y.humanize=function(s){return t().add(this.$ms,"ms").locale(this.$l).fromNow(!s)},y.valueOf=function(){return this.asMilliseconds()},y.milliseconds=function(){return this.get("milliseconds")},y.asMilliseconds=function(){return this.as("milliseconds")},y.seconds=function(){return this.get("seconds")},y.asSeconds=function(){return this.as("seconds")},y.minutes=function(){return this.get("minutes")},y.asMinutes=function(){return this.as("minutes")},y.hours=function(){return this.get("hours")},y.asHours=function(){return this.as("hours")},y.days=function(){return this.get("days")},y.asDays=function(){return this.as("days")},y.weeks=function(){return this.get("weeks")},y.asWeeks=function(){return this.as("weeks")},y.months=function(){return this.get("months")},y.asMonths=function(){return this.as("months")},y.years=function(){return this.get("years")},y.asYears=function(){return this.as("years")},l}(),p=function(t,s,n){return t.add(s.years()*n,"y").add(s.months()*n,"M").add(s.days()*n,"d").add(s.hours()*n,"h").add(s.minutes()*n,"m").add(s.seconds()*n,"s").add(s.milliseconds()*n,"ms")};return function(n,i,e){t=e,s=e().$utils(),e.duration=function(t,s){var n=e.locale();return f(t,{$l:n},s)},e.isDuration=c;var r=i.prototype.add,o=i.prototype.subtract;i.prototype.add=function(t,s){return c(t)?p(this,t,1):r.bind(this)(t,s)},i.prototype.subtract=function(t,s){return c(t)?p(this,t,-1):o.bind(this)(t,s)};}})); 
+} (duration$1));
+
+var durationExports = duration$1.exports;
+var duration = /*@__PURE__*/getDefaultExportFromCjs(durationExports);
+
+dayjs.extend(duration);
+/**
+ * Fetches the last 7 days of learning activity for the logged-in user
+ * and returns it as a list of { date, minutes } rows ready for a chart.
+ *
+ * Ported from the skillsai SPA (hooks/profile/use-profile-timespent.ts).
+ */
+const useProfileTimeSpent = () => {
+    const [timeSpent, setTimeSpent] = useState([]);
+    const [timeSpentLoading, setTimeSpentLoading] = useState(false);
+    const [getOverTimeActivity] = useLazyGetOverTimeActivityQuery();
+    const handleTimeSpentStats = async () => {
+        var _a, _b;
+        setTimeSpentLoading(true);
+        try {
+            const response = await getOverTimeActivity([
+                {
+                    org: getTenant(),
+                    userId: (_a = getUserName()) !== null && _a !== void 0 ? _a : '',
+                    startDate: dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
+                    endDate: dayjs().format('YYYY-MM-DD'),
+                    format: 'json',
+                },
+            ], true);
+            const data = (_b = response === null || response === void 0 ? void 0 : response.data) === null || _b === void 0 ? void 0 : _b.data;
+            if (!data || Object.keys(data).length === 0) {
+                throw new Error('no data');
+            }
+            setTimeSpent(Object.entries(data).map(([date, seconds]) => ({
+                date: dayjs(date).format('ddd DD/MM/YY'),
+                minutes: dayjs.duration(seconds, 'seconds').asMinutes(),
+            })));
+        }
+        catch (_c) {
+            setTimeSpent([]);
+        }
+        finally {
+            setTimeSpentLoading(false);
+        }
+    };
+    useEffect(() => {
+        handleTimeSpentStats();
+    }, []);
+    return { timeSpent, timeSpentLoading };
+};
+
+/**
+ * Thin wrapper around the catalog-search RTK endpoint that exposes a
+ * promise-returning helper for ad-hoc searches inside effects/callbacks.
+ *
+ * Ported from the skillsai SPA (hooks/search/use-catalog-search.ts).
+ */
+const useCatalogSearch = () => {
+    const [getCatalogSearch, { isLoading, isError }] = useLazyGetCatalogSearchQuery();
+    const handleSearch = async (params) => {
+        try {
+            const response = await getCatalogSearch([{ ...params }], true);
+            return response;
+        }
+        catch (error) {
+            console.error(JSON.stringify(error));
+            return null;
+        }
+    };
+    return { handleSearch, isLoading, isError };
+};
+
+/**
+ * Aggregates the logged-in user's earned, self-reported, and desired
+ * skills, plus mutations to create/update/delete self-reported and
+ * desired skills. Also exposes a `handleFetchAllSkills` helper that
+ * queries the catalog search endpoint for a skills list.
+ *
+ * Ported from the skillsai SPA (hooks/profile/use-profile-skills.ts).
+ */
+const useProfileSkills = (showToast = true) => {
+    const { data: earnedSkills, isLoading: earnedSkillsLoading, isError: earnedSkillsError, isSuccess: earnedSkillsSuccess, } = useGetUserEarnedSkillsQuery([
+        { org: getTenant(), userId: getUserName() },
+    ]);
+    const { data: selfReportedSkills, isLoading: selfReportedSkillsLoading, isError: selfReportedSkillsError, isSuccess: selfReportedSkillsSuccess, } = useGetUserReportedSkillsQuery([
+        { userId: getUserId(), username: getUserName() },
+    ]);
+    const { data: desiredSkills, isLoading: desiredSkillsLoading, isError: desiredSkillsError, isSuccess: desiredSkillsSuccess, } = useGetUserDesiredSkillsQuery([
+        { userId: getUserId(), username: getUserName() },
+    ]);
+    const { handleSearch, isLoading: isFetchingSkills, isError: isFetchingSkillsError, } = useCatalogSearch();
+    const [updatingSkill, setUpdatingSkill] = useState(false);
+    const [deletingSkill, setDeletingSkill] = useState(false);
+    const [fetchedSkills, setFetchedSkills] = useState([]);
+    const handleFetchAllSkills = async (searchQuery) => {
+        var _a, _b;
+        try {
+            const result = await handleSearch({
+                content: ['skills'],
+                tenant: getTenant(),
+                ...(searchQuery && { query: searchQuery }),
+            });
+            if (!result) {
+                throw new Error('Failed to fetch skills');
+            }
+            const items = (_b = (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.results) !== null && _b !== void 0 ? _b : [];
+            setFetchedSkills(items);
+        }
+        catch (_c) {
+            toast.error('Failed to fetch skills');
+            setFetchedSkills([]);
+        }
+    };
+    const [createOrUpdateUserReportedSkill, { isError: isCreatingOrUpdateUserReportedSkillError }] = useCreateOrUpdateUserReportedSkillMutation();
+    const [createOrUpdateUserDesiredSkill, { isError: isCreatingOrUpdateUserDesiredSkillError }] = useCreateOrUpdateUserDesiredSkillMutation();
+    const handleSkillsDeletion = async (skill, allSkills, callback) => {
+        var _a, _b, _c, _d, _e, _f;
+        setDeletingSkill(true);
+        if (skill.type === 'self-reported') {
+            const reportedSkillIndex = (_a = allSkills.selfReported) === null || _a === void 0 ? void 0 : _a.skills.findIndex((s) => s.name === skill.name);
+            const updatedReportedLevel = (_b = allSkills.selfReported) === null || _b === void 0 ? void 0 : _b.data.level.filter((_, index) => index !== reportedSkillIndex);
+            await createOrUpdateUserReportedSkill([
+                {
+                    requestBody: {
+                        skills: ((_c = allSkills.selfReported) === null || _c === void 0 ? void 0 : _c.skills.filter((s) => s.name !== skill.name)) || [],
+                        data: { level: updatedReportedLevel },
+                        user_id: getUserId(),
+                        username: getUserName(),
+                    },
+                },
+            ]);
+            if (isCreatingOrUpdateUserReportedSkillError) {
+                toast.error('Failed to delete skill');
+                return;
+            }
+            toast.success('Skill deleted successfully');
+            setTimeout(() => {
+                setDeletingSkill(false);
+                callback === null || callback === void 0 ? void 0 : callback();
+            }, 1000);
+        }
+        else if (skill.type === 'desired') {
+            const desiredSkillIndex = (_d = allSkills.desired) === null || _d === void 0 ? void 0 : _d.skills.findIndex((s) => s.name === skill.name);
+            const updatedDesiredLevel = (_e = allSkills.desired) === null || _e === void 0 ? void 0 : _e.data.level.filter((_, index) => index !== desiredSkillIndex);
+            await createOrUpdateUserDesiredSkill([
+                {
+                    requestBody: {
+                        skills: ((_f = allSkills.desired) === null || _f === void 0 ? void 0 : _f.skills.filter((s) => s.name !== skill.name)) || [],
+                        data: { level: updatedDesiredLevel },
+                        user_id: getUserId(),
+                        username: getUserName(),
+                    },
+                },
+            ]);
+            if (isCreatingOrUpdateUserDesiredSkillError) {
+                toast.error('Failed to delete skill');
+                return;
+            }
+            toast.success('Skill deleted successfully');
+            setTimeout(() => {
+                setDeletingSkill(false);
+                callback === null || callback === void 0 ? void 0 : callback();
+            }, 1000);
+        }
+    };
+    const handleSkillsUpdate = async (skill, allSkills, callback) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        setUpdatingSkill(true);
+        if (skill.type === 'self-reported') {
+            const reportedSkillIndex = (_a = allSkills.selfReported) === null || _a === void 0 ? void 0 : _a.skills.findIndex((s) => s.name === skill.name);
+            const updatedReportedLevel = [...((_c = (_b = allSkills.selfReported) === null || _b === void 0 ? void 0 : _b.data.level) !== null && _c !== void 0 ? _c : [])];
+            if (reportedSkillIndex !== undefined &&
+                reportedSkillIndex > -1 &&
+                skill.level !== undefined) {
+                updatedReportedLevel[reportedSkillIndex] = skill.level;
+            }
+            await createOrUpdateUserReportedSkill([
+                {
+                    requestBody: {
+                        skills: ((_d = allSkills.selfReported) === null || _d === void 0 ? void 0 : _d.skills) || [],
+                        data: { level: updatedReportedLevel },
+                        user_id: getUserId(),
+                        username: getUserName(),
+                    },
+                },
+            ]);
+            if (isCreatingOrUpdateUserReportedSkillError) {
+                toast.error('Failed to update skill');
+                return;
+            }
+            toast.success('Skill updated successfully');
+            setTimeout(() => {
+                setUpdatingSkill(false);
+                callback === null || callback === void 0 ? void 0 : callback();
+            }, 1000);
+        }
+        else if (skill.type === 'desired') {
+            const desiredSkillIndex = (_e = allSkills.desired) === null || _e === void 0 ? void 0 : _e.skills.findIndex((s) => s.name === skill.name);
+            const updatedDesiredLevel = [...((_g = (_f = allSkills.desired) === null || _f === void 0 ? void 0 : _f.data.level) !== null && _g !== void 0 ? _g : [])];
+            if (desiredSkillIndex !== undefined && desiredSkillIndex > -1 && skill.level !== undefined) {
+                updatedDesiredLevel[desiredSkillIndex] = skill.level;
+            }
+            await createOrUpdateUserDesiredSkill([
+                {
+                    requestBody: {
+                        skills: ((_h = allSkills.desired) === null || _h === void 0 ? void 0 : _h.skills) || [],
+                        data: { level: updatedDesiredLevel },
+                        user_id: getUserId(),
+                        username: getUserName(),
+                    },
+                },
+            ]);
+            if (isCreatingOrUpdateUserDesiredSkillError) {
+                toast.error('Failed to update skill');
+                return;
+            }
+            toast.success('Skill updated successfully');
+            setTimeout(() => {
+                setUpdatingSkill(false);
+                callback === null || callback === void 0 ? void 0 : callback();
+            }, 1000);
+        }
+    };
+    const handleSkillsCreate = async (skills) => {
+        try {
+            await createOrUpdateUserReportedSkill([
+                { requestBody: skills, userId: getUserId(), username: getUserName() },
+            ]);
+            if (isCreatingOrUpdateUserReportedSkillError) {
+                throw new Error('Failed to create skills');
+            }
+            if (showToast) {
+                toast.success('Skills created successfully');
+            }
+            return true;
+        }
+        catch (_a) {
+            toast.error('Failed to create skills');
+            return false;
+        }
+    };
+    return {
+        earnedSkills,
+        earnedSkillsLoading,
+        earnedSkillsError,
+        earnedSkillsSuccess,
+        selfReportedSkills,
+        selfReportedSkillsLoading,
+        selfReportedSkillsError,
+        selfReportedSkillsSuccess,
+        desiredSkills,
+        desiredSkillsLoading,
+        desiredSkillsError,
+        desiredSkillsSuccess,
+        handleSkillsDeletion,
+        updatingSkill,
+        deletingSkill,
+        setUpdatingSkill,
+        handleSkillsUpdate,
+        handleSkillsCreate,
+        handleFetchAllSkills,
+        fetchedSkills,
+        isFetchingSkills,
+        isFetchingSkillsError,
+    };
+};
+
+/**
+ * Fetches the logged-in user's catalog / assigned / enrolled pathways and
+ * hydrates each with its completion stats. Supports client-side search
+ * filtering on pathway name.
+ *
+ * Ported from the skillsai SPA (hooks/profile/use-profile-pathways.ts).
+ */
+const useProfilePathways = ({ searchQuery, contentType = 'catalog', lmsUrl, }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [getPathwayList, { isError: isCatalogPathwaysError }] = useLazyGetPathwayListQuery();
+    const [getUserAssignedPathways, { isError: isAssignedPathwaysError }] = useLazyGetUserAssignedPathwaysQuery();
+    const [getUserEnrolledPathways, { isError: isEnrolledPathwaysError }] = useLazyGetUserEnrolledPathwaysQuery();
+    const [getPathwayCompletion] = useLazyGetPathwayCompletionQuery();
+    const [pathways, setPathways] = useState([]);
+    const [filteredPathways, setFilteredPathways] = useState([]);
+    const [pathwayCompletions, setPathwayCompletions] = useState([]);
+    const [pathwayCompletionsLoading, setPathwayCompletionsLoading] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const handleFetchSinglePathwayEnrollmentStatus = async (pathway) => {
+        try {
+            const response = await getUserEnrolledPathways([
+                { username: getUserName(), pathwayUuid: pathway.pathway_uuid || '' },
+            ], true);
+            const data = response.data;
+            return (Array.isArray(data) &&
+                data.findIndex((pre) => pre.active && pre.pathway_uuid === pathway.pathway_uuid) !== -1);
+        }
+        catch (_a) {
+            return false;
+        }
+    };
+    const handleFetchPathwayCompletions = async (list) => {
+        setPathwayCompletionsLoading(true);
+        try {
+            const completions = await Promise.all(list.map(async (pathway) => {
+                const response = await getPathwayCompletion([
+                    { pathwayUuid: pathway.pathway_uuid || '', username: getUserName() },
+                ]);
+                return (response.data || {});
+            }));
+            setPathwayCompletions(completions);
+        }
+        catch (error) {
+            console.error(JSON.stringify(error));
+            setPathwayCompletions([]);
+        }
+        finally {
+            setPathwayCompletionsLoading(false);
+        }
+    };
+    const handleFetchCatalogPathways = async () => {
+        var _a;
+        setIsLoading(true);
+        const response = await getPathwayList([{ username: getUserName(), platformKey: getTenant() }], true);
+        const raw = (_a = response.data) !== null && _a !== void 0 ? _a : [];
+        const fetchedPathways = raw.map((result) => {
+            const metadata = result.metadata;
+            return {
+                ...result,
+                metadata: {
+                    ...metadata,
+                    course_image_asset_path: (metadata === null || metadata === void 0 ? void 0 : metadata.course_image_asset_path)
+                        ? (lmsUrl !== null && lmsUrl !== void 0 ? lmsUrl : '') + metadata.course_image_asset_path
+                        : getRandomCourseImage(),
+                },
+            };
+        });
+        setPathways(fetchedPathways);
+        setFilteredPathways(fetchedPathways);
+        handleFetchPathwayCompletions(fetchedPathways);
+        setIsError(isCatalogPathwaysError);
+        setIsLoading(false);
+    };
+    const handleFetchAssignedPathways = async () => {
+        var _a, _b;
+        setIsLoading(true);
+        const userId = getUserId();
+        const response = await getUserAssignedPathways({ user_id: userId }, true);
+        const results = ((_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.results) !== null && _b !== void 0 ? _b : []) || [];
+        setPathways(results);
+        setFilteredPathways(results);
+        handleFetchPathwayCompletions(results);
+        setIsError(isAssignedPathwaysError);
+        setIsLoading(false);
+    };
+    const handleFetchEnrolledPathways = async () => {
+        setIsLoading(true);
+        const response = await getUserEnrolledPathways([{ username: getUserName() }], true);
+        const data = response.data || [];
+        setPathways(data);
+        setFilteredPathways(data);
+        handleFetchPathwayCompletions(data);
+        setIsError(isEnrolledPathwaysError);
+        setIsLoading(false);
+    };
+    useEffect(() => {
+        setPathways([]);
+        setFilteredPathways([]);
+        switch (contentType) {
+            case 'assigned':
+                handleFetchAssignedPathways();
+                break;
+            case 'enrolled':
+                handleFetchEnrolledPathways();
+                break;
+            default:
+                handleFetchCatalogPathways();
+                break;
+        }
+    }, [contentType]);
+    useEffect(() => {
+        if (String(searchQuery).length > 2) {
+            setFilteredPathways(pathways.filter((pathway) => { var _a; return (_a = pathway.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchQuery.toLowerCase()); }));
+        }
+        else {
+            setFilteredPathways(pathways);
+        }
+    }, [searchQuery]);
+    return {
+        pathways,
+        filteredPathways,
+        isLoading,
+        isError,
+        setPathways,
+        setFilteredPathways,
+        pathwayCompletions,
+        pathwayCompletionsLoading,
+        handleFetchSinglePathwayEnrollmentStatus,
+    };
+};
+
+/**
+ * Fetches the logged-in user's enrolled / assigned / catalog programs
+ * and hydrates each with its completion stats. Supports client-side
+ * search filtering on program name.
+ *
+ * Ported from the skillsai SPA (hooks/profile/use-profile-programs.ts).
+ */
+const useProfilePrograms = ({ searchQuery, activeTab = 'enrolled', }) => {
+    const [programs, setPrograms] = useState([]);
+    const [filteredPrograms, setFilteredPrograms] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const [programCompletions, setProgramCompletions] = useState([]);
+    const [programCompletionsLoading, setProgramCompletionsLoading] = useState(false);
+    const [getProgramList, { isError: isCatalogProgramsError }] = useLazyGetProgramListQuery();
+    const [getProgramCompletion] = useLazyGetProgramCompletionQuery();
+    const [getUserEnrolledPrograms, { isError: isEnrolledProgramsError }] = useLazyGetUserEnrolledProgramsQuery();
+    const [getAssignedPrograms, { isError: isAssignedProgramsError }] = useLazyGetAssignedProgramsQuery();
+    const withImage = (program) => {
+        var _a;
+        return ({
+            ...program,
+            metadata: {
+                ...((_a = program.metadata) !== null && _a !== void 0 ? _a : {}),
+                image: getRandomCourseImage(),
+            },
+        });
+    };
+    const handleFetchProgramCompletions = async (list) => {
+        setProgramCompletionsLoading(true);
+        try {
+            const completions = await Promise.all(list.map(async (program) => {
+                const response = await getProgramCompletion([
+                    { programKey: program.program_key || '', username: getUserName() },
+                ], true);
+                return (response.data || {});
+            }));
+            setProgramCompletions(completions);
+        }
+        catch (error) {
+            console.error(JSON.stringify(error));
+            setProgramCompletions([]);
+        }
+        finally {
+            setProgramCompletionsLoading(false);
+        }
+    };
+    const handleProgramEnrollmentFetch = async () => {
+        var _a;
+        setIsLoading(true);
+        const response = await getUserEnrolledPrograms([{ userId: getUserId(), platformKey: getTenant() }], true);
+        const raw = (_a = response.data) !== null && _a !== void 0 ? _a : [];
+        const fetched = raw.map(withImage);
+        setPrograms(fetched);
+        setFilteredPrograms(fetched);
+        handleFetchProgramCompletions(fetched);
+        setIsError(isEnrolledProgramsError);
+        setIsLoading(false);
+    };
+    const handleAssignedProgramsFetch = async () => {
+        var _a, _b;
+        setIsLoading(true);
+        const response = await getAssignedPrograms({ user_id: getUserId() }, true);
+        const raw = ((_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.results) !== null && _b !== void 0 ? _b : []) || [];
+        const fetched = raw.map(withImage);
+        setPrograms(fetched);
+        setFilteredPrograms(fetched);
+        handleFetchProgramCompletions(fetched);
+        setIsError(isAssignedProgramsError);
+        setIsLoading(false);
+    };
+    const handleFetchCatalogPrograms = async () => {
+        var _a;
+        setIsLoading(true);
+        const response = await getProgramList([{ org: getOrg(), username: getUserName() }], true);
+        const raw = (_a = response.data) !== null && _a !== void 0 ? _a : [];
+        const fetched = raw.map(withImage);
+        setPrograms(fetched);
+        setFilteredPrograms(fetched);
+        handleFetchProgramCompletions(fetched);
+        setIsError(isCatalogProgramsError);
+        setIsLoading(false);
+    };
+    useEffect(() => {
+        if (String(searchQuery).length > 2) {
+            setFilteredPrograms(programs.filter((program) => { var _a; return (_a = program.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchQuery.toLowerCase()); }));
+        }
+        else {
+            setFilteredPrograms(programs);
+        }
+    }, [searchQuery]);
+    useEffect(() => {
+        switch (activeTab) {
+            case 'assigned':
+                handleAssignedProgramsFetch();
+                break;
+            case 'enrolled':
+                handleProgramEnrollmentFetch();
+                break;
+            case 'catalog':
+                handleFetchCatalogPrograms();
+                break;
+        }
+    }, [activeTab]);
+    return {
+        programs,
+        filteredPrograms,
+        isLoading,
+        isError,
+        setFilteredPrograms,
+        setPrograms,
+        programCompletions,
+        programCompletionsLoading,
+    };
+};
+
+const isEmpty = (value) => {
+    if (value == null)
+        return true;
+    if (Array.isArray(value) || typeof value === 'string')
+        return value.length === 0;
+    if (typeof value === 'object')
+        return Object.keys(value).length === 0;
+    return false;
+};
+/**
+ * Aggregates a fixed list of profile activity counters (points, skills,
+ * credentials, courses, programs, pathways, resources, assessments,
+ * videos) by fanning out to nine RTK lazy queries and updating each row
+ * independently as its request resolves. Errors on any single fetch
+ * collapse that stat to 0 without blocking the others.
+ *
+ * Ported from the skillsai SPA (hooks/profile/use-profile-activity-stats.ts).
+ */
+const useProfileActivityStats = () => {
+    const [getUserSkillsPoints, { isError: isErrorGetUserSkillsPoints }] = useLazyGetUserSkillsPointsQuery();
+    const [getUserReportedSkills, { isError: isErrorGetUserReportedSkills }] = useLazyGetUserReportedSkillsQuery();
+    const [getUserDesiredSkills, { isError: isErrorGetUserDesiredSkills }] = useLazyGetUserDesiredSkillsQuery();
+    const [getUserCredentials, { isError: isErrorGetUserCredentials }] = useLazyGetUserCredentialsQuery();
+    const [getUserEnrolledCourses, { isError: isErrorGetUserEnrolledCourses }] = useLazyGetUserEnrolledCoursesQuery();
+    const [getUserEnrolledPrograms, { isError: isEnrolledProgramsError }] = useLazyGetUserEnrolledProgramsQuery();
+    const [getUserCatalogPathways, { isError: isCatalogPathwaysError }] = useLazyGetUserCatalogPathwaysQuery();
+    const [getPerLearnerInfo, { isError: isErrorgetPerLearnerInfo }] = useLazyGetPerLearnerInfoQuery();
+    const [stats, setStats] = useState([
+        { value: 0, label: 'Points', loading: true },
+        { value: 3, label: 'Skills', loading: true },
+        { value: 0, label: 'Credentials', loading: true },
+        { value: 4, label: 'Courses', loading: true },
+        { value: 0, label: 'Programs', loading: true },
+        { value: 0, label: 'Pathways', loading: true },
+        { value: 0, label: 'Resources', loading: true },
+        { value: 0, label: 'Assessments', loading: true },
+        { value: 0, label: 'Videos', loading: true },
+    ]);
+    const updateSingleStat = (stat) => {
+        setStats((old) => old.map((s) => (s.label === stat.label ? stat : s)));
+    };
+    const handleSkillsPointActivityStats = async () => {
+        var _a;
+        const label = 'Points';
+        try {
+            const response = await getUserSkillsPoints([{ userId: getUserId(), username: getUserName() }], true);
+            const skillPoints = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.skill_points;
+            if (isErrorGetUserSkillsPoints || isEmpty(skillPoints))
+                throw new Error();
+            const total = Object.values(skillPoints || {}).reduce((sum, skill) => { var _a; return sum + ((_a = skill.total_points) !== null && _a !== void 0 ? _a : 0); }, 0);
+            updateSingleStat({ value: total, label, loading: false });
+        }
+        catch (_b) {
+            updateSingleStat({ value: 0, label, loading: false });
+        }
+    };
+    const handleActivitySkillsStats = async () => {
+        var _a, _b, _c, _d, _e, _f;
+        const label = 'Skills';
+        try {
+            const reportedSkills = await getUserReportedSkills([{ userId: getUserId(), username: getUserName() }], true);
+            if (isErrorGetUserDesiredSkills && isErrorGetUserReportedSkills)
+                throw new Error();
+            let skillsCount = 0;
+            if (!isErrorGetUserReportedSkills) {
+                skillsCount = ((_c = (_b = (_a = reportedSkills === null || reportedSkills === void 0 ? void 0 : reportedSkills.data) === null || _a === void 0 ? void 0 : _a.skills) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0);
+            }
+            const desiredSkills = await getUserDesiredSkills([{ userId: getUserId(), username: getUserName() }], true);
+            if (!isErrorGetUserDesiredSkills) {
+                skillsCount += ((_f = (_e = (_d = desiredSkills === null || desiredSkills === void 0 ? void 0 : desiredSkills.data) === null || _d === void 0 ? void 0 : _d.skills) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0);
+            }
+            updateSingleStat({ value: skillsCount, label, loading: false });
+        }
+        catch (_g) {
+            updateSingleStat({ value: 0, label, loading: false });
+        }
+    };
+    const handleCredentialsActivityStats = async () => {
+        var _a, _b, _c;
+        const label = 'Credentials';
+        try {
+            const response = await getUserCredentials({
+                platformKey: getTenant(),
+                username: (_a = getUserName()) !== null && _a !== void 0 ? _a : '',
+            }, true);
+            if (isErrorGetUserCredentials || isEmpty(response === null || response === void 0 ? void 0 : response.data))
+                throw new Error();
+            const data = (_b = response === null || response === void 0 ? void 0 : response.data) === null || _b === void 0 ? void 0 : _b.data;
+            updateSingleStat({ value: (_c = data === null || data === void 0 ? void 0 : data.length) !== null && _c !== void 0 ? _c : 0, label, loading: false });
+        }
+        catch (_d) {
+            updateSingleStat({ value: 0, label, loading: false });
+        }
+    };
+    const handleCoursesActivityStats = async () => {
+        var _a, _b;
+        const label = 'Courses';
+        try {
+            const username = getUserName();
+            if (!username)
+                throw new Error();
+            const response = await getUserEnrolledCourses({ username }, true);
+            if (isErrorGetUserEnrolledCourses || isEmpty(response.data))
+                throw new Error();
+            updateSingleStat({ value: (_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.count) !== null && _b !== void 0 ? _b : 0, label, loading: false });
+        }
+        catch (_c) {
+            updateSingleStat({ value: 0, label, loading: false });
+        }
+    };
+    const handleProgramsActivityStats = async () => {
+        var _a;
+        const label = 'Programs';
+        try {
+            const response = await getUserEnrolledPrograms({ username: getUserName(), platform_key: getTenant() }, true);
+            if (isEnrolledProgramsError || isEmpty(response.data))
+                throw new Error();
+            const data = response === null || response === void 0 ? void 0 : response.data;
+            updateSingleStat({ value: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, label, loading: false });
+        }
+        catch (_b) {
+            updateSingleStat({ value: 0, label, loading: false });
+        }
+    };
+    const handlePathwaysActivityStats = async () => {
+        var _a;
+        const pathwaysLabel = 'Pathways';
+        const resourcesLabel = 'Resources';
+        try {
+            const response = await getUserCatalogPathways({ username: (_a = getUserName()) !== null && _a !== void 0 ? _a : '', platform_key: getTenant() }, true);
+            if (isCatalogPathwaysError || isEmpty(response.data))
+                throw new Error();
+            const data = response.data;
+            const seen = new Set();
+            const unique = data.filter((item) => {
+                const dup = seen.has(item.id);
+                seen.add(item.id);
+                return !dup;
+            });
+            const totalResources = unique.reduce((sum, pathway) => { var _a, _b; return sum + ((_b = (_a = pathway.path) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0); }, 0);
+            updateSingleStat({ value: unique.length, label: pathwaysLabel, loading: false });
+            updateSingleStat({ value: totalResources, label: resourcesLabel, loading: false });
+        }
+        catch (_b) {
+            updateSingleStat({ value: 0, label: pathwaysLabel, loading: false });
+            updateSingleStat({ value: 0, label: resourcesLabel, loading: false });
+        }
+    };
+    const handlePerLearnerInfoStats = async () => {
+        var _a, _b, _c;
+        const assessmentsLabel = 'Assessments';
+        const videosLabel = 'Videos';
+        try {
+            const response = await getPerLearnerInfo([
+                {
+                    org: getTenant(),
+                    userId: getUserName(),
+                    format: 'json',
+                    includeMainPlatform: true,
+                },
+            ], true);
+            if (isErrorgetPerLearnerInfo || isEmpty(response.data))
+                throw new Error();
+            const inner = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.data;
+            updateSingleStat({
+                value: (_b = inner === null || inner === void 0 ? void 0 : inner.total_assessments) !== null && _b !== void 0 ? _b : 0,
+                label: assessmentsLabel,
+                loading: false,
+            });
+            updateSingleStat({ value: (_c = inner === null || inner === void 0 ? void 0 : inner.total_videos) !== null && _c !== void 0 ? _c : 0, label: videosLabel, loading: false });
+        }
+        catch (_d) {
+            updateSingleStat({ value: 0, label: assessmentsLabel, loading: false });
+            updateSingleStat({ value: 0, label: videosLabel, loading: false });
+        }
+    };
+    useEffect(() => {
+        handleSkillsPointActivityStats();
+        handleActivitySkillsStats();
+        handleCredentialsActivityStats();
+        handleCoursesActivityStats();
+        handleProgramsActivityStats();
+        handlePathwaysActivityStats();
+        handlePerLearnerInfoStats();
+    }, []);
+    return { stats };
+};
+
+const EdxIframeContext = createContext({
+    iframeUrl: '',
+    setIframeUrl: () => { },
+    courseOutline: {},
+    setActiveTab: () => { },
+    activeTab: '',
+    courseID: '',
+    currentlyInExamSubsection: false,
+    setCurrentlyInExamSubsection: () => { },
+    examInfo: null,
+    setExamInfo: () => { },
+    refresher: null,
+    setRefresher: () => { },
+});
+
+const CourseOutlineContext = createContext({
+    courseOutline: {},
+    courseOutlineLoading: false,
+    expandedModule: '',
+    expandedLessons: [],
+    selectLesson: () => { },
+    toggleModule: () => { },
+    toggleLesson: () => { },
+    currentChapter: '',
+    currentLesson: '',
+    course: null,
+    courseOutlineDrawerOpen: false,
+    setCourseOutlineDrawerOpen: () => { },
+    currentUnitID: null,
+    refetchCourseOutline: () => { },
+});
+
+/**
+ * Pure utility helpers for the edX iframe course navigation.
+ *
+ * Extracted from skillsai's `hooks/courses/use-edx-iframe.ts` so they can be
+ * unit tested without a React renderer and reused from both the hook and
+ * (future) course-content components. Any function that used to read
+ * `config.urls.lms() / mfe() / legacyLmsUrl()` now takes those URLs as
+ * parameters — there is no package-level config coupling here.
+ *
+ * The async `getIframeURL` wrapper (which calls `useLazyGetEdxSSOTokenQuery`)
+ * remains inside the hook.
+ */
+/**
+ * Walk the outline tree and return the id of the `sequential` parent block
+ * whose children include the given vertical id, or null if not found.
+ */
+function findSequentialParent(data, verticalId) {
+    if (!data)
+        return null;
+    if (data.type === 'sequential' && data.children) {
+        for (const child of data.children) {
+            if (child.id === verticalId)
+                return data.id;
+            const foundId = findSequentialParent(child, verticalId);
+            if (foundId)
+                return foundId;
+        }
+    }
+    else if (data.children) {
+        for (const child of data.children) {
+            const foundId = findSequentialParent(child, verticalId);
+            if (foundId)
+                return foundId;
+        }
+    }
+    return null;
+}
+/**
+ * Recursively collect every `vertical`-type block in the tree into a flat
+ * `{id, display_name}[]` list, preserving document order.
+ */
+function flattenVerticalBlocks(data) {
+    if (!data || typeof data !== 'object')
+        return [];
+    if (Array.isArray(data)) {
+        const result = [];
+        for (const item of data) {
+            result.push(...flattenVerticalBlocks(item));
+        }
+        return result;
+    }
+    if (data.type === 'vertical') {
+        const block = {
+            id: data.id,
+            display_name: data.display_name,
+        };
+        return [block, ...flattenVerticalBlocks(data.children)];
+    }
+    return flattenVerticalBlocks(data.children);
+}
+/**
+ * Walks `data.children[0].children[0].children[attempt]` up to `maxAttempts`
+ * and returns the first non-empty unit. Falls back to the course's first
+ * sub-sub block if the course has started. Returns null otherwise.
+ */
+function getFirstAvailableUnit(data, maxAttempts = 2) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!data)
+        return null;
+    try {
+        for (let attempt = 0; attempt < maxAttempts; attempt++) {
+            const element = (_e = (_d = (_c = (_b = (_a = data.children) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e[attempt];
+            if (element)
+                return element;
+        }
+    }
+    catch (_j) {
+        // fallthrough to the tolerant branch below
+    }
+    try {
+        if (data &&
+            Object.prototype.hasOwnProperty.call(data, 'children') &&
+            data.children &&
+            data.children[0] &&
+            Object.prototype.hasOwnProperty.call(data.children[0], 'children') &&
+            (!data.start || new Date(data.start) < new Date())) {
+            return (_h = (_g = (_f = data.children[0]) === null || _f === void 0 ? void 0 : _f.children) === null || _g === void 0 ? void 0 : _g[0]) !== null && _h !== void 0 ? _h : null;
+        }
+    }
+    catch (_k) {
+        return null;
+    }
+    return null;
+}
+/**
+ * Find the deepest `resume_block: true` vertical node in the tree (last in
+ * document order) or null if the course has never been started.
+ */
+function findLastResumeBlock(courseData) {
+    if (!courseData)
+        return null;
+    let lastResumeBlock = null;
+    const traverse = (node) => {
+        if (node.resume_block && node.type === 'vertical') {
+            lastResumeBlock = node;
+        }
+        if (node.children && node.children.length > 0) {
+            for (const child of node.children)
+                traverse(child);
+        }
+    };
+    traverse(courseData);
+    return lastResumeBlock;
+}
+/**
+ * Find a specific block by id inside the top-level `children` array and
+ * return it together with the chain of child-indices that locate it.
+ */
+function getParentBlockById(blocksArray, targetBlockId) {
+    let foundIndices = [];
+    const findParentBlock = (currentBlock, target, currentIndices) => {
+        if (currentBlock.id === target) {
+            foundIndices = currentIndices.slice();
+            return currentBlock;
+        }
+        if (currentBlock.children) {
+            for (let i = 0; i < currentBlock.children.length; i++) {
+                const result = findParentBlock(currentBlock.children[i], target, [...currentIndices, i]);
+                if (result)
+                    return result;
+            }
+        }
+        return null;
+    };
+    for (let i = 0; i < blocksArray.length; i++) {
+        const parentBlock = findParentBlock(blocksArray[i], targetBlockId, [i]);
+        if (parentBlock)
+            return { parentBlock, foundIndices };
+    }
+    return { parentBlock: null, foundIndices };
+}
+/**
+ * Given a unit id and the course outline, return the id of the previous
+ * vertical unit, or null if there is no previous unit.
+ */
+function getPreviousUnitIframe(suppliedId, courseData) {
+    const idList = flattenVerticalBlocks(courseData);
+    const index = idList.findIndex((item) => item.id === suppliedId);
+    if (index === -1 || index === 0)
+        return null;
+    return idList[index - 1].id;
+}
+/**
+ * Given a unit id and the course outline, return the id of the next vertical
+ * unit, or null if there is no next unit.
+ */
+function getNextUnitIframe(suppliedId, courseData) {
+    const idList = flattenVerticalBlocks(courseData);
+    const index = idList.findIndex((item) => item.id === suppliedId);
+    if (index === -1 || index === idList.length - 1)
+        return null;
+    return idList[index + 1].id;
+}
+/**
+ * Given a sublesson (3rd-level) id, return the parent module + lesson objects
+ * from a modules array. Returns `{module:{}, lesson:{}}` if not found — this
+ * preserves the skillsai fallback shape so callers don't need to null-check.
+ */
+function getParentsInfosFromSublessonId(modules, sublessonId) {
+    try {
+        for (const mod of modules) {
+            if (!mod.children)
+                continue;
+            for (const lesson of mod.children) {
+                if (!lesson.children)
+                    continue;
+                for (const sublesson of lesson.children) {
+                    if (sublesson.id === sublessonId) {
+                        return { module: mod, lesson };
+                    }
+                }
+            }
+        }
+        throw new Error('Sublesson not found');
+    }
+    catch (_a) {
+        return { module: {}, lesson: {} };
+    }
+}
+/**
+ * Append a Bookmarks tab to the given tabs list in place.
+ * The caller supplies the LMS base URL — no package config dependency.
+ */
+function addBookmarksTab(tabs, courseId, lmsUrl) {
+    tabs.push({
+        tab_id: 'bookmarks',
+        title: 'Bookmarks',
+        url: `${lmsUrl}/courses/${courseId}/bookmarks`,
+    });
+}
+/**
+ * Resolve which unit of the course outline should be loaded into the iframe.
+ * 1. If the current URL has `?unit_id=…`, try to find that block.
+ * 2. Otherwise, return the last resume block if the learner has progress.
+ * 3. Otherwise, fall back to the first available unit.
+ *
+ * Priority order:
+ * 1. Explicit `unitId` parameter (from React state — always up-to-date).
+ * 2. `?unit_id=…` from the current URL (`window.location.href`).
+ * 3. The last `resume_block` vertical in the outline.
+ * 4. The first available unit.
+ */
+function getUnitToIframe(courseOutlineData, unitId) {
+    var _a, _b;
+    // 1. Explicit unitId from caller (e.g. React searchParams / context)
+    if (unitId) {
+        return (_a = findVerticalById(courseOutlineData, unitId)) !== null && _a !== void 0 ? _a : getFirstAvailableUnit(courseOutlineData);
+    }
+    // 2. Fall back to reading from the URL (legacy path / initial load)
+    if (typeof window !== 'undefined') {
+        try {
+            const courseUrl = new URL(window.location.href);
+            const urlUnitId = courseUrl.searchParams.get('unit_id');
+            if (urlUnitId) {
+                return ((_b = findVerticalById(courseOutlineData, urlUnitId)) !== null && _b !== void 0 ? _b : getFirstAvailableUnit(courseOutlineData));
+            }
+        }
+        catch (_c) {
+            // invalid URL — fall through
+        }
+    }
+    // 3. Resume block
+    const lastResumeBlock = findLastResumeBlock(courseOutlineData);
+    if (lastResumeBlock)
+        return lastResumeBlock;
+    // 4. First available
+    return getFirstAvailableUnit(courseOutlineData);
+}
+/** Find a block by id within the top-level `children` of a course outline. */
+function findVerticalById(data, verticalId) {
+    if (!data || !data.children)
+        return null;
+    const search = (nodes) => {
+        for (const item of nodes) {
+            if (item.id === verticalId)
+                return item;
+            if (item.children) {
+                const result = search(item.children);
+                if (result)
+                    return result;
+            }
+        }
+        return null;
+    };
+    return search(data.children);
+}
+
+/**
+ * Hook exposing helpers for the edX iframe course navigation. Ported from
+ * skillsai's `hooks/courses/use-edx-iframe.ts`, with two changes:
+ *
+ * 1. All pure utilities are imported from `../lib/edx-iframe-utils`.
+ * 2. LMS / MFE / legacy LMS base URLs are passed in as hook args instead of
+ *    being read from the skillsai `config` module.
+ */
+const useEdxIframe = ({ lmsUrl, mfeUrl, legacyLmsUrl }) => {
+    const [getEdxSsoAuthToken] = useLazyGetEdxSSOTokenQuery();
+    /**
+     * Resolve the iframe URL for a given course + courseInfo value. The
+     * `courseInfo` can be either the course outline object (pick a unit from
+     * it) or an xblock id string (use as-is).
+     *
+     * `unitId` (optional) is the unit id from React state (e.g.
+     * `searchParams.get('unit_id')` or `currentUnitID`). When provided it
+     * takes precedence over reading `window.location.href`, which avoids a
+     * race condition with Next.js async `router.push`.
+     */
+    async function getIframeURL(courseId, courseInfo, callback, unitId) {
+        var _a;
+        if (typeof courseInfo === 'object' ||
+            (typeof courseInfo === 'string' && courseInfo.includes(':'))) {
+            // Course outline case — resolve an actual vertical to load.
+            const outline = typeof courseInfo === 'object' ? courseInfo : null;
+            if (outline) {
+                flattenVerticalBlocks(outline);
+                const unit = getUnitToIframe(outline, unitId);
+                await addIframeUrl(courseId, (_a = unit === null || unit === void 0 ? void 0 : unit.id) !== null && _a !== void 0 ? _a : '', callback);
+                return;
+            }
+            await addIframeUrl(courseId, courseInfo, callback);
+        }
+        else {
+            await addIframeUrl(courseId, courseInfo, callback);
+        }
+    }
+    async function addIframeUrl(courseId, rawXblockId, callback) {
+        var _a, _b;
+        let url = '';
+        const xblockID = rawXblockId;
+        let baseLMSIframeURL = `${lmsUrl}/xblock/${xblockID}?show_title=0&show_bookmark_button=1&recheck_access=1&view=student_view`;
+        try {
+            switch (xblockID) {
+                case 'forum':
+                    url = `${mfeUrl}/discussions/${courseId}/posts`;
+                    break;
+                case 'notes':
+                    url = `${mfeUrl}/courses/${courseId}/edxnotes`;
+                    break;
+                case 'progress':
+                    url = `${mfeUrl}/learning/course/${courseId}/progress/`;
+                    break;
+                case 'dates':
+                    url = `${mfeUrl}/learning/course/${courseId}/dates/`;
+                    break;
+                case 'bookmarks':
+                    url = `${legacyLmsUrl}/courses/${courseId}/bookmarks/`;
+                    break;
+                case 'instructor':
+                    baseLMSIframeURL = `${lmsUrl}/courses/${courseId}/instructor`;
+                // fallthrough — same SSO-wrap path as default
+                // eslint-disable-next-line no-fallthrough
+                default: {
+                    const { data: authSsoToken } = await getEdxSsoAuthToken({
+                        username: (_a = getUserName()) !== null && _a !== void 0 ? _a : '',
+                        redirectUrl: baseLMSIframeURL,
+                    });
+                    url = `${legacyLmsUrl}/ibl/ai/sso/backend/edx/iframe?sso_auth_token=${(_b = authSsoToken === null || authSsoToken === void 0 ? void 0 : authSsoToken.sso_auth_token) !== null && _b !== void 0 ? _b : ''}`;
+                    break;
+                }
+            }
+            callback(url);
+        }
+        catch (_c) {
+            callback(url);
+        }
+    }
+    return {
+        getIframeURL,
+        getUnitToIframe,
+        findSequentialParent,
+        flattenVerticalBlocks,
+        getFirstAvailableUnit,
+        findLastResumeBlock,
+        getParentBlockById,
+        getPreviousUnitIframe,
+        getNextUnitIframe,
+        addBookmarksTab,
+        getParentsInfosFromSublessonId,
+    };
+};
+
+const ChatContext = createContext({
+    isOpen: false,
+    setIsOpen: () => { },
+    courseMentor: null,
+    setCourseMentor: () => { },
+    mentorSidebarHidden: false,
+    setMentorSidebarHidden: () => { },
+});
+const useChatState = () => useContext(ChatContext);
+function ChatProvider({ children, initialOpen = false, initialCourseMentor = null, initialMentorSidebarHidden = false, }) {
+    const [isOpen, setIsOpen] = useState(initialOpen);
+    const [courseMentor, setCourseMentor] = useState(initialCourseMentor);
+    const [mentorSidebarHidden, setMentorSidebarHidden] = useState(initialMentorSidebarHidden);
+    const value = {
+        isOpen,
+        setIsOpen,
+        courseMentor,
+        setCourseMentor,
+        mentorSidebarHidden,
+        setMentorSidebarHidden,
+    };
+    return createElement$1(ChatContext.Provider, { value }, children);
+}
+
+/**
+ * Ported from skillsai (`hooks/courses/use-course-detail.ts`).
+ *
+ * Differences from the skillsai version:
+ * - No `next/navigation`. Caller passes an `onNavigate(href, { external })`
+ *   callback which is invoked for lesson open / access-course / Stripe
+ *   checkout redirect. `external: true` means "open in a new tab / navigate
+ *   the full window" (as opposed to SPA push).
+ * - No internal `sonner` toasts. Caller may provide `onError` / `onSuccess`
+ *   callbacks (both optional).
+ * - No `config.*` reads. Caller passes `dmUrl` (used to build the Stripe
+ *   `success_url`) and `courseEligibilityEnabled` (the feature flag that
+ *   used to live in `config.settings.courseEligibilityEnabled()`).
+ */
+const ACCESS_COURSE_LABEL = 'Access Course';
+const ENROLL_NOW_LABEL = 'Enroll Now';
+const REQUEST_ACCESS_LABEL = 'Request Access';
+const ENROLL_NOW_COURSE_STARTING_SOON_LABEL = 'Enroll Now - Course Starting Soon';
+const REQUEST_ACCESS_COURSE_STARTING_SOON_LABEL = 'Request Access - Course Starting Soon';
+const INVITATION_ONLY_LABEL = 'Invitation Only';
+const BUY_NOW_LABEL = 'Buy Now';
+const useCourseDetail = ({ courseId, dmUrl, courseEligibilityEnabled = false, onNavigate, onError, onSuccess, }) => {
+    const [createCourseEnrollment, { isError: isCourseEnrollmentError }] = useCreateCourseEnrollmentMutation();
+    const [createStripeCheckoutSession] = useCreateStripeCheckoutSessionMutation();
+    const [getCourseProgress, { isLoading: isCourseProgressLoading, isError: isCourseProgressError },] = useLazyGetCourseProgressQuery();
+    const [getCourseCompletion, { isLoading: isCourseCompletionLoading, isError: isCourseCompletionError },] = useLazyGetCourseCompletionQuery();
+    const { handleFetchCourseMetaData, handleFetchCourseCompletionOutlines, handleFetchCourseEligibility, } = useCourseMetadata();
+    const [courseInfoLoadingState, setCourseInfoLoadingState] = useState('not-started');
+    const [course, setCourse] = useState(null);
+    const [courseOutline, setCourseOutline] = useState({});
+    const [courseOutlineLoading, setCourseOutlineLoading] = useState(false);
+    const [courseEligibilityLoading, setCourseEligibilityLoading] = useState(false);
+    const [courseButtonActionLoading, setCourseButtonActionLoading] = useState(false);
+    const [courseProgress, setCourseProgress] = useState(null);
+    const [courseCompletion, setCourseCompletion] = useState(null);
+    const [courseGradingPolicyActive, setCourseGradingPolicyActive] = useState(false);
+    const navigateToCourseContent = (href) => {
+        if (onNavigate) {
+            onNavigate(href, { external: inIframe() });
+        }
+    };
+    const handleRequestAccess = () => {
+        // Intentional no-op — skillsai's original also had no behavior here.
+        // Callers that need request-access wiring should listen to btn_label.
+    };
+    const handleSelfEnrollToCourse = () => {
+        // Same as skillsai — placeholder. Self-enroll is distinguished from
+        // normal enroll only by the label; callers can key off it if needed.
+    };
+    const handleAccessCourse = () => {
+        navigateToCourseContent(`/course-content/${courseId}/course`);
+    };
+    const handleCreateCheckoutSession = async () => {
+        setCourseButtonActionLoading(true);
+        const currentTenant = getTenant();
+        try {
+            const checkoutSession = await createStripeCheckoutSession({
+                sku: courseId,
+                org: (course === null || course === void 0 ? void 0 : course.org) || '',
+                tenant: (course === null || course === void 0 ? void 0 : course.platform_key) || currentTenant,
+                username: getUserName() || '',
+                mode: 'payment',
+                cancel_url: typeof window !== 'undefined' ? window.location.href : '',
+                success_url: `${dmUrl}/api/service/orgs/${course === null || course === void 0 ? void 0 : course.platform_key}/stripe/course-payment-callback/`,
+            }).unwrap();
+            if (!(checkoutSession === null || checkoutSession === void 0 ? void 0 : checkoutSession.redirect_to)) {
+                throw new Error('Failed to create checkout session');
+            }
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess('Redirecting to checkout page...');
+            onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(checkoutSession.redirect_to, { external: true });
+        }
+        catch (_a) {
+            setCourseButtonActionLoading(false);
+            onError === null || onError === void 0 ? void 0 : onError('Failed to create checkout session');
+        }
+    };
+    const handleEnrollToCourse = async () => {
+        setCourseButtonActionLoading(true);
+        try {
+            const response = await createCourseEnrollment({
+                course_details: { course_id: courseId },
+            });
+            if (isCourseEnrollmentError || !response.data || !response.data.created) {
+                throw new Error('Failed to enroll in course');
+            }
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess('Enrolled in course successfully');
+            setCourseButtonActionLoading(false);
+            handleAccessCourse();
+        }
+        catch (_a) {
+            onError === null || onError === void 0 ? void 0 : onError('Failed to enroll in course.');
+            setCourseButtonActionLoading(false);
+        }
+    };
+    const [courseEligibility, setCourseEligibility] = useState({
+        btn_label: ENROLL_NOW_LABEL,
+        btn_action: handleEnrollToCourse,
+    });
+    const handleFetchCourseEligibilityInfo = async () => {
+        setCourseEligibilityLoading(true);
+        const eligibility = await handleFetchCourseEligibility(courseId);
+        if (eligibility) {
+            const enrollmentStarted = dayjs(course === null || course === void 0 ? void 0 : course.enrollment_start).diff(dayjs(), 'seconds') > 0;
+            const isEnrolled = eligibility.is_enrolled;
+            const canEnroll = eligibility.can_enroll;
+            const isEligible = eligibility.is_eligible;
+            const isNotMainTenant = getTenant() !== 'main';
+            const invitationOnly = eligibility.invitation_only;
+            const coursePrice = course === null || course === void 0 ? void 0 : course.course_price;
+            if (courseEligibilityEnabled) {
+                if (isNotMainTenant && isEnrolled && enrollmentStarted && isEligible) {
+                    setCourseEligibility({
+                        btn_label: ACCESS_COURSE_LABEL,
+                        btn_action: handleAccessCourse,
+                    });
+                }
+                else if (isNotMainTenant && enrollmentStarted && !isEligible) {
+                    setCourseEligibility({
+                        btn_label: REQUEST_ACCESS_LABEL,
+                        btn_action: handleRequestAccess,
+                    });
+                }
+                else if (!isNotMainTenant &&
+                    !enrollmentStarted &&
+                    isEligible &&
+                    canEnroll &&
+                    !isEnrolled) {
+                    setCourseEligibility({
+                        btn_label: ENROLL_NOW_COURSE_STARTING_SOON_LABEL,
+                        btn_action: handleSelfEnrollToCourse,
+                    });
+                }
+                else if (!isNotMainTenant &&
+                    !enrollmentStarted &&
+                    !isEligible &&
+                    (course === null || course === void 0 ? void 0 : course.platform_key) === 'main') {
+                    setCourseEligibility({
+                        btn_label: REQUEST_ACCESS_COURSE_STARTING_SOON_LABEL,
+                        btn_action: handleRequestAccess,
+                    });
+                }
+                else if (isNotMainTenant && enrollmentStarted && isEligible && !isEnrolled && canEnroll) {
+                    setCourseEligibility({
+                        btn_label: ENROLL_NOW_LABEL,
+                        btn_action: handleSelfEnrollToCourse,
+                    });
+                }
+            }
+            else {
+                if (isEnrolled) {
+                    setCourseEligibility({
+                        btn_label: ACCESS_COURSE_LABEL,
+                        btn_action: handleAccessCourse,
+                    });
+                }
+                else if (invitationOnly) {
+                    setCourseEligibility({
+                        disabled: true,
+                        btn_label: INVITATION_ONLY_LABEL,
+                        btn_action: () => { },
+                    });
+                }
+                else if (coursePrice && coursePrice !== 'Free' && parseInt(coursePrice) !== 0) {
+                    setCourseEligibility({
+                        btn_label: BUY_NOW_LABEL,
+                        btn_action: handleCreateCheckoutSession,
+                    });
+                }
+                else {
+                    setCourseEligibility({
+                        btn_label: ENROLL_NOW_LABEL,
+                        btn_action: handleEnrollToCourse,
+                    });
+                }
+            }
+            setCourseEligibilityLoading(false);
+        }
+        else {
+            setCourseEligibility({
+                btn_label: ENROLL_NOW_LABEL,
+                btn_action: handleEnrollToCourse,
+            });
+            setCourseEligibilityLoading(false);
+        }
+    };
+    const handleFetchCourseInfo = async () => {
+        setCourseInfoLoadingState('loading');
+        try {
+            const courseMetaData = await handleFetchCourseMetaData(courseId);
+            if (courseMetaData && Object.keys(courseMetaData).length > 0) {
+                setCourse(courseMetaData);
+                setCourseInfoLoadingState('successful');
+            }
+            else {
+                setCourse(null);
+                setCourseInfoLoadingState('failure');
+            }
+        }
+        catch (_a) {
+            setCourse(null);
+            setCourseInfoLoadingState('failure');
+        }
+    };
+    const handleFetchCourseSyllabus = async (setLoadingState = true) => {
+        if (setLoadingState) {
+            setCourseOutlineLoading(true);
+        }
+        const outlines = (await handleFetchCourseCompletionOutlines(courseId));
+        if (outlines && Object.keys(outlines).length > 0) {
+            setCourseOutline(outlines);
+        }
+        else {
+            setCourseOutline({});
+        }
+        if (setLoadingState) {
+            setCourseOutlineLoading(false);
+        }
+    };
+    const handleOpenLesson = (lessonId, checkEligibility = false) => {
+        if (lessonId &&
+            (checkEligibility ? courseEligibility.btn_label === ACCESS_COURSE_LABEL : true)) {
+            navigateToCourseContent(`/course-content/${courseId}/course?unit_id=${encodeURIComponent(lessonId)}`);
+        }
+    };
+    const handleFetchCourseProgress = async () => {
+        var _a;
+        try {
+            const progress = await getCourseProgress({ courseKey: courseId });
+            if (isCourseProgressError) {
+                throw new Error('Error fetching course progress');
+            }
+            setCourseProgress(progress.data || null);
+            if (progress.data) {
+                setCourseGradingPolicyActive(Array.isArray((_a = progress.data.grading_policy) === null || _a === void 0 ? void 0 : _a.assignment_policies) &&
+                    progress.data.grading_policy.assignment_policies.length > 0);
+            }
+        }
+        catch (error) {
+            setCourseProgress(null);
+            console.error('Error fetching course progress:', error);
+        }
+    };
+    const handleFetchCourseCompletion = async (userID) => {
+        try {
+            const completion = await getCourseCompletion({
+                courseKey: encodeURIComponent(courseId),
+                userID,
+            });
+            if (isCourseCompletionError) {
+                throw new Error('Error fetching course completion');
+            }
+            setCourseCompletion(completion.data || null);
+        }
+        catch (error) {
+            setCourseCompletion(null);
+            console.error('Error fetching course completion:', error);
+        }
+    };
+    return {
+        // handlers
+        handleRequestAccess,
+        handleSelfEnrollToCourse,
+        handleAccessCourse,
+        handleCreateCheckoutSession,
+        handleEnrollToCourse,
+        handleFetchCourseEligibilityInfo,
+        handleFetchCourseInfo,
+        handleFetchCourseSyllabus,
+        handleOpenLesson,
+        handleFetchCourseProgress,
+        handleFetchCourseCompletion,
+        // state
+        course,
+        courseInfoLoadingState,
+        courseOutline,
+        courseEligibility,
+        courseOutlineLoading,
+        courseEligibilityLoading,
+        courseButtonActionLoading,
+        isCourseProgressLoading,
+        isCourseCompletionLoading,
+        courseProgress,
+        courseCompletion,
+        courseGradingPolicyActive,
+        // labels (re-exported here for convenience; also exported as module
+        // constants at the top of this file)
+        ACCESS_COURSE_LABEL,
+        ENROLL_NOW_LABEL,
+        REQUEST_ACCESS_LABEL,
+        ENROLL_NOW_COURSE_STARTING_SOON_LABEL,
+        REQUEST_ACCESS_COURSE_STARTING_SOON_LABEL,
+        INVITATION_ONLY_LABEL,
+        BUY_NOW_LABEL,
+    };
+};
+
+/**
+ * Hierarchical course outline (chapters → lessons → sublessons) with
+ * completion progress indicators and collapsible tree UI.
+ *
+ * Ported from skillsai (`components/course-outline.tsx`). Reads all state
+ * from `CourseOutlineContext` — callers provide it by wrapping this
+ * component in a `<CourseOutlineContext.Provider value={...} />` (or by
+ * using the provided `CourseContentLayout`, which sets up the provider).
+ */
+const MAX_CHECKMARK_POINT = 7;
+const getCompletionRatio = (node) => {
+    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) => {
+    return Math.round(getCompletionRatio(node) * MAX_CHECKMARK_POINT);
+};
+const CompletionIcon = ({ node }) => {
+    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) {
+        return (jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "flex-shrink-0", children: [jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "#f59e0b", stroke: "none" }), jsx("path", { d: "M5 8.5L7 10.5L11 6", fill: "none", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+    }
+    if (level === 0) {
+        return (jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "flex-shrink-0", children: jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "#d1d5db", strokeWidth: strokeWidth }) }));
+    }
+    return (jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "flex-shrink-0", children: [jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "#e5e7eb", strokeWidth: strokeWidth }), jsx("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})` })] }));
+};
+const SkeletonRow = () => jsx("div", { className: "mb-2 h-6 w-full animate-pulse rounded bg-gray-200" });
+const CourseOutline = () => {
+    const { courseOutline, courseOutlineLoading, expandedModule, expandedLessons, selectLesson, toggleModule, toggleLesson, currentChapter, currentLesson, } = useContext(CourseOutlineContext);
+    return (jsx("div", { className: "h-full overflow-y-auto md:h-[calc(100%-35px)]", style: { scrollbarWidth: 'none' }, children: courseOutlineLoading ? (jsx("div", { className: "p-3", children: Array.from({ length: 8 }, (_v, i) => (jsx(SkeletonRow, {}, i))) })) : (Array.isArray(courseOutline === null || courseOutline === void 0 ? void 0 : courseOutline.children) &&
+            courseOutline.children.map((module) => (jsxs("div", { className: "border-b border-gray-200", children: [jsxs("button", { type: "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' : ''}`, children: [jsx("span", { className: "text-sm font-medium text-gray-700", children: module.display_name }), jsx(ChevronRight, { className: `h-4 w-4 text-gray-500 transition-transform ${expandedModule === module.id ? 'rotate-90 transform' : ''}` })] }), expandedModule === module.id && module.children && (jsx("div", { className: "pr-2 pb-2 pl-6", children: module.children.map((lesson) => (jsxs("div", { children: [jsxs("button", { type: "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'}`, children: [jsxs("div", { className: "flex items-center", children: [jsx("div", { className: "mr-2 flex-shrink-0", children: jsx(CompletionIcon, { node: lesson }) }), jsx("span", { children: lesson.display_name })] }), lesson.children && lesson.children.length > 0 && (jsx(ChevronRight, { className: `h-4 w-4 text-gray-500 transition-transform ${expandedLessons.includes(lesson.id) ? 'rotate-90 transform' : ''}` }))] }), lesson.children &&
+                                    lesson.children.length > 0 &&
+                                    expandedLessons.includes(lesson.id) && (jsx("div", { className: "pr-2 pb-2 pl-6", children: lesson.children.map((sublesson) => (jsxs("button", { type: "button", 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'}`, children: [jsx("div", { className: "mr-2 flex-shrink-0", children: jsx(CompletionIcon, { node: sublesson }) }), jsx("span", { children: sublesson.display_name })] }, sublesson.id))) }))] }, lesson.id))) }))] }, module.id)))) }));
+};
+
+function Sheet({ ...props }) {
+    return jsx(Root$b, { "data-slot": "sheet", ...props });
+}
+function SheetPortal({ ...props }) {
+    return jsx(Portal$6, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+    return (jsx(Overlay$1, { "data-slot": "sheet-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className), ...props }));
+}
+function SheetContent({ className, children, side = 'right', ...props }) {
+    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, {}), jsxs(Content$3, { "data-slot": "sheet-content", className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500', side === 'right' &&
+                    'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm', side === 'left' &&
+                    'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm', side === 'top' &&
+                    'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b', side === 'bottom' &&
+                    'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t', className), ...props, children: [children, jsxs(Close$1, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [jsx(X, { className: "size-4" }), jsx("span", { className: "sr-only", children: "Close" })] })] })] }));
+}
+function SheetHeader({ className, ...props }) {
+    return (jsx("div", { "data-slot": "sheet-header", className: cn('flex flex-col gap-1.5 p-4', className), ...props }));
+}
+function SheetTitle({ className, ...props }) {
+    return (jsx(Title$1, { "data-slot": "sheet-title", className: cn('text-foreground font-semibold', className), ...props }));
+}
+
+/**
+ * Mobile drawer wrapping `<CourseOutline />` in a `Sheet` for responsive
+ * course navigation. Ported from skillsai's `course-outline-drawer.tsx`.
+ * All state comes from `CourseOutlineContext`.
+ */
+const CourseOutlineDrawer = () => {
+    const { course, courseOutlineDrawerOpen, setCourseOutlineDrawerOpen } = useContext(CourseOutlineContext);
+    return (jsx(Sheet, { open: courseOutlineDrawerOpen, onOpenChange: setCourseOutlineDrawerOpen, children: jsxs(SheetContent, { side: "left", className: "flex w-72 flex-col p-0", children: [jsx(SheetHeader, { className: "border-b border-gray-200 p-4", children: jsx(SheetTitle, { className: "text-left font-semibold text-gray-800", children: course === null || course === void 0 ? void 0 : course.display_name }) }), jsx(CourseOutline, {})] }) }));
+};
+
+/**
+ * Timed exam overlay + countdown. Ported from skillsai
+ * (`components/edx-iframe/timed-exam.tsx`). Reads all state from
+ * `EdxIframeContext`; no internal toasts or routing.
+ *
+ * Errors from the RTK exam mutations are caught and logged via
+ * `console.error` — same behavior as the skillsai original. Callers that
+ * want user-facing error toasts can wrap the data-layer calls themselves
+ * higher up, or intercept via a custom RTK middleware.
+ */
+const TimedExam = () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const { examInfo, setExamInfo, setRefresher } = useContext(EdxIframeContext);
+    const [isReadyToStart, setIsReadyToStart] = useState(false);
+    const [timeRemaining, setTimeRemaining] = useState(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(() => {
+        var _a, _b, _c, _d;
+        if (((_b = (_a = examInfo === null || examInfo === void 0 ? void 0 : examInfo.exam) === null || _a === void 0 ? void 0 : _a.attempt) === null || _b === void 0 ? void 0 : _b.attempt_status) === 'started' &&
+            ((_d = (_c = examInfo === null || examInfo === void 0 ? void 0 : examInfo.exam) === null || _c === void 0 ? void 0 : _c.attempt) === null || _d === void 0 ? void 0 : _d.time_remaining_seconds)) {
+            setTimeRemaining(Math.floor(examInfo.exam.attempt.time_remaining_seconds));
+        }
+    }, [examInfo]);
+    const updateExamInfo = async () => {
+        if (!examInfo)
+            return;
+        const updated = await getExamInfo({
+            course_id: examInfo.exam.course_id,
+            content_id: examInfo.exam.content_id,
+            is_learning_mfe: true,
+        }, false);
+        setExamInfo((updated === null || updated === void 0 ? void 0 : updated.data) || null);
+    };
+    // Countdown timer
+    useEffect(() => {
+        var _a, _b;
+        if (timeRemaining > 0 && ((_b = (_a = examInfo === null || examInfo === void 0 ? void 0 : examInfo.exam) === null || _a === void 0 ? void 0 : _a.attempt) === null || _b === void 0 ? void 0 : _b.attempt_status) === 'started') {
+            const timer = setInterval(() => {
+                setTimeRemaining((prev) => {
+                    var _a;
+                    const newTime = prev > 0 ? prev - 1 : 0;
+                    if (newTime === 0 && ((_a = examInfo === null || examInfo === void 0 ? void 0 : examInfo.exam) === null || _a === void 0 ? void 0 : _a.id)) {
+                        updateExamAttempt({
+                            attemptID: examInfo.exam.attempt.attempt_id,
+                            action: 'submit',
+                        })
+                            .unwrap()
+                            .then(() => {
+                            updateExamInfo();
+                            setRefresher(new Date());
+                        })
+                            .catch((error) => {
+                            console.error('Failed to auto-submit exam:', error);
+                        });
+                    }
+                    return newTime;
+                });
+            }, 1000);
+            return () => clearInterval(timer);
+        }
+        return undefined;
+    }, [timeRemaining, (_b = (_a = examInfo === null || examInfo === void 0 ? void 0 : examInfo.exam) === null || _a === void 0 ? void 0 : _a.attempt) === null || _b === void 0 ? void 0 : _b.attempt_status, (_d = (_c = examInfo === null || examInfo === void 0 ? void 0 : examInfo.exam) === null || _c === void 0 ? void 0 : _c.attempt) === null || _d === void 0 ? void 0 : _d.attempt_id]);
+    if (!examInfo) {
+        return null;
+    }
+    const formatTimeRemaining = (seconds) => {
+        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')}`;
+        }
+        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' : ''}`;
+        }
+        return `${timeLimitMinutes} minute${timeLimitMinutes > 1 ? 's' : ''}`;
+    };
+    const handleStartExam = async () => {
+        var _a;
+        try {
+            setIsReadyToStart(true);
+            if ((_a = examInfo === null || examInfo === void 0 ? void 0 : examInfo.exam) === null || _a === void 0 ? void 0 : _a.id) {
+                const formData = new FormData();
+                formData.append('exam_id', examInfo.exam.id.toString());
+                formData.append('start_clock', 'true');
+                await startExam(formData).unwrap();
+                await updateExamInfo();
+            }
+        }
+        catch (error) {
+            console.error('Failed to start exam:', error);
+            setIsReadyToStart(false);
+        }
+    };
+    const handleEndExam = () => {
+        setShowEndExamModal(true);
+    };
+    const handleConfirmEndExam = async () => {
+        var _a;
+        try {
+            if ((_a = examInfo === null || examInfo === void 0 ? void 0 : examInfo.exam) === null || _a === void 0 ? void 0 : _a.id) {
+                await updateExamAttempt({
+                    attemptID: examInfo.exam.attempt.attempt_id,
+                    action: 'submit',
+                }).unwrap();
+                setShowEndExamModal(false);
+                await updateExamInfo();
+                setRefresher(new Date());
+            }
+        }
+        catch (error) {
+            console.error('Failed to submit exam:', error);
+        }
+    };
+    const handleCancelEndExam = () => {
+        setShowEndExamModal(false);
+    };
+    if (((_f = (_e = examInfo === null || examInfo === void 0 ? void 0 : examInfo.exam) === null || _e === void 0 ? void 0 : _e.attempt) === null || _f === void 0 ? void 0 : _f.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 (jsxs("div", { className: "mx-auto max-w-4xl px-6 pt-6", children: [jsxs("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'}`, children: [jsx("div", { className: "mb-4 text-sm text-gray-600", children: showFullInstructions ? (jsxs(Fragment$1, { children: ["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\".", ' ', jsx("button", { type: "button", className: "text-blue-600 underline hover:text-blue-800", onClick: () => setShowFullInstructions(false), children: "Show less" })] })) : (jsxs(Fragment$1, { children: ["You are taking \"", examInfo.exam.exam_name, "\" as a timed exam.", ' ', jsx("button", { type: "button", className: "text-blue-600 underline hover:text-blue-800", onClick: () => setShowFullInstructions(true), children: "Show more" })] })) }), jsxs("div", { className: "flex items-center gap-4", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Clock, { className: `h-5 w-5 ${isCriticalTime ? 'text-red-600' : isLowTime ? 'text-yellow-600' : 'text-blue-600'}` }), jsx("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)}`, children: formatTimeRemaining(timeRemaining) })] }), jsx("button", { type: "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", children: "End My Exam" }), jsx("div", { id: "end-exam-warning", className: "sr-only", children: "Warning: Ending the exam will submit all your answers and you cannot return to continue." })] })] }), showEndExamModal && (jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: jsxs("div", { className: "mx-4 w-full max-w-full rounded-lg bg-white p-6 shadow-xl md:max-w-[40%]", children: [jsx("h2", { className: "mb-4 text-lg font-semibold text-gray-900", children: "Are you sure that you want to submit your timed exam?" }), jsx("p", { className: "mb-3 text-gray-700", children: "Make sure that you have selected \"Submit\" for each problem before you submit your exam." }), jsx("p", { className: "mb-6 text-gray-700", children: "After you submit your exam, your exam will be graded." }), jsxs("div", { className: "flex gap-3", children: [jsx("button", { type: "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", children: isSubmittingExam ? 'Submitting...' : 'Yes, submit my timed exam.' }), jsx("button", { type: "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", children: "No, I want to continue working." })] })] }) }))] }));
+    }
+    if (((_h = (_g = examInfo === null || examInfo === void 0 ? void 0 : examInfo.exam) === null || _g === void 0 ? void 0 : _g.attempt) === null || _h === void 0 ? void 0 : _h.attempt_status) === 'submitted') {
+        return null;
+    }
+    const noActiveAttempt = !((_j = examInfo === null || examInfo === void 0 ? void 0 : examInfo.exam) === null || _j === void 0 ? void 0 : _j.attempt) || Object.keys(examInfo.exam.attempt).length === 0;
+    const noActiveAttemptTop = !(examInfo === null || examInfo === void 0 ? void 0 : examInfo.active_attempt) || Object.keys(examInfo.active_attempt).length === 0;
+    if (noActiveAttempt || noActiveAttemptTop) {
+        return (jsxs("div", { className: "sm:p-6", children: [jsx("div", { className: "mb-8 rounded-lg border border-blue-200 bg-blue-50 p-6", children: jsxs("div", { className: "flex items-start gap-3", children: [jsx(Clock, { className: "mt-1 h-6 w-6 flex-shrink-0 text-blue-600" }), jsxs("div", { className: "flex-1", children: [jsxs("h2", { className: "mb-3 text-xl font-semibold text-gray-900", children: [examInfo.exam.exam_name, " is a Timed Exam (", formatTimeLimit(), ")"] }), jsxs("p", { className: "mb-4 leading-relaxed text-gray-700", children: ["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."] }), jsxs("button", { type: "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", children: [jsx(Clock, { className: "hidden h-4 w-4 md:block" }), isStartingExam ? 'Starting exam...' : 'I am ready to start this timed exam.'] }), jsxs("div", { id: "exam-time-info", className: "sr-only", children: ["Starting this exam will begin a ", formatTimeLimit(), " timer that cannot be paused."] })] })] }) }), jsxs("div", { className: "mb-8", children: [jsx("h3", { className: "mb-4 text-lg font-medium text-gray-900", children: "Can I request additional time to complete my exam?" }), jsxs("div", { className: "flex items-start gap-3", children: [jsx(CircleAlert, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-gray-500" }), jsx("p", { className: "leading-relaxed text-gray-700", children: "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." })] })] })] }));
+    }
+    return null;
+};
+
+/**
+ * Prop-driven port of skillsai's `CourseAccessGuard`. Responsibilities
+ * unchanged: show a spinner while the course is loading, surface not-found
+ * / unauthorized states via callbacks, render children only on a clean
+ * authorized load. Routing is now the caller's responsibility.
+ *
+ * Callers should stabilize `onUnauthorized` / `onNotFound` with `useCallback`
+ * (or hoist them to module scope) to avoid spurious re-fires when the effect
+ * re-runs.
+ */
+const CourseAccessGuard = ({ course, courseInfoLoadingState, currentTenant, onUnauthorized, onNotFound, children, }) => {
+    const isLoaded = courseInfoLoadingState === 'successful' || courseInfoLoadingState === 'failure';
+    const isUnauthorizedTenant = isLoaded &&
+        !!(course === null || course === void 0 ? void 0 : course.platform_key) &&
+        course.platform_key !== currentTenant &&
+        course.platform_key !== 'main';
+    const isNotFound = courseInfoLoadingState === 'failure' && !course;
+    useEffect(() => {
+        if (isUnauthorizedTenant) {
+            onUnauthorized === null || onUnauthorized === void 0 ? void 0 : onUnauthorized();
+        }
+        else if (isNotFound) {
+            onNotFound === null || onNotFound === void 0 ? void 0 : onNotFound();
+        }
+    }, [isUnauthorizedTenant, isNotFound, onUnauthorized, onNotFound]);
+    if (!isLoaded || isUnauthorizedTenant || isNotFound) {
+        return (jsx("div", { className: "flex flex-1 items-center justify-center", children: jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-amber-500 border-t-transparent" }) }));
+    }
+    return jsx(Fragment$1, { children: children });
+};
+
+/**
+ * Loading skeleton shown while `CourseContentLayout` is hydrating.
+ * Ported from skillsai (`app/course-content/[course_id]/loading.tsx`).
+ */
+const CourseContentLoading = () => {
+    return (jsxs("div", { className: "flex min-h-screen flex-col", children: [jsx("div", { className: "h-16 flex-shrink-0 border-b border-gray-200 bg-white md:h-20" }), jsxs("div", { className: "flex flex-1 flex-col md:flex-row", children: [jsxs("div", { className: "w-full border-r border-gray-200 md:w-72", children: [jsx("div", { className: "border-b border-gray-200 p-4", children: jsx(Skeleton, { className: "h-6 w-48" }) }), jsx("div", { className: "space-y-4 p-4", children: Array.from({ length: 6 }, (_v, i) => (jsxs("div", { className: "space-y-2", children: [jsx(Skeleton, { className: "h-5 w-full" }), i === 0 && (jsxs("div", { className: "space-y-2 pl-4", children: [jsx(Skeleton, { className: "h-4 w-5/6" }), jsx(Skeleton, { className: "h-4 w-4/6" })] }))] }, i))) })] }), jsxs("div", { className: "flex flex-1 flex-col", children: [jsxs("div", { className: "border-b border-gray-200", children: [jsx("div", { className: "flex p-4", children: Array.from({ length: 5 }, (_v, i) => (jsx(Skeleton, { className: "mx-2 h-4 w-16" }, i))) }), jsxs("div", { className: "flex items-center justify-between bg-gray-50 p-4", children: [jsxs("div", { className: "flex items-center", children: [jsx(Skeleton, { className: "mr-2 h-3 w-24" }), jsx(Skeleton, { className: "mx-1 h-3 w-3" }), jsx(Skeleton, { className: "mr-2 h-3 w-32" }), jsx(Skeleton, { className: "mx-1 h-3 w-3" }), jsx(Skeleton, { className: "h-3 w-16" })] }), jsxs("div", { className: "flex items-center", children: [jsx(Skeleton, { className: "mr-4 h-3 w-16" }), jsx(Skeleton, { className: "h-3 w-16" })] })] })] }), jsx("div", { className: "h-full bg-amber-50 p-6", children: jsxs("div", { className: "mx-auto max-w-4xl", children: [jsx(Skeleton, { className: "mb-4 h-8 w-64" }), jsx(Skeleton, { className: "mb-2 h-4 w-full" }), jsx(Skeleton, { className: "mb-6 h-4 w-5/6" }), jsx("div", { className: "mb-6 aspect-video rounded-md bg-gray-200" }), jsxs("div", { className: "mb-6 rounded-md border border-gray-200 bg-white p-4", children: [jsx(Skeleton, { className: "mb-2 h-5 w-40" }), jsx(Skeleton, { className: "mb-2 h-4 w-full" }), jsx(Skeleton, { className: "mb-2 h-4 w-full" }), jsx(Skeleton, { className: "h-4 w-3/4" })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(Skeleton, { className: "h-10 w-32" }), jsx(Skeleton, { className: "h-10 w-32" })] })] }) })] })] })] }));
+};
+
 /**
  * LoginButton Component
  *
@@ -188480,5 +190980,5 @@ var event = /*#__PURE__*/Object.freeze({
     listen: listen
 });
 
-export { AccessTimeHeatmap, AlertsTab, AnalyticsCourseDetail, AnalyticsCourses, AnalyticsFinancialStats, AnalyticsLayout, AnalyticsMonetizationStats, AnalyticsOverview, AnalyticsProgramDetail, AnalyticsPrograms, AnalyticsReportDownload, AnalyticsReports, AnalyticsSettingsProvider, AnalyticsTopicsStats, AnalyticsTranscriptsStats, AnalyticsUsersStats, ChartCardWrapper, ChartFiltersProvider, CompanyDialog, ConnectorManagementDialog, CopyButtonIcon, CreateWorkflowModal, CustomDateRangePicker, DeleteWorkflowModal, EditAlertDialog, EducationDialog, EducationTab, EmptyStats, ExperienceDialog, ExperienceTab, GroupsFilterDropdown, InstitutionDialog, InviteUserDialog, InvitedUsersDialog, Loader, LocalLLMTab, LoginButton, Markdown, NotificationDisplay, NotificationDropdown, PaywallModal, Profile, ResumeTab, RichTextEditor, SearchableMultiSelect, SendNotificationDialog, SignupButton, Spinner, StatCard, TAURI_COMMANDS, TAURI_EVENTS, TenantSwitcher, TimeFilter, TimeTrackingProvider, ToolDialogs, TopBanner, Version, WorkflowSidebar, initialModelDownloadState, isLocalLLMEnabled, isTauriApp, components as markdownComponents, sanitizeCss, setLocalLLMEnabled, useAnalyticsSettings, useChartFilters, useCourses, useFinancial, useIframeMessageHandler, useLocalStorage, useModelDownload, useMonetization, useOverview, usePrograms, useReports, useTauri, useTimeTracking, useTopics, useTranscripts, useUsers };
+export { ACCESS_COURSE_LABEL, AccessTimeHeatmap, AddSkillDialog, AlertsTab, AnalyticsCourseDetail, AnalyticsCourses, AnalyticsFinancialStats, AnalyticsLayout, AnalyticsMonetizationStats, AnalyticsOverview, AnalyticsProgramDetail, AnalyticsPrograms, AnalyticsReportDownload, AnalyticsReports, AnalyticsSettingsProvider, AnalyticsTopicsStats, AnalyticsTranscriptsStats, AnalyticsUsersStats, BUY_NOW_LABEL, ChartCardWrapper, ChartFiltersProvider, ChatContext, ChatProvider, CompanyDialog, ConnectorManagementDialog, CopyButtonIcon, CourseAccessGuard, CourseCardSkeleton, CourseContentLoading, CourseOutline, CourseOutlineContext, CourseOutlineDrawer, CreateWorkflowModal, CredentialBox, CredentialMiniBoxSkeleton, CustomDateRangePicker, CustomTooltip, DefaultEmptyBox, DeleteWorkflowModal, ENROLL_NOW_COURSE_STARTING_SOON_LABEL, ENROLL_NOW_LABEL, EditAlertDialog, EducationBox, EducationDialog, EducationTab, EdxIframeContext, EmptyStats, ExperienceBox, ExperienceDialog, ExperienceTab, GroupsFilterDropdown, INVITATION_ONLY_LABEL, InstitutionDialog, InviteUserDialog, InvitedUsersDialog, Loader, LocalLLMTab, LoginButton, Markdown, NotificationDisplay, NotificationDropdown, PaywallModal, Profile, ProfileTimeChart, REQUEST_ACCESS_COURSE_STARTING_SOON_LABEL, REQUEST_ACCESS_LABEL, ResumeBox, ResumeTab, RichTextEditor, SearchableMultiSelect, SendNotificationDialog, SignupButton, SkeletonActivityStatBox, SkeletonAddSkillsLoading, SkeletonCreatePathwaySearchList, SkeletonEducationBox, SkeletonMultiplier, SkeletonPathwayBox, SkeletonProfileInfoCard, SkeletonSkillBox, SkillBox, SkillDetailModal, SkillLeaderboardChart, SkillsBox, Spinner, StatCard, TAURI_COMMANDS, TAURI_EVENTS, TenantSwitcher, TimeFilter, TimeTrackingProvider, TimedExam, ToolDialogs, TopBanner, UserAvatar, Version, WorkflowSidebar, addBookmarksTab, findLastResumeBlock, findSequentialParent, flattenVerticalBlocks, getFirstAvailableUnit, getNextUnitIframe, getOrg, getParentBlockById, getParentsInfosFromSublessonId, getPreviousUnitIframe, getRandomCourseImage, getTenant, getUnitToIframe, getUserId, getUserName, inBrowserPrint, inIframe, initialModelDownloadState, isLocalLLMEnabled, isTauriApp, components as markdownComponents, sanitizeCss, setLocalLLMEnabled, useAnalyticsSettings, useCatalogSearch, useChartFilters, useChatState, useCourseDetail, useCourseMetadata, useCourses, useEdxIframe, useFinancial, useIframeMessageHandler, useLocalStorage, useModelDownload, useMonetization, useOverview, useProfileActivityStats, useProfileCredentials, useProfilePathways, useProfilePrograms, useProfileSkills, useProfileTimeSpent, usePrograms, useReports, useTauri, useTimeTracking, useTopics, useTranscripts, useUserCourses, useUserMetadata, useUsers };
 //# sourceMappingURL=index.esm.js.map