@iblai/iblai-js 1.20.7 → 1.20.8

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { useRef, useEffect, useState, useCallback, useLayoutEffect, forwardRef, createElement as createElement$1, useMemo, createContext, useReducer, useImperativeHandle, useContext, useId as useId$2, useDebugValue, isValidElement, Children, PureComponent, cloneElement, Component, lazy, Suspense } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectSessionId, selectActiveChatMessages, useCachedSessionId, chatActions, LOCAL_STORAGE_KEYS, TimeTracker, getInitials, useTenantMetadata, WithPermissions, useStripeUpgrade, CHAT_AREA_SIZE, isAlphaNumeric32, checkRbacPermission, getTimeAgo, REQUIRED_ACTIONS_FOR_GROUPS, formatRelativeTime as formatRelativeTime$2, ANONYMOUS_USERNAME, combineCSVData, redirectToAuthSpaJoinTenant, redirectToAuthSpa, getAuthSpaJoinUrl, useOS, selectNumberOfActiveChatMessages, useUsername, selectStreaming, isLoggedIn, TOOLS, isSafariBrowser, useShowAttachment, useShowVoiceCall, useShowVoiceRecorder, useMentorSettings, selectShowingSharedChat, selectRbacPermissions, useShowFreeTrialDialog, useEmbedMode, chatInputSliceSelectors, useResponsive, useAccessingPublicRoute, useVisitingTenant, useModelFileUploadCapabilities, useChatFileUpload, useVoiceChat, selectAttachedFiles, MENTOR_CHAT_DOCUMENTS_EXTENSIONS, removeFile, chatInputSliceActions, WithFormPermissions, MENTOR_VISIBILITY } from '@iblai/web-utils';
-import { useGetTenantChatPrivacyConfigQuery, useGetChatPrivacyEffectiveQuery, useCreateSessionIdMutation, useUpdateSessionDisableChathistoryMutation, chatPrivacyApiSlice, 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, useGetMemsearchStatusQuery, useGetUserMemorySettingsQuery, useUpdateUserMemorySettingsMutation, useGetGlobalMemoriesQuery, useDeleteGlobalMemoryMutation, ChatPrivacyModeEnum, useGetUserChatPrivacySettingsQuery, useUpdateUserChatPrivacySettingsMutation, CHAT_PRIVACY_MODES, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useUpdateUserRoleMutation, useUpdateUserStatusMutation, useUpdatePlatformUserRoleWithPoliciesMutation, usePlatformUsersQuery, isPoliciesResponse, platformApiSlice, featureTags, useLazyGetRbacTeamsAccessListQuery, useCreateRbacTeamsAccessMutation, useGetRbacGroupsQuery, usePlatformUserGroupsQuery, useCreateRbacGroupMutation, useUpdateRbacGroupMutation, useDeleteRbacGroupMutation, useCreatePlatformUserGroupMutation, useUpdatePlatformUserGroupMutation, useDeletePlatformUserGroupMutation, useGetRbacGroupDetailsQuery, useGetPlatformUserGroupDetailsQuery, useGetRbacPermissionsMutation, useGetRbacRolesQuery, useCreateRbacRoleMutation, useUpdateRbacRoleMutation, useDeleteRbacRoleMutation, useGetRbacRoleDetailsQuery, useGetRbacActionsDefinitionQuery, useGetRbacPoliciesQuery, useCreateRbacPolicyMutation, useUpdateRbacPolicyMutation, useDeleteRbacPolicyMutation, useGetRbacPolicyDetailsQuery, useGetWatchedGroupsQuery, useCreateWatchedGroupMutation, useUpdateWatchedGroupMutation, useDeleteWatchedGroupMutation, useAddWatchedUserMutation, useRemoveWatchedUserMutation, useAddWatcherMutation, useUpdateWatcherMutation, useDeleteWatcherMutation, useGetWatchedUsersQuery, useGetWatchersQuery, WATCHER_NOTIFICATION_EVENTS, WATCHER_NOTIFICATION_EVENT_LABELS, useDeleteApiKeyMutation, useGetApiKeysQuery, useCreateApiKeyMutation, useCreateLLMCredentialMutation, useGetCredentialsSchemaQuery, useGetMaskedLLMCredentialsQuery, useGetLlmsQuery, useDeleteIntegrationCredentialMutation, useDeleteCredentialMutation, useCreateIntegrationCredentialMutation, useGetIntegrationCredentialsSchemaQuery, useGetMaskedIntegrationCredentialsQuery, useGetAccountBillingInfoQuery, useUpdateAutoRechargeInfoMutation, useTriggerAutoRechargeMutation, useCreateStripeCustomerPortalMutation, useSetPlatformConfigurationsMutation, useGetPlatformConfigurationsQuery, useUpdatePlatformMembershipMutation, useGetPlatformMembershipQuery, useGetCustomDomainsQuery, useCreateCustomDomainMutation, useDeleteCustomDomainMutation, useGetStudentMentorCreationStatusQuery, useSetStudentMentorCreationStatusMutation, coreApiSlice, recommendationPromptTypeEnum, useGetRecommendedPromptsListQuery, useCreateRecommendedPromptMutation, useUpdateRecommendedPromptMutation, useDeleteRecommendedPromptMutation, useLazyGetPublicPlatformImageAssetFileUrlQuery, useUpdateTenantMetadataMutation, useCreatePlatformImageAssetMutation, useGetProviderConfigQuery, useCreateProviderConfigMutation, useDeleteProviderConfigMutation, useGetExternalMappingQuery, useGetCredentialsListQuery, useCreateExternalMappingMutation, useDeleteExternalMappingMutation, useGetMemsearchConfigQuery, useUpdateMemsearchConfigMutation, useUpdateTenantChatPrivacyConfigMutation, useGetCustomMentorsQuery, useGetStripeConnectStatusQuery, useStartStripeConnectOnboardingMutation, useLazyGetStripeConnectDashboardQuery, useGetAiSearchMentorsQuery, useListPaywallsQuery, useListPricesQuery, useCreatePriceMutation, useUpdatePriceMutation, useDeletePriceMutation, useGetPaywallConfigQuery, useEnablePaywallMutation, useUpdatePaywallMutation, useGetNotificationsCountQuery, useLazyGetNotificationsQuery, useMarkAllAsReadMutation, useCreateNotificationPreviewMutation, useSendNotificationMutation, useGetMentorsQuery, 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, useListSubscribersQuery, useGetAuditLogsQuery, 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, useLazyGetPersonnalizedSearchQuery, useUpdateExamAttemptMutation, useStartExamMutation, useLazyGetExamInfoQuery, useGetClawMentorConfigQuery, useGetClawInstancesQuery, useGetAgentConfigQuery, useUpdateClawMentorConfigMutation, useCreateClawMentorConfigMutation, useDeleteClawMentorConfigMutation, usePushClawConfigMutation, useCreateClawInstanceMutation, useDeleteClawInstanceMutation, useUpdateAgentConfigMutation, useHealthCheckClawInstanceMutation, useTestConnectivityClawInstanceMutation, useUpdateClawInstanceMutation, useGetAgentSkillsQuery, useGetMentorSkillAssignmentsQuery, useCreateMentorSkillAssignmentMutation, useUpdateMentorSkillAssignmentMutation, useDeleteMentorSkillAssignmentMutation, useCreateAgentSkillMutation, useUpdateAgentSkillMutation, useDeleteAgentSkillMutation, useCreateCheckoutMutation, useGetUserProjectsQuery, useUpdateUserProjectMutation, useGetTrainingDocumentsQuery, useGetVectorDocumentsQuery, useGetMentorMemoriesListQuery, useGetMemoryCategoriesAdminQuery, useDeleteMentorMemoryMutation, useUpdateMentorMemoryMutation, useCreateMentorMemoryMutation, useLazyGetConnectedServiceAuthUrlQuery, useGetPublicMentorsQuery, useCreateUserProjectMutation, useDeleteUserProjectMutation, useGetUserProjectDetailsQuery, useEditTrainingDocumentMutation, useAddTrainingDocumentMutation, useLazyGetCredentialsQuery, useGetMentorSettingsQuery, useEditMentorMutation, useGetMentorCategoriesQuery, useCreateMentorMutation, useUpdateUserPlatformMetadataMutation, useGetPromptCategoriesQuery, useCreatePromptMutation, useDeletePromptMutation, useGetPromptsSearchQuery, useUpdatePromptMutation, useDeleteTrainingDocumentMutation, useGetTrainingDocumentRetrainScheduleQuery, useCreateTrainingDocumentRetrainScheduleMutation } from '@iblai/data-layer';
+import { useGetTenantChatPrivacyConfigQuery, useGetChatPrivacyEffectiveQuery, useCreateSessionIdMutation, useUpdateSessionDisableChathistoryMutation, chatPrivacyApiSlice, 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, useGetMemsearchStatusQuery, useGetUserMemorySettingsQuery, useUpdateUserMemorySettingsMutation, useGetGlobalMemoriesQuery, useDeleteGlobalMemoryMutation, ChatPrivacyModeEnum, useGetUserChatPrivacySettingsQuery, useUpdateUserChatPrivacySettingsMutation, CHAT_PRIVACY_MODES, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useUpdateUserRoleMutation, useUpdateUserStatusMutation, useUpdatePlatformUserRoleWithPoliciesMutation, usePlatformUsersQuery, isPoliciesResponse, platformApiSlice, featureTags, useLazyGetRbacTeamsAccessListQuery, useCreateRbacTeamsAccessMutation, useGetRbacGroupsQuery, usePlatformUserGroupsQuery, useCreateRbacGroupMutation, useUpdateRbacGroupMutation, useDeleteRbacGroupMutation, useCreatePlatformUserGroupMutation, useUpdatePlatformUserGroupMutation, useDeletePlatformUserGroupMutation, useGetRbacGroupDetailsQuery, useGetPlatformUserGroupDetailsQuery, useGetRbacPermissionsMutation, useGetRbacRolesQuery, useCreateRbacRoleMutation, useUpdateRbacRoleMutation, useDeleteRbacRoleMutation, useGetRbacRoleDetailsQuery, useGetRbacActionsDefinitionQuery, useGetRbacPoliciesQuery, useCreateRbacPolicyMutation, useUpdateRbacPolicyMutation, useDeleteRbacPolicyMutation, useGetRbacPolicyDetailsQuery, useGetWatchedGroupsQuery, useCreateWatchedGroupMutation, useUpdateWatchedGroupMutation, useDeleteWatchedGroupMutation, useAddWatchedUserMutation, useRemoveWatchedUserMutation, useAddWatcherMutation, useUpdateWatcherMutation, useDeleteWatcherMutation, useGetWatchedUsersQuery, useGetWatchersQuery, WATCHER_NOTIFICATION_EVENTS, WATCHER_NOTIFICATION_EVENT_LABELS, useDeleteApiKeyMutation, useGetApiKeysQuery, useCreateApiKeyMutation, useCreateLLMCredentialMutation, useGetCredentialsSchemaQuery, useGetMaskedLLMCredentialsQuery, useGetLlmsQuery, useDeleteIntegrationCredentialMutation, useDeleteCredentialMutation, useCreateIntegrationCredentialMutation, useGetIntegrationCredentialsSchemaQuery, useGetMaskedIntegrationCredentialsQuery, useGetAccountBillingInfoQuery, useUpdateAutoRechargeInfoMutation, useTriggerAutoRechargeMutation, useCreateStripeCustomerPortalMutation, useSetPlatformConfigurationsMutation, useGetPlatformConfigurationsQuery, useUpdatePlatformMembershipMutation, useGetPlatformMembershipQuery, useGetCustomDomainsQuery, useCreateCustomDomainMutation, useDeleteCustomDomainMutation, useGetStudentMentorCreationStatusQuery, useSetStudentMentorCreationStatusMutation, coreApiSlice, recommendationPromptTypeEnum, useGetRecommendedPromptsListQuery, useCreateRecommendedPromptMutation, useUpdateRecommendedPromptMutation, useDeleteRecommendedPromptMutation, useLazyGetPublicPlatformImageAssetFileUrlQuery, useUpdateTenantMetadataMutation, useCreatePlatformImageAssetMutation, useGetProviderConfigQuery, useCreateProviderConfigMutation, useDeleteProviderConfigMutation, useGetExternalMappingQuery, useGetCredentialsListQuery, useCreateExternalMappingMutation, useDeleteExternalMappingMutation, useGetMemsearchConfigQuery, useUpdateMemsearchConfigMutation, useUpdateTenantChatPrivacyConfigMutation, useGetCustomMentorsQuery, useGetStripeConnectStatusQuery, useStartStripeConnectOnboardingMutation, useLazyGetStripeConnectDashboardQuery, useGetAiSearchMentorsQuery, useListPaywallsQuery, useListPricesQuery, useCreatePriceMutation, useUpdatePriceMutation, useDeletePriceMutation, useGetPaywallConfigQuery, useEnablePaywallMutation, useUpdatePaywallMutation, useGetNotificationsCountQuery, useLazyGetNotificationsQuery, useMarkAllAsReadMutation, useCreateNotificationPreviewMutation, useSendNotificationMutation, useGetMentorsQuery, useUpdateTemplateMutation, useGetTemplateDetailsQuery, useGetTemplatesQuery, useLazyGetTemplateDetailsQuery, useToggleTemplateMutation, useGetTopicsStatsQuery, useGetUsersStatsQuery, useGetSessionStatsQuery, useGetTopicsDetailsStatsQuery, useGetAccessTimeHeatmapQuery, useGetUserDetailsStatsQuery, useGetTranscriptsConversationHeadlineQuery, useGetAverageRatingQuery, useGetFinancialStatsQuery, useGetDetailedFinancialStatsQuery, useGetTranscriptsMessagesDetailsQuery, useGetTranscriptsMessagesQuery, useGetReportDetailQuery, useLazyGetDownloadReportFromURLQuery, useGetReportsQuery, useCreateReportMutation, useGetMentorPublicSettingsQuery, useGetContentAnalyticsQuery, useGetContentAnalyticsDetailsQuery, useGetLearnerDetailsQuery, useGetRevenueQuery, useListSubscribersQuery, useGetAuditLogsQuery, 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, useLazyGetPersonnalizedSearchQuery, useUpdateExamAttemptMutation, useStartExamMutation, useLazyGetExamInfoQuery, useGetClawMentorConfigQuery, useGetClawInstancesQuery, useGetAgentConfigQuery, useUpdateClawMentorConfigMutation, useCreateClawMentorConfigMutation, useDeleteClawMentorConfigMutation, usePushClawConfigMutation, useCreateClawInstanceMutation, useDeleteClawInstanceMutation, useUpdateAgentConfigMutation, useHealthCheckClawInstanceMutation, useTestConnectivityClawInstanceMutation, useUpdateClawInstanceMutation, useGetAgentSkillsQuery, useGetMentorSkillAssignmentsQuery, useCreateMentorSkillAssignmentMutation, useUpdateMentorSkillAssignmentMutation, useDeleteMentorSkillAssignmentMutation, useCreateAgentSkillMutation, useUpdateAgentSkillMutation, useDeleteAgentSkillMutation, useCreateCheckoutMutation, useGetUserProjectsQuery, useUpdateUserProjectMutation, useGetTrainingDocumentsQuery, useGetVectorDocumentsQuery, useGetMentorMemoriesListQuery, useGetMemoryCategoriesAdminQuery, useDeleteMentorMemoryMutation, useUpdateMentorMemoryMutation, useCreateMentorMemoryMutation, useLazyGetConnectedServiceAuthUrlQuery, useGetPublicMentorsQuery, useCreateUserProjectMutation, useDeleteUserProjectMutation, useGetUserProjectDetailsQuery, useEditTrainingDocumentMutation, useAddTrainingDocumentMutation, useLazyGetCredentialsQuery, useGetMentorSettingsQuery, useEditMentorMutation, useGetMentorCategoriesQuery, useCreateMentorMutation, useUpdateUserPlatformMetadataMutation, useGetPromptCategoriesQuery, useCreatePromptMutation, useDeletePromptMutation, useGetPromptsSearchQuery, useUpdatePromptMutation, useDeleteTrainingDocumentMutation, useGetTrainingDocumentRetrainScheduleQuery, useCreateTrainingDocumentRetrainScheduleMutation } from '@iblai/data-layer';
 import { toast } from 'sonner';
 import { jsx, Fragment as Fragment$1, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
@@ -57778,138 +57778,13 @@ AvatarImageNoBorder.displayName = "AvatarImageNoBorder";
 const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (jsx(Fallback, { ref: ref, className: cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className), ...props })));
 AvatarFallback.displayName = Fallback.displayName;
 
