@iblai/iblai-js 1.5.4 → 1.6.1

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

@@ -7,9 +7,9 @@ import Link$2 from 'next/link';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { z as z$1 } from 'zod';
-import { 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, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useLazyGetCourseMetaDataQuery, useLazyGetCourseCompletionOutlinesQuery, useLazyGetCourseEligibilityQuery, useLazyGetEdxSSOTokenQuery, useCreateCourseEnrollmentMutation, useCreateStripeCheckoutSessionMutation, useLazyGetCourseProgressQuery, useLazyGetCourseCompletionQuery, useUpdateExamAttemptMutation, useStartExamMutation, useLazyGetExamInfoQuery, 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, useGetRbacPoliciesQuery, useCreateRbacPolicyMutation, useUpdateRbacPolicyMutation, useDeleteRbacPolicyMutation, useGetRbacPolicyDetailsQuery, useUploadLightLogoMutation, useUploadDarkLogoMutation, useUpdatePlatformInfoMutation, useUpdateTenantMetadataMutation, LOGO_ENDPOINTS, 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, useCreatePlatformImageAssetMutation, useGetProviderConfigQuery, useCreateProviderConfigMutation, useDeleteProviderConfigMutation, useGetExternalMappingQuery, useGetCredentialsListQuery, useCreateExternalMappingMutation, useDeleteExternalMappingMutation, useGetMemsearchConfigQuery, useUpdateMemsearchConfigMutation, useGetCustomMentorsQuery, useGetStripeConnectStatusQuery, useStartStripeConnectOnboardingMutation, useLazyGetStripeConnectDashboardQuery, useListPricesQuery, useCreatePriceMutation, useUpdatePriceMutation, useDeletePriceMutation, useGetPaywallConfigQuery, useEnablePaywallMutation, useDisablePaywallMutation, useListPaywallsQuery, useGetAiSearchMentorsQuery, useCreateSessionIdMutation, useGetMentorCategoriesQuery, useGetMentorSettingsQuery, useEditMentorMutation, useDeleteMentorMutation, useForkMentorMutation, useGetToolsQuery, useGetMentorMemoriesQuery, useGetMemoryCategoriesAdminQuery, useDeleteMentorMemoryMutation, useUpdateMentorMemoryMutation, useCreateMentorMemoryMutation, useGetPromptCategoriesQuery, useGetMentorPublicSettingsQuery, useGetChatHistoryFilterQuery, useGetChatHistoryQuery, useGetMentorSummariesQuery, useGetConversationMemoriesQuery, useEditTrainingDocumentMutation, useGetTrainingDocumentsQuery, useCreatePromptMutation, useGetPromptsSearchQuery, useUpdatePromptMutation, useCreateRedirectTokenMutation, useGetShareableLinkQuery, useCreateShareableLinkMutation, useUpdateShareableLinkMutation, useCreateDisclaimerMutation, useUpdateDisclaimerMutation, useGetDisclaimersQuery, useUpdateRbacMentorAccessMutation, useGetRbacMentorAccessListQuery, useStarMentorMutation, useUnstarMentorMutation, useGetPersonnalizedMentorsQuery, useDeleteTrainingDocumentMutation, useGetTrainingDocumentRetrainScheduleQuery, useCreateTrainingDocumentRetrainScheduleMutation } from '@iblai/data-layer';
+import { 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, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useLazyGetCourseMetaDataQuery, useLazyGetCourseCompletionOutlinesQuery, useLazyGetCourseEligibilityQuery, useLazyGetEdxSSOTokenQuery, useCreateCourseEnrollmentMutation, useCreateStripeCheckoutSessionMutation, useLazyGetCourseProgressQuery, useLazyGetCourseCompletionQuery, useUpdateExamAttemptMutation, useStartExamMutation, useLazyGetExamInfoQuery, useGetAccountBillingInfoQuery, useUpdateAutoRechargeInfoMutation, useTriggerAutoRechargeMutation, 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, useGetRbacPoliciesQuery, useCreateRbacPolicyMutation, useUpdateRbacPolicyMutation, useDeleteRbacPolicyMutation, useGetRbacPolicyDetailsQuery, useUploadLightLogoMutation, useUploadDarkLogoMutation, useUpdatePlatformInfoMutation, useUpdateTenantMetadataMutation, LOGO_ENDPOINTS, useDeleteApiKeyMutation, useGetApiKeysQuery, useCreateApiKeyMutation, useCreateLLMCredentialMutation, useGetCredentialsSchemaQuery, useGetMaskedLLMCredentialsQuery, useGetLlmsQuery, useDeleteIntegrationCredentialMutation, useDeleteCredentialMutation, useCreateIntegrationCredentialMutation, useGetIntegrationCredentialsSchemaQuery, useGetMaskedIntegrationCredentialsQuery, useCreateStripeCustomerPortalMutation, useSetPlatformConfigurationsMutation, useGetPlatformConfigurationsQuery, useUpdatePlatformMembershipMutation, useGetPlatformMembershipQuery, useGetCustomDomainsQuery, useCreateCustomDomainMutation, useDeleteCustomDomainMutation, useGetStudentMentorCreationStatusQuery, useSetStudentMentorCreationStatusMutation, coreApiSlice, recommendationPromptTypeEnum, useGetRecommendedPromptsListQuery, useCreateRecommendedPromptMutation, useUpdateRecommendedPromptMutation, useDeleteRecommendedPromptMutation, useLazyGetPublicPlatformImageAssetFileUrlQuery, useCreatePlatformImageAssetMutation, useGetProviderConfigQuery, useCreateProviderConfigMutation, useDeleteProviderConfigMutation, useGetExternalMappingQuery, useGetCredentialsListQuery, useCreateExternalMappingMutation, useDeleteExternalMappingMutation, useGetMemsearchConfigQuery, useUpdateMemsearchConfigMutation, useGetCustomMentorsQuery, useGetStripeConnectStatusQuery, useStartStripeConnectOnboardingMutation, useLazyGetStripeConnectDashboardQuery, useListPricesQuery, useCreatePriceMutation, useUpdatePriceMutation, useDeletePriceMutation, useGetPaywallConfigQuery, useEnablePaywallMutation, useDisablePaywallMutation, useListPaywallsQuery, useGetAiSearchMentorsQuery, useCreateSessionIdMutation, useGetMentorCategoriesQuery, useGetMentorSettingsQuery, useEditMentorMutation, useDeleteMentorMutation, useForkMentorMutation, useGetToolsQuery, useGetMentorMemoriesQuery, useGetMemoryCategoriesAdminQuery, useDeleteMentorMemoryMutation, useUpdateMentorMemoryMutation, useCreateMentorMemoryMutation, useGetPromptCategoriesQuery, useGetMentorPublicSettingsQuery, useGetChatHistoryFilterQuery, useGetChatHistoryQuery, useGetMentorSummariesQuery, useGetConversationMemoriesQuery, useEditTrainingDocumentMutation, useGetTrainingDocumentsQuery, useCreatePromptMutation, useGetPromptsSearchQuery, useUpdatePromptMutation, useCreateRedirectTokenMutation, useGetShareableLinkQuery, useCreateShareableLinkMutation, useUpdateShareableLinkMutation, useCreateDisclaimerMutation, useUpdateDisclaimerMutation, useGetDisclaimersQuery, useUpdateRbacMentorAccessMutation, useGetRbacMentorAccessListQuery, useStarMentorMutation, useUnstarMentorMutation, useGetPersonnalizedMentorsQuery, useDeleteTrainingDocumentMutation, useGetTrainingDocumentRetrainScheduleQuery, useCreateTrainingDocumentRetrainScheduleMutation } from '@iblai/data-layer';
 import { toast, Toaster as Toaster$1 } from 'sonner';
-import { getInitials, useTenantMetadata, isAlphaNumeric32, checkRbacPermission, WithPermissions, useTenantContext, CHAT_AREA_SIZE, TimeTracker, advancedTabsProperties, defaultSessionIds, chatActions, WithFormPermissions } from '@iblai/web-utils';
+import { getInitials, useTenantMetadata, isAlphaNumeric32, checkRbacPermission, WithPermissions, useTenantContext, useStripeUpgrade, CHAT_AREA_SIZE, TimeTracker, advancedTabsProperties, defaultSessionIds, chatActions, WithFormPermissions } from '@iblai/web-utils';
 import { MentorVisibilityEnum, PromptVisibilityEnum } from '@iblai/iblai-api';
 import '@reduxjs/toolkit/query';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -72973,12 +72973,12 @@ const __iconNode$5J = [
   ["path", { d: "M16 5a4 3 0 0 0-8 0c0 4 8 3 8 7a4 3 0 0 1-8 0", key: "vqan6v" }],
   ["path", { d: "M8 19a4 3 0 0 0 8 0c0-4-8-3-8-7a4 3 0 0 1 8 0", key: "wdjd8o" }]
 ];
