Implement billing functionality and enhance role management

- Introduced billing capabilities, allowing users to request payments for subscription periods (3/6/12 months) with admin approval via Telegram.
- Updated role management to include a `BillingEnabled` property, preventing billing for admin roles.
- Enhanced the `CreateRoleCommand` and `UpdateRoleCommand` to accept billing parameters, ensuring proper handling during role creation and updates.
- Added new endpoints for billing management and integrated billing checks into VPN config creation to enforce payment requirements.
- Updated related services, models, and tests to support the new billing features, ensuring comprehensive coverage and functionality.
- Enhanced documentation to reflect the new billing processes and role management changes.

frontend/src/routes/__root.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Link, Outlet, createRootRoute, useRouterState } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { Menu, X } from 'lucide-react'
 import { useTheme, type Theme } from '@/theme/ThemeProvider'
@@ -9,6 +10,7 @@ import { Button } from '@/shared/ui/button'
 import { useAuthStore } from '@/features/auth/store'
 import { bootstrapSession, clearSession, logout } from '@/features/auth/api'
 import { TelegramLinkWarningBanner } from '@/features/telegram/TelegramLinkWarningBanner'
+import { getMyBillingStatus } from '@/features/billing/api'
 
 export const Route = createRootRoute({ component: RootLayout })
 
@@ -19,6 +21,15 @@ function RootLayout() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const pathname = useRouterState({ select: (s) => s.location.pathname })
 
+  // Гейтится наличием сессии и активации — та же логика, что и /billing (ActivationGate). Долгий
+  // staleTime: это лишь решение "показывать ли пункт меню", а не источник актуального статуса оплаты.
+  const billingStatusQuery = useQuery({
+    queryKey: ['my-billing-status'],
+    queryFn: getMyBillingStatus,
+    enabled: !isBootstrapping && !!user?.isActivated,
+    staleTime: 5 * 60 * 1000,
+  })
+
   useEffect(() => {
     void bootstrapSession()
   }, [])
@@ -55,6 +66,11 @@ function RootLayout() {
           <Link to="/support" className="text-muted-foreground hover:text-foreground">
             {t('nav.support')}
           </Link>
+          {billingStatusQuery.data?.billingEnabled && (
+            <Link to="/billing" className="text-muted-foreground hover:text-foreground">
+              {t('nav.billing')}
+            </Link>
+          )}
         </>
       )}
       <Link to="/settings" className="text-muted-foreground hover:text-foreground">