Function CreditMonitor

web/src/components/organization/credit-monitor.tsx:85–425

({
  organizationId,
  orgSlug, // Destructure orgSlug
  noCardWrapper = false,
}: CreditMonitorProps)

}

export function CreditMonitor({
  organizationId,
  orgSlug, // Destructure orgSlug
  noCardWrapper = false,
}: CreditMonitorProps) {
  const isMobile = useIsMobile()

  const {
    data: creditStatus,
    isLoading,
    isFetching,
    dataUpdatedAt,
  } = useQuery({
    queryKey: ['creditStatus', organizationId],
    queryFn: () => fetchCreditStatus(organizationId),
    staleTime: 2 * 60 * 1000, // 2 minutes
    refetchInterval: 5 * 60 * 1000, // 5 minutes
    refetchOnWindowFocus: false,
  })

  const { data: orgSettings, isLoading: isLoadingSettings } = useQuery({
    queryKey: ['organizationSettings', organizationId],
    queryFn: () => fetchOrganizationSettings(organizationId),
    staleTime: 5 * 60 * 1000, // 5 minutes
    refetchOnWindowFocus: false,
  })

  // BILLING_DISABLED: Auto-topup hook results unused while billing is disabled
  // These would be used by handleEnableAutoTopup and the auto-topup banner
  const {
    isEnabled: _autoTopupEnabled,
    canManageAutoTopup: _canManageAutoTopup,
    handleToggleAutoTopup: _handleToggleAutoTopup,
    isPending: _isAutoTopupPending,
  } = useOrgAutoTopup(organizationId)

  const queryClient = useQueryClient()

  const handleRefresh = () => {
    queryClient.invalidateQueries({
      queryKey: ['creditStatus', organizationId],
    })
    queryClient.invalidateQueries({
      queryKey: ['organizationSettings', organizationId],
    })
  }

  // BILLING_DISABLED: handleEnableAutoTopup functionality disabled
  // This function previously enabled auto-topup and navigated to billing page.
  // Uncomment when re-enabling org billing.
  /*
  const handleEnableAutoTopup = async () => {
    if (!orgSettings || !canManageAutoTopup) return

    setIsRedirecting(true)

    try {
      const success = await handleToggleAutoTopup(true)