-const Section = createLucideIcon("section", __iconNode$5J);
+const Section$1 = createLucideIcon("section", __iconNode$5J);
 
 var section = /*#__PURE__*/Object.freeze({
     __proto__: null,
     __iconNode: __iconNode$5J,
-    default: Section
+    default: Section$1
 });
 
 /**
@@ -119807,7 +119807,7 @@ function MemoryTab({ org, username }) {
 const renderLucideIcon = (Icon) => function RenderedIcon(props) {
     return jsx(Icon, { ...props });
 };
-function Profile({ tenant, username, onClose, customization = {}, isAdmin = false, targetTab = 'basic', onAccountDeleted, enableMemoryTab = false, localLLMProps, }) {
+function Profile({ tenant, username, tenants, onClose, customization = {}, isAdmin = false, targetTab = 'basic', onAccountDeleted, enableMemoryTab = false, localLLMProps, }) {
     var _a, _b, _c, _d;
     console.log('[Profile] localLLMProps received:', {
         isAvailable: localLLMProps === null || localLLMProps === void 0 ? void 0 : localLLMProps.isAvailable,
@@ -119826,13 +119826,17 @@ function Profile({ tenant, username, onClose, customization = {}, isAdmin = fals
     });
     // Show memory tab if enabled for this platform AND memsearch is enabled (or status API is unavailable)
     const isMemoryEnabled = enableMemoryTab && (isMemsearchStatusError || ((_a = memsearchStatus === null || memsearchStatus === void 0 ? void 0 : memsearchStatus.enable_memsearch) !== null && _a !== void 0 ? _a : false));
+    const currentTenant = tenants.find((t) => t.key === tenant);
+    const isPurchasesEnabled = currentTenant === null || currentTenant === void 0 ? void 0 : currentTenant.show_paywall;
     const baseTabs = [
         { id: 'basic', label: 'Basic', renderIcon: renderLucideIcon(User) },
         { id: 'social', label: 'Social', renderIcon: renderLucideIcon(Globe) },
         { id: 'education', label: 'Education', renderIcon: renderLucideIcon(BookOpen) },
         { id: 'experience', label: 'Experience', renderIcon: renderLucideIcon(Briefcase) },
         { id: 'resume', label: 'Resume', renderIcon: renderLucideIcon(FileText) },
-        { id: 'purchases', label: 'Purchases', renderIcon: renderLucideIcon(ShoppingBag) },
+        ...(isPurchasesEnabled
+            ? [{ id: 'purchases', label: 'Purchases', renderIcon: renderLucideIcon(ShoppingBag) }]
+            : []),
         ...(isMemoryEnabled
             ? [{ id: 'memory', label: 'Memory', renderIcon: renderLucideIcon(Archive) }]
             : []),
@@ -160983,6 +160987,180 @@ AlertDialogAction.displayName = Action.displayName;
 const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (jsx(Cancel, { ref: ref, className: cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className), ...props })));
 AlertDialogCancel.displayName = Cancel.displayName;
 
+const AUTO_RECHARGE_DEFAULTS = {
+    THRESHOLD_USD: '5',
+    AMOUNT_USD: '16',
+};
+function isEmptyOrZeroAmount(value) {
+    if (!value)
+        return true;
+    const num = parseFloat(value);
+    return isNaN(num) || num === 0;
+}
+
+function formatCurrencyInput(value) {
+    if (value === null || value === undefined || value === '')
+        return '';
+    const num = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(num))
+        return '';
+    return num.toString();
+}
+function AutoRechargeModal({ isOpen, onClose, tenant }) {
+    const { data: autoRechargeInfo, isLoading, refetch, } = useGetAccountBillingInfoQuery({ platform_key: tenant });
+    const [updateAutoRecharge, { isLoading: isUpdating }] = useUpdateAutoRechargeInfoMutation();
+    const [threshold, setThreshold] = useState('');
+    const [amount, setAmount] = useState('');
+    const [spendingLimit, setSpendingLimit] = useState('');
+    const [isUnlimited, setIsUnlimited] = useState(false);
+    const [isEnabled, setIsEnabled] = useState(false);
+    // Sync form state with fetched data
+    useEffect(() => {
+        if (autoRechargeInfo) {
+            setThreshold(formatCurrencyInput(autoRechargeInfo.auto_recharge_threshold_usd));
+            setAmount(formatCurrencyInput(autoRechargeInfo.auto_recharge_amount_usd));
+            const limitValue = parseFloat(autoRechargeInfo.auto_recharge_spending_limit_usd || '0');
+            const unlimited = limitValue === 0;
+            setIsUnlimited(unlimited);
+            setSpendingLimit(unlimited ? '' : formatCurrencyInput(autoRechargeInfo.auto_recharge_spending_limit_usd));
+            setIsEnabled(autoRechargeInfo.auto_recharge_enabled || false);
+        }
+    }, [autoRechargeInfo]);
+    const handleEnableToggle = async (checked) => {
+        setIsEnabled(checked);
+        if (!checked)
+            return;
+        let nextThreshold = threshold;
+        let nextAmount = amount;
+        if (isEmptyOrZeroAmount(threshold)) {
+            nextThreshold = AUTO_RECHARGE_DEFAULTS.THRESHOLD_USD;
+            setThreshold(nextThreshold);
+        }
+        if (isEmptyOrZeroAmount(amount)) {
+            nextAmount = AUTO_RECHARGE_DEFAULTS.AMOUNT_USD;
+            setAmount(nextAmount);
+        }
+        try {
+            await updateAutoRecharge({
+                auto_recharge_threshold_usd: nextThreshold || '0',
+                auto_recharge_amount_usd: nextAmount || '0',
+                auto_recharge_spending_limit_usd: isUnlimited ? '0' : spendingLimit || '0',
+                auto_recharge_enabled: true,
+                platform_key: tenant,
+            }).unwrap();
+            refetch();
+        }
+        catch (_a) {
+            toast.error('Failed to enable auto recharge');
+        }
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!threshold || !amount || (!isUnlimited && !spendingLimit)) {
+            toast.error('Please fill in all fields');
+            return;
+        }
+        const thresholdNum = parseFloat(threshold);
+        const amountNum = parseFloat(amount);
+        const spendingLimitNum = isUnlimited ? 0 : parseFloat(spendingLimit);
+        if (isNaN(thresholdNum) || thresholdNum < 0) {
+            toast.error('Please enter a valid threshold amount');
+            return;
+        }
+        if (isNaN(amountNum) || amountNum <= 0) {
+            toast.error('Please enter a valid recharge amount greater than 0');
+            return;
+        }
+        if (!isUnlimited && (isNaN(spendingLimitNum) || spendingLimitNum < 0)) {
+            toast.error('Please enter a valid spending limit');
+            return;
+        }
+        try {
+            await updateAutoRecharge({
+                auto_recharge_threshold_usd: threshold,
+                auto_recharge_amount_usd: amount,
+                auto_recharge_spending_limit_usd: isUnlimited ? '0' : spendingLimit,
+                auto_recharge_enabled: isEnabled,
+                platform_key: tenant,
+            }).unwrap();
+            toast.success('Usage settings updated successfully');
+            refetch();
+            onClose();
+        }
+        catch (error) {
+            toast.error('Failed to update usage settings');
+        }
+    };
+    const handleClose = () => {
+        // Reset form to original values on close
+        if (autoRechargeInfo) {
+            setThreshold(formatCurrencyInput(autoRechargeInfo.auto_recharge_threshold_usd));
+            setAmount(formatCurrencyInput(autoRechargeInfo.auto_recharge_amount_usd));
+            const limitValue = parseFloat(autoRechargeInfo.auto_recharge_spending_limit_usd || '0');
+            const unlimited = limitValue === 0;
+            setIsUnlimited(unlimited);
+            setSpendingLimit(unlimited ? '' : formatCurrencyInput(autoRechargeInfo.auto_recharge_spending_limit_usd));
+            setIsEnabled(autoRechargeInfo.auto_recharge_enabled || false);
+        }
+        onClose();
+    };
+    const formatLastTriggered = (dateString, includeTime = true) => {
+        if (!dateString)
+            return 'Never';
+        const date = new Date(dateString);
+        const options = {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+        };
+        if (includeTime) {
+            options.hour = '2-digit';
+            options.minute = '2-digit';
+        }
+        return date.toLocaleDateString('en-US', options);
+    };
+    return (jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: jsxs(DialogContent, { className: "max-w-md", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Manage Usage" }), jsx(DialogDescription, { children: "Configure automatic recharge and spending limits." })] }), isLoading ? (jsx("div", { className: "flex items-center justify-center py-8", children: jsx(LoaderCircle, { className: "h-8 w-8 animate-spin text-primary" }) })) : (jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [jsxs("div", { className: "bg-slate-50 dark:bg-slate-800/50 rounded-lg p-4 border border-slate-200 dark:border-slate-700", children: [(parseFloat((autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_total_charged_usd) || '0') > 0 ||
+                                    (autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_period_ends_at)) && (jsxs("div", { className: "flex items-center justify-between gap-4 mb-4 pb-4 border-b border-slate-200 dark:border-slate-700", children: [parseFloat((autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_total_charged_usd) || '0') > 0 && (jsxs("div", { className: "flex-1", children: [jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400 mb-1", children: "Total Spent" }), jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 rounded-full text-sm font-medium", children: [jsx(DollarSign, { className: "h-3.5 w-3.5" }), formatCurrencyInput(autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_total_charged_usd)] })] })), (autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_period_ends_at) && (jsxs("div", { className: "flex-1 text-right", children: [jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400 mb-1", children: "Resets On" }), jsxs("div", { className: "inline-flex items-center gap-1 text-sm text-slate-700 dark:text-slate-300", children: [jsx(Calendar$1, { className: "h-3.5 w-3.5" }), formatLastTriggered(autoRechargeInfo.auto_recharge_period_ends_at, false)] })] }))] })), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "space-y-1", children: [jsx(Label, { htmlFor: "auto-recharge-toggle", className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: "Enable Auto Recharge" }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "Automatically top up credits when balance is low" })] }), jsx(Switch, { id: "auto-recharge-toggle", checked: isEnabled, onCheckedChange: handleEnableToggle, className: "data-[state=checked]:bg-blue-500" })] }), (autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_last_triggered_at) && (jsxs("div", { className: "text-xs text-slate-500 dark:text-slate-400 mt-3 pt-3 border-t border-slate-200 dark:border-slate-700", children: [jsx("span", { children: "Last triggered: " }), jsx("span", { className: "font-medium", children: formatLastTriggered(autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_last_triggered_at) })] }))] }), isEnabled && (jsxs(Fragment$1, { children: [jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { htmlFor: "spending-limit", className: "text-sm font-medium", children: "Spending Limit" }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Switch, { id: "unlimited-toggle", checked: isUnlimited, onCheckedChange: (checked) => {
+                                                                setIsUnlimited(checked);
+                                                                if (checked)
+                                                                    setSpendingLimit('');
+                                                            }, className: "data-[state=checked]:bg-blue-500 scale-75" }), jsx(Label, { htmlFor: "unlimited-toggle", className: "text-xs text-slate-500 dark:text-slate-400 cursor-pointer", children: "Unlimited" })] })] }), jsxs("div", { className: "relative", children: [jsx(DollarSign, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), jsx(Input, { id: "spending-limit", type: "number", min: "0.01", step: "0.01", placeholder: isUnlimited ? 'Unlimited' : '100.00', value: spendingLimit, onChange: (e) => setSpendingLimit(e.target.value), disabled: isUnlimited, className: "pl-9" })] }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "Maximum amount that can be auto-charged per billing period" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { htmlFor: "amount", className: "text-sm font-medium", children: "Recharge Amount" }), jsxs("div", { className: "relative", children: [jsx(DollarSign, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), jsx(Input, { id: "amount", type: "number", min: "0.01", step: "0.01", placeholder: "50.00", value: amount, onChange: (e) => setAmount(e.target.value), className: "pl-9" })] }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "Amount to add to your balance when auto recharge triggers" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { htmlFor: "threshold", className: "text-sm font-medium", children: "Recharge Threshold" }), jsxs("div", { className: "relative", children: [jsx(DollarSign, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), jsx(Input, { id: "threshold", type: "number", min: "0", step: "0.01", placeholder: "10.00", value: threshold, onChange: (e) => setThreshold(e.target.value), className: "pl-9" })] }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "Auto recharge will trigger when your balance falls below this amount" })] })] })), jsxs("div", { className: "flex items-start gap-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-100 dark:border-blue-800", children: [jsx(CircleAlert, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), jsx("p", { className: "text-xs text-blue-700 dark:text-blue-300", children: "Your payment method on file will be charged automatically when your credit balance drops below the threshold." })] }), jsxs(DialogFooter, { className: "gap-2 sm:gap-0", children: [jsx(Button$1, { type: "button", variant: "outline", onClick: handleClose, children: "Cancel" }), jsx(Button$1, { type: "submit", disabled: isUpdating, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white", children: isUpdating ? (jsxs(Fragment$1, { children: [jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }), "Saving..."] })) : ('Save Settings') })] })] }))] }) }));
+}
+
+function AddCreditsModal({ isOpen, onClose, tenant }) {
+    const [triggerAutoRecharge, { isLoading }] = useTriggerAutoRechargeMutation();
+    const [amount, setAmount] = useState('');
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!amount) {
+            toast.error('Please enter an amount');
+            return;
+        }
+        const amountNum = parseFloat(amount);
+        if (isNaN(amountNum) || amountNum <= 0) {
+            toast.error('Please enter a valid amount greater than 0');
+            return;
+        }
+        try {
+            await triggerAutoRecharge({
+                amount_usd: amount,
+                platform_key: tenant,
+            }).unwrap();
+            toast.success('Credits added successfully');
+            setAmount('');
+            onClose();
+        }
+        catch (error) {
+            toast.error((error === null || error === void 0 ? void 0 : error.detail) || 'Failed to add credits');
+        }
+    };
+    const handleClose = () => {
+        setAmount('');
+        onClose();
+    };
+    return (jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: jsxs(DialogContent, { className: "max-w-md", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Add Credits" }), jsx(DialogDescription, { children: "Add credits to your account using your payment method on file." })] }), jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { htmlFor: "credit-amount", className: "text-sm font-medium", children: "Amount (USD)" }), jsxs("div", { className: "relative", children: [jsx(DollarSign, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), jsx(Input, { id: "credit-amount", type: "number", min: "0.01", step: "0.01", placeholder: "50.00", value: amount, onChange: (e) => setAmount(e.target.value), className: "pl-9" })] }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "Enter the amount you want to add to your credit balance" })] }), jsxs("div", { className: "flex items-start gap-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-100 dark:border-blue-800", children: [jsx(CircleAlert, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), jsx("p", { className: "text-xs text-blue-700 dark:text-blue-300", children: "Your payment method on file will be charged for this amount." })] }), jsxs(DialogFooter, { className: "gap-2 sm:gap-0", children: [jsx(Button$1, { type: "button", variant: "outline", onClick: handleClose, children: "Cancel" }), jsx(Button$1, { type: "submit", disabled: isLoading, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white", children: isLoading ? (jsxs(Fragment$1, { children: [jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }), "Processing..."] })) : ('Add Credits') })] })] })] }) }));
+}
+
 const AdvancedPagination = ({ currentPage, totalPages, onPageChange, siblingCount = 1, }) => {
     const generateRange = () => {
         const totalNumbers = siblingCount * 2 + 5;
@@ -163045,149 +163223,13 @@ function IntegrationsTab({ tenantKey, username, }) {
     return (jsxs("div", { className: "container mx-auto max-w-7xl !mt-0", children: [jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "w-full px-2 sm:px-0", children: [jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:justify-between sm:items-center mb-6", children: [jsxs(TabsList, { className: "sm:grid sm:w-fit sm:grid-cols-3 h-auto sm:h-[35px] gap-2 sm:gap-0", children: [jsx(TabsTrigger, { value: "llms", className: activeTab === "llms" ? "w-full" : undefined, children: "LLMs" }), jsx(TabsTrigger, { value: "data-sources", className: activeTab === "data-sources" ? "w-full" : undefined, children: "Data Sources" }), jsx(TabsTrigger, { value: "generated", className: activeTab === "generated" ? "w-full" : undefined, children: "APIs" })] }), jsxs("div", { className: "flex gap-2 w-full sm:w-auto", children: [activeTab === "llms" && (jsxs(Button$1, { className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white h-[35px] w-full sm:w-auto", onClick: openCreateLLMModal, children: [jsx(Plus, { className: "w-4 h-4 mr-2" }), "Add LLM"] })), activeTab === "data-sources" && (jsxs(Button$1, { className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white h-[35px] w-full sm:w-auto", onClick: openCreateDataSourceModal, children: [jsx(Plus, { className: "w-4 h-4 mr-2" }), "Add Data Source"] })), activeTab === "generated" && (jsxs(Button$1, { className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white h-[35px] w-full sm:w-auto", onClick: openCreateApiModal, children: [jsx(Plus, { className: "w-4 h-4 mr-2" }), "Add API"] }))] })] }), jsx(TabsContent, { value: "generated", className: "space-y-4", children: jsx(IntegrationAutogeneratedTab, { tenantKey: tenantKey }) }), jsx(TabsContent, { value: "llms", className: "space-y-4", children: jsx(IntegrationLLMsTab, { tenantKey: tenantKey }) }), jsx(TabsContent, { value: "data-sources", className: "space-y-4", children: jsx(IntegrationDataSourcesTab, { tenantKey: tenantKey }) })] }), jsx(CreateApiModal$1, { isOpen: showCreateApiModal, onClose: closeCreateApiModal, tenantKey: tenantKey, username: username }), jsx(CreateLLMModal, { isOpen: showCreateLLMModal, onClose: closeCreateLLMModal, tenantKey: tenantKey }), jsx(CreateDataSourceModal, { isOpen: showCreateDataSourceModal, onClose: closeCreateDataSourceModal, tenantKey: tenantKey })] }));
 }
 
-function formatCurrencyInput(value) {
-    if (value === null || value === undefined || value === '')
-        return '';
-    const num = typeof value === 'string' ? parseFloat(value) : value;
-    if (isNaN(num))
-        return '';
-    return num.toString();
-}
-function AutoRechargeModal({ isOpen, onClose, tenant }) {
-    const { data: autoRechargeInfo, isLoading, refetch, } = useGetAccountBillingInfoQuery({ platform_key: tenant });
-    const [updateAutoRecharge, { isLoading: isUpdating }] = useUpdateAutoRechargeInfoMutation();
-    const [threshold, setThreshold] = useState('');
-    const [amount, setAmount] = useState('');
-    const [spendingLimit, setSpendingLimit] = useState('');
-    const [isUnlimited, setIsUnlimited] = useState(false);
-    const [isEnabled, setIsEnabled] = useState(false);
-    // Sync form state with fetched data
-    useEffect(() => {
-        if (autoRechargeInfo) {
-            setThreshold(formatCurrencyInput(autoRechargeInfo.auto_recharge_threshold_usd));
-            setAmount(formatCurrencyInput(autoRechargeInfo.auto_recharge_amount_usd));
-            const limitValue = parseFloat(autoRechargeInfo.auto_recharge_spending_limit_usd || '0');
-            const unlimited = limitValue === 0;
-            setIsUnlimited(unlimited);
-            setSpendingLimit(unlimited ? '' : formatCurrencyInput(autoRechargeInfo.auto_recharge_spending_limit_usd));
-            setIsEnabled(autoRechargeInfo.auto_recharge_enabled || false);
-        }
-    }, [autoRechargeInfo]);
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        if (!threshold || !amount || (!isUnlimited && !spendingLimit)) {
-            toast.error('Please fill in all fields');
-            return;
-        }
-        const thresholdNum = parseFloat(threshold);
-        const amountNum = parseFloat(amount);
-        const spendingLimitNum = isUnlimited ? 0 : parseFloat(spendingLimit);
-        if (isNaN(thresholdNum) || thresholdNum < 0) {
-            toast.error('Please enter a valid threshold amount');
-            return;
-        }
-        if (isNaN(amountNum) || amountNum <= 0) {
-            toast.error('Please enter a valid recharge amount greater than 0');
-            return;
-        }
-        if (!isUnlimited && (isNaN(spendingLimitNum) || spendingLimitNum < 0)) {
-            toast.error('Please enter a valid spending limit');
-            return;
-        }
-        try {
-            await updateAutoRecharge({
-                auto_recharge_threshold_usd: threshold,
-                auto_recharge_amount_usd: amount,
-                auto_recharge_spending_limit_usd: isUnlimited ? '0' : spendingLimit,
-                auto_recharge_enabled: isEnabled,
-                platform_key: tenant,
-            }).unwrap();
-            toast.success('Usage settings updated successfully');
-            refetch();
-            onClose();
-        }
-        catch (error) {
-            toast.error('Failed to update usage settings');
-        }
-    };
-    const handleClose = () => {
-        // Reset form to original values on close
-        if (autoRechargeInfo) {
-            setThreshold(formatCurrencyInput(autoRechargeInfo.auto_recharge_threshold_usd));
-            setAmount(formatCurrencyInput(autoRechargeInfo.auto_recharge_amount_usd));
-            const limitValue = parseFloat(autoRechargeInfo.auto_recharge_spending_limit_usd || '0');
-            const unlimited = limitValue === 0;
-            setIsUnlimited(unlimited);
-            setSpendingLimit(unlimited ? '' : formatCurrencyInput(autoRechargeInfo.auto_recharge_spending_limit_usd));
-            setIsEnabled(autoRechargeInfo.auto_recharge_enabled || false);
-        }
-        onClose();
-    };
-    const formatLastTriggered = (dateString, includeTime = true) => {
-        if (!dateString)
-            return 'Never';
-        const date = new Date(dateString);
-        const options = {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-        };
-        if (includeTime) {
-            options.hour = '2-digit';
-            options.minute = '2-digit';
-        }
-        return date.toLocaleDateString('en-US', options);
-    };
-    return (jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: jsxs(DialogContent, { className: "max-w-md", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Manage Usage" }), jsx(DialogDescription, { children: "Configure automatic recharge and spending limits." })] }), isLoading ? (jsx("div", { className: "flex items-center justify-center py-8", children: jsx(LoaderCircle, { className: "h-8 w-8 animate-spin text-primary" }) })) : (jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [jsxs("div", { className: "bg-slate-50 dark:bg-slate-800/50 rounded-lg p-4 border border-slate-200 dark:border-slate-700", children: [(parseFloat((autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_total_charged_usd) || '0') > 0 ||
-                                    (autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_period_ends_at)) && (jsxs("div", { className: "flex items-center justify-between gap-4 mb-4 pb-4 border-b border-slate-200 dark:border-slate-700", children: [parseFloat((autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_total_charged_usd) || '0') > 0 && (jsxs("div", { className: "flex-1", children: [jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400 mb-1", children: "Total Spent" }), jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 rounded-full text-sm font-medium", children: [jsx(DollarSign, { className: "h-3.5 w-3.5" }), formatCurrencyInput(autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_total_charged_usd)] })] })), (autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_period_ends_at) && (jsxs("div", { className: "flex-1 text-right", children: [jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400 mb-1", children: "Resets On" }), jsxs("div", { className: "inline-flex items-center gap-1 text-sm text-slate-700 dark:text-slate-300", children: [jsx(Calendar$1, { className: "h-3.5 w-3.5" }), formatLastTriggered(autoRechargeInfo.auto_recharge_period_ends_at, false)] })] }))] })), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "space-y-1", children: [jsx(Label, { htmlFor: "auto-recharge-toggle", className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: "Enable Auto Recharge" }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "Automatically top up credits when balance is low" })] }), jsx(Switch, { id: "auto-recharge-toggle", checked: isEnabled, onCheckedChange: setIsEnabled, className: "data-[state=checked]:bg-blue-500" })] }), (autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_last_triggered_at) && (jsxs("div", { className: "text-xs text-slate-500 dark:text-slate-400 mt-3 pt-3 border-t border-slate-200 dark:border-slate-700", children: [jsx("span", { children: "Last triggered: " }), jsx("span", { className: "font-medium", children: formatLastTriggered(autoRechargeInfo === null || autoRechargeInfo === void 0 ? void 0 : autoRechargeInfo.auto_recharge_last_triggered_at) })] }))] }), isEnabled && (jsxs(Fragment$1, { children: [jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { htmlFor: "spending-limit", className: "text-sm font-medium", children: "Spending Limit" }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Switch, { id: "unlimited-toggle", checked: isUnlimited, onCheckedChange: (checked) => {
-                                                                setIsUnlimited(checked);
-                                                                if (checked)
-                                                                    setSpendingLimit('');
-                                                            }, className: "data-[state=checked]:bg-blue-500 scale-75" }), jsx(Label, { htmlFor: "unlimited-toggle", className: "text-xs text-slate-500 dark:text-slate-400 cursor-pointer", children: "Unlimited" })] })] }), jsxs("div", { className: "relative", children: [jsx(DollarSign, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), jsx(Input, { id: "spending-limit", type: "number", min: "0.01", step: "0.01", placeholder: isUnlimited ? 'Unlimited' : '100.00', value: spendingLimit, onChange: (e) => setSpendingLimit(e.target.value), disabled: isUnlimited, className: "pl-9" })] }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "Maximum amount that can be auto-charged per billing period" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { htmlFor: "amount", className: "text-sm font-medium", children: "Recharge Amount" }), jsxs("div", { className: "relative", children: [jsx(DollarSign, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), jsx(Input, { id: "amount", type: "number", min: "0.01", step: "0.01", placeholder: "50.00", value: amount, onChange: (e) => setAmount(e.target.value), className: "pl-9" })] }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "Amount to add to your balance when auto recharge triggers" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label, { htmlFor: "threshold", className: "text-sm font-medium", children: "Recharge Threshold" }), jsxs("div", { className: "relative", children: [jsx(DollarSign, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), jsx(Input, { id: "threshold", type: "number", min: "0", step: "0.01", placeholder: "10.00", value: threshold, onChange: (e) => setThreshold(e.target.value), className: "pl-9" })] }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "Auto recharge will trigger when your balance falls below this amount" })] })] })), jsxs("div", { className: "flex items-start gap-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-100 dark:border-blue-800", children: [jsx(CircleAlert, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), jsx("p", { className: "text-xs text-blue-700 dark:text-blue-300", children: "Your payment method on file will be charged automatically when your credit balance drops below the threshold." })] }), jsxs(DialogFooter, { className: "gap-2 sm:gap-0", children: [jsx(Button$1, { type: "button", variant: "outline", onClick: handleClose, children: "Cancel" }), jsx(Button$1, { type: "submit", disabled: isUpdating, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white", children: isUpdating ? (jsxs(Fragment$1, { children: [jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }), "Saving..."] })) : ('Save Settings') })] })] }))] }) }));
-}
-
-function AddCreditsModal({ isOpen, onClose, tenant }) {
-    const [triggerAutoRecharge, { isLoading }] = useTriggerAutoRechargeMutation();
-    const [amount, setAmount] = useState('');
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        if (!amount) {
-            toast.error('Please enter an amount');
-            return;
-        }
-        const amountNum = parseFloat(amount);
-        if (isNaN(amountNum) || amountNum <= 0) {
-            toast.error('Please enter a valid amount greater than 0');
-            return;
-        }
-        try {
-            await triggerAutoRecharge({
-                amount_usd: amount,
-                platform_key: tenant,
-            }).unwrap();
-            toast.success('Credits added successfully');
-            setAmount('');
-            onClose();
-        }
-        catch (error) {
-            toast.error((error === null || error === void 0 ? void 0 : error.detail) || 'Failed to add credits');
-        }
-    };
-    const handleClose = () => {
-        setAmount('');
-        onClose();
-    };
-    return (jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: jsxs(DialogContent, { className: "max-w-md", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Add Credits" }), jsx(DialogDescription, { children: "Add credits to your account using your payment method on file." })] }), jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label, { htmlFor: "credit-amount", className: "text-sm font-medium", children: "Amount (USD)" }), jsxs("div", { className: "relative", children: [jsx(DollarSign, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), jsx(Input, { id: "credit-amount", type: "number", min: "0.01", step: "0.01", placeholder: "50.00", value: amount, onChange: (e) => setAmount(e.target.value), className: "pl-9" })] }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: "Enter the amount you want to add to your credit balance" })] }), jsxs("div", { className: "flex items-start gap-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-100 dark:border-blue-800", children: [jsx(CircleAlert, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), jsx("p", { className: "text-xs text-blue-700 dark:text-blue-300", children: "Your payment method on file will be charged for this amount." })] }), jsxs(DialogFooter, { className: "gap-2 sm:gap-0", children: [jsx(Button$1, { type: "button", variant: "outline", onClick: handleClose, children: "Cancel" }), jsx(Button$1, { type: "submit", disabled: isLoading, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white", children: isLoading ? (jsxs(Fragment$1, { children: [jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }), "Processing..."] })) : ('Add Credits') })] })] })] }) }));
-}
-
 function formatCredits(credits) {
     if (credits === null || credits === undefined || Number.isNaN(credits))
         return '0';
-    return credits.toLocaleString();
+    return credits.toLocaleString('en-US');
 }
 function formatRenewalDate(dateString) {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', {
+    return new Date(dateString).toLocaleDateString('en-US', {
         month: 'short',
         day: 'numeric',
         year: 'numeric',
@@ -163200,18 +163242,42 @@ function getDaysRemaining(dateString) {
     const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
     return Math.max(0, diffDays);
 }
-function BillingTab({ topUpURL, tenant, userActiveApp = null, username, onUpgradeClick, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+function formatPlanLabel(plan) {
+    if (plan === 'free_trial')
+        return 'Trial';
+    if (!plan || plan.toLowerCase().includes('free'))
+        return 'Free';
+    return 'Premium';
+}
+function formatUsd(value) {
+    if (value === null || value === undefined || value === '')
+        return '—';
+    const num = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(num))
+        return '—';
+    return `$${num.toFixed(2)}`;
+}
+function Section({ title, description, action, children, testId }) {
+    return (jsxs("div", { "data-testid": testId, className: "rounded-lg border border-[#e5e5e5] bg-white shadow-[0_1px_2px_0_rgba(0,0,0,0.05)] dark:bg-zinc-900 dark:border-zinc-800", children: [jsxs("div", { className: "flex flex-col gap-2 p-4 sm:flex-row sm:items-start sm:justify-between", children: [jsxs("div", { className: "space-y-0.5", children: [jsx("h3", { className: "text-[16px] font-medium leading-6 text-[#101828] dark:text-gray-100", children: title }), description && (jsx("p", { className: "text-[13px] font-normal leading-5 text-[#4a5565] dark:text-gray-400", children: description }))] }), action && jsx("div", { className: "shrink-0", children: action })] }), children && (jsx("div", { className: "border-t border-[#e5e7eb] dark:border-zinc-800 px-4 py-3", children: children }))] }));
+}
+function Stat({ label, value, hint }) {
+    return (jsxs("div", { className: "space-y-0.5", children: [jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-[#6a7282] dark:text-gray-400", children: label }), jsx("p", { className: "text-[18px] font-semibold leading-6 text-[#101828] dark:text-gray-100", children: value }), hint && (jsx("p", { className: "text-[12px] font-normal leading-4 text-[#6a7282] dark:text-gray-500", children: hint }))] }));
+}
+function SectionSkeleton({ withBody = false }) {
+    return (jsxs("div", { className: "rounded-lg border border-[#e5e5e5] bg-white shadow-[0_1px_2px_0_rgba(0,0,0,0.05)] dark:bg-zinc-900 dark:border-zinc-800", children: [jsxs("div", { className: "flex flex-col gap-2 p-4 sm:flex-row sm:items-start sm:justify-between", children: [jsxs("div", { className: "space-y-2", children: [jsx(Skeleton, { className: "h-5 w-32" }), jsx(Skeleton, { className: "h-4 w-56" })] }), jsx(Skeleton, { className: "h-9 w-32" })] }), withBody && (jsx("div", { className: "border-t border-[#e5e7eb] dark:border-zinc-800 px-4 py-3", children: jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: [0, 1, 2].map((i) => (jsxs("div", { className: "space-y-2", children: [jsx(Skeleton, { className: "h-3 w-20" }), jsx(Skeleton, { className: "h-6 w-24" })] }, i))) }) }))] }));
+}
+function BillingTab({ tenant, userActiveApp = null, username, mainPlatformKey, currentUserEmail, redirectUrl, }) {
+    var _a;
     const [isAutoRechargeModalOpen, setIsAutoRechargeModalOpen] = useState(false);
     const [isAddCreditsModalOpen, setIsAddCreditsModalOpen] = useState(false);
     const [isRedirectingToPaymentSettings, setIsRedirectingToPaymentSettings] = useState(false);
-    const [isRedirectingToBilling, setIsRedirectingToBilling] = useState(false);
-    //do not use cache on this query
-    const { data: billingInfo, isLoading: isBillingInfoLoading } = useGetAccountBillingInfoQuery({
-        platform_key: tenant,
-    }, {
-        refetchOnMountOrArgChange: true,
+    const { isLoading: isUpgrading, handleUpgrade } = useStripeUpgrade({
+        redirectUrl: redirectUrl !== null && redirectUrl !== void 0 ? redirectUrl : (typeof window !== 'undefined' ? window.location.href : ''),
+        sourcePlatformKey: tenant,
+        mainPlatformKey,
+        currentUserEmail,
     });
+    const { data: billingInfo, isLoading: isBillingInfoLoading } = useGetAccountBillingInfoQuery({ platform_key: tenant }, { refetchOnMountOrArgChange: true });
     const [createStripePortal] = useCreateStripeCustomerPortalMutation();
     const handleBilling = async ({ extraRequestBody = {}, }) => {
         return await createStripePortal({
@@ -163224,24 +163290,6 @@ function BillingTab({ topUpURL, tenant, userActiveApp = null, username, onUpgrad
             },
         }).unwrap();
     };
-    const handleManageSubscription = async () => {
-        setIsRedirectingToBilling(true);
-        try {
-            const result = await handleBilling({});
-            if (result === null || result === void 0 ? void 0 : result.url) {
-                // Keep loading state - page will navigate away
-                window.location.href = result.url;
-            }
-            else {
-                setIsRedirectingToBilling(false);
-                toast.error('Failed to open billing page');
-            }
-        }
-        catch (_a) {
-            setIsRedirectingToBilling(false);
-            toast.error('Failed to open billing page');
-        }
-    };
     const handleSetupPaymentMethod = async () => {
         setIsRedirectingToPaymentSettings(true);
         try {
@@ -163252,7 +163300,6 @@ function BillingTab({ topUpURL, tenant, userActiveApp = null, username, onUpgrad
                 },
             });
             if (result === null || result === void 0 ? void 0 : result.url) {
-                // Keep loading state - page will navigate away
                 window.location.href = result.url;
             }
             else {
@@ -163265,20 +163312,47 @@ function BillingTab({ topUpURL, tenant, userActiveApp = null, username, onUpgrad
             toast.error('Failed to open payment settings');
         }
     };
-    const availableCredits = (_a = Number(billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.available_credits)) !== null && _a !== void 0 ? _a : 0;
-    const canSeeUpgradeButton = !((_b = userActiveApp === null || userActiveApp === void 0 ? void 0 : userActiveApp.subscription) === null || _b === void 0 ? void 0 : _b.active) ||
-        ((billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.current_plan) &&
-            ((_c = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.pricing_table) === null || _c === void 0 ? void 0 : _c.pricing_table_id) &&
-            !billingInfo.current_plan.toLowerCase().includes('pro'));
-    const onFreePlan = !((_d = userActiveApp === null || userActiveApp === void 0 ? void 0 : userActiveApp.subscription) === null || _d === void 0 ? void 0 : _d.active) ||
-        ((_f = (_e = userActiveApp === null || userActiveApp === void 0 ? void 0 : userActiveApp.subscription) === null || _e === void 0 ? void 0 : _e.product_sku) === null || _f === void 0 ? void 0 : _f.includes('free'));
     if (isBillingInfoLoading) {
-        return (jsx("div", { className: "container mx-auto max-w-7xl !mt-0", children: jsxs("div", { className: "flex flex-col sm:flex-row gap-6 w-full", children: [jsx(Card, { className: "flex-1 shadow-md border-1 overflow-hidden", children: jsx(CardContent, { className: "flex flex-col items-center text-center p-6", children: jsxs("div", { className: "max-w-md mx-auto text-center py-8 w-full", children: [jsx("div", { className: "mb-4 flex justify-center", children: jsx(Skeleton, { className: "h-16 w-16 rounded-full" }) }), jsxs("div", { className: "flex justify-center items-center gap-2 mb-3", children: [jsx(Skeleton, { className: "h-7 w-32" }), jsx(Skeleton, { className: "h-5 w-16" })] }), jsx("div", { className: "w-full mb-4", children: jsxs("div", { className: "bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-800/50 dark:to-slate-900/50 rounded-lg p-4 border border-slate-200/50 dark:border-slate-700/50", children: [jsxs("div", { className: "flex items-center justify-center gap-2 mb-1", children: [jsx(Skeleton, { className: "h-4 w-4" }), jsx(Skeleton, { className: "h-3 w-24" })] }), jsx("div", { className: "flex justify-center", children: jsx(Skeleton, { className: "h-8 w-20 mt-1" }) }), jsx("div", { className: "flex justify-center", children: jsx(Skeleton, { className: "h-3 w-28 mt-2" }) })] }) }), jsxs("div", { className: "mb-6 flex flex-col items-center gap-1", children: [jsx(Skeleton, { className: "h-4 w-64" }), jsx(Skeleton, { className: "h-4 w-48" })] }), jsxs("div", { className: "flex gap-3 w-full", children: [jsx(Skeleton, { className: "flex-1 h-10 rounded-md" }), jsx(Skeleton, { className: "flex-1 h-10 rounded-md" })] })] }) }) }), topUpURL && (jsx(Card, { className: "flex-1 shadow-md border-1 overflow-hidden", children: jsx(CardContent, { className: "flex flex-col items-center text-center p-6", children: jsxs("div", { className: "max-w-md mx-auto text-center py-8 w-full", children: [jsx("div", { className: "mb-4 flex justify-center", children: jsx(Skeleton, { className: "h-16 w-16 rounded-full" }) }), jsx("div", { className: "flex justify-center mb-3", children: jsx(Skeleton, { className: "h-7 w-20" }) }), jsxs("div", { className: "mb-6 flex flex-col items-center gap-1", children: [jsx(Skeleton, { className: "h-4 w-56" }), jsx(Skeleton, { className: "h-4 w-40" })] }), jsx(Skeleton, { className: "w-full h-10 rounded-md" })] }) }) }))] }) }));
-    }
-    return (jsxs("div", { className: "container mx-auto max-w-7xl !mt-0", children: [jsxs("div", { className: "flex flex-col sm:flex-row gap-6 w-full", children: [jsx(Card, { className: "flex-1 shadow-md border-1 hover:border-primary/20 overflow-hidden", children: jsx(CardContent, { className: "flex flex-col items-center text-center p-6", children: jsxs("div", { className: "max-w-md mx-auto text-center py-8", children: [jsx("div", { className: "text-gray-400 dark:text-gray-500 mb-4", children: jsx(CreditCard, { className: "h-16 w-16 mx-auto" }) }), ((billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.current_plan) || onFreePlan || canSeeUpgradeButton) && (jsxs("div", { className: "flex justify-center items-center gap-2 mb-3", children: [jsxs("h4", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100 capitalize", children: [(billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.current_plan) || (onFreePlan ? 'Free' : ''), " Plan"] }), (onFreePlan || canSeeUpgradeButton) && (jsxs("button", { onClick: onUpgradeClick, className: "inline-flex items-center gap-1 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 text-sm font-medium transition-colors cursor-pointer", children: ["Upgrade", jsx(ArrowUpRight, { className: "h-3.5 w-3.5" })] }))] })), jsx("div", { className: "w-full mb-4", children: ((_g = userActiveApp === null || userActiveApp === void 0 ? void 0 : userActiveApp.subscription) === null || _g === void 0 ? void 0 : _g.subscription_ends) &&
-                                            ((_h = userActiveApp === null || userActiveApp === void 0 ? void 0 : userActiveApp.subscription) === null || _h === void 0 ? void 0 : _h.subscription_starts) &&
-                                            ((_j = userActiveApp === null || userActiveApp === void 0 ? void 0 : userActiveApp.subscription) === null || _j === void 0 ? void 0 : _j.active) &&
-                                            !(billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.current_plan) ? (jsxs("div", { className: "flex flex-col sm:flex-row gap-3", children: [jsxs("div", { className: "flex-1 bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-800/50 dark:to-slate-900/50 rounded-lg p-4 border border-slate-200/50 dark:border-slate-700/50", children: [jsxs("div", { className: "flex items-center justify-center gap-2 mb-1", children: [jsx(CalendarDays, { className: "h-4 w-4 text-slate-500 dark:text-slate-400" }), jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-slate-500 dark:text-slate-400", children: "Renews On" })] }), jsx("p", { className: "text-1xl font-semibold text-slate-800 dark:text-slate-200 text-center", children: formatRenewalDate(userActiveApp.subscription.subscription_ends) }), jsxs("p", { className: "text-xs text-slate-500 dark:text-slate-400 mt-1 text-center", children: [getDaysRemaining(userActiveApp.subscription.subscription_ends), " days remaining"] })] }), jsxs("div", { className: "flex-1 bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-800/50 dark:to-slate-900/50 rounded-lg p-4 border border-slate-200/50 dark:border-slate-700/50", children: [jsxs("div", { className: "flex items-center justify-center gap-2 mb-1", children: [jsx(Coins, { className: "h-4 w-4 text-slate-500 dark:text-slate-400" }), jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-slate-500 dark:text-slate-400", children: "Available Credits" })] }), jsx("p", { className: "text-1xl font-semibold text-slate-800 dark:text-slate-200 text-center", children: formatCredits(availableCredits) }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400 mt-1 text-center", children: "credits remaining" })] })] })) : (jsxs("div", { className: "bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-800/50 dark:to-slate-900/50 rounded-lg p-4 border border-slate-200/50 dark:border-slate-700/50", children: [jsxs("div", { className: "flex items-center justify-center gap-2 mb-1", children: [jsx(Coins, { className: "h-4 w-4 text-slate-500 dark:text-slate-400" }), jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-slate-500 dark:text-slate-400", children: "Available Credits" })] }), jsx("p", { className: "text-2xl font-semibold text-slate-800 dark:text-slate-200 text-center", children: formatCredits(availableCredits) }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400 mt-1 text-center", children: "credits remaining" })] })) }), jsxs("p", { className: "text-gray-600 dark:text-gray-400 mb-6 text-sm", children: ["Configure auto recharge,", ' ', !((billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.current_plan) || onFreePlan) && (jsxs(Fragment$1, { children: [jsxs("button", { onClick: handleManageSubscription, disabled: isRedirectingToBilling, className: "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline-offset-2 cursor-pointer disabled:opacity-50 inline-flex items-center gap-1", children: ["manage subscription", isRedirectingToBilling && jsx(LoaderCircle, { className: "h-3 w-3 animate-spin" })] }), ",", ' '] })), "spending limits, and usage settings"] }), (billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.has_payment_method) ? (jsxs("div", { className: "flex gap-3 w-full", children: [jsx(Button$1, { onClick: () => setIsAutoRechargeModalOpen(true), className: "flex-1 bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer text-md", children: "Manage Usage" }), jsx(Button$1, { onClick: () => setIsAddCreditsModalOpen(true), variant: "outline", className: "flex-1 cursor-pointer text-md", children: "Add Credits" })] })) : (jsxs(Button$1, { onClick: handleSetupPaymentMethod, disabled: isRedirectingToPaymentSettings, className: "w-full bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer text-md", children: [isRedirectingToPaymentSettings ? (jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" })) : (jsx(Wallet, { className: "h-4 w-4 mr-2" })), isRedirectingToPaymentSettings ? 'Redirecting...' : 'Add Payment Method'] }))] }) }) }), topUpURL && (jsx(Card, { className: "flex-1 shadow-md border-1 hover:border-primary/20 overflow-hidden", children: jsx(CardContent, { className: "flex flex-col items-center text-center p-6", children: jsxs("div", { className: "max-w-md mx-auto text-center py-8", children: [jsx("div", { className: "text-gray-400 dark:text-gray-500 mb-4", children: jsx(CreditCard, { className: "h-16 w-16 mx-auto" }) }), jsx("h4", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3", children: "Usage" }), jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-6 text-sm", children: "Add credits to your account for pay-as-you-go services" }), jsx(Button$1, { onClick: () => window.open(topUpURL, '_self'), className: "w-full bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer text-md", children: "Add Credits" })] }) }) }))] }), jsx(AutoRechargeModal, { tenant: tenant, isOpen: isAutoRechargeModalOpen, onClose: () => setIsAutoRechargeModalOpen(false) }), jsx(AddCreditsModal, { tenant: tenant, isOpen: isAddCreditsModalOpen, onClose: () => setIsAddCreditsModalOpen(false) })] }));
+        return (jsx("div", { className: "container max-w-3xl !mt-0", children: jsxs("div", { className: "space-y-4", children: [jsx(SectionSkeleton, {}), jsx(SectionSkeleton, { withBody: true }), jsx(SectionSkeleton, { withBody: true })] }) }));
+    }
+    const billing = billingInfo;
+    const isFreePlan = formatPlanLabel(billing === null || billing === void 0 ? void 0 : billing.current_plan) === 'Free' ||
+        (Boolean(billing === null || billing === void 0 ? void 0 : billing.free_trial) && (billing === null || billing === void 0 ? void 0 : billing.platform_key) !== mainPlatformKey);
+    const isTrialPlan = Boolean(billing === null || billing === void 0 ? void 0 : billing.free_trial) && (billing === null || billing === void 0 ? void 0 : billing.platform_key) === mainPlatformKey;
+    const planLabel = isFreePlan
+        ? 'Free'
+        : isTrialPlan
+            ? 'Trial'
+            : 'Premium';
+    const availableCredits = (_a = Number(billing === null || billing === void 0 ? void 0 : billing.available_credits)) !== null && _a !== void 0 ? _a : 0;
+    const consumedCredits = (billing === null || billing === void 0 ? void 0 : billing.consumed_credits) != null ? parseInt(billing.consumed_credits, 10) : null;
+    const hasPaymentMethod = Boolean(billing === null || billing === void 0 ? void 0 : billing.has_payment_method);
+    const isAutoRechargeEnabled = Boolean(billing === null || billing === void 0 ? void 0 : billing.auto_recharge_enabled);
+    const spendingLimitRaw = billing === null || billing === void 0 ? void 0 : billing.auto_recharge_spending_limit_usd;
+    const isUnlimitedSpendingLimit = !spendingLimitRaw || parseFloat(spendingLimitRaw || '0') === 0;
+    const subscription = userActiveApp === null || userActiveApp === void 0 ? void 0 : userActiveApp.subscription;
+    const onActiveSubscription = Boolean((subscription === null || subscription === void 0 ? void 0 : subscription.active) && (subscription === null || subscription === void 0 ? void 0 : subscription.subscription_ends) && (subscription === null || subscription === void 0 ? void 0 : subscription.subscription_starts));
+    const planDescription = (() => {
+        if (planLabel === 'Trial' && (subscription === null || subscription === void 0 ? void 0 : subscription.subscription_ends)) {
+            return `Trial ends on ${formatRenewalDate(subscription.subscription_ends)} · ${getDaysRemaining(subscription.subscription_ends)} days remaining`;
+        }
+        if (planLabel === 'Premium' && onActiveSubscription && (subscription === null || subscription === void 0 ? void 0 : subscription.subscription_ends)) {
+            return `Renews on ${formatRenewalDate(subscription.subscription_ends)}`;
+        }
+        if (planLabel === 'Free') {
+            return 'You are on the Free plan';
+        }
+        return 'Manage your subscription and billing details';
+    })();
+    return (jsxs("div", { className: "container mx-auto max-w-3xl !mt-0", children: [jsxs("div", { className: "space-y-4", children: [jsx(Section, { title: "Plan", testId: "billing-plan-section", description: planDescription, action: isFreePlan || isTrialPlan ? (jsxs(Button$1, { onClick: () => handleUpgrade('premium'), disabled: isUpgrading, className: "h-9 px-4 text-[14px] font-medium text-white bg-gradient-to-r from-[rgb(56,161,229)] to-[rgb(114,132,255)] hover:opacity-90 disabled:opacity-70", children: [isUpgrading ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" })) : (jsx(Sparkles, { className: "h-4 w-4" })), isUpgrading ? 'Redirecting...' : 'Upgrade'] })) : undefined, children: jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { "data-testid": "billing-plan-label", className: "text-[18px] font-semibold leading-7 text-[#101828] dark:text-gray-100", children: planLabel }), jsx("span", { className: "rounded-full px-2.5 py-0.5 text-[12px] font-medium", style: {
+                                        backgroundColor: '#f5f8ff',
+                                        color: '#155dfc',
+                                        border: '1px solid #d0e0ff',
+                                    }, children: "Current" })] }) }), jsx(Section, { title: "Credits", testId: "billing-credits-section", description: "Track your available credits and usage.", action: isFreePlan || isTrialPlan ? undefined : hasPaymentMethod ? (jsx(Button$1, { variant: "outline", onClick: () => setIsAddCreditsModalOpen(true), className: "h-9 px-4 text-[14px] font-medium", children: "Add Credits" })) : (jsxs(Button$1, { onClick: handleSetupPaymentMethod, disabled: isRedirectingToPaymentSettings, className: "h-9 px-4 text-[14px] font-medium bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white", children: [isRedirectingToPaymentSettings ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" })) : (jsx(Wallet, { className: "h-4 w-4" })), isRedirectingToPaymentSettings ? 'Redirecting...' : 'Manage Billing'] })), children: jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: [jsx(Stat, { label: "Available", value: `${formatCredits(availableCredits)} Credits`, hint: "Credits remaining" }), consumedCredits != null && (jsx(Stat, { label: "Consumed", value: `${formatCredits(consumedCredits)} Credits`, hint: "Used this period" })), (billing === null || billing === void 0 ? void 0 : billing.credits_reset_date) && (jsx(Stat, { label: "Resets on", value: formatRenewalDate(billing.credits_reset_date), hint: "Next reset date" }))] }) }), !isFreePlan && !isTrialPlan && hasPaymentMethod && (jsx(Section, { title: "Auto Recharge", testId: "billing-auto-recharge-section", description: "Top up your balance automatically when credits run low.", action: jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { "data-testid": "billing-auto-recharge-status", className: "rounded-full px-2.5 py-0.5 text-[12px] font-medium", style: {
+                                        backgroundColor: isAutoRechargeEnabled ? '#f5f8ff' : '#f3f4f6',
+                                        color: isAutoRechargeEnabled ? '#155dfc' : '#6a7282',
+                                        border: `1px solid ${isAutoRechargeEnabled ? '#d0e0ff' : '#e5e7eb'}`,
+                                    }, children: isAutoRechargeEnabled ? 'Enabled' : 'Disabled' }), jsx(Button$1, { variant: "outline", onClick: () => setIsAutoRechargeModalOpen(true), className: "h-9 px-4 text-[14px] font-medium", children: "Manage Usage" })] }), children: isAutoRechargeEnabled ? (jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: [jsx(Stat, { label: "Threshold", value: formatUsd(billing === null || billing === void 0 ? void 0 : billing.auto_recharge_threshold_usd) }), jsx(Stat, { label: "Recharge amount", value: formatUsd(billing === null || billing === void 0 ? void 0 : billing.auto_recharge_amount_usd) }), jsx(Stat, { label: "Spending limit", value: isUnlimitedSpendingLimit ? 'Unlimited' : formatUsd(spendingLimitRaw) })] })) : (jsx("p", { className: "text-[14px] font-normal leading-5 text-[#4a5565] dark:text-gray-400", children: "Auto recharge is currently disabled. Enable it to keep your balance topped up without interruption." })) }))] }), jsx(AutoRechargeModal, { tenant: tenant, isOpen: isAutoRechargeModalOpen, onClose: () => setIsAutoRechargeModalOpen(false) }), jsx(AddCreditsModal, { tenant: tenant, isOpen: isAddCreditsModalOpen, onClose: () => setIsAddCreditsModalOpen(false) })] }));
 }
 
 const SmtpContent = ({ platformKey }) => {
@@ -165550,12 +165624,15 @@ function MonetizationTab({ platformKey }) {
     return (jsxs("div", { className: "container mx-auto max-w-7xl !mt-0 space-y-6", children: [jsx(StripeConnect, { platformKey: platformKey }), jsx(PaywallConfig, { platformKey: platformKey, disabled: !isStripeReady })] }));
 }
 
-function Account({ tenant, tenants = [], username, onInviteClick, billingURL = '', topUpURL = '', userActiveApp = null, showPlatformName = false, isAdmin = false, targetTab = 'basic', currentPlan: _currentPlan = '', currentSPA = '', authURL, onTenantUpdate, currentPlatformBaseDomain = '', enableRbac = false, rbacPermissions = {}, onLoadGroupPermissions, onTabChange, onUpgradeClick, }) {
+function Account({ tenant, tenants = [], username, onInviteClick, email, mainPlatformKey, userActiveApp = null, showPlatformName = false, isAdmin = false, targetTab = 'basic', currentPlan: _currentPlan = '', currentSPA = '', authURL, onTenantUpdate, currentPlatformBaseDomain = '', enableRbac = false, rbacPermissions = {}, onLoadGroupPermissions, onTabChange, }) {
+    const currentTenant = tenants.find((t) => t.key === tenant);
     const TABS = [
         { id: 'organization', label: 'Organization', icon: Briefcase },
         { id: 'management', label: 'Management', icon: Users },
         { id: 'integrations', label: 'Integrations', icon: KeyRound },
-        { id: 'monetization', label: 'Monetization', icon: Coins },
+        ...((currentTenant === null || currentTenant === void 0 ? void 0 : currentTenant.show_paywall)
+            ? [{ id: 'monetization', label: 'Monetization', icon: Coins }]
+            : []),
         { id: 'advanced', label: 'Advanced', icon: Settings },
     ];
     const [activeTab, setActiveTab] = useState(targetTab);
@@ -165603,7 +165680,7 @@ function Account({ tenant, tenants = [], username, onInviteClick, billingURL = '
                                             }
                                         }, className: `w-full justify-start px-4 py-3 text-left rounded-lg transition-all flex items-center text-base ${activeTab === tab.id
                                             ? 'bg-blue-50 text-blue-700 font-medium'
-                                            : 'hover:bg-gray-50 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100'}`, children: [jsx(tab.icon, { className: "h-5 w-5 mr-3 flex-shrink-0" }), jsx("span", { className: "truncate", children: tab.label })] }, tab.id))), (billingURL || topUpURL) && (jsxs("button", { onClick: () => {
+                                            : 'hover:bg-gray-50 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100'}`, children: [jsx(tab.icon, { className: "h-5 w-5 mr-3 flex-shrink-0" }), jsx("span", { className: "truncate", children: tab.label })] }, tab.id))), (currentTenant === null || currentTenant === void 0 ? void 0 : currentTenant.show_paywall) && (jsxs("button", { onClick: () => {
                                             setActiveTab('billing');
                                             // Set URL param for billing tab
                                             onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('billing');
@@ -165629,7 +165706,7 @@ function Account({ tenant, tenants = [], username, onInviteClick, billingURL = '
                                     }
                                 }, className: `flex items-center gap-2 px-3 py-2 rounded-lg whitespace-nowrap text-sm transition-all ${activeTab === tab.id
                                     ? 'bg-blue-50 text-blue-600 font-medium'
-                                    : 'text-gray-600 hover:bg-gray-50'}`, children: [jsx(tab.icon, { className: "h-4 w-4" }), jsx("span", { className: "hidden sm:inline", children: tab.label }), jsx("span", { className: "sm:hidden", children: tab.label })] }, tab.id))), (billingURL || topUpURL) && (jsxs("button", { onClick: () => {
+                                    : 'text-gray-600 hover:bg-gray-50'}`, children: [jsx(tab.icon, { className: "h-4 w-4" }), jsx("span", { className: "hidden sm:inline", children: tab.label }), jsx("span", { className: "sm:hidden", children: tab.label })] }, tab.id))), (currentTenant === null || currentTenant === void 0 ? void 0 : currentTenant.show_paywall) && (jsxs("button", { onClick: () => {
                                     setActiveTab('billing');
                                     // Set URL param for billing tab
                                     onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('billing');
@@ -165638,10 +165715,10 @@ function Account({ tenant, tenants = [], username, onInviteClick, billingURL = '
                                     : 'text-gray-600 hover:bg-gray-50'}`, children: [jsx(CreditCard, { className: "h-4 w-4" }), jsx("span", { className: "hidden sm:inline", children: "Billing" }), jsx("span", { className: "sm:hidden", children: "Billing" })] }, 'billing'))] }) }) }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", style: { height: '100%' }, children: [jsxs("div", { className: "hidden lg:block flex-shrink-0 p-6 border-b border-gray-200 bg-white dark:bg-gray-900", children: [jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2 capitalize", children: activeTab }), jsxs("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [activeTab === 'management' && 'Manage users and their permissions in the system.', activeTab === 'organization' && 'Manage your organization settings.', activeTab === 'integrations' && 'Manage your integrations with other services.', activeTab === 'billing' && 'Manage your billing and subscription.', activeTab === 'monetization' && 'Configure paywalls, pricing, and revenue.', activeTab === 'advanced' && 'Configure advanced organization settings.'] })] }), jsxs("div", { className: "flex-1 p-6 space-y-6", style: {
                             overflowY: 'auto',
                             overflowX: 'hidden',
-                        }, children: [jsxs("div", { className: "lg:hidden mb-6", children: [jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2 capitalize", children: activeTab }), jsxs("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [activeTab === 'basic' && 'Manage your basic account information and preferences.', activeTab === 'social' && 'Connect and manage your social media accounts.', activeTab === 'security' && 'Update your security settings and password.', activeTab === 'management' && 'Manage users and their permissions in the system.', activeTab === 'organization' && 'Manage your organization settings.', activeTab === 'monetization' && 'Configure paywalls, pricing, and revenue.', activeTab === 'advanced' && 'Configure advanced organization settings.'] })] }), activeTab === 'management' && hasManagementPermissions && (jsx(Admin, { onInviteClick: onInviteClick, tenant: tenant, hasUserTabPermission: hasUserTabPermission, hasGroupsTabPermission: hasGroupsTabPermission, hasPoliciesTabPermission: hasPoliciesTabPermission, hasRolesTabPermission: hasRolesTabPermission, hasTeamsTabPermission: hasTeamsTabPermission, hasInviteUserPermission: hasInviteUserPermission, hasCreateTeamPermission: hasCreateTeamPermission, onLoadGroupPermissions: onLoadGroupPermissions, rbacPermissions: rbacPermissions, enableRbac: enableRbac })), activeTab === 'organization' && (jsx(OrganizationTab, { platformKey: tenant, tenant: tenants.find((t) => t.key === tenant), onTenantUpdate: onTenantUpdate, setOrganizationLogoFromOutside: setOrganizationLogo })), activeTab === 'integrations' && (jsx(IntegrationsTab, { tenantKey: tenant, username: username })), activeTab === 'billing' && (jsx(BillingTab, { tenant: tenant, topUpURL: topUpURL, userActiveApp: userActiveApp, username: username, onUpgradeClick: onUpgradeClick })), activeTab === 'monetization' && jsx(MonetizationTab, { platformKey: tenant }), activeTab === 'advanced' && (jsx(AdvancedTab, { platformKey: tenant, currentSPA: currentSPA, username: username, authURL: authURL, currentPlatformBaseDomain: currentPlatformBaseDomain }))] })] }), jsx(ToastProvider, {})] }));
+                        }, children: [jsxs("div", { className: "lg:hidden mb-6", children: [jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2 capitalize", children: activeTab }), jsxs("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [activeTab === 'basic' && 'Manage your basic account information and preferences.', activeTab === 'social' && 'Connect and manage your social media accounts.', activeTab === 'security' && 'Update your security settings and password.', activeTab === 'management' && 'Manage users and their permissions in the system.', activeTab === 'organization' && 'Manage your organization settings.', activeTab === 'monetization' && 'Configure paywalls, pricing, and revenue.', activeTab === 'advanced' && 'Configure advanced organization settings.'] })] }), activeTab === 'management' && hasManagementPermissions && (jsx(Admin, { onInviteClick: onInviteClick, tenant: tenant, hasUserTabPermission: hasUserTabPermission, hasGroupsTabPermission: hasGroupsTabPermission, hasPoliciesTabPermission: hasPoliciesTabPermission, hasRolesTabPermission: hasRolesTabPermission, hasTeamsTabPermission: hasTeamsTabPermission, hasInviteUserPermission: hasInviteUserPermission, hasCreateTeamPermission: hasCreateTeamPermission, onLoadGroupPermissions: onLoadGroupPermissions, rbacPermissions: rbacPermissions, enableRbac: enableRbac })), activeTab === 'organization' && (jsx(OrganizationTab, { platformKey: tenant, tenant: tenants.find((t) => t.key === tenant), onTenantUpdate: onTenantUpdate, setOrganizationLogoFromOutside: setOrganizationLogo })), activeTab === 'integrations' && (jsx(IntegrationsTab, { tenantKey: tenant, username: username })), activeTab === 'billing' && (jsx(BillingTab, { tenant: tenant, userActiveApp: userActiveApp, username: username, currentUserEmail: email, mainPlatformKey: mainPlatformKey })), activeTab === 'monetization' && jsx(MonetizationTab, { platformKey: tenant }), activeTab === 'advanced' && (jsx(AdvancedTab, { platformKey: tenant, currentSPA: currentSPA, username: username, authURL: authURL, currentPlatformBaseDomain: currentPlatformBaseDomain }))] })] }), jsx(ToastProvider, {})] }));
 }
 
-function UserProfileModal({ isOpen, onClose, params, billingEnabled = false, billingURL = '', topUpEnabled = false, topUpURL = '', showMentorAIDisplayCheckbox = false, showLeaderboardDisplayCheckbox = false, showUsernameField = false, showPlatformName = false, useGravatarPicFallback = true, enableCatalogInvite = false, targetTab = 'basic', currentPlan = '', currentSPA = '', userActiveApp = null, authURL, tenants = [], onTenantUpdate, currentPlatformBaseDomain = '', rbacPermissions = {}, enableRbac = false, onLoadGroupPermissions, onTabChange, onUpgradeClick, onBillingTabRequest, onAccountDeleted, enableMemoryTab = false, localLLMProps, }) {
+function UserProfileModal({ isOpen, onClose, params, email, mainPlatformKey, showMentorAIDisplayCheckbox = false, showLeaderboardDisplayCheckbox = false, showUsernameField = false, showPlatformName = false, useGravatarPicFallback = true, enableCatalogInvite = false, targetTab = 'basic', currentPlan = '', currentSPA = '', userActiveApp = null, authURL, tenants = [], onTenantUpdate, currentPlatformBaseDomain = '', rbacPermissions = {}, enableRbac = false, onLoadGroupPermissions, onTabChange, onBillingTabRequest, onAccountDeleted, enableMemoryTab = false, localLLMProps, }) {
     console.log('[UserProfileModal] localLLMProps received:', {
         isAvailable: localLLMProps === null || localLLMProps === void 0 ? void 0 : localLLMProps.isAvailable,
         foundryStatus: localLLMProps === null || localLLMProps === void 0 ? void 0 : localLLMProps.foundryStatus,
@@ -165686,18 +165763,6 @@ function UserProfileModal({ isOpen, onClose, params, billingEnabled = false, bil
             }
         }
     }, [isOpen]);
-    const [stripeBillingURL, setStripeBillingURL] = React.useState('');
-    React.useEffect(() => {
-        if (billingURL && billingEnabled) {
-            setStripeBillingURL(billingURL);
-        }
-    }, [billingURL, billingEnabled]);
-    const [stripeTopUpURL, setStripeTopUpURL] = React.useState('');
-    React.useEffect(() => {
-        if (topUpURL && topUpEnabled) {
-            setStripeTopUpURL(topUpURL);
-        }
-    }, [topUpURL, topUpEnabled]);
     return (jsx(Fragment$1, { children: jsx(Dialog, { open: isOpen, onOpenChange: () => {
                 if (!isInviteUserDialogOpen) {
                     onClose();
@@ -165711,13 +165776,13 @@ function UserProfileModal({ isOpen, onClose, params, billingEnabled = false, bil
                         'resume',
                         'memory',
                         'advanced',
-                    ].includes(targetTab) && (jsx(Profile, { tenant: params.tenantKey, username: getUserName$1(), customization: {
+                    ].includes(targetTab) && (jsx(Profile, { tenant: params.tenantKey, tenants: tenants, username: getUserName$1(), customization: {
                             showMentorAIDisplayCheckbox: showMentorAIDisplayCheckbox,
                             showLeaderboardDisplayCheckbox: showLeaderboardDisplayCheckbox,
                             showUsernameField: showUsernameField,
                             showPlatformName: showPlatformName,
                             useGravatarPicFallback: useGravatarPicFallback,
-                        }, isAdmin: params.isAdmin, targetTab: targetTab, onClose: onClose, onAccountDeleted: onAccountDeleted, enableMemoryTab: enableMemoryTab, localLLMProps: localLLMProps })), ['organization', 'management', 'integrations', 'billing', 'monetization'].includes(targetTab) && (jsxs(Fragment$1, { children: [jsx(Account, { onInviteClick: () => setIsInviteUserDialogOpen(true), tenant: params.tenantKey, tenants: tenants, username: getUserName$1(), billingEnabled: !!stripeBillingURL, billingURL: stripeBillingURL, topUpEnabled: !!stripeTopUpURL, topUpURL: stripeTopUpURL, showUsernameField: showUsernameField, showPlatformName: showPlatformName, useGravatarPicFallback: useGravatarPicFallback, onClose: onClose, isAdmin: params.isAdmin, targetTab: targetTab, currentPlan: currentPlan, currentSPA: currentSPA, userActiveApp: userActiveApp, authURL: authURL, onTenantUpdate: onTenantUpdate, currentPlatformBaseDomain: currentPlatformBaseDomain, rbacPermissions: rbacPermissions, enableRbac: enableRbac, onLoadGroupPermissions: onLoadGroupPermissions, onTabChange: onTabChange, onUpgradeClick: onUpgradeClick }), isInviteUserDialogOpen && (jsx(InviteUserDialog, { tenant: params.tenantKey, onClose: () => setIsInviteUserDialogOpen(false), isOpen: isInviteUserDialogOpen, enableCatalogInvite: enableCatalogInvite, hasManageUsersPermission: hasManageUsersPermission })), isInvitedUsersDialogOpen && (jsx(InvitedUsersDialog, { onClose: () => setIsInvitedUsersDialogOpen(false), tenant: params.tenantKey }))] }))] }) }) }));
+                        }, isAdmin: params.isAdmin, targetTab: targetTab, onClose: onClose, onAccountDeleted: onAccountDeleted, enableMemoryTab: enableMemoryTab, localLLMProps: localLLMProps })), ['organization', 'management', 'integrations', 'billing', 'monetization'].includes(targetTab) && (jsxs(Fragment$1, { children: [jsx(Account, { onInviteClick: () => setIsInviteUserDialogOpen(true), tenant: params.tenantKey, tenants: tenants, username: getUserName$1(), email: email, mainPlatformKey: mainPlatformKey, showUsernameField: showUsernameField, showPlatformName: showPlatformName, useGravatarPicFallback: useGravatarPicFallback, onClose: onClose, isAdmin: params.isAdmin, targetTab: targetTab, currentPlan: currentPlan, currentSPA: currentSPA, userActiveApp: userActiveApp, authURL: authURL, onTenantUpdate: onTenantUpdate, currentPlatformBaseDomain: currentPlatformBaseDomain, rbacPermissions: rbacPermissions, enableRbac: enableRbac, onLoadGroupPermissions: onLoadGroupPermissions, onTabChange: onTabChange }), isInviteUserDialogOpen && (jsx(InviteUserDialog, { tenant: params.tenantKey, onClose: () => setIsInviteUserDialogOpen(false), isOpen: isInviteUserDialogOpen, enableCatalogInvite: enableCatalogInvite, hasManageUsersPermission: hasManageUsersPermission })), isInvitedUsersDialogOpen && (jsx(InvitedUsersDialog, { onClose: () => setIsInvitedUsersDialogOpen(false), tenant: params.tenantKey }))] }))] }) }) }));
 }
 
 // Tauri types for model download functionality
@@ -166240,7 +166305,7 @@ function useModelDownload() {
     };
 }
 
-function UserProfileDropdown({ 
+function UserProfileDropdown({ email, mainPlatformKey, 
 // User data
 username, userIsAdmin = false, userIsStudent = false, userIsVisiting = false, 
 // Tenant data
@@ -166250,9 +166315,9 @@ showProfileTab = true, showAccountTab = false, showTenantSwitcher = true, showHe
 // Customization
 helpCenterUrl = '', enableGravatarOnProfilePic = true, 
 // Callbacks
-onProfileClick, onTabChange, onUpgradeClick, onBillingTabRequest, onLogout, onTenantChange, onHelpClick, 
+onProfileClick, onTabChange, onBillingTabRequest, onLogout, onTenantChange, onHelpClick, 
 // Modal props
-billingURL = '', topUpURL = '', currentPlan = '', userActiveApp = null, 
+currentPlan = '', userActiveApp = null, 
 // Custom components
 LearnerModeSwitchComponent, CustomProfileModal, 
 // Styling
@@ -166422,11 +166487,9 @@ isModalOpen, onModalOpenChange, defaultActiveTab, onAccountDeleted, enableMemory
                 mentorId: mentorId || '',
                 isAdmin: userIsAdmin,
             },
-            billingEnabled: !!billingURL,
-            billingURL,
             userActiveApp,
-            topUpEnabled: !!topUpURL,
-            topUpURL,
+            email,
+            mainPlatformKey,
             useGravatarPicFallback: enableGravatarOnProfilePic,
             targetTab: activeTab,
             currentPlan,
@@ -166444,7 +166507,6 @@ isModalOpen, onModalOpenChange, defaultActiveTab, onAccountDeleted, enableMemory
             enableRbac,
             onLoadGroupPermissions,
             onTabChange,
-            onUpgradeClick,
             onBillingTabRequest,
             localLLMProps: {
                 isAvailable: isLocalLLMAvailable,