-function useStateMachine$2(initialState, machine) {
-  return React.useReducer((state, event) => {
-    const nextState = machine[state][event];
-    return nextState ?? state;
-  }, initialState);
-}
-
-// src/presence.tsx
-var Presence$2 = (props) => {
-  const { present, children } = props;
-  const presence = usePresence$2(present);
-  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children);
-  const ref = useComposedRefs$1(presence.ref, getElementRef$3(child));
-  const forceMount = typeof children === "function";
-  return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
-};
-Presence$2.displayName = "Presence";
-function usePresence$2(present) {
-  const [node, setNode] = React.useState();
-  const stylesRef = React.useRef(null);
-  const prevPresentRef = React.useRef(present);
-  const prevAnimationNameRef = React.useRef("none");
-  const initialState = present ? "mounted" : "unmounted";
-  const [state, send] = useStateMachine$2(initialState, {
-    mounted: {
-      UNMOUNT: "unmounted",
-      ANIMATION_OUT: "unmountSuspended"
-    },
-    unmountSuspended: {
-      MOUNT: "mounted",
-      ANIMATION_END: "unmounted"
-    },
-    unmounted: {
-      MOUNT: "mounted"
-    }
-  });
-  React.useEffect(() => {
-    const currentAnimationName = getAnimationName$2(stylesRef.current);
-    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
-  }, [state]);
-  useLayoutEffect2$1(() => {
-    const styles = stylesRef.current;
-    const wasPresent = prevPresentRef.current;
-    const hasPresentChanged = wasPresent !== present;
-    if (hasPresentChanged) {
-      const prevAnimationName = prevAnimationNameRef.current;
-      const currentAnimationName = getAnimationName$2(styles);
-      if (present) {
-        send("MOUNT");
-      } else if (currentAnimationName === "none" || styles?.display === "none") {
-        send("UNMOUNT");
-      } else {
-        const isAnimating = prevAnimationName !== currentAnimationName;
-        if (wasPresent && isAnimating) {
-          send("ANIMATION_OUT");
-        } else {
-          send("UNMOUNT");
-        }
-      }
-      prevPresentRef.current = present;
-    }
-  }, [present, send]);
-  useLayoutEffect2$1(() => {
-    if (node) {
-      let timeoutId;
-      const ownerWindow = node.ownerDocument.defaultView ?? window;
-      const handleAnimationEnd = (event) => {
-        const currentAnimationName = getAnimationName$2(stylesRef.current);
-        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
-        if (event.target === node && isCurrentAnimation) {
-          send("ANIMATION_END");
-          if (!prevPresentRef.current) {
-            const currentFillMode = node.style.animationFillMode;
-            node.style.animationFillMode = "forwards";
-            timeoutId = ownerWindow.setTimeout(() => {
-              if (node.style.animationFillMode === "forwards") {
-                node.style.animationFillMode = currentFillMode;
-              }
-            });
-          }
-        }
-      };
-      const handleAnimationStart = (event) => {
-        if (event.target === node) {
-          prevAnimationNameRef.current = getAnimationName$2(stylesRef.current);
-        }
-      };
-      node.addEventListener("animationstart", handleAnimationStart);
-      node.addEventListener("animationcancel", handleAnimationEnd);
-      node.addEventListener("animationend", handleAnimationEnd);
-      return () => {
-        ownerWindow.clearTimeout(timeoutId);
-        node.removeEventListener("animationstart", handleAnimationStart);
-        node.removeEventListener("animationcancel", handleAnimationEnd);
-        node.removeEventListener("animationend", handleAnimationEnd);
-      };
-    } else {
-      send("ANIMATION_END");
-    }
-  }, [node, send]);
-  return {
-    isPresent: ["mounted", "unmountSuspended"].includes(state),
-    ref: React.useCallback((node2) => {
-      stylesRef.current = node2 ? getComputedStyle(node2) : null;
-      setNode(node2);
-    }, [])
-  };
-}
-function getAnimationName$2(styles) {
-  return styles?.animationName || "none";
-}
-function getElementRef$3(element) {
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
-  }
-  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
-  }
-  return element.props.ref || element.ref;
-}
-
-var CHECKBOX_NAME = "Checkbox";
-var [createCheckboxContext, createCheckboxScope] = createContextScope$1(CHECKBOX_NAME);
-var [CheckboxProvider, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
-var Checkbox$1 = React.forwardRef(
+var SWITCH_NAME = "Switch";
+var [createSwitchContext, createSwitchScope] = createContextScope$1(SWITCH_NAME);
+var [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
+var Switch$1 = React.forwardRef(
   (props, forwardedRef) => {
     const {
-      __scopeCheckbox,
+      __scopeSwitch,
       name,
       checked: checkedProp,
       defaultChecked,
@@ -57918,7 +57793,7 @@ var Checkbox$1 = React.forwardRef(
       value = "on",
       onCheckedChange,
       form,
-      ...checkboxProps
+      ...switchProps
     } = props;
     const [button, setButton] = React.useState(null);
     const composedRefs = useComposedRefs$1(forwardedRef, (node) => setButton(node));
@@ -57928,36 +57803,24 @@ var Checkbox$1 = React.forwardRef(
       prop: checkedProp,
       defaultProp: defaultChecked ?? false,
       onChange: onCheckedChange,
-      caller: CHECKBOX_NAME
+      caller: SWITCH_NAME
     });
-    const initialCheckedStateRef = React.useRef(checked);
-    React.useEffect(() => {
-      const form2 = button?.form;
-      if (form2) {
-        const reset = () => setChecked(initialCheckedStateRef.current);
-        form2.addEventListener("reset", reset);
-        return () => form2.removeEventListener("reset", reset);
-      }
-    }, [button, setChecked]);
-    return /* @__PURE__ */ jsxs(CheckboxProvider, { scope: __scopeCheckbox, state: checked, disabled, children: [
+    return /* @__PURE__ */ jsxs(SwitchProvider, { scope: __scopeSwitch, checked, disabled, children: [
       /* @__PURE__ */ jsx(
-        Primitive$2.button,
+        Primitive$3.button,
         {
           type: "button",
-          role: "checkbox",
-          "aria-checked": isIndeterminate$1(checked) ? "mixed" : checked,
+          role: "switch",
+          "aria-checked": checked,
           "aria-required": required,
           "data-state": getState$3(checked),
           "data-disabled": disabled ? "" : void 0,
           disabled,
           value,
-          ...checkboxProps,
+          ...switchProps,
           ref: composedRefs,
-          onKeyDown: composeEventHandlers$2(props.onKeyDown, (event) => {
-            if (event.key === "Enter") event.preventDefault();
-          }),
-          onClick: composeEventHandlers$2(props.onClick, (event) => {
-            setChecked((prevChecked) => isIndeterminate$1(prevChecked) ? true : !prevChecked);
+          onClick: composeEventHandlers$1(props.onClick, (event) => {
+            setChecked((prevChecked) => !prevChecked);
             if (isFormControl) {
               hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
               if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
@@ -57966,7 +57829,7 @@ var Checkbox$1 = React.forwardRef(
         }
       ),
       isFormControl && /* @__PURE__ */ jsx(
-        CheckboxBubbleInput,
+        SwitchBubbleInput,
         {
           control: button,
           bubbles: !hasConsumerStoppedPropagationRef.current,
@@ -57976,40 +57839,37 @@ var Checkbox$1 = React.forwardRef(
           required,
           disabled,
           form,
-          style: { transform: "translateX(-100%)" },
-          defaultChecked: isIndeterminate$1(defaultChecked) ? false : defaultChecked
+          style: { transform: "translateX(-100%)" }
         }
       )
     ] });
   }
 );
-Checkbox$1.displayName = CHECKBOX_NAME;
-var INDICATOR_NAME$3 = "CheckboxIndicator";
-var CheckboxIndicator = React.forwardRef(
+Switch$1.displayName = SWITCH_NAME;
+var THUMB_NAME = "SwitchThumb";
+var SwitchThumb = React.forwardRef(
   (props, forwardedRef) => {
-    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
-    const context = useCheckboxContext(INDICATOR_NAME$3, __scopeCheckbox);
-    return /* @__PURE__ */ jsx(Presence$2, { present: forceMount || isIndeterminate$1(context.state) || context.state === true, children: /* @__PURE__ */ jsx(
-      Primitive$2.span,
+    const { __scopeSwitch, ...thumbProps } = props;
+    const context = useSwitchContext(THUMB_NAME, __scopeSwitch);
+    return /* @__PURE__ */ jsx(
+      Primitive$3.span,
       {
-        "data-state": getState$3(context.state),
+        "data-state": getState$3(context.checked),
         "data-disabled": context.disabled ? "" : void 0,
-        ...indicatorProps,
-        ref: forwardedRef,
-        style: { pointerEvents: "none", ...props.style }
+        ...thumbProps,
+        ref: forwardedRef
       }
-    ) });
+    );
   }
 );
-CheckboxIndicator.displayName = INDICATOR_NAME$3;
-var BUBBLE_INPUT_NAME$1 = "CheckboxBubbleInput";
-var CheckboxBubbleInput = React.forwardRef(
+SwitchThumb.displayName = THUMB_NAME;
+var BUBBLE_INPUT_NAME$1 = "SwitchBubbleInput";
+var SwitchBubbleInput = React.forwardRef(
   ({
-    __scopeCheckbox,
+    __scopeSwitch,
     control,
     checked,
     bubbles = true,
-    defaultChecked,
     ...props
   }, forwardedRef) => {
     const ref = React.useRef(null);
@@ -58027,18 +57887,16 @@ var CheckboxBubbleInput = React.forwardRef(
       const setChecked = descriptor.set;
       if (prevChecked !== checked && setChecked) {
         const event = new Event("click", { bubbles });
-        input.indeterminate = isIndeterminate$1(checked);
-        setChecked.call(input, isIndeterminate$1(checked) ? false : checked);
+        setChecked.call(input, checked);
         input.dispatchEvent(event);
       }
     }, [prevChecked, checked, bubbles]);
-    const defaultCheckedRef = React.useRef(isIndeterminate$1(checked) ? false : checked);
     return /* @__PURE__ */ jsx(
-      Primitive$2.input,
+      "input",
       {
         type: "checkbox",
         "aria-hidden": true,
-        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
+        defaultChecked: checked,
         ...props,
         tabIndex: -1,
         ref: composedRefs,
@@ -58054,18 +57912,15 @@ var CheckboxBubbleInput = React.forwardRef(
     );
   }
 );
-CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
-function isIndeterminate$1(checked) {
-  return checked === "indeterminate";
-}
+SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
 function getState$3(checked) {
-  return isIndeterminate$1(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+  return checked ? "checked" : "unchecked";
 }
-var Root$a = Checkbox$1;
-var Indicator$2 = CheckboxIndicator;
+var Root$a = Switch$1;
+var Thumb = SwitchThumb;
 
-const Checkbox = React.forwardRef(({ className, ...props }, ref) => (jsx(Root$a, { ref: ref, className: cn("peer border-primary focus-visible:ring-ring h-4 w-4 shrink-0 rounded-sm border shadow-sm focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-500 data-[state=checked]:text-white", className), ...props, children: jsx(Indicator$2, { className: cn("flex items-center justify-center text-current"), children: jsx(Check, { className: "h-4 w-4" }) }) })));
-Checkbox.displayName = Root$a.displayName;
+const Switch = React.forwardRef(({ className, ...props }, ref) => (jsx(Root$a, { className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className), ...props, ref: ref, children: jsx(Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0") }) })));
+Switch.displayName = Root$a.displayName;
 
 const __storeToDerived = /* @__PURE__ */ new WeakMap();
 const __derivedToStore = /* @__PURE__ */ new WeakMap();
@@ -63171,6 +63026,131 @@ var Portal$3 = React.forwardRef((props, forwardedRef) => {
 });
 Portal$3.displayName = PORTAL_NAME$5;
 
+function useStateMachine$2(initialState, machine) {
+  return React.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+
+// src/presence.tsx
+var Presence$2 = (props) => {
+  const { present, children } = props;
+  const presence = usePresence$2(present);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children);
+  const ref = useComposedRefs$1(presence.ref, getElementRef$3(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
+};
+Presence$2.displayName = "Presence";
+function usePresence$2(present) {
+  const [node, setNode] = React.useState();
+  const stylesRef = React.useRef(null);
+  const prevPresentRef = React.useRef(present);
+  const prevAnimationNameRef = React.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine$2(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  React.useEffect(() => {
+    const currentAnimationName = getAnimationName$2(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect2$1(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName$2(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || styles?.display === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect2$1(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName$2(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName$2(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
+    }
+  }, [node, send]);
+  return {
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: React.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
+  };
+}
+function getAnimationName$2(styles) {
+  return styles?.animationName || "none";
+}
+function getElementRef$3(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
 // src/visually-hidden.tsx
 var VISUALLY_HIDDEN_STYLES = Object.freeze({
   // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
@@ -63689,150 +63669,6 @@ function TooltipContent({ className, sideOffset = 0, children, ...props }) {
     return (jsx(Portal$2, { children: jsxs(Content2$4, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className), ...props, children: [children, jsx(Arrow2$1, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })] }) }));
 }
 
-var SWITCH_NAME = "Switch";
-var [createSwitchContext, createSwitchScope] = createContextScope$1(SWITCH_NAME);
-var [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
-var Switch$1 = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeSwitch,
-      name,
-      checked: checkedProp,
-      defaultChecked,
-      required,
-      disabled,
-      value = "on",
-      onCheckedChange,
-      form,
-      ...switchProps
-    } = props;
-    const [button, setButton] = React.useState(null);
-    const composedRefs = useComposedRefs$1(forwardedRef, (node) => setButton(node));
-    const hasConsumerStoppedPropagationRef = React.useRef(false);
-    const isFormControl = button ? form || !!button.closest("form") : true;
-    const [checked, setChecked] = useControllableState$1({
-      prop: checkedProp,
-      defaultProp: defaultChecked ?? false,
-      onChange: onCheckedChange,
-      caller: SWITCH_NAME
-    });
-    return /* @__PURE__ */ jsxs(SwitchProvider, { scope: __scopeSwitch, checked, disabled, children: [
-      /* @__PURE__ */ jsx(
-        Primitive$3.button,
-        {
-          type: "button",
-          role: "switch",
-          "aria-checked": checked,
-          "aria-required": required,
-          "data-state": getState$2(checked),
-          "data-disabled": disabled ? "" : void 0,
-          disabled,
-          value,
-          ...switchProps,
-          ref: composedRefs,
-          onClick: composeEventHandlers$1(props.onClick, (event) => {
-            setChecked((prevChecked) => !prevChecked);
-            if (isFormControl) {
-              hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-              if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
-            }
-          })
-        }
-      ),
-      isFormControl && /* @__PURE__ */ jsx(
-        SwitchBubbleInput,
-        {
-          control: button,
-          bubbles: !hasConsumerStoppedPropagationRef.current,
-          name,
-          value,
-          checked,
-          required,
-          disabled,
-          form,
-          style: { transform: "translateX(-100%)" }
-        }
-      )
-    ] });
-  }
-);
-Switch$1.displayName = SWITCH_NAME;
-var THUMB_NAME = "SwitchThumb";
-var SwitchThumb = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeSwitch, ...thumbProps } = props;
-    const context = useSwitchContext(THUMB_NAME, __scopeSwitch);
-    return /* @__PURE__ */ jsx(
-      Primitive$3.span,
-      {
-        "data-state": getState$2(context.checked),
-        "data-disabled": context.disabled ? "" : void 0,
-        ...thumbProps,
-        ref: forwardedRef
-      }
-    );
-  }
-);
-SwitchThumb.displayName = THUMB_NAME;
-var BUBBLE_INPUT_NAME = "SwitchBubbleInput";
-var SwitchBubbleInput = React.forwardRef(
-  ({
-    __scopeSwitch,
-    control,
-    checked,
-    bubbles = true,
-    ...props
-  }, forwardedRef) => {
-    const ref = React.useRef(null);
-    const composedRefs = useComposedRefs$1(ref, forwardedRef);
-    const prevChecked = usePrevious$1(checked);
-    const controlSize = useSize$1(control);
-    React.useEffect(() => {
-      const input = ref.current;
-      if (!input) return;
-      const inputProto = window.HTMLInputElement.prototype;
-      const descriptor = Object.getOwnPropertyDescriptor(
-        inputProto,
-        "checked"
-      );
-      const setChecked = descriptor.set;
-      if (prevChecked !== checked && setChecked) {
-        const event = new Event("click", { bubbles });
-        setChecked.call(input, checked);
-        input.dispatchEvent(event);
-      }
-    }, [prevChecked, checked, bubbles]);
-    return /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "checkbox",
-        "aria-hidden": true,
-        defaultChecked: checked,
-        ...props,
-        tabIndex: -1,
-        ref: composedRefs,
-        style: {
-          ...props.style,
-          ...controlSize,
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0
-        }
-      }
-    );
-  }
-);
-SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME;
-function getState$2(checked) {
-  return checked ? "checked" : "unchecked";
-}
-var Root$7 = Switch$1;
-var Thumb = SwitchThumb;
-
-const Switch = React.forwardRef(({ className, ...props }, ref) => (jsx(Root$7, { className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className), ...props, ref: ref, children: jsx(Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0") }) })));
-Switch.displayName = Root$7.displayName;
-
 // packages/react/context/src/createContext.tsx
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
@@ -64076,11 +63912,11 @@ var Progress$1 = React.forwardRef(
   }
 );
 Progress$1.displayName = PROGRESS_NAME;
-var INDICATOR_NAME$2 = "ProgressIndicator";
+var INDICATOR_NAME$3 = "ProgressIndicator";
 var ProgressIndicator = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeProgress, ...indicatorProps } = props;
-    const context = useProgressContext(INDICATOR_NAME$2, __scopeProgress);
+    const context = useProgressContext(INDICATOR_NAME$3, __scopeProgress);
     return /* @__PURE__ */ jsx(
       Primitive$1.div,
       {
@@ -64093,7 +63929,7 @@ var ProgressIndicator = React.forwardRef(
     );
   }
 );
-ProgressIndicator.displayName = INDICATOR_NAME$2;
+ProgressIndicator.displayName = INDICATOR_NAME$3;
 function defaultGetValueLabel(value, max) {
   return `${Math.round(value / max * 100)}%`;
 }
@@ -64120,11 +63956,11 @@ function getInvalidValueError(propValue, componentName) {
 
 Defaulting to \`null\`.`;
 }
-var Root$6 = Progress$1;
-var Indicator$1 = ProgressIndicator;
+var Root$7 = Progress$1;
+var Indicator$2 = ProgressIndicator;
 
-const Progress = React.forwardRef(({ className, value, ...props }, ref) => (jsx(Root$6, { ref: ref, className: cn('bg-secondary relative h-4 w-full overflow-hidden rounded-full', className), ...props, children: jsx(Indicator$1, { className: "bg-primary h-full w-full flex-1 transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) })));
-Progress.displayName = Root$6.displayName;
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (jsx(Root$7, { ref: ref, className: cn('bg-secondary relative h-4 w-full overflow-hidden rounded-full', className), ...props, children: jsx(Indicator$2, { className: "bg-primary h-full w-full flex-1 transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) })));
+Progress.displayName = Root$7.displayName;
 
 var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
 // @__NO_SIDE_EFFECTS__
@@ -64996,11 +64832,11 @@ var Label$3 = React.forwardRef((props, forwardedRef) => {
   );
 });
 Label$3.displayName = NAME$2;
-var Root$5 = Label$3;
+var Root$6 = Label$3;
 
 const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-const Label$2 = React.forwardRef(({ className, ...props }, ref) => (jsx(Root$5, { ref: ref, className: cn(labelVariants(), className), ...props })));
-Label$2.displayName = Root$5.displayName;
+const Label$2 = React.forwardRef(({ className, ...props }, ref) => (jsx(Root$6, { ref: ref, className: cn(labelVariants(), className), ...props })));
+Label$2.displayName = Root$6.displayName;
 
 var dayjs_min = {exports: {}};
 
@@ -88202,10 +88038,10 @@ function Profile({ tenant, username, tenants, onClose, customization = {}, isAdm
                                                 })] }), (customization.showLeaderboardDisplayCheckbox ||
                                             customization.showMentorAIDisplayCheckbox) && (jsxs("div", { className: "grid grid-cols-2 gap-6 pt-4", children: [customization.showMentorAIDisplayCheckbox && (jsx("div", { className: "space-y-2", children: jsxs("div", { className: "flex items-center space-x-2", children: [basicForm.Field({
                                                                 name: 'displayMentor',
-                                                                children: (field) => (jsx(Checkbox, { onCheckedChange: (checked) => field.handleChange(checked), checked: field.state.value, disabled: basicForm.state.isSubmitting || isUserMetadataLoading, id: "display-mentor" })),
-                                                            }), jsx("label", { htmlFor: "display-mentor", className: "text-sm leading-none font-medium text-gray-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Display Mentor AI" })] }) })), customization.showLeaderboardDisplayCheckbox && (jsx("div", { className: "space-y-2", children: jsxs("div", { className: "flex items-center space-x-2", children: [basicForm.Field({
+                                                                children: (field) => (jsx(Switch, { className: "data-[state=checked]:bg-blue-600", onCheckedChange: (checked) => field.handleChange(checked), checked: field.state.value, disabled: basicForm.state.isSubmitting || isUserMetadataLoading, id: "display-mentor" })),
+                                                            }), jsx("label", { htmlFor: "display-mentor", className: "text-sm leading-none font-medium text-gray-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Display Agent Sidebar" })] }) })), customization.showLeaderboardDisplayCheckbox && (jsx("div", { className: "space-y-2", children: jsxs("div", { className: "flex items-center space-x-2", children: [basicForm.Field({
                                                                 name: 'displayLeaderBoard',
-                                                                children: (field) => (jsx(Checkbox, { onCheckedChange: (checked) => field.handleChange(checked), checked: field.state.value, disabled: basicForm.state.isSubmitting || isUserMetadataLoading, id: "display-leaderboard" })),
+                                                                children: (field) => (jsx(Switch, { className: "data-[state=checked]:bg-blue-600", onCheckedChange: (checked) => field.handleChange(checked), checked: field.state.value, disabled: basicForm.state.isSubmitting || isUserMetadataLoading, id: "display-leaderboard" })),
                                                             }), jsx("label", { htmlFor: "display-leaderboard", className: "text-sm leading-none font-medium text-gray-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Display Leaderboard" })] }) }))] }))] }) })), activeTab === 'social' && (jsx("div", { className: "max-w-2xl space-y-6", children: jsxs("form", { className: "space-y-6", onSubmit: (formEvent) => {
                                         formEvent.preventDefault();
                                         formEvent.stopPropagation();
@@ -88460,7 +88296,7 @@ function focusFirst$2(candidates, preventScroll = false) {
 function wrapArray$2(array, startIndex) {
   return array.map((_, index) => array[(startIndex + index) % array.length]);
 }
-var Root$4 = RovingFocusGroup$1;
+var Root$5 = RovingFocusGroup$1;
 var Item$2 = RovingFocusGroupItem$1;
 
 function useStateMachine$1(initialState, machine) {
@@ -88643,7 +88479,7 @@ var TabsList$1 = React.forwardRef(
     const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
     const rovingFocusGroupScope = useRovingFocusGroupScope$2(__scopeTabs);
     return /* @__PURE__ */ jsx(
-      Root$4,
+      Root$5,
       {
         asChild: true,
         ...rovingFocusGroupScope,
@@ -89097,6 +88933,170 @@ function UsersTab$1({ tenant, currentPage, itemsPerPage, onInviteSuccess }) {
                                         jsx("tr", { children: jsx("td", { colSpan: 2, className: "px-6 py-12 text-center", children: jsxs("div", { className: "flex flex-col items-center justify-center text-gray-500", children: [jsx(Mail, { className: "h-12 w-12 mb-3 text-gray-300", "aria-hidden": "true" }), jsx("p", { className: "text-sm font-medium", children: "No invitations yet" }), jsx("p", { className: "text-xs mt-1", children: "Start by inviting users above or uploading a CSV file" })] }) }) })) : (currentUsers.map((user) => (jsxs("tr", { className: "hover:bg-gray-50 transition-colors duration-150", children: [jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: jsxs("div", { className: "flex items-center truncate max-w-[200px] sm:max-w-full", children: [jsx("div", { className: "flex-shrink-0 h-8 w-8", children: jsx("div", { className: "h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center", children: jsx(Mail, { className: "h-4 w-4 text-blue-600", "aria-hidden": "true" }) }) }), jsx("div", { className: "ml-3", children: jsx("div", { className: "text-sm font-medium text-gray-900", children: user.email || 'No email' }) })] }) }), jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: jsxs("span", { className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(user.active, user.expired)}`, children: [user.active && !user.expired && (jsx(Clock, { className: "h-3 w-3 mr-1 text-blue-500", "aria-hidden": "true" })), !user.active && !user.expired && (jsx(CircleCheck, { className: "h-3 w-3 mr-1 text-green-700", "aria-hidden": "true" })), user.expired && (jsx(CircleX, { className: "h-3 w-3 mr-1 text-gray-500", "aria-hidden": "true" })), getStatusText(user.active, user.expired)] }) })] }, user.id)))) })] }) }) }) }) }), isCSVEditorOpen && (jsx(CSVEditor, { csvData: parsedCSVData, onSave: handleCSVEditorSave, onCancel: handleCSVEditorCancel }))] }));
 }
 
+var CHECKBOX_NAME = "Checkbox";
+var [createCheckboxContext, createCheckboxScope] = createContextScope$1(CHECKBOX_NAME);
+var [CheckboxProvider, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
+var Checkbox$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeCheckbox,
+      name,
+      checked: checkedProp,
+      defaultChecked,
+      required,
+      disabled,
+      value = "on",
+      onCheckedChange,
+      form,
+      ...checkboxProps
+    } = props;
+    const [button, setButton] = React.useState(null);
+    const composedRefs = useComposedRefs$1(forwardedRef, (node) => setButton(node));
+    const hasConsumerStoppedPropagationRef = React.useRef(false);
+    const isFormControl = button ? form || !!button.closest("form") : true;
+    const [checked, setChecked] = useControllableState$1({
+      prop: checkedProp,
+      defaultProp: defaultChecked ?? false,
+      onChange: onCheckedChange,
+      caller: CHECKBOX_NAME
+    });
+    const initialCheckedStateRef = React.useRef(checked);
+    React.useEffect(() => {
+      const form2 = button?.form;
+      if (form2) {
+        const reset = () => setChecked(initialCheckedStateRef.current);
+        form2.addEventListener("reset", reset);
+        return () => form2.removeEventListener("reset", reset);
+      }
+    }, [button, setChecked]);
+    return /* @__PURE__ */ jsxs(CheckboxProvider, { scope: __scopeCheckbox, state: checked, disabled, children: [
+      /* @__PURE__ */ jsx(
+        Primitive$2.button,
+        {
+          type: "button",
+          role: "checkbox",
+          "aria-checked": isIndeterminate$1(checked) ? "mixed" : checked,
+          "aria-required": required,
+          "data-state": getState$2(checked),
+          "data-disabled": disabled ? "" : void 0,
+          disabled,
+          value,
+          ...checkboxProps,
+          ref: composedRefs,
+          onKeyDown: composeEventHandlers$2(props.onKeyDown, (event) => {
+            if (event.key === "Enter") event.preventDefault();
+          }),
+          onClick: composeEventHandlers$2(props.onClick, (event) => {
+            setChecked((prevChecked) => isIndeterminate$1(prevChecked) ? true : !prevChecked);
+            if (isFormControl) {
+              hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+              if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+            }
+          })
+        }
+      ),
+      isFormControl && /* @__PURE__ */ jsx(
+        CheckboxBubbleInput,
+        {
+          control: button,
+          bubbles: !hasConsumerStoppedPropagationRef.current,
+          name,
+          value,
+          checked,
+          required,
+          disabled,
+          form,
+          style: { transform: "translateX(-100%)" },
+          defaultChecked: isIndeterminate$1(defaultChecked) ? false : defaultChecked
+        }
+      )
+    ] });
+  }
+);
+Checkbox$1.displayName = CHECKBOX_NAME;
+var INDICATOR_NAME$2 = "CheckboxIndicator";
+var CheckboxIndicator = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
+    const context = useCheckboxContext(INDICATOR_NAME$2, __scopeCheckbox);
+    return /* @__PURE__ */ jsx(Presence$2, { present: forceMount || isIndeterminate$1(context.state) || context.state === true, children: /* @__PURE__ */ jsx(
+      Primitive$2.span,
+      {
+        "data-state": getState$2(context.state),
+        "data-disabled": context.disabled ? "" : void 0,
+        ...indicatorProps,
+        ref: forwardedRef,
+        style: { pointerEvents: "none", ...props.style }
+      }
+    ) });
+  }
+);
+CheckboxIndicator.displayName = INDICATOR_NAME$2;
+var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
+var CheckboxBubbleInput = React.forwardRef(
+  ({
+    __scopeCheckbox,
+    control,
+    checked,
+    bubbles = true,
+    defaultChecked,
+    ...props
+  }, forwardedRef) => {
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs$1(ref, forwardedRef);
+    const prevChecked = usePrevious$1(checked);
+    const controlSize = useSize$1(control);
+    React.useEffect(() => {
+      const input = ref.current;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(
+        inputProto,
+        "checked"
+      );
+      const setChecked = descriptor.set;
+      if (prevChecked !== checked && setChecked) {
+        const event = new Event("click", { bubbles });
+        input.indeterminate = isIndeterminate$1(checked);
+        setChecked.call(input, isIndeterminate$1(checked) ? false : checked);
+        input.dispatchEvent(event);
+      }
+    }, [prevChecked, checked, bubbles]);
+    const defaultCheckedRef = React.useRef(isIndeterminate$1(checked) ? false : checked);
+    return /* @__PURE__ */ jsx(
+      Primitive$2.input,
+      {
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
+        ...props,
+        tabIndex: -1,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }
+    );
+  }
+);
+CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
+function isIndeterminate$1(checked) {
+  return checked === "indeterminate";
+}
+function getState$2(checked) {
+  return isIndeterminate$1(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+var Root$4 = Checkbox$1;
+var Indicator$1 = CheckboxIndicator;
+
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (jsx(Root$4, { ref: ref, className: cn("peer border-primary focus-visible:ring-ring h-4 w-4 shrink-0 rounded-sm border shadow-sm focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-500 data-[state=checked]:text-white", className), ...props, children: jsx(Indicator$1, { className: cn("flex items-center justify-center text-current"), children: jsx(Check, { className: "h-4 w-4" }) }) })));
+Checkbox.displayName = Root$4.displayName;
+
 function CoursesTab({ tenant, currentPage, itemsPerPage, hasManageUsersPermission = false, }) {
     var _a;
     const [inviteSent, setInviteSent] = useState(false);
@@ -127570,7 +127570,7 @@ var MenuContentImpl = React.forwardRef(
                 onInteractOutside,
                 onDismiss,
                 children: /* @__PURE__ */ jsx(
-                  Root$4,
+                  Root$5,
                   {
                     asChild: true,
                     ...rovingFocusGroupScope,
@@ -157681,6 +157681,10 @@ const EmptyStats = ({ title = 'No data available' }) => {
     return (jsx("div", { className: "flex justify-center items-center h-full", children: jsx("p", { className: "text-gray-500 text-sm", children: title }) }));
 };
 
+const ChartLoading = ({ title = 'Loading...' }) => {
+    return (jsx("div", { className: "flex justify-center items-center h-full", children: jsx("p", { className: "text-gray-500 text-sm", children: title }) }));
+};
+
 // Utility function to format date to YYYY-MM-DD
 const formatDateToYYYYMMDD$6 = (date) => {
     if (!date)
@@ -157791,8 +157795,8 @@ const formatDateToShortFormat$2 = (dateString, isToday = false) => {
 function AnalyticsOverview({ tenantKey, mentorId, selectedMentorId, usergroupIds, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const currentMentorId = selectedMentorId || mentorId;
-    const { messageStat, topicStat, conversationStat, sessionStats, isLoadingAllStats, isLoadingUsersStats, setSessionStatsDateFilter, usersStats, sessionStatsDateFilter, topicsDetailsStats, setTopicsDetailsStatsDateFilter, topicsDetailsStatsDateFilter, activeUsersStats, setUsersStatsDateFilter, usersStatsDateFilter, } = useOverview({ tenantKey, mentorId: currentMentorId, usergroupIds });
-    return (jsxs("div", { className: "space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6", children: [jsx(StatCard, { loading: isLoadingAllStats, title: "Messages", value: messageStat.stat, percentage: messageStat.percentage }), jsx(StatCard, { loading: isLoadingUsersStats, title: "Active Users", value: (usersStats === null || usersStats === void 0 ? void 0 : usersStats.count) || 0, percentage: (usersStats === null || usersStats === void 0 ? void 0 : usersStats.percentage_change) || 0 }), jsx(StatCard, { loading: isLoadingAllStats, title: "Topics", value: topicStat.stat, percentage: topicStat.percentage }), jsx(StatCard, { loading: isLoadingAllStats, title: "Conversations", value: conversationStat.stat, percentage: conversationStat.percentage })] }), jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-5", children: [jsx(ChartCardWrapper, { title: "Sessions", label: "Sessions", setOutsideFilters: setSessionStatsDateFilter, filters: sessionStatsDateFilter, children: ((_a = sessionStats === null || sessionStats === void 0 ? void 0 : sessionStats.points) === null || _a === void 0 ? void 0 : _a.length) && ((_b = sessionStats === null || sessionStats === void 0 ? void 0 : sessionStats.points) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxs(LineChart, { data: ((_c = sessionStats === null || sessionStats === void 0 ? void 0 : sessionStats.points) === null || _c === void 0 ? void 0 : _c.map((point) => ({
+    const { messageStat, topicStat, conversationStat, sessionStats, isLoadingAllStats, isLoadingUsersStats, isLoadingSessionStats, isLoadingTopicsDetailsStats, isLoadingActiveUsersStats, setSessionStatsDateFilter, usersStats, sessionStatsDateFilter, topicsDetailsStats, setTopicsDetailsStatsDateFilter, topicsDetailsStatsDateFilter, activeUsersStats, setUsersStatsDateFilter, usersStatsDateFilter, } = useOverview({ tenantKey, mentorId: currentMentorId, usergroupIds });
+    return (jsxs("div", { className: "space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6", children: [jsx(StatCard, { loading: isLoadingAllStats, title: "Messages", value: messageStat.stat, percentage: messageStat.percentage }), jsx(StatCard, { loading: isLoadingUsersStats, title: "Active Users", value: (usersStats === null || usersStats === void 0 ? void 0 : usersStats.count) || 0, percentage: (usersStats === null || usersStats === void 0 ? void 0 : usersStats.percentage_change) || 0 }), jsx(StatCard, { loading: isLoadingAllStats, title: "Topics", value: topicStat.stat, percentage: topicStat.percentage }), jsx(StatCard, { loading: isLoadingAllStats, title: "Conversations", value: conversationStat.stat, percentage: conversationStat.percentage })] }), jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-5", children: [jsx(ChartCardWrapper, { title: "Sessions", label: "Sessions", setOutsideFilters: setSessionStatsDateFilter, filters: sessionStatsDateFilter, children: isLoadingSessionStats ? (jsx(ChartLoading, {})) : ((_a = sessionStats === null || sessionStats === void 0 ? void 0 : sessionStats.points) === null || _a === void 0 ? void 0 : _a.length) && ((_b = sessionStats === null || sessionStats === void 0 ? void 0 : sessionStats.points) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxs(LineChart, { data: ((_c = sessionStats === null || sessionStats === void 0 ? void 0 : sessionStats.points) === null || _c === void 0 ? void 0 : _c.map((point) => ({
                                 date: formatDateToShortFormat$2(point.date, sessionStatsDateFilter.activeFilter === 'today'),
                                 value: point.value,
                             }))) || [], margin: { top: 5, right: 5, left: 0, bottom: 5 }, children: [jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#f0f0f0", vertical: false }), jsx(XAxis, { dataKey: "date", tick: { fontSize: 8, textAnchor: 'end' }, angle: -45, interval: Math.floor(Number((_d = sessionStats === null || sessionStats === void 0 ? void 0 : sessionStats.points) === null || _d === void 0 ? void 0 : _d.length) / 31) || 0 }), jsx(YAxis, { tick: { fontSize: 10 }, width: 30, allowDecimals: false }), jsx(Tooltip, { content: ({ active, payload, label }) => {
@@ -157806,7 +157810,7 @@ function AnalyticsOverview({ tenantKey, mentorId, selectedMentorId, usergroupIds
                                         stroke: '#38A1E5',
                                         strokeWidth: 2,
                                         fill: 'white',
-                                    } })] })) : (jsx(EmptyStats, {})) }), jsx(ChartCardWrapper, { title: "Topics", label: "Topics", filters: topicsDetailsStatsDateFilter, setOutsideFilters: setTopicsDetailsStatsDateFilter, children: ((_e = topicsDetailsStats === null || topicsDetailsStats === void 0 ? void 0 : topicsDetailsStats.results) === null || _e === void 0 ? void 0 : _e.length) && ((_f = topicsDetailsStats === null || topicsDetailsStats === void 0 ? void 0 : topicsDetailsStats.results) === null || _f === void 0 ? void 0 : _f.length) > 0 ? (jsxs(BarChart, { data: (_g = topicsDetailsStats === null || topicsDetailsStats === void 0 ? void 0 : topicsDetailsStats.results) === null || _g === void 0 ? void 0 : _g.map((result) => ({
+                                    } })] })) : (jsx(EmptyStats, {})) }), jsx(ChartCardWrapper, { title: "Topics", label: "Topics", filters: topicsDetailsStatsDateFilter, setOutsideFilters: setTopicsDetailsStatsDateFilter, children: isLoadingTopicsDetailsStats ? (jsx(ChartLoading, {})) : ((_e = topicsDetailsStats === null || topicsDetailsStats === void 0 ? void 0 : topicsDetailsStats.results) === null || _e === void 0 ? void 0 : _e.length) && ((_f = topicsDetailsStats === null || topicsDetailsStats === void 0 ? void 0 : topicsDetailsStats.results) === null || _f === void 0 ? void 0 : _f.length) > 0 ? (jsxs(BarChart, { data: (_g = topicsDetailsStats === null || topicsDetailsStats === void 0 ? void 0 : topicsDetailsStats.results) === null || _g === void 0 ? void 0 : _g.map((result) => ({
                                 topic: result.name,
                                 value: result.messages,
                             })), layout: "vertical", margin: { top: 5, right: 30, left: 20, bottom: 5 }, children: [jsx(CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), jsx(XAxis, { type: "number", tick: { fontSize: 10 }, domain: [0, 'dataMax'], allowDecimals: false }), jsx(YAxis, { dataKey: "topic", type: "category", tick: { fontSize: 10 }, interval: 0, width: 80 }), jsx(Tooltip, { content: ({ active, payload, label }) => {
@@ -157815,7 +157819,7 @@ function AnalyticsOverview({ tenantKey, mentorId, selectedMentorId, usergroupIds
                                             return null;
                                         const data = (_a = payload[0]) === null || _a === void 0 ? void 0 : _a.payload;
                                         return (jsxs("div", { className: "bg-background border border-border rounded-md p-3 shadow-lg z-50", role: "tooltip", "aria-label": `Topic details for ${label}`, tabIndex: -1, style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx("div", { className: "font-medium text-foreground mb-2 text-base", children: label }), jsx("div", { className: "space-y-2 text-sm", children: jsxs("div", { className: "flex justify-between items-center", children: [jsx("span", { className: "text-muted-foreground", children: "Messages:" }), jsx("span", { className: "font-medium text-foreground", children: (_b = data === null || data === void 0 ? void 0 : data.value) === null || _b === void 0 ? void 0 : _b.toLocaleString() })] }) })] }));
-                                    }, cursor: { fill: 'rgba(0, 0, 0, 0.05)' }, wrapperStyle: { outline: 'none' } }), jsx(Bar, { dataKey: "value", fill: "#38A1E5", barSize: 20, radius: [0, 4, 4, 0] })] })) : (jsx(EmptyStats, {})) })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(ChartCardWrapper, { title: "Active Users", label: "Active Users", filters: usersStatsDateFilter, setOutsideFilters: setUsersStatsDateFilter, children: ((_h = activeUsersStats === null || activeUsersStats === void 0 ? void 0 : activeUsersStats.points) === null || _h === void 0 ? void 0 : _h.length) && ((_j = activeUsersStats === null || activeUsersStats === void 0 ? void 0 : activeUsersStats.points) === null || _j === void 0 ? void 0 : _j.length) > 0 ? (jsxs(BarChart, { data: (_k = activeUsersStats === null || activeUsersStats === void 0 ? void 0 : activeUsersStats.points) === null || _k === void 0 ? void 0 : _k.map((point) => ({
+                                    }, cursor: { fill: 'rgba(0, 0, 0, 0.05)' }, wrapperStyle: { outline: 'none' } }), jsx(Bar, { dataKey: "value", fill: "#38A1E5", barSize: 20, radius: [0, 4, 4, 0] })] })) : (jsx(EmptyStats, {})) })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(ChartCardWrapper, { title: "Active Users", label: "Active Users", filters: usersStatsDateFilter, setOutsideFilters: setUsersStatsDateFilter, children: isLoadingActiveUsersStats ? (jsx(ChartLoading, {})) : ((_h = activeUsersStats === null || activeUsersStats === void 0 ? void 0 : activeUsersStats.points) === null || _h === void 0 ? void 0 : _h.length) && ((_j = activeUsersStats === null || activeUsersStats === void 0 ? void 0 : activeUsersStats.points) === null || _j === void 0 ? void 0 : _j.length) > 0 ? (jsxs(BarChart, { data: (_k = activeUsersStats === null || activeUsersStats === void 0 ? void 0 : activeUsersStats.points) === null || _k === void 0 ? void 0 : _k.map((point) => ({
                             date: formatDateToShortFormat$2(point.date, usersStatsDateFilter.activeFilter === 'today'),
                             value: point.value,
                         })), margin: { top: 5, right: 5, left: 0, bottom: 5 }, children: [jsx(CartesianGrid, { strokeDasharray: "3 3" }), jsx(XAxis, { dataKey: "date", tick: { fontSize: 8, textAnchor: 'end' }, angle: -45, interval: Math.floor(Number((_l = activeUsersStats === null || activeUsersStats === void 0 ? void 0 : activeUsersStats.points) === null || _l === void 0 ? void 0 : _l.length) / 90) || 0 }), jsx(YAxis, { width: 30, domain: [0, 'dataMax'], allowDecimals: false }), jsx(Tooltip, { content: ({ active, payload, label }) => {
@@ -158124,8 +158128,8 @@ const formatRelativeTime$1 = (dateString) => {
 function AnalyticsUsersStats({ tenantKey, mentorId, selectedMentorId, usergroupIds, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const currentMentorId = selectedMentorId || mentorId;
-    const { registeredUsers, isLoadingRegisteredUsers, activeUsers, setActiveUsersStatsDateFilter, activeUsersStatsDateFilter, accessTimeHeatmap, isLoadingAccessTimeHeatmap, setAccessTimeHeatmapDateFilter, accessTimeHeatmapDateFilter, userDetailsStats, isLoadingUserDetailsStats, setUserDetailsStatsDateFilter, userDetailsStatsDateFilter, setUserDetailsStatsPage, userDetailsStatsSearch, handleSearchInputChange, currentlyActiveUsers, isLoadingCurrentlyActiveUsers, activeUsers30D, isLoadingActiveUsers30D, } = useUsers({ tenantKey, mentorId: currentMentorId, usergroupIds });
-    return (jsxs("div", { className: "space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6", children: [jsx(StatCard, { title: "Users logged in right now", value: (currentlyActiveUsers === null || currentlyActiveUsers === void 0 ? void 0 : currentlyActiveUsers.count) || 0, loading: isLoadingCurrentlyActiveUsers }), jsx(StatCard, { title: "Users logged in past 30 days", value: (activeUsers30D === null || activeUsers30D === void 0 ? void 0 : activeUsers30D.count) || 0, loading: isLoadingActiveUsers30D }), jsx(StatCard, { title: "Total registered users", value: (registeredUsers === null || registeredUsers === void 0 ? void 0 : registeredUsers.count) || 0, loading: isLoadingRegisteredUsers })] }), jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-5", children: [jsx(ChartCardWrapper, { title: "Active Users", label: "Active Users", filters: activeUsersStatsDateFilter, setOutsideFilters: setActiveUsersStatsDateFilter, children: ((_a = activeUsers === null || activeUsers === void 0 ? void 0 : activeUsers.points) === null || _a === void 0 ? void 0 : _a.length) && ((_b = activeUsers === null || activeUsers === void 0 ? void 0 : activeUsers.points) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxs(BarChart, { data: (_c = activeUsers === null || activeUsers === void 0 ? void 0 : activeUsers.points) === null || _c === void 0 ? void 0 : _c.map((point) => ({
+    const { registeredUsers, isLoadingRegisteredUsers, activeUsers, isLoadingActiveUsers, setActiveUsersStatsDateFilter, activeUsersStatsDateFilter, accessTimeHeatmap, isLoadingAccessTimeHeatmap, setAccessTimeHeatmapDateFilter, accessTimeHeatmapDateFilter, userDetailsStats, isLoadingUserDetailsStats, setUserDetailsStatsDateFilter, userDetailsStatsDateFilter, setUserDetailsStatsPage, userDetailsStatsSearch, handleSearchInputChange, currentlyActiveUsers, isLoadingCurrentlyActiveUsers, activeUsers30D, isLoadingActiveUsers30D, } = useUsers({ tenantKey, mentorId: currentMentorId, usergroupIds });
+    return (jsxs("div", { className: "space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6", children: [jsx(StatCard, { title: "Users logged in right now", value: (currentlyActiveUsers === null || currentlyActiveUsers === void 0 ? void 0 : currentlyActiveUsers.count) || 0, loading: isLoadingCurrentlyActiveUsers }), jsx(StatCard, { title: "Users logged in past 30 days", value: (activeUsers30D === null || activeUsers30D === void 0 ? void 0 : activeUsers30D.count) || 0, loading: isLoadingActiveUsers30D }), jsx(StatCard, { title: "Total registered users", value: (registeredUsers === null || registeredUsers === void 0 ? void 0 : registeredUsers.count) || 0, loading: isLoadingRegisteredUsers })] }), jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-5", children: [jsx(ChartCardWrapper, { title: "Active Users", label: "Active Users", filters: activeUsersStatsDateFilter, setOutsideFilters: setActiveUsersStatsDateFilter, children: isLoadingActiveUsers ? (jsx(ChartLoading, {})) : ((_a = activeUsers === null || activeUsers === void 0 ? void 0 : activeUsers.points) === null || _a === void 0 ? void 0 : _a.length) && ((_b = activeUsers === null || activeUsers === void 0 ? void 0 : activeUsers.points) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxs(BarChart, { data: (_c = activeUsers === null || activeUsers === void 0 ? void 0 : activeUsers.points) === null || _c === void 0 ? void 0 : _c.map((point) => ({
                                 date: formatDateToShortFormat$2(point.date, activeUsersStatsDateFilter.activeFilter === 'today'),
                                 value: point.value,
                             })), margin: { top: 5, right: 5, left: 0, bottom: 5 }, children: [jsx(CartesianGrid, { strokeDasharray: "3 3" }), jsx(XAxis, { dataKey: "date", tick: { fontSize: 8, textAnchor: 'end' }, angle: -45, interval: Math.floor(Number((_d = activeUsers === null || activeUsers === void 0 ? void 0 : activeUsers.points) === null || _d === void 0 ? void 0 : _d.length) / 31) || 0 }), jsx(YAxis, { width: 30, domain: [0, 'dataMax'], allowDecimals: false }), jsx(Tooltip, { content: ({ active, payload, label }) => {
@@ -158229,9 +158233,9 @@ const useTopics = ({ tenantKey, mentorId, usergroupIds, }) => {
 function AnalyticsTopicsStats({ tenantKey, mentorId, selectedMentorId, usergroupIds, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     const currentMentorId = selectedMentorId || mentorId;
-    const { topicsStats, isLoadingTopicsStats, conversationsStats, conversationsStatsDateFilter, setConversationsStatsDateFilter, averageRatingStats, averageRatingDateFilter, setAverageRatingDateFilter, topicsDetailsStats, topicsDetailsDateFilter, setTopicsDetailsDateFilter, } = useTopics({ tenantKey, mentorId: currentMentorId, usergroupIds });
+    const { topicsStats, isLoadingTopicsStats, conversationsStats, isLoadingConversationsStats, conversationsStatsDateFilter, setConversationsStatsDateFilter, averageRatingStats, averageRatingDateFilter, setAverageRatingDateFilter, topicsDetailsStats, isLoadingTopicsDetailsStats, topicsDetailsDateFilter, setTopicsDetailsDateFilter, } = useTopics({ tenantKey, mentorId: currentMentorId, usergroupIds });
     const averageRatingDisplayed = ((_a = averageRatingStats === null || averageRatingStats === void 0 ? void 0 : averageRatingStats.points) === null || _a === void 0 ? void 0 : _a.length) && ((_b = averageRatingStats === null || averageRatingStats === void 0 ? void 0 : averageRatingStats.points) === null || _b === void 0 ? void 0 : _b.length) > 0;
-    return (jsxs("div", { className: "space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6", children: [jsx(StatCard, { title: "Topics", value: ((_c = topicsStats === null || topicsStats === void 0 ? void 0 : topicsStats.topics) === null || _c === void 0 ? void 0 : _c.this_month) || 0, loading: isLoadingTopicsStats, percentage: ((_d = topicsStats === null || topicsStats === void 0 ? void 0 : topicsStats.topics) === null || _d === void 0 ? void 0 : _d.percentage_change) || 0 }), jsx(StatCard, { title: "Conversations", value: ((_e = topicsStats === null || topicsStats === void 0 ? void 0 : topicsStats.conversations) === null || _e === void 0 ? void 0 : _e.this_month) || 0, loading: isLoadingTopicsStats, percentage: ((_f = topicsStats === null || topicsStats === void 0 ? void 0 : topicsStats.conversations) === null || _f === void 0 ? void 0 : _f.percentage_change) || 0 }), jsx(StatCard, { title: "Messages", value: ((_g = topicsStats === null || topicsStats === void 0 ? void 0 : topicsStats.messages) === null || _g === void 0 ? void 0 : _g.this_month) || 0, loading: isLoadingTopicsStats, percentage: ((_h = topicsStats === null || topicsStats === void 0 ? void 0 : topicsStats.messages) === null || _h === void 0 ? void 0 : _h.percentage_change) || 0 })] }), jsxs("div", { className: cn('grid grid-cols-1 lg:grid-cols-2 gap-5', !averageRatingDisplayed ? 'lg:grid-cols-1' : ''), children: [jsx(ChartCardWrapper, { title: "Conversations", label: "Conversations", filters: conversationsStatsDateFilter, setOutsideFilters: setConversationsStatsDateFilter, children: ((_j = conversationsStats === null || conversationsStats === void 0 ? void 0 : conversationsStats.points) === null || _j === void 0 ? void 0 : _j.length) && ((_k = conversationsStats === null || conversationsStats === void 0 ? void 0 : conversationsStats.points) === null || _k === void 0 ? void 0 : _k.length) > 0 ? (jsxs(LineChart, { data: (_l = conversationsStats === null || conversationsStats === void 0 ? void 0 : conversationsStats.points) === null || _l === void 0 ? void 0 : _l.map((point) => ({
+    return (jsxs("div", { className: "space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6", children: [jsx(StatCard, { title: "Topics", value: ((_c = topicsStats === null || topicsStats === void 0 ? void 0 : topicsStats.topics) === null || _c === void 0 ? void 0 : _c.this_month) || 0, loading: isLoadingTopicsStats, percentage: ((_d = topicsStats === null || topicsStats === void 0 ? void 0 : topicsStats.topics) === null || _d === void 0 ? void 0 : _d.percentage_change) || 0 }), jsx(StatCard, { title: "Conversations", value: ((_e = topicsStats === null || topicsStats === void 0 ? void 0 : topicsStats.conversations) === null || _e === void 0 ? void 0 : _e.this_month) || 0, loading: isLoadingTopicsStats, percentage: ((_f = topicsStats === null || topicsStats === void 0 ? void 0 : topicsStats.conversations) === null || _f === void 0 ? void 0 : _f.percentage_change) || 0 }), jsx(StatCard, { title: "Messages", value: ((_g = topicsStats === null || topicsStats === void 0 ? void 0 : topicsStats.messages) === null || _g === void 0 ? void 0 : _g.this_month) || 0, loading: isLoadingTopicsStats, percentage: ((_h = topicsStats === null || topicsStats === void 0 ? void 0 : topicsStats.messages) === null || _h === void 0 ? void 0 : _h.percentage_change) || 0 })] }), jsxs("div", { className: cn('grid grid-cols-1 lg:grid-cols-2 gap-5', !averageRatingDisplayed ? 'lg:grid-cols-1' : ''), children: [jsx(ChartCardWrapper, { title: "Conversations", label: "Conversations", filters: conversationsStatsDateFilter, setOutsideFilters: setConversationsStatsDateFilter, children: isLoadingConversationsStats ? (jsx(ChartLoading, {})) : ((_j = conversationsStats === null || conversationsStats === void 0 ? void 0 : conversationsStats.points) === null || _j === void 0 ? void 0 : _j.length) && ((_k = conversationsStats === null || conversationsStats === void 0 ? void 0 : conversationsStats.points) === null || _k === void 0 ? void 0 : _k.length) > 0 ? (jsxs(LineChart, { data: (_l = conversationsStats === null || conversationsStats === void 0 ? void 0 : conversationsStats.points) === null || _l === void 0 ? void 0 : _l.map((point) => ({
                                 date: formatDateToShortFormat$2(point.date, conversationsStatsDateFilter.activeFilter === 'today'),
                                 value: point.value,
                             })), margin: { top: 5, right: 5, left: 0, bottom: 5 }, children: [jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#f0f0f0", vertical: false }), jsx(XAxis, { dataKey: "date", tick: { fontSize: 8, textAnchor: 'end' }, angle: -45, interval: Math.floor(Number((_m = conversationsStats === null || conversationsStats === void 0 ? void 0 : conversationsStats.points) === null || _m === void 0 ? void 0 : _m.length) / 31) || 0 }), jsx(YAxis, { tick: { fontSize: 10 }, width: 30, allowDecimals: false }), jsx(Tooltip, { content: ({ active, payload, label }) => {
@@ -158259,7 +158263,7 @@ function AnalyticsTopicsStats({ tenantKey, mentorId, selectedMentorId, usergroup
                                         stroke: '#38A1E5',
                                         strokeWidth: 2,
                                         fill: 'white',
-                                    } })] })) : (jsx(EmptyStats, {})) })) : null] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(ChartCardWrapper, { title: "Topics Details", label: "Messages", filters: topicsDetailsDateFilter, setOutsideFilters: setTopicsDetailsDateFilter, children: ((_s = topicsDetailsStats === null || topicsDetailsStats === void 0 ? void 0 : topicsDetailsStats.results) === null || _s === void 0 ? void 0 : _s.length) && ((_t = topicsDetailsStats === null || topicsDetailsStats === void 0 ? void 0 : topicsDetailsStats.results) === null || _t === void 0 ? void 0 : _t.length) > 0 ? (jsxs(BarChart, { data: (_u = topicsDetailsStats === null || topicsDetailsStats === void 0 ? void 0 : topicsDetailsStats.results) === null || _u === void 0 ? void 0 : _u.map((result) => ({
+                                    } })] })) : (jsx(EmptyStats, {})) })) : null] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(ChartCardWrapper, { title: "Topics Details", label: "Messages", filters: topicsDetailsDateFilter, setOutsideFilters: setTopicsDetailsDateFilter, children: isLoadingTopicsDetailsStats ? (jsx(ChartLoading, {})) : ((_s = topicsDetailsStats === null || topicsDetailsStats === void 0 ? void 0 : topicsDetailsStats.results) === null || _s === void 0 ? void 0 : _s.length) && ((_t = topicsDetailsStats === null || topicsDetailsStats === void 0 ? void 0 : topicsDetailsStats.results) === null || _t === void 0 ? void 0 : _t.length) > 0 ? (jsxs(BarChart, { data: (_u = topicsDetailsStats === null || topicsDetailsStats === void 0 ? void 0 : topicsDetailsStats.results) === null || _u === void 0 ? void 0 : _u.map((result) => ({
                             topic: result.name,
                             value: result.messages,
                         })), layout: "vertical", margin: { top: 5, right: 30, left: 20, bottom: 5 }, children: [jsx(CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), jsx(XAxis, { type: "number", tick: { fontSize: 10 }, allowDecimals: false, domain: [0, 'dataMax'] }), jsx(YAxis, { dataKey: "topic", type: "category", tick: { fontSize: 10 }, interval: 0, width: 120 }), jsx(Tooltip, { content: ({ active, payload, label }) => {
@@ -158438,9 +158442,9 @@ const useFinancial = ({ tenantKey, mentorId, usergroupIds, }) => {
 };
 
 function AnalyticsFinancialStats({ tenantKey, mentorId, selectedMentorId, usergroupIds, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const currentMentorId = selectedMentorId || mentorId;
-    const { weeklyCostData, isLoadingWeeklyCostData, monthlyCostData, isLoadingMonthlyCostData, totalCostData, isLoadingTotalCostData, detailedCostPerDayData, detailedCostPerDayFilters, setDetailedCostPerDayFilters, detailedCostPerProviderData, detailedCostPerProviderFilters, setDetailedCostPerProviderFilters, detailedCostPerUserData, detailedCostPerUserFilters, setDetailedCostPerUserFilters, costPerUserPage, setCostPerUserPage, costPerUserLimit, providerColors, detailedLLMCostData, detailedLLMCostFilters, setDetailedLLMCostFilters, } = useFinancial({ tenantKey, mentorId: currentMentorId, usergroupIds });
+    const { weeklyCostData, isLoadingWeeklyCostData, monthlyCostData, isLoadingMonthlyCostData, totalCostData, isLoadingTotalCostData, detailedCostPerDayData, isLoadingDetailedCostPerDayData, detailedCostPerDayFilters, setDetailedCostPerDayFilters, detailedCostPerProviderData, isLoadingDetailedCostPerProviderData, detailedCostPerProviderFilters, setDetailedCostPerProviderFilters, detailedCostPerUserData, isLoadingDetailedCostPerUserData, detailedCostPerUserFilters, setDetailedCostPerUserFilters, costPerUserPage, setCostPerUserPage, costPerUserLimit, providerColors, detailedLLMCostData, isLoadingDetailedLLMCostData, detailedLLMCostFilters, setDetailedLLMCostFilters, } = useFinancial({ tenantKey, mentorId: currentMentorId, usergroupIds });
     // Pagination handlers
     const handleFirstPage = () => {
         setCostPerUserPage(1);
@@ -158495,7 +158499,7 @@ function AnalyticsFinancialStats({ tenantKey, mentorId, selectedMentorId, usergr
         }
         return pages;
     };
-    return (jsxs("div", { className: "space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6", children: [jsx(StatCard, { loading: isLoadingWeeklyCostData, title: "Weekly Costs", value: Number((weeklyCostData === null || weeklyCostData === void 0 ? void 0 : weeklyCostData.value) || 0).toFixed(2), percentage: (weeklyCostData === null || weeklyCostData === void 0 ? void 0 : weeklyCostData.percentage_change) || 0, showDollarSign: true }), jsx(StatCard, { loading: isLoadingMonthlyCostData, title: "Monthly Costs", value: Number((monthlyCostData === null || monthlyCostData === void 0 ? void 0 : monthlyCostData.value) || 0).toFixed(2), percentage: (monthlyCostData === null || monthlyCostData === void 0 ? void 0 : monthlyCostData.percentage_change) || 0, showDollarSign: true }), jsx(StatCard, { loading: isLoadingTotalCostData, title: "Total Costs", value: Number((totalCostData === null || totalCostData === void 0 ? void 0 : totalCostData.value) || 0).toFixed(2), percentage: totalCostData === null || totalCostData === void 0 ? void 0 : totalCostData.percentage_change, showDollarSign: true })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(ChartCardWrapper, { title: "Cost per Day", label: "Cost per Day", filters: detailedCostPerDayFilters, setOutsideFilters: setDetailedCostPerDayFilters, children: ((_a = detailedCostPerDayData === null || detailedCostPerDayData === void 0 ? void 0 : detailedCostPerDayData.overtime) === null || _a === void 0 ? void 0 : _a.length) &&
+    return (jsxs("div", { className: "space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6", children: [jsx(StatCard, { loading: isLoadingWeeklyCostData, title: "Weekly Costs", value: Number((weeklyCostData === null || weeklyCostData === void 0 ? void 0 : weeklyCostData.value) || 0).toFixed(2), percentage: (weeklyCostData === null || weeklyCostData === void 0 ? void 0 : weeklyCostData.percentage_change) || 0, showDollarSign: true }), jsx(StatCard, { loading: isLoadingMonthlyCostData, title: "Monthly Costs", value: Number((monthlyCostData === null || monthlyCostData === void 0 ? void 0 : monthlyCostData.value) || 0).toFixed(2), percentage: (monthlyCostData === null || monthlyCostData === void 0 ? void 0 : monthlyCostData.percentage_change) || 0, showDollarSign: true }), jsx(StatCard, { loading: isLoadingTotalCostData, title: "Total Costs", value: Number((totalCostData === null || totalCostData === void 0 ? void 0 : totalCostData.value) || 0).toFixed(2), percentage: totalCostData === null || totalCostData === void 0 ? void 0 : totalCostData.percentage_change, showDollarSign: true })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(ChartCardWrapper, { title: "Cost per Day", label: "Cost per Day", filters: detailedCostPerDayFilters, setOutsideFilters: setDetailedCostPerDayFilters, children: isLoadingDetailedCostPerDayData ? (jsx(ChartLoading, {})) : ((_a = detailedCostPerDayData === null || detailedCostPerDayData === void 0 ? void 0 : detailedCostPerDayData.overtime) === null || _a === void 0 ? void 0 : _a.length) &&
                         ((_b = detailedCostPerDayData === null || detailedCostPerDayData === void 0 ? void 0 : detailedCostPerDayData.overtime) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxs(BarChart, { data: detailedCostPerDayData.overtime.map((item) => ({
                             date: formatDateToShortFormat$2(item.date, detailedCostPerDayFilters.activeFilter === 'today'),
                             value: item.value,
@@ -158505,10 +158509,11 @@ function AnalyticsFinancialStats({ tenantKey, mentorId, selectedMentorId, usergr
                                         return null;
                                     const data = (_a = payload[0]) === null || _a === void 0 ? void 0 : _a.payload;
                                     return (jsxs("div", { className: "bg-background border border-border rounded-md p-3 shadow-lg z-50", style: { borderColor: 'oklch(.922 0 0)' }, role: "tooltip", "aria-label": `Cost details for ${label}`, tabIndex: -1, children: [jsx("div", { className: "font-medium text-foreground mb-2 text-base", children: label }), jsx("div", { className: "space-y-2 text-sm", children: jsxs("div", { className: "flex justify-between items-center", children: [jsx("span", { className: "text-muted-foreground", children: "Cost:" }), jsxs("span", { className: "font-medium text-foreground", children: ["$", (Number(data === null || data === void 0 ? void 0 : data.value) || 0).toFixed(3)] })] }) })] }));
-                                }, cursor: { fill: 'rgba(0, 0, 0, 0.05)' }, wrapperStyle: { outline: 'none' } }), jsx(Bar, { dataKey: "value", fill: "#38A1E5", radius: [5, 5, 5, 5], barSize: 30 })] })) : (jsx(EmptyStats, {})) }) }), jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-5", children: [jsx(ChartCardWrapper, { title: "Cost by Provider", label: "Cost by Provider", filters: detailedCostPerProviderFilters, setOutsideFilters: setDetailedCostPerProviderFilters, children: jsxs(PieChart, { children: [jsx(Pie, { data: (_d = detailedCostPerProviderData === null || detailedCostPerProviderData === void 0 ? void 0 : detailedCostPerProviderData.rows) === null || _d === void 0 ? void 0 : _d.map((item) => ({
+                                }, cursor: { fill: 'rgba(0, 0, 0, 0.05)' }, wrapperStyle: { outline: 'none' } }), jsx(Bar, { dataKey: "value", fill: "#38A1E5", radius: [5, 5, 5, 5], barSize: 30 })] })) : (jsx(EmptyStats, {})) }) }), jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-5", children: [jsx(ChartCardWrapper, { title: "Cost by Provider", label: "Cost by Provider", filters: detailedCostPerProviderFilters, setOutsideFilters: setDetailedCostPerProviderFilters, children: isLoadingDetailedCostPerProviderData ? (jsx(ChartLoading, {})) : ((_d = detailedCostPerProviderData === null || detailedCostPerProviderData === void 0 ? void 0 : detailedCostPerProviderData.rows) === null || _d === void 0 ? void 0 : _d.length) &&
+                            ((_e = detailedCostPerProviderData === null || detailedCostPerProviderData === void 0 ? void 0 : detailedCostPerProviderData.rows) === null || _e === void 0 ? void 0 : _e.length) > 0 ? (jsxs(PieChart, { children: [jsx(Pie, { data: (_f = detailedCostPerProviderData === null || detailedCostPerProviderData === void 0 ? void 0 : detailedCostPerProviderData.rows) === null || _f === void 0 ? void 0 : _f.map((item) => ({
                                         name: item.provider,
                                         value: item.total_cost,
-                                    })), cx: "50%", cy: "50%", innerRadius: 60, outerRadius: 80, paddingAngle: 1, dataKey: "value", label: false, startAngle: 90, endAngle: -270, children: (_e = detailedCostPerProviderData === null || detailedCostPerProviderData === void 0 ? void 0 : detailedCostPerProviderData.rows) === null || _e === void 0 ? void 0 : _e.map((_, index) => {
+                                    })), cx: "50%", cy: "50%", innerRadius: 60, outerRadius: 80, paddingAngle: 1, dataKey: "value", label: false, startAngle: 90, endAngle: -270, children: (_g = detailedCostPerProviderData === null || detailedCostPerProviderData === void 0 ? void 0 : detailedCostPerProviderData.rows) === null || _g === void 0 ? void 0 : _g.map((_, index) => {
                                         var _a;
                                         return (jsx(Cell, { fill: (_a = providerColors[index]) !== null && _a !== void 0 ? _a : '#38A1E5', strokeWidth: 0, style: { transition: 'all 0.3s' } }, `cell-${index}`));
                                     }) }), jsx(Legend, { verticalAlign: "bottom", height: 36, iconType: "circle", iconSize: 10, wrapperStyle: { paddingTop: '0px' }, fontSize: 13 }), jsx(Tooltip, { content: ({ active, payload, label }) => {
@@ -158517,17 +158522,18 @@ function AnalyticsFinancialStats({ tenantKey, mentorId, selectedMentorId, usergr
                                             return null;
                                         const data = (_a = payload[0]) === null || _a === void 0 ? void 0 : _a.payload;
                                         return (jsxs("div", { className: "bg-background border border-border rounded-md p-3 shadow-lg z-[99999999]", style: { borderColor: 'oklch(.922 0 0)' }, role: "tooltip", "aria-label": `Provider cost details for ${label}`, tabIndex: -1, children: [jsx("div", { className: "font-medium text-foreground mb-2 text-base", children: label }), jsx("div", { className: "space-y-2 text-sm", children: jsxs("div", { className: "flex justify-between items-center", children: [jsxs("span", { className: "text-muted-foreground", children: [data === null || data === void 0 ? void 0 : data.name, ":"] }), jsxs("span", { className: "font-medium text-foreground", children: ["$", (_b = data === null || data === void 0 ? void 0 : data.value) === null || _b === void 0 ? void 0 : _b.toFixed(2)] })] }) })] }));
-                                    }, wrapperStyle: { outline: 'none' } })] }) }), jsx(ChartCardWrapper, { title: "Cost by LLM", label: "Cost by LLM", filters: detailedLLMCostFilters, setOutsideFilters: setDetailedLLMCostFilters, children: ((_f = detailedLLMCostData === null || detailedLLMCostData === void 0 ? void 0 : detailedLLMCostData.rows) === null || _f === void 0 ? void 0 : _f.length) && ((_g = detailedLLMCostData === null || detailedLLMCostData === void 0 ? void 0 : detailedLLMCostData.rows) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (jsxs(BarChart, { data: (_h = detailedLLMCostData === null || detailedLLMCostData === void 0 ? void 0 : detailedLLMCostData.rows) === null || _h === void 0 ? void 0 : _h.map((item) => ({
+                                    }, wrapperStyle: { outline: 'none' } })] })) : (jsx(EmptyStats, {})) }), jsx(ChartCardWrapper, { title: "Cost by LLM", label: "Cost by LLM", filters: detailedLLMCostFilters, setOutsideFilters: setDetailedLLMCostFilters, children: isLoadingDetailedLLMCostData ? (jsx(ChartLoading, {})) : ((_h = detailedLLMCostData === null || detailedLLMCostData === void 0 ? void 0 : detailedLLMCostData.rows) === null || _h === void 0 ? void 0 : _h.length) && ((_j = detailedLLMCostData === null || detailedLLMCostData === void 0 ? void 0 : detailedLLMCostData.rows) === null || _j === void 0 ? void 0 : _j.length) > 0 ? (jsxs(BarChart, { data: (_k = detailedLLMCostData === null || detailedLLMCostData === void 0 ? void 0 : detailedLLMCostData.rows) === null || _k === void 0 ? void 0 : _k.map((item) => ({
                                 name: item.llm_model,
                                 value: item.total_cost,
-                            })), margin: { top: 5, right: 5, left: 20, bottom: 5 }, children: [jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#f0f0f0" }), jsx(XAxis, { dataKey: "name", tick: { fontSize: 9, textAnchor: 'end' }, angle: -45, height: 50, interval: Math.floor(Number((_j = detailedLLMCostData === null || detailedLLMCostData === void 0 ? void 0 : detailedLLMCostData.rows) === null || _j === void 0 ? void 0 : _j.length) / 31) || 0 }), jsx(YAxis, { tick: { fontSize: 10 }, width: 30, tickFormatter: (value) => `$${value.toFixed(3)}` }), jsx(Tooltip, { content: ({ active, payload, label }) => {
+                            })), margin: { top: 5, right: 5, left: 20, bottom: 5 }, children: [jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#f0f0f0" }), jsx(XAxis, { dataKey: "name", tick: { fontSize: 9, textAnchor: 'end' }, angle: -45, height: 50, interval: Math.floor(Number((_l = detailedLLMCostData === null || detailedLLMCostData === void 0 ? void 0 : detailedLLMCostData.rows) === null || _l === void 0 ? void 0 : _l.length) / 31) || 0 }), jsx(YAxis, { tick: { fontSize: 10 }, width: 30, tickFormatter: (value) => `$${value.toFixed(3)}` }), jsx(Tooltip, { content: ({ active, payload, label }) => {
                                         var _a, _b;
                                         if (!active || !(payload === null || payload === void 0 ? void 0 : payload.length))
                                             return null;
                                         const data = (_a = payload[0]) === null || _a === void 0 ? void 0 : _a.payload;
                                         return (jsxs("div", { className: "bg-background border border-border rounded-md p-3 shadow-lg z-50", style: { borderColor: 'oklch(.922 0 0)' }, role: "tooltip", "aria-label": `LLM cost details for ${label}`, tabIndex: -1, children: [jsx("div", { className: "font-medium text-foreground mb-2 text-base", children: label }), jsx("div", { className: "space-y-2 text-sm", children: jsxs("div", { className: "flex justify-between items-center", children: [jsx("span", { className: "text-muted-foreground", children: "Total Cost:" }), jsxs("span", { className: "font-medium text-foreground", children: ["$", (_b = data === null || data === void 0 ? void 0 : data.value) === null || _b === void 0 ? void 0 : _b.toFixed(3)] })] }) })] }));
-                                    }, cursor: { fill: 'rgba(0, 0, 0, 0.05)' }, wrapperStyle: { outline: 'none' } }), jsx(Bar, { dataKey: "value", fill: "#38A1E5", radius: [5, 5, 5, 5], barSize: 25 })] })) : (jsx(EmptyStats, {})) })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(ChartCardWrapper, { title: "Cost per User", label: "Cost per User", filters: detailedCostPerUserFilters, setOutsideFilters: setDetailedCostPerUserFilters, overflowAuto: true, height: "450px", children: jsxs("div", { className: "space-y-4", children: [jsx("div", { className: "rounded-md", style: { borderColor: 'oklch(.922 0 0)', borderWidth: '1px' }, children: jsxs(Table, { children: [jsx(TableHeader, { children: jsxs(TableRow, { className: "h-[48px]", style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx(TableHead, { className: "w-[250px]", children: "User Email" }), jsx(TableHead, { className: "w-[120px]", children: "Total Cost" }), jsx(TableHead, { children: "Sessions" }), jsx(TableHead, { className: "text-right", children: "Last Active" })] }) }), jsx(TableBody, { children: (_k = detailedCostPerUserData === null || detailedCostPerUserData === void 0 ? void 0 : detailedCostPerUserData.rows) === null || _k === void 0 ? void 0 : _k.map((user, index) => (jsxs(TableRow, { className: cn(index % 2 === 0 ? 'bg-gray-50' : '', 'h-[48px]'), style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx(TableCell, { className: "font-medium", children: jsx("div", { className: "flex items-center", children: (user === null || user === void 0 ? void 0 : user.email) || (user === null || user === void 0 ? void 0 : user.username) || 'Anonymous' }) }), jsxs(TableCell, { className: "font-medium", children: ["$", Number(user.total_cost || 0).toFixed(2)] }), jsx(TableCell, { children: user.sessions }), jsx(TableCell, { className: "text-right", children: user.last_active ? formatRelativeTime$2(user.last_active) : '-' })] }, index))) })] }) }), (!((_l = detailedCostPerUserData === null || detailedCostPerUserData === void 0 ? void 0 : detailedCostPerUserData.rows) === null || _l === void 0 ? void 0 : _l.length) ||
-                                ((_m = detailedCostPerUserData === null || detailedCostPerUserData === void 0 ? void 0 : detailedCostPerUserData.rows) === null || _m === void 0 ? void 0 : _m.length) === 0) && (jsx("div", { className: "h-[60px]", children: jsx(EmptyStats, {}) })), detailedCostPerUserData && detailedCostPerUserData.total_pages > 1 && (jsxs("div", { className: "flex items-center justify-between py-3", children: [jsxs("div", { className: "text-sm text-gray-700", children: ["Showing ", (costPerUserPage - 1) * costPerUserLimit + 1, " to", ' ', Math.min(costPerUserPage * costPerUserLimit, detailedCostPerUserData.total_records), ' ', "of ", detailedCostPerUserData.total_records, " results"] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 p-2 !w-auto !inline-flex bg-transparent", onClick: handleFirstPage, disabled: costPerUserPage === 1, children: [jsx("span", { className: "sr-only", children: "Go to first page" }), jsx(ChevronsLeft, { className: "h-4 w-4" })] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 p-2 !w-auto !inline-flex bg-transparent", onClick: handlePreviousPage, disabled: costPerUserPage === 1, children: [jsx("span", { className: "sr-only", children: "Go to previous page" }), jsx(ChevronLeft, { className: "h-4 w-4" })] }), generatePageNumbers().map((page, index) => (jsx(React__default.Fragment, { children: page === '...' ? (jsx("span", { className: "px-2 text-gray-500", children: "..." })) : (jsx(Button$1, { variant: costPerUserPage === page ? 'default' : 'outline', size: "sm", className: `h-8 p-3 !w-auto !inline-flex ${costPerUserPage === page ? 'bg-blue-50 text-blue-600' : 'bg-transparent'}`, onClick: () => setCostPerUserPage(page), children: page })) }, index))), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 p-2 !w-auto !inline-flex bg-transparent", onClick: handleNextPage, disabled: costPerUserPage === detailedCostPerUserData.total_pages, children: [jsx("span", { className: "sr-only", children: "Go to next page" }), jsx(ChevronRight, { className: "h-4 w-4" })] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 p-2 !w-auto !inline-flex bg-transparent", onClick: handleLastPage, disabled: costPerUserPage === detailedCostPerUserData.total_pages, children: [jsx("span", { className: "sr-only", children: "Go to last page" }), jsx(ChevronsRight, { className: "h-4 w-4" })] })] })] }))] }) }) })] }));
+                                    }, cursor: { fill: 'rgba(0, 0, 0, 0.05)' }, wrapperStyle: { outline: 'none' } }), jsx(Bar, { dataKey: "value", fill: "#38A1E5", radius: [5, 5, 5, 5], barSize: 25 })] })) : (jsx(EmptyStats, {})) })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(ChartCardWrapper, { title: "Cost per User", label: "Cost per User", filters: detailedCostPerUserFilters, setOutsideFilters: setDetailedCostPerUserFilters, overflowAuto: true, height: "450px", children: jsxs("div", { className: "space-y-4", children: [jsx("div", { className: "rounded-md", style: { borderColor: 'oklch(.922 0 0)', borderWidth: '1px' }, children: jsxs(Table, { children: [jsx(TableHeader, { children: jsxs(TableRow, { className: "h-[48px]", style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx(TableHead, { className: "w-[250px]", children: "User Email" }), jsx(TableHead, { className: "w-[120px]", children: "Total Cost" }), jsx(TableHead, { children: "Sessions" }), jsx(TableHead, { className: "text-right", children: "Last Active" })] }) }), jsx(TableBody, { children: (_m = detailedCostPerUserData === null || detailedCostPerUserData === void 0 ? void 0 : detailedCostPerUserData.rows) === null || _m === void 0 ? void 0 : _m.map((user, index) => (jsxs(TableRow, { className: cn(index % 2 === 0 ? 'bg-gray-50' : '', 'h-[48px]'), style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx(TableCell, { className: "font-medium", children: jsx("div", { className: "flex items-center", children: (user === null || user === void 0 ? void 0 : user.email) || (user === null || user === void 0 ? void 0 : user.username) || 'Anonymous' }) }), jsxs(TableCell, { className: "font-medium", children: ["$", Number(user.total_cost || 0).toFixed(2)] }), jsx(TableCell, { children: user.sessions }), jsx(TableCell, { className: "text-right", children: user.last_active ? formatRelativeTime$2(user.last_active) : '-' })] }, index))) })] }) }), isLoadingDetailedCostPerUserData && (jsx("div", { className: "h-[60px]", children: jsx(ChartLoading, {}) })), !isLoadingDetailedCostPerUserData &&
+                                (!((_o = detailedCostPerUserData === null || detailedCostPerUserData === void 0 ? void 0 : detailedCostPerUserData.rows) === null || _o === void 0 ? void 0 : _o.length) ||
+                                    ((_p = detailedCostPerUserData === null || detailedCostPerUserData === void 0 ? void 0 : detailedCostPerUserData.rows) === null || _p === void 0 ? void 0 : _p.length) === 0) && (jsx("div", { className: "h-[60px]", children: jsx(EmptyStats, {}) })), detailedCostPerUserData && detailedCostPerUserData.total_pages > 1 && (jsxs("div", { className: "flex items-center justify-between py-3", children: [jsxs("div", { className: "text-sm text-gray-700", children: ["Showing ", (costPerUserPage - 1) * costPerUserLimit + 1, " to", ' ', Math.min(costPerUserPage * costPerUserLimit, detailedCostPerUserData.total_records), ' ', "of ", detailedCostPerUserData.total_records, " results"] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 p-2 !w-auto !inline-flex bg-transparent", onClick: handleFirstPage, disabled: costPerUserPage === 1, children: [jsx("span", { className: "sr-only", children: "Go to first page" }), jsx(ChevronsLeft, { className: "h-4 w-4" })] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 p-2 !w-auto !inline-flex bg-transparent", onClick: handlePreviousPage, disabled: costPerUserPage === 1, children: [jsx("span", { className: "sr-only", children: "Go to previous page" }), jsx(ChevronLeft, { className: "h-4 w-4" })] }), generatePageNumbers().map((page, index) => (jsx(React__default.Fragment, { children: page === '...' ? (jsx("span", { className: "px-2 text-gray-500", children: "..." })) : (jsx(Button$1, { variant: costPerUserPage === page ? 'default' : 'outline', size: "sm", className: `h-8 p-3 !w-auto !inline-flex ${costPerUserPage === page ? 'bg-blue-50 text-blue-600' : 'bg-transparent'}`, onClick: () => setCostPerUserPage(page), children: page })) }, index))), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 p-2 !w-auto !inline-flex bg-transparent", onClick: handleNextPage, disabled: costPerUserPage === detailedCostPerUserData.total_pages, children: [jsx("span", { className: "sr-only", children: "Go to next page" }), jsx(ChevronRight, { className: "h-4 w-4" })] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 p-2 !w-auto !inline-flex bg-transparent", onClick: handleLastPage, disabled: costPerUserPage === detailedCostPerUserData.total_pages, children: [jsx("span", { className: "sr-only", children: "Go to last page" }), jsx(ChevronsRight, { className: "h-4 w-4" })] })] })] }))] }) }) })] }));
 }
 
 const useTranscripts = ({ tenantKey, mentorId, usergroupIds, }) => {
@@ -194219,6 +194225,11 @@ const useCourses = ({ tenantKey, mentorId, courseId, }) => {
     const [coursesListSearch, setCoursesListSearch] = useState('');
     const [debouncedSearch, setDebouncedSearch] = useState('');
     const isInitialMount = React__default.useRef(true);
+    const [courseEnrollmentsPage, setCourseEnrollmentsPage] = useState(1);
+    const [courseEnrollmentsLimit] = useState(20);
+    const [courseEnrollmentsSearch, setCourseEnrollmentsSearch] = useState('');
+    const [debouncedCourseEnrollmentsSearch, setDebouncedCourseEnrollmentsSearch] = useState('');
+    const isInitialMountCourseEnrollments = React__default.useRef(true);
     // Debounce search input
     useEffect(() => {
         // Skip debounce on initial mount
@@ -194232,9 +194243,24 @@ const useCourses = ({ tenantKey, mentorId, courseId, }) => {
         }, 300);
         return () => clearTimeout(timer);
     }, [coursesListSearch]);
+    // Debounce course enrollments search input
+    useEffect(() => {
+        if (isInitialMountCourseEnrollments.current) {
+            isInitialMountCourseEnrollments.current = false;
+            return;
+        }
+        const timer = setTimeout(() => {
+            setDebouncedCourseEnrollmentsSearch(courseEnrollmentsSearch);
+            setCourseEnrollmentsPage(1);
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [courseEnrollmentsSearch]);
     const handleSearchInputChange = (e) => {
         setCoursesListSearch(e.target.value);
     };
+    const handleCourseEnrollmentsSearchInputChange = (e) => {
+        setCourseEnrollmentsSearch(e.target.value);
+    };
     // Prepare params for content analytics query (courses list and stats)
     const contentAnalyticsParams = useMemo(() => {
         var _a, _b;
@@ -194271,11 +194297,20 @@ const useCourses = ({ tenantKey, mentorId, courseId, }) => {
                 include_overtime: true,
                 platform_key: tenantKey,
                 mentor_unique_id: mentorId,
-                limit: 20,
-                page: 1,
+                limit: courseEnrollmentsLimit,
+                page: courseEnrollmentsPage,
+                ...(debouncedCourseEnrollmentsSearch && { search: debouncedCourseEnrollmentsSearch }),
             }
             : null;
-    }, [courseId, timeSpentStatsDateFilter, tenantKey, mentorId]);
+    }, [
+        courseId,
+        timeSpentStatsDateFilter,
+        tenantKey,
+        mentorId,
+        courseEnrollmentsLimit,
+        courseEnrollmentsPage,
+        debouncedCourseEnrollmentsSearch,
+    ]);
     // Query for courses list and summary
     const { data: contentAnalyticsData, isLoading: isLoadingContentAnalytics, isFetching: isFetchingContentAnalytics, } = useGetContentAnalyticsQuery(contentAnalyticsParams);
     // Query for course details (only when courseId is provided)
@@ -194360,11 +194395,13 @@ const useCourses = ({ tenantKey, mentorId, courseId, }) => {
         }
         return {
             enrollments: courseDetailsData.learners.map((learner) => ({
+                username: learner.username,
                 name: learner.name,
                 email: learner.email,
                 time_spent: 0, // This might need to be calculated or come from another field
                 progress: learner.completion_percentage || 0,
                 grade: learner.rating || 'N/A',
+                enrollment_date: learner.enrollment_date,
                 last_active_on: learner.last_activity,
             })),
             total: courseDetailsData.pagination.count,
@@ -194391,6 +194428,12 @@ const useCourses = ({ tenantKey, mentorId, courseId, }) => {
         coursesListSearch,
         handleSearchInputChange,
         coursesPagination: contentAnalyticsData === null || contentAnalyticsData === void 0 ? void 0 : contentAnalyticsData.pagination,
+        courseInfo: courseDetailsData === null || courseDetailsData === void 0 ? void 0 : courseDetailsData.content_info,
+        courseEnrollmentsPage,
+        setCourseEnrollmentsPage,
+        courseEnrollmentsSearch,
+        handleCourseEnrollmentsSearchInputChange,
+        courseEnrollmentsPagination: courseDetailsData === null || courseDetailsData === void 0 ? void 0 : courseDetailsData.pagination,
     };
 };
 
@@ -194426,7 +194469,7 @@ function AnalyticsCourses({ tenantKey, mentorId, selectedMentorId, basePath = ''
     const handleCourseClick = (courseId) => {
         router.push(`${basePath}/courses/${courseId}`);
     };
-    return (jsxs("div", { className: "space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6", children: [jsx(StatCard, { loading: isLoading, title: "Active Courses", value: courseStats.active_courses, percentage: courseStats.active_courses_percentage }), jsx(StatCard, { loading: isLoading, title: "Total Courses", value: courseStats.total_courses, percentage: courseStats.total_courses_percentage }), jsx(StatCard, { loading: isLoading, title: "Enrollments", value: courseStats.enrollments, percentage: courseStats.enrollments_percentage }), jsx(StatCard, { loading: isLoading, title: "Total Learners", value: courseStats.total_learners })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(ChartCardWrapper, { title: "Course Overtime", label: "Time Spent", filters: enrollmentStatsDateFilter, setOutsideFilters: setEnrollmentStatsDateFilter, children: ((_a = enrollmentStats === null || enrollmentStats === void 0 ? void 0 : enrollmentStats.points) === null || _a === void 0 ? void 0 : _a.length) && ((_b = enrollmentStats === null || enrollmentStats === void 0 ? void 0 : enrollmentStats.points) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxs(LineChart, { data: ((_c = enrollmentStats === null || enrollmentStats === void 0 ? void 0 : enrollmentStats.points) === null || _c === void 0 ? void 0 : _c.map((point) => ({
+    return (jsxs("div", { className: "space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6", children: [jsx(StatCard, { loading: isLoading, title: "Active Courses", value: courseStats.active_courses, percentage: courseStats.active_courses_percentage }), jsx(StatCard, { loading: isLoading, title: "Total Courses", value: courseStats.total_courses, percentage: courseStats.total_courses_percentage }), jsx(StatCard, { loading: isLoading, title: "Enrollments", value: courseStats.enrollments, percentage: courseStats.enrollments_percentage }), jsx(StatCard, { loading: isLoading, title: "Total Learners", value: courseStats.total_learners })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(ChartCardWrapper, { title: "Course Overtime", label: "Time Spent", filters: enrollmentStatsDateFilter, setOutsideFilters: setEnrollmentStatsDateFilter, children: isLoading ? (jsx(ChartLoading, {})) : ((_a = enrollmentStats === null || enrollmentStats === void 0 ? void 0 : enrollmentStats.points) === null || _a === void 0 ? void 0 : _a.length) && ((_b = enrollmentStats === null || enrollmentStats === void 0 ? void 0 : enrollmentStats.points) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxs(LineChart, { data: ((_c = enrollmentStats === null || enrollmentStats === void 0 ? void 0 : enrollmentStats.points) === null || _c === void 0 ? void 0 : _c.map((point) => ({
                             date: formatDateToShortFormat$1(point.date, enrollmentStatsDateFilter.activeFilter === 'today'),
                             value: formatSecondsToHours$1(point.value),
                             rawSeconds: point.value,
@@ -194465,8 +194508,120 @@ function AnalyticsCourses({ tenantKey, mentorId, selectedMentorId, basePath = ''
                                                     }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 w-8 p-2 !w-auto !inline-flex bg-transparent", onClick: () => setCoursesListPage(coursesPagination.current_page + 1), disabled: coursesPagination.current_page === coursesPagination.total_pages, "aria-label": "Go to next page", children: [jsx("span", { className: "sr-only", children: "Go to next page" }), jsx(ChevronRight, { className: "h-4 w-4" })] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 w-8 p-2 !w-auto !inline-flex bg-transparent", onClick: () => setCoursesListPage(coursesPagination.total_pages), disabled: coursesPagination.current_page === coursesPagination.total_pages, "aria-label": "Go to last page", children: [jsx("span", { className: "sr-only", children: "Go to last page" }), jsx(ChevronsRight, { className: "h-4 w-4" })] })] }))] })) : (jsx(EmptyStats, { title: "No courses available" }))] })] }) }) })] }));
 }
 
+const COMPLETED_COLOR = '#ED8936';
+const REMAINING_COLOR = '#E5E7EB';
+const formatDate = (value) => {
+    if (!value)
+        return '—';
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return '—';
+    return date.toLocaleDateString();
+};
+const normalizeContentId = (id) => {
+    if (!id)
+        return '';
+    try {
+        return decodeURIComponent(id);
+    }
+    catch (_a) {
+        return id;
+    }
+};
+const fractionToPct = (fraction) => Math.round((fraction !== null && fraction !== void 0 ? fraction : 0) * 100);
+const getPassingPct = (gradeRange) => {
+    if (!gradeRange)
+        return 0;
+    if (typeof gradeRange.Pass === 'number')
+        return Math.round(gradeRange.Pass * 100);
+    const cutoffs = Object.values(gradeRange).filter((value) => typeof value === 'number' && value > 0);
+    return cutoffs.length ? Math.round(Math.min(...cutoffs) * 100) : 0;
+};
+const buildGradeSummary = (edx) => {
+    var _a, _b, _c, _d, _e, _f;
+    const policies = (_b = (_a = edx.grading_policy) === null || _a === void 0 ? void 0 : _a.assignment_policies) !== null && _b !== void 0 ? _b : [];
+    const sections = (_c = edx.section_scores) !== null && _c !== void 0 ? _c : [];
+    const scoresByType = new Map();
+    for (const section of sections) {
+        for (const subsection of (_d = section.subsections) !== null && _d !== void 0 ? _d : []) {
+            if (subsection.has_graded_assignment && subsection.format) {
+                const list = (_e = scoresByType.get(subsection.format)) !== null && _e !== void 0 ? _e : [];
+                list.push((_f = subsection.percent_graded) !== null && _f !== void 0 ? _f : 0);
+                scoresByType.set(subsection.format, list);
+            }
+        }
+    }
+    const footnotes = [];
+    const rows = policies.map((policy) => {
+        var _a;
+        let scores = (_a = scoresByType.get(policy.type)) !== null && _a !== void 0 ? _a : [];
+        if (policy.num_droppable > 0 && scores.length > 0) {
+            scores = [...scores].sort((a, b) => a - b).slice(policy.num_droppable);
+        }
+        const gradeFraction = scores.length
+            ? scores.reduce((sum, value) => sum + value, 0) / scores.length
+            : 0;
+        let footnote;
+        if (policy.num_droppable > 0) {
+            footnotes.push(`The lowest ${policy.num_droppable} ${policy.type} scores are dropped.`);
+            footnote = footnotes.length;
+        }
+        return {
+            type: policy.type,
+            weightPct: Math.round(policy.weight * 100),
+            gradePct: Math.round(gradeFraction * 100),
+            weightedGradePct: Math.round(gradeFraction * policy.weight * 100),
+            footnote,
+        };
+    });
+    return { rows, footnotes };
+};
+function GradeBar({ currentPct, passingPct }) {
+    const clampedCurrent = Math.min(Math.max(currentPct, 0), 100);
+    const clampedPassing = Math.min(Math.max(passingPct, 0), 100);
+    return (jsxs("div", { className: "pt-7 pb-4", children: [jsxs("div", { className: "relative", children: [jsx("div", { className: "absolute -top-7 -translate-x-1/2", style: { left: `${clampedCurrent}%` }, children: jsxs("span", { className: "whitespace-nowrap rounded border border-amber-300 bg-amber-50 px-1.5 py-0.5 text-xs font-semibold text-gray-700", children: [currentPct, "%"] }) }), jsxs("div", { className: "relative h-2 rounded-full bg-gray-200", children: [jsx("div", { className: "absolute left-0 top-0 h-2 rounded-full bg-amber-500", style: { width: `${clampedCurrent}%` } }), jsx("div", { className: "absolute top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-amber-500", style: { left: `${clampedPassing}%` } })] }), jsx("div", { className: "absolute top-3 -translate-x-1/2", style: { left: `${clampedPassing}%` }, children: jsxs("span", { className: "whitespace-nowrap rounded bg-amber-500 px-1.5 py-0.5 text-xs font-semibold text-white", children: [passingPct, "%"] }) })] }), jsxs("div", { className: "mt-10 flex justify-between text-xs text-gray-500", children: [jsx("span", { children: "Current grade" }), jsx("span", { children: "Passing grade" })] })] }));
+}
+function EnrolledUserProgressModal({ open, onOpenChange, username, userName, email, contentId, contentName, tenantKey, metric = 'course', }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const isProgram = metric === 'program';
+    const normalizedId = normalizeContentId(contentId);
+    const { data, isLoading, isFetching } = useGetLearnerDetailsQuery({
+        username,
+        platform_key: tenantKey,
+        metrics: isProgram ? 'programs,time_spent' : 'courses,time_spent',
+        include_edx_progress: true,
+        ...(isProgram ? { program_id: normalizedId } : { course_id: normalizedId }),
+    }, { skip: !open || !username });
+    const item = useMemo(() => {
+        var _a, _b, _c, _d;
+        if (isProgram) {
+            return (_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.programs) === null || _b === void 0 ? void 0 : _b.find((program) => normalizeContentId(program.program_id) === normalizedId);
+        }
+        return (_d = (_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.courses) === null || _d === void 0 ? void 0 : _d.find((course) => normalizeContentId(course.course_id) === normalizedId);
+    }, [(_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.courses, (_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.programs, isProgram, normalizedId]);
+    const gradeSummary = useMemo(() => {
+        const edx = item === null || item === void 0 ? void 0 : item.edx_progress;
+        return (edx === null || edx === void 0 ? void 0 : edx.grading_policy) ? buildGradeSummary(edx) : null;
+    }, [item]);
+    const loading = isLoading || isFetching;
+    const resolvedName = (item === null || item === void 0 ? void 0 : item.name) || contentName;
+    const percentage = Math.round((_d = (_c = item === null || item === void 0 ? void 0 : item.completion) === null || _c === void 0 ? void 0 : _c.completion_percentage) !== null && _d !== void 0 ? _d : 0);
+    const pieData = [
+        { name: 'Completed', value: percentage },
+        { name: 'Remaining', value: Math.max(0, 100 - percentage) },
+    ];
+    const currentGradePct = fractionToPct((_f = (_e = item === null || item === void 0 ? void 0 : item.edx_progress) === null || _e === void 0 ? void 0 : _e.course_grade) === null || _f === void 0 ? void 0 : _f.percent);
+    const passingPct = getPassingPct((_h = (_g = item === null || item === void 0 ? void 0 : item.edx_progress) === null || _g === void 0 ? void 0 : _g.grading_policy) === null || _h === void 0 ? void 0 : _h.grade_range);
+    return (jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxs(DialogContent, { className: "max-w-2xl max-h-[85vh] overflow-y-auto", "aria-label": "Enrolled user progress", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: userName || username || 'Learner progress' }), jsxs(DialogDescription, { children: [email ? `${email} · ` : '', resolvedName || (isProgram ? 'Program progress' : 'Course progress')] })] }), loading ? (jsx("div", { className: "flex items-center justify-center py-12", children: jsx("div", { className: "text-sm text-gray-500", children: "Loading..." }) })) : !item ? (jsx(EmptyStats, { title: "No progress data available" })) : (jsxs("div", { className: "space-y-6", children: [jsxs("div", { className: "relative mx-auto", style: { width: 220, height: 220 }, children: [jsx(ResponsiveContainer, { width: "100%", height: "100%", children: jsx(PieChart, { children: jsxs(Pie, { data: pieData, dataKey: "value", cx: "50%", cy: "50%", innerRadius: 75, outerRadius: 100, startAngle: 90, endAngle: -270, stroke: "none", isAnimationActive: false, children: [jsx(Cell, { fill: COMPLETED_COLOR }), jsx(Cell, { fill: REMAINING_COLOR })] }) }) }), jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none", children: [jsxs("span", { className: "text-3xl font-bold text-gray-700", children: [percentage, "%"] }), jsx("span", { className: "text-sm text-gray-500", children: "completed" })] })] }), jsxs("div", { className: "divide-y divide-[oklch(0.922_0_0)]", children: [jsx(DetailRow, { label: "Status", children: jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${((_j = item.completion) === null || _j === void 0 ? void 0 : _j.passed)
+                                            ? 'bg-green-50 text-green-700'
+                                            : 'bg-gray-100 text-gray-600'}`, children: ((_k = item.completion) === null || _k === void 0 ? void 0 : _k.passed) ? 'Passed' : 'Not passed' }) }), jsx(DetailRow, { label: "Passed on", children: formatDate((_l = item.completion) === null || _l === void 0 ? void 0 : _l.passed_date) }), jsx(DetailRow, { label: "Time spent", children: item.time_spent || '—' }), jsx(DetailRow, { label: "Enrollment date", children: formatDate((_o = (_m = item.enrollment) === null || _m === void 0 ? void 0 : _m.started) !== null && _o !== void 0 ? _o : (_p = item.enrollment) === null || _p === void 0 ? void 0 : _p.created) })] }), ((_s = (_r = (_q = item.edx_progress) === null || _q === void 0 ? void 0 : _q.grading_policy) === null || _r === void 0 ? void 0 : _r.assignment_policies) === null || _s === void 0 ? void 0 : _s.length) ? (jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "rounded-lg border p-4", style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx("h4", { className: "text-sm font-semibold text-gray-900", children: "Grades" }), jsx("p", { className: "text-xs text-gray-500", children: "This represents the weighted grade against the grade needed to pass this course." }), jsx(GradeBar, { currentPct: currentGradePct, passingPct: passingPct })] }), jsxs("div", { className: "flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 px-4 py-3", children: [jsx(TriangleAlert, { className: "mt-0.5 h-4 w-4 shrink-0 text-amber-600" }), jsxs("span", { className: "text-sm font-medium text-gray-800", children: ["A weighted grade of ", passingPct, "% is required to pass in this course"] })] }), jsxs("div", { className: "rounded-lg border p-4 space-y-3", style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx("h4", { className: "text-sm font-semibold text-gray-900", children: "Grade summary" }), jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full border-collapse text-sm", children: [jsx("thead", { children: jsxs("tr", { className: "bg-amber-50 text-[11px] uppercase tracking-wide text-gray-600", children: [jsx("th", { className: "px-3 py-2 text-left font-medium", children: "Assignment type" }), jsx("th", { className: "px-3 py-2 text-right font-medium", children: "Weight" }), jsx("th", { className: "px-3 py-2 text-right font-medium", children: "Grade" }), jsx("th", { className: "px-3 py-2 text-right font-medium", children: "Weighted grade" })] }) }), jsxs("tbody", { children: [gradeSummary === null || gradeSummary === void 0 ? void 0 : gradeSummary.rows.map((row, index) => (jsxs("tr", { className: index % 2 === 0 ? '' : 'bg-gray-50', children: [jsxs("td", { className: "px-3 py-2 text-gray-800", children: [row.type, row.footnote ? (jsx("sup", { className: "ml-0.5 text-amber-500", children: row.footnote })) : null] }), jsxs("td", { className: "px-3 py-2 text-right text-gray-700", children: [row.weightPct, "%"] }), jsxs("td", { className: "px-3 py-2 text-right text-gray-700", children: [row.gradePct, "%"] }), jsxs("td", { className: "px-3 py-2 text-right font-semibold text-amber-600", children: [row.weightedGradePct, "%"] })] }, row.type))), jsxs("tr", { className: "border-l-2 border-amber-400 bg-amber-50", children: [jsx("td", { className: "px-3 py-2 font-medium text-gray-800", colSpan: 3, children: "Current weighted grade summary" }), jsxs("td", { className: "px-3 py-2 text-right font-bold text-amber-600", children: [currentGradePct, "%"] })] })] })] }) }), gradeSummary && gradeSummary.footnotes.length > 0 ? (jsx("div", { className: "space-y-1", children: gradeSummary.footnotes.map((note, index) => (jsxs("p", { className: "text-xs text-gray-500", children: [jsx("sup", { className: "text-amber-500", children: index + 1 }), " ", note] }, note))) })) : null] })] })) : null] }))] }) }));
+}
+function DetailRow({ label, children }) {
+    return (jsxs("div", { className: "flex items-center justify-between gap-4 py-2", children: [jsx("span", { className: "text-sm text-gray-500", children: label }), jsx("span", { className: "text-sm font-medium text-gray-900 text-right", children: children })] }));
+}
+
 // Utility function to format time spent (in minutes) to readable format
-const formatTimeSpent$1 = (minutes) => {
+const formatTimeSpent = (minutes) => {
     if (minutes < 60) {
         return `${minutes}m`;
     }
@@ -194475,16 +194630,47 @@ const formatTimeSpent$1 = (minutes) => {
     return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
 };
 function AnalyticsCourseDetail({ tenantKey, mentorId, selectedMentorId, courseId, courseName, onBack, }) {
-    var _a;
+    var _a, _b;
     const currentMentorId = selectedMentorId || mentorId;
-    const { courseDetailStats, isLoading, courseEnrollments } = useCourses({
+    const { courseDetailStats, isLoading, courseEnrollments, courseEnrollmentsSearch, handleCourseEnrollmentsSearchInputChange, setCourseEnrollmentsPage, courseEnrollmentsPagination, courseInfo, } = useCourses({
         tenantKey,
         mentorId: currentMentorId,
         courseId,
     });
-    return (jsxs("div", { className: "space-y-8", children: [onBack && (jsxs(Button$1, { variant: "ghost", onClick: onBack, className: "mb-4", "aria-label": "Go back to courses list", children: [jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Back to Courses"] })), courseName && (jsx("div", { className: "mb-4", children: jsx("h2", { className: "text-2xl font-semibold text-gray-900", children: courseName }) })), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6", children: [jsx(StatCard, { loading: isLoading, title: "Active Enrollments", value: courseDetailStats.active_enrollments, percentage: courseDetailStats.active_enrollments_percentage }), jsx(StatCard, { loading: isLoading, title: "Completed Enrollments", value: courseDetailStats.completed_enrollments, percentage: courseDetailStats.completed_enrollments_percentage }), jsx(StatCard, { loading: isLoading, title: "Time Spent", value: formatTimeSpent$1(courseDetailStats.time_spent), percentage: courseDetailStats.time_spent_percentage })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(Card, { className: "w-full bg-white shadow-xs", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-4", "aria-label": "Course enrollments table", children: [jsx("h3", { className: "text-base font-medium text-gray-700 mb-4", children: "Enrolled Users" }), ((_a = courseEnrollments === null || courseEnrollments === void 0 ? void 0 : courseEnrollments.enrollments) === null || _a === void 0 ? void 0 : _a.length) && courseEnrollments.enrollments.length > 0 ? (jsx("div", { className: "rounded-md overflow-x-auto", style: { borderColor: 'oklch(.922 0 0)', borderWidth: '1px' }, children: jsxs(Table, { children: [jsx(TableHeader, { children: jsxs(TableRow, { className: "h-[48px]", style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx(TableHead, { className: "text-left", children: "Name" }), jsx(TableHead, { className: "text-left", children: "Email" }), jsx(TableHead, { className: "text-right", children: "Time Spent" }), jsx(TableHead, { className: "text-right", children: "Progress" }), jsx(TableHead, { className: "text-right", children: "Grade" }), jsx(TableHead, { className: "text-right", children: "Last Active On" })] }) }), jsx(TableBody, { children: courseEnrollments.enrollments.map((enrollment, index) => (jsxs(TableRow, { className: `h-[48px] ${index % 2 === 0 ? 'bg-gray-50' : ''}`, style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx(TableCell, { className: "font-medium", children: enrollment.name }), jsx(TableCell, { className: "text-muted-foreground", children: enrollment.email }), jsx(TableCell, { className: "text-right", children: formatTimeSpent$1(enrollment.time_spent) }), jsxs(TableCell, { className: "text-right", children: [enrollment.progress, "%"] }), jsx(TableCell, { className: "text-right", children: typeof enrollment.grade === 'number'
-                                                            ? enrollment.grade.toFixed(1)
-                                                            : enrollment.grade }), jsx(TableCell, { className: "text-right", children: new Date(enrollment.last_active_on).toLocaleDateString() })] }, index))) })] }) })) : (jsx(EmptyStats, { title: "No enrollments available" }))] }) }) })] }));
+    const [selectedEnrollment, setSelectedEnrollment] = useState(null);
+    const resolvedCourseName = courseName || (courseInfo === null || courseInfo === void 0 ? void 0 : courseInfo.name);
+    return (jsxs("div", { className: "space-y-8", children: [(onBack || resolvedCourseName) && (jsxs("div", { className: "mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4", children: [jsx("div", { className: "flex flex-1 justify-start", children: onBack && (jsxs(Button$1, { variant: "ghost", onClick: onBack, "aria-label": "Go back to courses list", children: [jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Back to Courses"] })) }), resolvedCourseName && (jsx("h2", { className: "flex-1 truncate text-left text-2xl font-medium text-gray-700 sm:text-center", children: resolvedCourseName })), jsx("div", { className: "hidden flex-1 sm:block" })] })), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6", children: [jsx(StatCard, { loading: isLoading, title: "Active Enrollments", value: courseDetailStats.active_enrollments, percentage: courseDetailStats.active_enrollments_percentage }), jsx(StatCard, { loading: isLoading, title: "Completed Enrollments", value: courseDetailStats.completed_enrollments, percentage: courseDetailStats.completed_enrollments_percentage }), jsx(StatCard, { loading: isLoading, title: "Time Spent", value: formatTimeSpent(courseDetailStats.time_spent), percentage: courseDetailStats.time_spent_percentage })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(Card, { className: "w-full bg-white shadow-xs", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-4", "aria-label": "Course enrollments table", children: [jsx("h3", { className: "text-base font-medium text-gray-700 mb-4", children: "Enrolled Users" }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "relative flex-1 w-full", children: [jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { id: "search-enrolled-user", type: "text", placeholder: "Search by name or email...", value: courseEnrollmentsSearch, onChange: handleCourseEnrollmentsSearchInputChange, className: "pl-9 border-gray-300 focus:bg-transparent focus:color-transparent h-11", "aria-label": "Search enrolled users" })] }), isLoading ? (jsx("div", { className: "flex items-center justify-center py-8", children: jsx("div", { className: "text-sm text-gray-500", children: "Loading..." }) })) : ((_a = courseEnrollments === null || courseEnrollments === void 0 ? void 0 : courseEnrollments.enrollments) === null || _a === void 0 ? void 0 : _a.length) &&
+                                        courseEnrollments.enrollments.length > 0 ? (jsxs(Fragment$1, { children: [jsx("div", { className: "rounded-md overflow-x-auto", style: { borderColor: 'oklch(.922 0 0)', borderWidth: '1px' }, children: jsxs(Table, { children: [jsx(TableHeader, { children: jsxs(TableRow, { className: "h-[48px]", style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx(TableHead, { className: "text-left", children: "Name" }), jsx(TableHead, { className: "text-left", children: "Email" }), jsx(TableHead, { className: "text-right", children: "Enrollment Date" }), jsx(TableHead, { className: "text-right", children: "Last Active On" })] }) }), jsx(TableBody, { children: courseEnrollments.enrollments.map((enrollment, index) => (jsxs(TableRow, { className: `cursor-pointer hover:bg-muted/50 h-[48px] ${index % 2 === 0 ? 'bg-gray-50' : ''}`, onClick: () => setSelectedEnrollment(enrollment), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                                                                    if (e.key === 'Enter' || e.key === ' ') {
+                                                                        e.preventDefault();
+                                                                        setSelectedEnrollment(enrollment);
+                                                                    }
+                                                                }, "aria-label": `View course progress for ${enrollment.name}`, style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx(TableCell, { className: "font-medium", children: enrollment.name }), jsx(TableCell, { className: "text-muted-foreground", children: enrollment.email }), jsx(TableCell, { className: "text-right", children: enrollment.enrollment_date
+                                                                            ? new Date(enrollment.enrollment_date).toLocaleDateString()
+                                                                            : '—' }), jsx(TableCell, { className: "text-right", children: enrollment.last_active_on
+                                                                            ? new Date(enrollment.last_active_on).toLocaleDateString()
+                                                                            : '—' })] }, index))) })] }) }), courseEnrollmentsPagination && courseEnrollmentsPagination.total_pages > 1 && (jsxs("div", { className: "flex items-center justify-center space-x-2 py-4", children: [jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 w-8 p-2 !w-auto !inline-flex bg-transparent", onClick: () => setCourseEnrollmentsPage(1), disabled: courseEnrollmentsPagination.current_page === 1, "aria-label": "Go to first page", children: [jsx("span", { className: "sr-only", children: "Go to first page" }), jsx(ChevronsLeft, { className: "h-4 w-4" })] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 w-8 p-2 !w-auto !inline-flex bg-transparent", onClick: () => setCourseEnrollmentsPage(courseEnrollmentsPagination.current_page - 1), disabled: courseEnrollmentsPagination.current_page === 1, "aria-label": "Go to previous page", children: [jsx("span", { className: "sr-only", children: "Go to previous page" }), jsx(ChevronLeft, { className: "h-4 w-4" })] }), Array.from({ length: courseEnrollmentsPagination.total_pages }, (_, i) => i + 1)
+                                                        .filter((page) => {
+                                                        const current = courseEnrollmentsPagination.current_page;
+                                                        const total = courseEnrollmentsPagination.total_pages;
+                                                        return (page === 1 ||
+                                                            page === total ||
+                                                            (page >= current - 1 && page <= current + 1));
+                                                    })
+                                                        .map((page, index, array) => {
+                                                        const prevPage = array[index - 1];
+                                                        const showEllipsis = prevPage && page - prevPage > 1;
+                                                        return (jsxs(React__default.Fragment, { children: [showEllipsis && jsx("span", { className: "px-2 text-gray-500", children: "..." }), jsx(Button$1, { variant: "outline", size: "sm", className: `h-8 w-8 p-3 !w-auto !inline-flex ${page === courseEnrollmentsPagination.current_page
+                                                                        ? 'bg-blue-50 text-blue-600'
+                                                                        : 'bg-transparent'}`, onClick: () => setCourseEnrollmentsPage(page), "aria-label": `Go to page ${page}`, "aria-current": page === courseEnrollmentsPagination.current_page
+                                                                        ? 'page'
+                                                                        : undefined, children: page })] }, page));
+                                                    }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 w-8 p-2 !w-auto !inline-flex bg-transparent", onClick: () => setCourseEnrollmentsPage(courseEnrollmentsPagination.current_page + 1), disabled: courseEnrollmentsPagination.current_page ===
+                                                            courseEnrollmentsPagination.total_pages, "aria-label": "Go to next page", children: [jsx("span", { className: "sr-only", children: "Go to next page" }), jsx(ChevronRight, { className: "h-4 w-4" })] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 w-8 p-2 !w-auto !inline-flex bg-transparent", onClick: () => setCourseEnrollmentsPage(courseEnrollmentsPagination.total_pages), disabled: courseEnrollmentsPagination.current_page ===
+                                                            courseEnrollmentsPagination.total_pages, "aria-label": "Go to last page", children: [jsx("span", { className: "sr-only", children: "Go to last page" }), jsx(ChevronsRight, { className: "h-4 w-4" })] })] }))] })) : (jsx(EmptyStats, { title: "No enrollments available" }))] })] }) }) }), jsx(EnrolledUserProgressModal, { open: !!selectedEnrollment, onOpenChange: (isOpen) => {
+                    if (!isOpen)
+                        setSelectedEnrollment(null);
+                }, username: (_b = selectedEnrollment === null || selectedEnrollment === void 0 ? void 0 : selectedEnrollment.username) !== null && _b !== void 0 ? _b : '', userName: selectedEnrollment === null || selectedEnrollment === void 0 ? void 0 : selectedEnrollment.name, email: selectedEnrollment === null || selectedEnrollment === void 0 ? void 0 : selectedEnrollment.email, contentId: courseId, contentName: resolvedCourseName, metric: "course", tenantKey: tenantKey })] }));
 }
 
 // Utility function to format date to YYYY-MM-DD
@@ -194507,6 +194693,11 @@ const usePrograms = ({ tenantKey, mentorId, programId, }) => {
     const [programsListSearch, setProgramsListSearch] = useState('');
     const [debouncedSearch, setDebouncedSearch] = useState('');
     const isInitialMount = React__default.useRef(true);
+    const [programEnrollmentsPage, setProgramEnrollmentsPage] = useState(1);
+    const [programEnrollmentsLimit] = useState(20);
+    const [programEnrollmentsSearch, setProgramEnrollmentsSearch] = useState('');
+    const [debouncedProgramEnrollmentsSearch, setDebouncedProgramEnrollmentsSearch] = useState('');
+    const isInitialMountProgramEnrollments = React__default.useRef(true);
     // Debounce search input
     useEffect(() => {
         // Skip debounce on initial mount
@@ -194520,9 +194711,24 @@ const usePrograms = ({ tenantKey, mentorId, programId, }) => {
         }, 300);
         return () => clearTimeout(timer);
     }, [programsListSearch]);
+    // Debounce program enrollments search input
+    useEffect(() => {
+        if (isInitialMountProgramEnrollments.current) {
+            isInitialMountProgramEnrollments.current = false;
+            return;
+        }
+        const timer = setTimeout(() => {
+            setDebouncedProgramEnrollmentsSearch(programEnrollmentsSearch);
+            setProgramEnrollmentsPage(1);
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [programEnrollmentsSearch]);
     const handleSearchInputChange = (e) => {
         setProgramsListSearch(e.target.value);
     };
+    const handleProgramEnrollmentsSearchInputChange = (e) => {
+        setProgramEnrollmentsSearch(e.target.value);
+    };
     // Prepare params for content analytics query (programs list and stats)
     const contentAnalyticsParams = useMemo(() => {
         var _a, _b;
@@ -194559,11 +194765,22 @@ const usePrograms = ({ tenantKey, mentorId, programId, }) => {
                 include_overtime: true,
                 platform_key: tenantKey,
                 mentor_unique_id: mentorId,
-                limit: 20,
-                page: 1,
+                limit: programEnrollmentsLimit,
+                page: programEnrollmentsPage,
+                ...(debouncedProgramEnrollmentsSearch && {
+                    search: debouncedProgramEnrollmentsSearch,
+                }),
             }
             : null;
-    }, [programId, timeSpentStatsDateFilter, tenantKey, mentorId]);
+    }, [
+        programId,
+        timeSpentStatsDateFilter,
+        tenantKey,
+        mentorId,
+        programEnrollmentsLimit,
+        programEnrollmentsPage,
+        debouncedProgramEnrollmentsSearch,
+    ]);
     // Query for programs list and summary
     const { data: contentAnalyticsData, isLoading: isLoadingContentAnalytics, isFetching: isFetchingContentAnalytics, } = useGetContentAnalyticsQuery(contentAnalyticsParams);
     // Query for program details (only when programId is provided)
@@ -194617,15 +194834,15 @@ const usePrograms = ({ tenantKey, mentorId, programId, }) => {
     const programDetailStats = useMemo(() => {
         if (!programDetailsData) {
             return {
-                active_users: 0,
                 enrollments: 0,
-                time_spent: 0,
+                active_enrollments: 0,
+                completed_enrollments: 0,
             };
         }
         return {
-            active_users: programDetailsData.summary.totals.active_users || 0,
-            enrollments: programDetailsData.summary.totals.total_enrollments || 0,
-            time_spent: programDetailsData.summary.totals.total_time_spent || 0,
+            enrollments: programDetailsData.summary.totals.enrollments || 0,
+            active_enrollments: programDetailsData.summary.totals.active_enrollments || 0,
+            completed_enrollments: programDetailsData.summary.totals.completed_enrollments || 0,
         };
     }, [programDetailsData]);
     // Map time spent overtime data
@@ -194648,11 +194865,13 @@ const usePrograms = ({ tenantKey, mentorId, programId, }) => {
         }
         return {
             enrollments: programDetailsData.learners.map((learner) => ({
+                username: learner.username,
                 name: learner.name,
                 email: learner.email,
                 time_spent: 0, // This might need to be calculated or come from another field
                 progress: learner.completion_percentage || 0,
                 grade: learner.rating || 'N/A',
+                enrollment_date: learner.enrollment_date,
                 last_active_on: learner.last_activity,
             })),
             total: programDetailsData.pagination.count,
@@ -194679,6 +194898,12 @@ const usePrograms = ({ tenantKey, mentorId, programId, }) => {
         programsListSearch,
         handleSearchInputChange,
         programsPagination: contentAnalyticsData === null || contentAnalyticsData === void 0 ? void 0 : contentAnalyticsData.pagination,
+        programInfo: programDetailsData === null || programDetailsData === void 0 ? void 0 : programDetailsData.content_info,
+        programEnrollmentsPage,
+        setProgramEnrollmentsPage,
+        programEnrollmentsSearch,
+        handleProgramEnrollmentsSearchInputChange,
+        programEnrollmentsPagination: programDetailsData === null || programDetailsData === void 0 ? void 0 : programDetailsData.pagination,
     };
 };
 
@@ -194714,7 +194939,7 @@ function AnalyticsPrograms({ tenantKey, mentorId, selectedMentorId, basePath = '
     const handleProgramClick = (programId) => {
         router.push(`${basePath}/programs/${programId}`);
     };
-    return (jsxs("div", { className: "space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6", children: [jsx(StatCard, { loading: isLoading, title: "Active Programs", value: programStats.active_programs, percentage: programStats.active_programs_percentage }), jsx(StatCard, { loading: isLoading, title: "Total Programs", value: programStats.total_programs, percentage: programStats.total_programs_percentage }), jsx(StatCard, { loading: isLoading, title: "Enrollments", value: programStats.enrollments, percentage: programStats.enrollments_percentage }), jsx(StatCard, { loading: isLoading, title: "Total Learners", value: programStats.total_learners })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(ChartCardWrapper, { title: "Program Overtime", label: "Time Spent", filters: enrollmentStatsDateFilter, setOutsideFilters: setEnrollmentStatsDateFilter, children: ((_a = enrollmentStats === null || enrollmentStats === void 0 ? void 0 : enrollmentStats.points) === null || _a === void 0 ? void 0 : _a.length) && ((_b = enrollmentStats === null || enrollmentStats === void 0 ? void 0 : enrollmentStats.points) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxs(LineChart, { data: ((_c = enrollmentStats === null || enrollmentStats === void 0 ? void 0 : enrollmentStats.points) === null || _c === void 0 ? void 0 : _c.map((point) => ({
+    return (jsxs("div", { className: "space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6", children: [jsx(StatCard, { loading: isLoading, title: "Active Programs", value: programStats.active_programs, percentage: programStats.active_programs_percentage }), jsx(StatCard, { loading: isLoading, title: "Total Programs", value: programStats.total_programs, percentage: programStats.total_programs_percentage }), jsx(StatCard, { loading: isLoading, title: "Enrollments", value: programStats.enrollments, percentage: programStats.enrollments_percentage }), jsx(StatCard, { loading: isLoading, title: "Total Learners", value: programStats.total_learners })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(ChartCardWrapper, { title: "Program Overtime", label: "Time Spent", filters: enrollmentStatsDateFilter, setOutsideFilters: setEnrollmentStatsDateFilter, children: isLoading ? (jsx(ChartLoading, {})) : ((_a = enrollmentStats === null || enrollmentStats === void 0 ? void 0 : enrollmentStats.points) === null || _a === void 0 ? void 0 : _a.length) && ((_b = enrollmentStats === null || enrollmentStats === void 0 ? void 0 : enrollmentStats.points) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxs(LineChart, { data: ((_c = enrollmentStats === null || enrollmentStats === void 0 ? void 0 : enrollmentStats.points) === null || _c === void 0 ? void 0 : _c.map((point) => ({
                             date: formatDateToShortFormat(point.date, enrollmentStatsDateFilter.activeFilter === 'today'),
                             value: formatSecondsToHours(point.value),
                             rawSeconds: point.value,
@@ -194753,27 +194978,48 @@ function AnalyticsPrograms({ tenantKey, mentorId, selectedMentorId, basePath = '
                                                     }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 w-8 p-2 !w-auto !inline-flex bg-transparent", onClick: () => setProgramsListPage(programsPagination.current_page + 1), disabled: programsPagination.current_page === programsPagination.total_pages, "aria-label": "Go to next page", children: [jsx("span", { className: "sr-only", children: "Go to next page" }), jsx(ChevronRight, { className: "h-4 w-4" })] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 w-8 p-2 !w-auto !inline-flex bg-transparent", onClick: () => setProgramsListPage(programsPagination.total_pages), disabled: programsPagination.current_page === programsPagination.total_pages, "aria-label": "Go to last page", children: [jsx("span", { className: "sr-only", children: "Go to last page" }), jsx(ChevronsRight, { className: "h-4 w-4" })] })] }))] })) : (jsx(EmptyStats, { title: "No programs available" }))] })] }) }) })] }));
 }
 
-// Utility function to format time spent (in minutes) to readable format
-const formatTimeSpent = (minutes) => {
-    if (minutes < 60) {
-        return `${minutes}m`;
-    }
-    const hours = Math.floor(minutes / 60);
-    const mins = minutes % 60;
-    return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
-};
 function AnalyticsProgramDetail({ tenantKey, mentorId, selectedMentorId, programId, programName, onBack, }) {
-    var _a;
+    var _a, _b;
     const currentMentorId = selectedMentorId || mentorId;
-    const { programDetailStats, isLoading, programEnrollments } = usePrograms({
+    const { programDetailStats, isLoading, programEnrollments, programEnrollmentsSearch, handleProgramEnrollmentsSearchInputChange, setProgramEnrollmentsPage, programEnrollmentsPagination, programInfo, } = usePrograms({
         tenantKey,
         mentorId: currentMentorId,
         programId,
     });
-    return (jsxs("div", { className: "space-y-8", children: [onBack && (jsxs(Button$1, { variant: "ghost", onClick: onBack, className: "mb-4", "aria-label": "Go back to programs list", children: [jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Back to Programs"] })), programName && (jsx("div", { className: "mb-4", children: jsx("h2", { className: "text-2xl font-semibold text-gray-900", children: programName }) })), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6", children: [jsx(StatCard, { loading: isLoading, title: "Active Users", value: programDetailStats.active_users, percentage: programDetailStats.active_users_percentage }), jsx(StatCard, { loading: isLoading, title: "Enrollments", value: programDetailStats.enrollments, percentage: programDetailStats.enrollments_percentage }), jsx(StatCard, { loading: isLoading, title: "Time Spent", value: formatTimeSpent(programDetailStats.time_spent) })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(Card, { className: "w-full bg-white shadow-xs", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-4", "aria-label": "Program enrollments table", children: [jsx("h3", { className: "text-base font-medium text-gray-700 mb-4", children: "Enrolled Users" }), ((_a = programEnrollments === null || programEnrollments === void 0 ? void 0 : programEnrollments.enrollments) === null || _a === void 0 ? void 0 : _a.length) &&
-                                programEnrollments.enrollments.length > 0 ? (jsx("div", { className: "rounded-md overflow-x-auto", style: { borderColor: 'oklch(.922 0 0)', borderWidth: '1px' }, children: jsxs(Table, { children: [jsx(TableHeader, { children: jsxs(TableRow, { className: "h-[48px]", style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx(TableHead, { className: "text-left", children: "Name" }), jsx(TableHead, { className: "text-left", children: "Email" }), jsx(TableHead, { className: "text-right", children: "Time Spent" }), jsx(TableHead, { className: "text-right", children: "Progress" }), jsx(TableHead, { className: "text-right", children: "Grade" }), jsx(TableHead, { className: "text-right", children: "Last Active On" })] }) }), jsx(TableBody, { children: programEnrollments.enrollments.map((enrollment, index) => (jsxs(TableRow, { className: `h-[48px] ${index % 2 === 0 ? 'bg-gray-50' : ''}`, style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx(TableCell, { className: "font-medium", children: enrollment.name }), jsx(TableCell, { className: "text-muted-foreground", children: enrollment.email }), jsx(TableCell, { className: "text-right", children: formatTimeSpent(enrollment.time_spent) }), jsxs(TableCell, { className: "text-right", children: [enrollment.progress, "%"] }), jsx(TableCell, { className: "text-right", children: typeof enrollment.grade === 'number'
-                                                            ? enrollment.grade.toFixed(1)
-                                                            : enrollment.grade }), jsx(TableCell, { className: "text-right", children: new Date(enrollment.last_active_on).toLocaleDateString() })] }, index))) })] }) })) : (jsx(EmptyStats, { title: "No enrollments available" }))] }) }) })] }));
+    const [selectedEnrollment, setSelectedEnrollment] = useState(null);
+    const resolvedProgramName = programName || (programInfo === null || programInfo === void 0 ? void 0 : programInfo.name);
+    return (jsxs("div", { className: "space-y-8", children: [(onBack || resolvedProgramName) && (jsxs("div", { className: "mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4", children: [jsx("div", { className: "flex flex-1 justify-start", children: onBack && (jsxs(Button$1, { variant: "ghost", onClick: onBack, "aria-label": "Go back to programs list", children: [jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Back to Programs"] })) }), resolvedProgramName && (jsx("h2", { className: "flex-1 truncate text-left text-2xl font-medium text-gray-700 sm:text-center", children: resolvedProgramName })), jsx("div", { className: "hidden flex-1 sm:block" })] })), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6", children: [jsx(StatCard, { loading: isLoading, title: "Total Enrollments", value: programDetailStats.enrollments, percentage: programDetailStats.enrollments_percentage }), jsx(StatCard, { loading: isLoading, title: "Active Enrollments", value: programDetailStats.active_enrollments, percentage: programDetailStats.active_enrollments_percentage }), jsx(StatCard, { loading: isLoading, title: "Completed Enrollments", value: programDetailStats.completed_enrollments, percentage: programDetailStats.completed_enrollments_percentage })] }), jsx("div", { className: "grid grid-cols-1 gap-6", children: jsx(Card, { className: "w-full bg-white shadow-xs", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-4", "aria-label": "Program enrollments table", children: [jsx("h3", { className: "text-base font-medium text-gray-700 mb-4", children: "Enrolled Users" }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "relative flex-1 w-full", children: [jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { id: "search-enrolled-user", type: "text", placeholder: "Search by name or email...", value: programEnrollmentsSearch, onChange: handleProgramEnrollmentsSearchInputChange, className: "pl-9 border-gray-300 focus:bg-transparent focus:color-transparent h-11", "aria-label": "Search enrolled users" })] }), isLoading ? (jsx("div", { className: "flex items-center justify-center py-8", children: jsx("div", { className: "text-sm text-gray-500", children: "Loading..." }) })) : ((_a = programEnrollments === null || programEnrollments === void 0 ? void 0 : programEnrollments.enrollments) === null || _a === void 0 ? void 0 : _a.length) &&
+                                        programEnrollments.enrollments.length > 0 ? (jsxs(Fragment$1, { children: [jsx("div", { className: "rounded-md overflow-x-auto", style: { borderColor: 'oklch(.922 0 0)', borderWidth: '1px' }, children: jsxs(Table, { children: [jsx(TableHeader, { children: jsxs(TableRow, { className: "h-[48px]", style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx(TableHead, { className: "text-left", children: "Name" }), jsx(TableHead, { className: "text-left", children: "Email" }), jsx(TableHead, { className: "text-right", children: "Enrollment Date" }), jsx(TableHead, { className: "text-right", children: "Last Active On" })] }) }), jsx(TableBody, { children: programEnrollments.enrollments.map((enrollment, index) => (jsxs(TableRow, { className: `cursor-pointer hover:bg-muted/50 h-[48px] ${index % 2 === 0 ? 'bg-gray-50' : ''}`, onClick: () => setSelectedEnrollment(enrollment), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                                                                    if (e.key === 'Enter' || e.key === ' ') {
+                                                                        e.preventDefault();
+                                                                        setSelectedEnrollment(enrollment);
+                                                                    }
+                                                                }, "aria-label": `View program progress for ${enrollment.name}`, style: { borderColor: 'oklch(.922 0 0)' }, children: [jsx(TableCell, { className: "font-medium", children: enrollment.name }), jsx(TableCell, { className: "text-muted-foreground", children: enrollment.email }), jsx(TableCell, { className: "text-right", children: enrollment.enrollment_date
+                                                                            ? new Date(enrollment.enrollment_date).toLocaleDateString()
+                                                                            : '—' }), jsx(TableCell, { className: "text-right", children: enrollment.last_active_on
+                                                                            ? new Date(enrollment.last_active_on).toLocaleDateString()
+                                                                            : '—' })] }, index))) })] }) }), programEnrollmentsPagination && programEnrollmentsPagination.total_pages > 1 && (jsxs("div", { className: "flex items-center justify-center space-x-2 py-4", children: [jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 w-8 p-2 !w-auto !inline-flex bg-transparent", onClick: () => setProgramEnrollmentsPage(1), disabled: programEnrollmentsPagination.current_page === 1, "aria-label": "Go to first page", children: [jsx("span", { className: "sr-only", children: "Go to first page" }), jsx(ChevronsLeft, { className: "h-4 w-4" })] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 w-8 p-2 !w-auto !inline-flex bg-transparent", onClick: () => setProgramEnrollmentsPage(programEnrollmentsPagination.current_page - 1), disabled: programEnrollmentsPagination.current_page === 1, "aria-label": "Go to previous page", children: [jsx("span", { className: "sr-only", children: "Go to previous page" }), jsx(ChevronLeft, { className: "h-4 w-4" })] }), Array.from({ length: programEnrollmentsPagination.total_pages }, (_, i) => i + 1)
+                                                        .filter((page) => {
+                                                        const current = programEnrollmentsPagination.current_page;
+                                                        const total = programEnrollmentsPagination.total_pages;
+                                                        return (page === 1 ||
+                                                            page === total ||
+                                                            (page >= current - 1 && page <= current + 1));
+                                                    })
+                                                        .map((page, index, array) => {
+                                                        const prevPage = array[index - 1];
+                                                        const showEllipsis = prevPage && page - prevPage > 1;
+                                                        return (jsxs(React__default.Fragment, { children: [showEllipsis && jsx("span", { className: "px-2 text-gray-500", children: "..." }), jsx(Button$1, { variant: "outline", size: "sm", className: `h-8 w-8 p-3 !w-auto !inline-flex ${page === programEnrollmentsPagination.current_page
+                                                                        ? 'bg-blue-50 text-blue-600'
+                                                                        : 'bg-transparent'}`, onClick: () => setProgramEnrollmentsPage(page), "aria-label": `Go to page ${page}`, "aria-current": page === programEnrollmentsPagination.current_page
+                                                                        ? 'page'
+                                                                        : undefined, children: page })] }, page));
+                                                    }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 w-8 p-2 !w-auto !inline-flex bg-transparent", onClick: () => setProgramEnrollmentsPage(programEnrollmentsPagination.current_page + 1), disabled: programEnrollmentsPagination.current_page ===
+                                                            programEnrollmentsPagination.total_pages, "aria-label": "Go to next page", children: [jsx("span", { className: "sr-only", children: "Go to next page" }), jsx(ChevronRight, { className: "h-4 w-4" })] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 w-8 p-2 !w-auto !inline-flex bg-transparent", onClick: () => setProgramEnrollmentsPage(programEnrollmentsPagination.total_pages), disabled: programEnrollmentsPagination.current_page ===
+                                                            programEnrollmentsPagination.total_pages, "aria-label": "Go to last page", children: [jsx("span", { className: "sr-only", children: "Go to last page" }), jsx(ChevronsRight, { className: "h-4 w-4" })] })] }))] })) : (jsx(EmptyStats, { title: "No enrollments available" }))] })] }) }) }), jsx(EnrolledUserProgressModal, { open: !!selectedEnrollment, onOpenChange: (isOpen) => {
+                    if (!isOpen)
+                        setSelectedEnrollment(null);
+                }, username: (_b = selectedEnrollment === null || selectedEnrollment === void 0 ? void 0 : selectedEnrollment.username) !== null && _b !== void 0 ? _b : '', userName: selectedEnrollment === null || selectedEnrollment === void 0 ? void 0 : selectedEnrollment.name, email: selectedEnrollment === null || selectedEnrollment === void 0 ? void 0 : selectedEnrollment.email, contentId: programId, contentName: resolvedProgramName, metric: "program", tenantKey: tenantKey })] }));
 }
 
 const AnalyticsSettingsContext = createContext({});
@@ -204173,5 +204419,5 @@ var trainOrDeleteModal = /*#__PURE__*/Object.freeze({
     TrainOrDeleteModal: TrainOrDeleteModal
 });
 
-export { ACCESS_COURSE_LABEL, AccessTimeHeatmap, AccessiblePaginate, AddMentorToProjectModal, AddSkillDialog, Admin, AdvancedTab, AgentConfigPrompts, AgentSkills, AlertsTab, AnalyticsAuditLogStats, AnalyticsCourseDetail, AnalyticsCourses, AnalyticsFinancialStats, AnalyticsLayout, AnalyticsMonetizationStats, AnalyticsOverview, AnalyticsProgramDetail, AnalyticsPrograms, AnalyticsReportDownload, AnalyticsReports, AnalyticsSettingsProvider, AnalyticsTopicsStats, AnalyticsTranscriptsStats, AnalyticsUsersStats, AppleRestrictionModal, BUY_NOW_LABEL, BillingTab, CREATE_AGENT_LABELS, CategorizedDropdownMenu, ChartCardWrapper, ChartFiltersProvider, ChatContext, ChatPrivacyToggle, ChatProvider, CompanyDialog, ConnectorManagementDialog, CopyButtonIcon, CourseAccessGuard, CourseCardSkeleton, CourseContentLoading, CourseOutline, CourseOutlineContext, CourseOutlineDrawer, CreateAgentForm, CreateAgentModal, CreateProjectModal, CreateWorkflowModal, CredentialBox, CredentialMiniBoxSkeleton, CreditBalance, CustomDateRangePicker, CustomTooltip, DEFAULT_SYSTEM_CONTROL_REQUIRED_SIZE_GB, DefaultEmptyBox, DeleteProjectModal, DeleteWorkflowModal, DiscoverContentCard, DiscoverFacetsFilter, DiscoverFilterDrawer, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ENROLL_NOW_COURSE_STARTING_SOON_LABEL, ENROLL_NOW_LABEL, EditAlertDialog, EducationBox, EducationDialog, EducationTab, EdxIframeContext, EmptyStats, ExperienceBox, ExperienceDialog, ExperienceTab, FacetFilterContext, Footer, GHOST_OS_REPO_URL, GHOST_OS_TAURI_COMMANDS, GHOST_OS_TAURI_EVENTS, GroupsFilterDropdown, INVITATION_ONLY_LABEL, InstitutionDialog, IntegrationsTab, InviteUserContent, InviteUserDialog, InvitedUsersDialog, LOCAL_MODELS, Loader, LocalLLMTab, LocalModelsContent, LoginButton, MACOS_PERMISSIONS_COMMANDS, Markdown, MinimumMentorAlert, MonetizationTab, NotificationDisplay, NotificationDropdown, ONBOARDING_SECTORS, OnboardingShell, OnboardingWizard, PaywallModal, Profile, ProfileTimeChart, ProgressDots, ProjectActionButtons, ProjectFilesModal, ProjectInstructionsModal, ProjectLandingPage, ProjectMentorsList, ProjectsPage, REQUEST_ACCESS_COURSE_STARTING_SOON_LABEL, REQUEST_ACCESS_LABEL, RenameProjectModal, ResumeBox, ResumeTab, RichTextEditor, SandboxConfig, SearchableMultiSelect, SendNotificationDialog, SignupButton, SkeletonActivityStatBox, SkeletonAddSkillsLoading, SkeletonCreatePathwaySearchList, SkeletonDiscoverFilterBox, SkeletonEducationBox, SkeletonMultiplier, SkeletonPathwayBox, SkeletonProfileInfoCard, SkeletonSkillBox, SkillBox, SkillDetailModal, SkillLeaderboardChart, SkillsBox, Spinner, StatCard, StepHeader, SystemControlContent, SystemControlTab, TAURI_COMMANDS, TAURI_EVENTS, TenantSwitcher, TimeFilter, TimeTrackingProvider, TimedExam, ToolDialogs, TopBanner, UpgradePackageModal, UserAvatar, Version, WorkflowSidebar, addBookmarksTab, findLastResumeBlock, findSequentialParent, flattenVerticalBlocks, getFirstAvailableUnit, getLocalLLMModel, getLocalLLMToolSupport, getNextUnitIframe, getOrg, getParentBlockById, getParentsInfosFromSublessonId, getPreviousUnitIframe, getRandomCourseImage, getSectorById, getTenant, getUnitToIframe, getUserId, getUserName, inBrowserPrint, inIframe, initialGhostOsInstallState, initialModelDownloadState, isLocalLLMEnabled, isSystemControlEnabled, isTauriApp, components as markdownComponents, modelSupportsSystemControl, onboardingPrimaryButtonClass, onboardingSecondaryButtonClass, resolveCreateAgentLabels, sanitizeCss, setLocalLLMEnabled, setLocalLLMModel, setLocalLLMToolSupport, setSystemControlEnabled, smallestSystemControlModel, useAnalyticsSettings, useAuditLog, useCatalogSearch, useChartFilters, useChatPrivacy, useChatState, useCourseDetail, useCourseMetadata, useCourses, useDiscover, useEdxIframe, useFinancial, useGhostOs, useIframeMessageHandler, useLocalStorage, useModelDownload, useMonetization, useOverview, useProfileActivityStats, useProfileCredentials, useProfilePathways, useProfilePrograms, useProfileSkills, useProfileTimeSpent, usePrograms, useReports, useTauri, useTimeTracking, useTopics, useTranscripts, useUserCourses, useUserMetadata, useUsers };
+export { ACCESS_COURSE_LABEL, AccessTimeHeatmap, AccessiblePaginate, AddMentorToProjectModal, AddSkillDialog, Admin, AdvancedTab, AgentConfigPrompts, AgentSkills, AlertsTab, AnalyticsAuditLogStats, AnalyticsCourseDetail, AnalyticsCourses, AnalyticsFinancialStats, AnalyticsLayout, AnalyticsMonetizationStats, AnalyticsOverview, AnalyticsProgramDetail, AnalyticsPrograms, AnalyticsReportDownload, AnalyticsReports, AnalyticsSettingsProvider, AnalyticsTopicsStats, AnalyticsTranscriptsStats, AnalyticsUsersStats, AppleRestrictionModal, BUY_NOW_LABEL, BillingTab, CREATE_AGENT_LABELS, CategorizedDropdownMenu, ChartCardWrapper, ChartFiltersProvider, ChartLoading, ChatContext, ChatPrivacyToggle, ChatProvider, CompanyDialog, ConnectorManagementDialog, CopyButtonIcon, CourseAccessGuard, CourseCardSkeleton, CourseContentLoading, CourseOutline, CourseOutlineContext, CourseOutlineDrawer, CreateAgentForm, CreateAgentModal, CreateProjectModal, CreateWorkflowModal, CredentialBox, CredentialMiniBoxSkeleton, CreditBalance, CustomDateRangePicker, CustomTooltip, DEFAULT_SYSTEM_CONTROL_REQUIRED_SIZE_GB, DefaultEmptyBox, DeleteProjectModal, DeleteWorkflowModal, DiscoverContentCard, DiscoverFacetsFilter, DiscoverFilterDrawer, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ENROLL_NOW_COURSE_STARTING_SOON_LABEL, ENROLL_NOW_LABEL, EditAlertDialog, EducationBox, EducationDialog, EducationTab, EdxIframeContext, EmptyStats, ExperienceBox, ExperienceDialog, ExperienceTab, FacetFilterContext, Footer, GHOST_OS_REPO_URL, GHOST_OS_TAURI_COMMANDS, GHOST_OS_TAURI_EVENTS, GroupsFilterDropdown, INVITATION_ONLY_LABEL, InstitutionDialog, IntegrationsTab, InviteUserContent, InviteUserDialog, InvitedUsersDialog, LOCAL_MODELS, Loader, LocalLLMTab, LocalModelsContent, LoginButton, MACOS_PERMISSIONS_COMMANDS, Markdown, MinimumMentorAlert, MonetizationTab, NotificationDisplay, NotificationDropdown, ONBOARDING_SECTORS, OnboardingShell, OnboardingWizard, PaywallModal, Profile, ProfileTimeChart, ProgressDots, ProjectActionButtons, ProjectFilesModal, ProjectInstructionsModal, ProjectLandingPage, ProjectMentorsList, ProjectsPage, REQUEST_ACCESS_COURSE_STARTING_SOON_LABEL, REQUEST_ACCESS_LABEL, RenameProjectModal, ResumeBox, ResumeTab, RichTextEditor, SandboxConfig, SearchableMultiSelect, SendNotificationDialog, SignupButton, SkeletonActivityStatBox, SkeletonAddSkillsLoading, SkeletonCreatePathwaySearchList, SkeletonDiscoverFilterBox, SkeletonEducationBox, SkeletonMultiplier, SkeletonPathwayBox, SkeletonProfileInfoCard, SkeletonSkillBox, SkillBox, SkillDetailModal, SkillLeaderboardChart, SkillsBox, Spinner, StatCard, StepHeader, SystemControlContent, SystemControlTab, TAURI_COMMANDS, TAURI_EVENTS, TenantSwitcher, TimeFilter, TimeTrackingProvider, TimedExam, ToolDialogs, TopBanner, UpgradePackageModal, UserAvatar, Version, WorkflowSidebar, addBookmarksTab, findLastResumeBlock, findSequentialParent, flattenVerticalBlocks, getFirstAvailableUnit, getLocalLLMModel, getLocalLLMToolSupport, getNextUnitIframe, getOrg, getParentBlockById, getParentsInfosFromSublessonId, getPreviousUnitIframe, getRandomCourseImage, getSectorById, getTenant, getUnitToIframe, getUserId, getUserName, inBrowserPrint, inIframe, initialGhostOsInstallState, initialModelDownloadState, isLocalLLMEnabled, isSystemControlEnabled, isTauriApp, components as markdownComponents, modelSupportsSystemControl, onboardingPrimaryButtonClass, onboardingSecondaryButtonClass, resolveCreateAgentLabels, sanitizeCss, setLocalLLMEnabled, setLocalLLMModel, setLocalLLMToolSupport, setSystemControlEnabled, smallestSystemControlModel, useAnalyticsSettings, useAuditLog, useCatalogSearch, useChartFilters, useChatPrivacy, useChatState, useCourseDetail, useCourseMetadata, useCourses, useDiscover, useEdxIframe, useFinancial, useGhostOs, 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