fix: multi-subscription UI audit fixes and cache invalidation improvements

- Fix AdminUserDetail multi-subscription display with useMemo optimization - Update Dashboard subscription cards and purchase entry points - Fix WebSocket notification handlers for multi-subscription context - Update SubscriptionPurchase cache invalidation for multi-tariff mode - Fix Subscriptions list page and navigation patterns - Update App routing, DeepLinkRedirect, and CommandPalette for multi-sub - Add SubscriptionListCard component - Fix TopUpResult and PromoOffersSection navigation
2026-07-28 09:33:46 +00:00 · 2026-03-23 11:32:03 +03:00
parent 258bfd7654
commit f4de6d8ad8
18 changed files with 426 additions and 270 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import { lazy, Suspense } from 'react';
-import { Routes, Route, Navigate, useLocation } from 'react-router';
+import { Routes, Route, Navigate, useLocation, useParams } from 'react-router';
 import { useAuthStore } from './store/auth';
 import { useBlockingStore } from './store/blocking';
 import Layout from './components/layout/Layout';
@@ -191,6 +191,12 @@ function BlockingOverlay() {
  return null;
 }

+/** Redirect /subscription/:id → /subscriptions/:id preserving the param */
+function LegacySubscriptionRedirect() {
+  const { subscriptionId } = useParams<{ subscriptionId: string }>();
+  return <Navigate to={`/subscriptions/${subscriptionId}`} replace />;
+}
+
 function App() {
  useAnalyticsCounters();

@@ -269,7 +275,7 @@ function App() {
          }
        />
        <Route
-          path="/subscription/:subscriptionId"
+          path="/subscriptions/:subscriptionId"
          element={
            <ProtectedRoute>
              <LazyPage>
@@ -278,13 +284,13 @@ function App() {
            </ProtectedRoute>
          }
        />
+        {/* Legacy redirects for backward compatibility */}
+        <Route path="/subscription/:subscriptionId" element={<LegacySubscriptionRedirect />} />
        <Route
          path="/subscription"
          element={
            <ProtectedRoute>
-              <LazyPage>
-                <Subscription />
-              </LazyPage>
+              <Navigate to="/subscriptions" replace />
            </ProtectedRoute>
          }
        />
--- a/src/AppWithNavigator.tsx
+++ b/src/AppWithNavigator.tsx
@@ -23,7 +23,7 @@ const TWEMOJI_OPTIONS = { className: 'twemoji', folder: 'svg', ext: '.svg' } as
 * Shows back button on non-root routes, hides on root.
 */
 /** Pages reachable from bottom nav — treat as top-level (no back button). */
-const BOTTOM_NAV_PATHS = ['/', '/subscription', '/balance', '/referral', '/support', '/wheel'];
+const BOTTOM_NAV_PATHS = ['/', '/subscriptions', '/balance', '/referral', '/support', '/wheel'];

 function TelegramBackButton() {
  const location = useLocation();
--- a/src/api/adminUsers.ts
+++ b/src/api/adminUsers.ts
@@ -103,6 +103,7 @@ export interface UserDetailResponse {
  last_activity: string | null;
  cabinet_last_login: string | null;
  subscription: UserSubscriptionInfo | null;
+  subscriptions: UserSubscriptionInfo[];
  promo_group: UserPromoGroupInfo | null;
  referral: UserReferralInfo;
  total_spent_kopeks: number;
@@ -296,6 +297,7 @@ export interface UpdateSubscriptionRequest {
    | 'remove_traffic'
    | 'set_device_limit'
    | 'shorten';
+  subscription_id?: number;
  days?: number;
  end_date?: string;
  tariff_id?: number;
--- a/src/components/PromoOffersSection.tsx
+++ b/src/components/PromoOffersSection.tsx
@@ -114,6 +114,7 @@ export default function PromoOffersSection({ className = '' }: PromoOffersSectio
      queryClient.invalidateQueries({ queryKey: ['promo-offers'] });
      queryClient.invalidateQueries({ queryKey: ['active-discount'] });
      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
      queryClient.invalidateQueries({ queryKey: ['balance'] });
      setSuccessMessage(result.message);
--- a/src/components/SuccessNotificationModal.tsx
+++ b/src/components/SuccessNotificationModal.tsx
@@ -190,7 +190,7 @@ export default function SuccessNotificationModal() {

  const handleGoToSubscription = () => {
    hide();
-    navigate('/subscription');
+    navigate('/subscriptions');
  };

  const handleGoToBalance = () => {
--- a/src/components/WebSocketNotifications.tsx
+++ b/src/components/WebSocketNotifications.tsx
@@ -82,7 +82,11 @@ export default function WebSocketNotifications() {
          expiresAt: message.expires_at,
          tariffName: message.tariff_name,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        queryClient.invalidateQueries({ queryKey: ['balance'] });
        queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
        refreshUser();
@@ -96,7 +100,11 @@ export default function WebSocketNotifications() {
          amountKopeks: message.amount_kopeks,
          expiresAt: message.new_expires_at,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        queryClient.invalidateQueries({ queryKey: ['balance'] });
        queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
        refreshUser();
@@ -115,7 +123,7 @@ export default function WebSocketNotifications() {
            },
          ),
          icon: <span className="text-lg">⏰</span>,
-          onClick: () => navigate('/subscription'),
+          onClick: () => navigate('/subscriptions'),
          duration: 10000,
        });
        return;
@@ -130,10 +138,14 @@ export default function WebSocketNotifications() {
            'Your subscription has expired. Renew to continue using the service.',
          ),
          icon: <span className="text-lg">😢</span>,
-          onClick: () => navigate('/subscription'),
+          onClick: () => navigate('/subscriptions'),
          duration: 10000,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        refreshUser();
        return;
      }
@@ -171,7 +183,11 @@ export default function WebSocketNotifications() {
          icon: <span className="text-lg">🔄</span>,
          duration: 5000,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        return;
      }

@@ -183,7 +199,11 @@ export default function WebSocketNotifications() {
          devicesAdded: message.devices_added,
          newDeviceLimit: message.new_device_limit,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        queryClient.invalidateQueries({ queryKey: ['balance'] });
        queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
        queryClient.invalidateQueries({ queryKey: ['transactions'] });
@@ -199,7 +219,11 @@ export default function WebSocketNotifications() {
          trafficGbAdded: message.traffic_gb_added,
          newTrafficLimitGb: message.new_traffic_limit_gb,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        queryClient.invalidateQueries({ queryKey: ['balance'] });
        queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
        queryClient.invalidateQueries({ queryKey: ['transactions'] });
@@ -222,10 +246,14 @@ export default function WebSocketNotifications() {
            },
          ),
          icon: <span className="text-lg">🔁</span>,
-          onClick: () => navigate('/subscription'),
+          onClick: () => navigate('/subscriptions'),
          duration: 8000,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        queryClient.invalidateQueries({ queryKey: ['balance'] });
        queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
        refreshUser();
@@ -240,7 +268,7 @@ export default function WebSocketNotifications() {
            message.reason ||
            t('wsNotifications.autopay.failedMessage', 'Failed to auto-renew your subscription'),
          icon: <span className="text-lg">❌</span>,
-          onClick: () => navigate('/subscription'),
+          onClick: () => navigate('/subscriptions'),
          duration: 10000,
        });
        return;
--- a/src/components/dashboard/SubscriptionCardActive.tsx
+++ b/src/components/dashboard/SubscriptionCardActive.tsx
@@ -312,7 +312,7 @@ export default function SubscriptionCardActive({
      <div className="mb-5 flex gap-2.5">
        {/* Tariff badge — clickable */}
        <Link
-          to="/subscription"
+          to={`/subscriptions/${subscription.id}`}
          className="flex-1 rounded-[14px] p-3.5 transition-all duration-500"
          style={{
            background: `linear-gradient(135deg, rgba(${zone.mainVarRaw}, 0.07), rgba(${zone.mainVarRaw}, 0.02))`,
@@ -396,7 +396,7 @@ export default function SubscriptionCardActive({
          {trafficRefreshCooldown > 0 ? `${trafficRefreshCooldown}s` : t('common.refresh')}
        </button>
        <Link
-          to="/subscription"
+          to={`/subscriptions/${subscription.id}`}
          className="text-[11px] font-medium text-dark-50/25 transition-colors hover:text-dark-50/40"
        >
          {t('dashboard.viewSubscription')} &rarr;
--- a/src/components/dashboard/SubscriptionCardExpired.tsx
+++ b/src/components/dashboard/SubscriptionCardExpired.tsx
@@ -65,7 +65,10 @@ export default function SubscriptionCardExpired({
        await subscriptionApi.renewSubscription(30, subscription.id);
      }
      haptic.success();
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({
+        predicate: (query) => Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+      });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
      queryClient.invalidateQueries({ queryKey: ['balance'] });
      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
    } catch (err: unknown) {
@@ -257,7 +260,7 @@ export default function SubscriptionCardExpired({
      <div className="flex gap-2.5">
        {isLimited ? (
          <Link
-            to="/subscription"
+            to={`/subscriptions/${subscription.id}`}
            className="flex flex-1 items-center justify-center gap-2 rounded-[14px] py-3.5 text-[15px] font-semibold tracking-tight text-white transition-all duration-300"
            style={{
              background: accent.gradient,
--- a/src/components/navigation/CommandPalette/CommandPalette.tsx
+++ b/src/components/navigation/CommandPalette/CommandPalette.tsx
@@ -78,7 +78,7 @@ export function CommandPalette({
  // Navigation items
  const navigationItems = [
    { label: t('nav.dashboard'), icon: HomeIcon, path: '/' },
-    { label: t('nav.subscription'), icon: SubscriptionIcon, path: '/subscription' },
+    { label: t('nav.subscription'), icon: SubscriptionIcon, path: '/subscriptions' },
    { label: t('nav.balance'), icon: WalletIcon, path: '/balance' },
    ...(referralEnabled ? [{ label: t('nav.referral'), icon: UsersIcon, path: '/referral' }] : []),
    { label: t('nav.support'), icon: ChatIcon, path: '/support' },
@@ -100,7 +100,7 @@ export function CommandPalette({
    {
      label: t('subscription.get_config') || 'Get VPN config',
      icon: DownloadIcon,
-      action: () => navigate('/subscription'),
+      action: () => navigate('/subscriptions'),
    },
    {
      label: isDark ? t('theme.light') || 'Light mode' : t('theme.dark') || 'Dark mode',
--- a/src/components/subscription/SubscriptionListCard.tsx
+++ b/src/components/subscription/SubscriptionListCard.tsx
@@ -0,0 +1,102 @@
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '../../hooks/useTheme';
+import { getGlassColors } from '../../utils/glassTheme';
+import { useHaptic } from '../../platform';
+import type { SubscriptionListItem } from '../../types';
+
+function formatTrafficDisplay(used: number, limit: number): string {
+  if (limit === 0) return '∞';
+  return `${used.toFixed(1)} / ${limit} ГБ`;
+}
+
+function formatDate(iso: string | null): string {
+  if (!iso) return '—';
+  try {
+    return new Date(iso).toLocaleDateString('ru-RU', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    });
+  } catch {
+    return '—';
+  }
+}
+
+function StatusDot({ status }: { status: string }) {
+  const color =
+    status === 'active' || status === 'trial'
+      ? 'bg-emerald-400'
+      : status === 'limited'
+        ? 'bg-amber-400'
+        : 'bg-red-400';
+  return <span className={`inline-block h-2.5 w-2.5 rounded-full ${color}`} />;
+}
+
+export default function SubscriptionListCard({
+  subscription,
+  onClick,
+}: {
+  subscription: SubscriptionListItem;
+  onClick: () => void;
+}) {
+  const { t } = useTranslation();
+  const { isDark } = useTheme();
+  const g = getGlassColors(isDark);
+  const { impact } = useHaptic();
+
+  const handleClick = () => {
+    impact('light');
+    onClick();
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className="bento-card w-full text-left transition-all duration-200 hover:scale-[1.01] active:scale-[0.99]"
+      style={{ background: g.cardBg, borderColor: g.cardBorder }}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <StatusDot status={subscription.status} />
+          <span className="text-base font-semibold">
+            {subscription.tariff_name || t('subscription.defaultName', 'Подписка')}
+          </span>
+        </div>
+        <svg
+          className="h-5 w-5 opacity-40"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+        </svg>
+      </div>
+
+      <div className="mt-3 grid grid-cols-3 gap-3 text-sm opacity-70">
+        <div>
+          <div className="text-xs opacity-60">{t('subscription.traffic', 'Трафик')}</div>
+          <div>
+            {formatTrafficDisplay(subscription.traffic_used_gb, subscription.traffic_limit_gb)}
+          </div>
+        </div>
+        <div>
+          <div className="text-xs opacity-60">{t('subscription.devices', 'Устройства')}</div>
+          <div>{subscription.device_limit}</div>
+        </div>
+        <div>
+          <div className="text-xs opacity-60">{t('subscription.until', 'До')}</div>
+          <div>{formatDate(subscription.end_date)}</div>
+        </div>
+      </div>
+
+      {subscription.is_trial && (
+        <div className="mt-2">
+          <span className="inline-block rounded-full bg-amber-500/20 px-2 py-0.5 text-xs text-amber-300">
+            {t('subscription.trial', 'Тестовая')}
+          </span>
+        </div>
+      )}
+    </button>
+  );
+}
--- a/src/pages/AdminUserDetail.tsx
+++ b/src/pages/AdminUserDetail.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import i18n from '../i18n';
@@ -335,6 +335,7 @@ export default function AdminUserDetail() {
  const [subAction, setSubAction] = useState<string>('extend');
  const [subDays, setSubDays] = useState<number | ''>(30);
  const [selectedTariffId, setSelectedTariffId] = useState<number | null>(null);
+  const [activeSubscriptionId, setActiveSubscriptionId] = useState<number | null>(null);

  // Promo group
  const [promoGroups, setPromoGroups] = useState<PromoGroup[]>([]);
@@ -602,6 +603,9 @@ export default function AdminUserDetail() {
    try {
      const data: UpdateSubscriptionRequest = {
        action: action as UpdateSubscriptionRequest['action'],
+        ...(activeSubscriptionId && action !== 'create'
+          ? { subscription_id: activeSubscriptionId }
+          : {}),
        ...(action === 'extend' || action === 'shorten' ? { days: toNumber(subDays, 30) } : {}),
        ...(action === 'change_tariff' && selectedTariffId ? { tariff_id: selectedTariffId } : {}),
        ...(action === 'create'
@@ -721,7 +725,11 @@ export default function AdminUserDetail() {
    if (!userId) return;
    setActionLoading(true);
    try {
-      await adminUsersApi.updateSubscription(userId, { action: 'add_traffic', traffic_gb: gb });
+      await adminUsersApi.updateSubscription(userId, {
+        action: 'add_traffic',
+        traffic_gb: gb,
+        ...(activeSubscriptionId ? { subscription_id: activeSubscriptionId } : {}),
+      });
      notify.success(t('admin.users.detail.subscription.trafficAdded'));
      setSelectedTrafficGb('');
      await loadUser();
@@ -739,6 +747,7 @@ export default function AdminUserDetail() {
      await adminUsersApi.updateSubscription(userId, {
        action: 'remove_traffic',
        traffic_purchase_id: purchaseId,
+        ...(activeSubscriptionId ? { subscription_id: activeSubscriptionId } : {}),
      });
      notify.success(t('admin.users.detail.subscription.trafficRemoved'));
      await loadUser();
@@ -756,6 +765,7 @@ export default function AdminUserDetail() {
      await adminUsersApi.updateSubscription(userId, {
        action: 'set_device_limit',
        device_limit: newLimit,
+        ...(activeSubscriptionId ? { subscription_id: activeSubscriptionId } : {}),
      });
      notify.success(t('admin.users.detail.subscription.deviceLimitUpdated'));
      await loadUser();
@@ -766,7 +776,20 @@ export default function AdminUserDetail() {
    }
  };

-  const currentTariff = tariffs.find((t) => t.id === user?.subscription?.tariff_id) || null;
+  // Multi-subscription: pick active subscription or first from list
+  const userSubscriptions = useMemo(() => user?.subscriptions ?? [], [user?.subscriptions]);
+  const selectedSub =
+    userSubscriptions.find((s) => s.id === activeSubscriptionId) ?? user?.subscription ?? null;
+
+  // Auto-select first subscription when user loads
+  useEffect(() => {
+    if (user && userSubscriptions.length > 0 && !activeSubscriptionId) {
+      const activeSub = userSubscriptions.find((s) => s.is_active) ?? userSubscriptions[0];
+      setActiveSubscriptionId(activeSub.id);
+    }
+  }, [user, userSubscriptions, activeSubscriptionId]);
+
+  const currentTariff = tariffs.find((t) => t.id === selectedSub?.tariff_id) || null;

  const handleChangePromoGroup = async (groupId: number | null) => {
    if (!userId) return;
@@ -1356,15 +1379,50 @@ export default function AdminUserDetail() {
        {/* Subscription Tab */}
        {activeTab === 'subscription' && (
          <div className="space-y-4">
-            {user.subscription ? (
+            {/* Subscription selector (when multiple) */}
+            {userSubscriptions.length > 1 && (
+              <div className="rounded-xl bg-dark-800/50 p-4">
+                <div className="mb-2 text-xs font-medium text-dark-500">
+                  {t('admin.users.detail.subscription.selectSubscription', 'Выберите подписку')} (
+                  {userSubscriptions.length})
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {userSubscriptions.map((sub) => (
+                    <button
+                      key={sub.id}
+                      onClick={() => setActiveSubscriptionId(sub.id)}
+                      className={`rounded-lg px-3 py-1.5 text-sm transition-all ${
+                        activeSubscriptionId === sub.id
+                          ? 'bg-accent-500 text-white'
+                          : 'bg-dark-700/50 text-dark-300 hover:bg-dark-700'
+                      }`}
+                    >
+                      <span className="flex items-center gap-1.5">
+                        <span
+                          className={`inline-block h-2 w-2 rounded-full ${
+                            sub.is_active ? 'bg-emerald-400' : 'bg-red-400'
+                          }`}
+                        />
+                        {sub.tariff_name || `#${sub.id}`}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {selectedSub ? (
              <>
                {/* Current subscription */}
                <div className="rounded-xl bg-dark-800/50 p-4">
                  <div className="mb-3 flex items-center justify-between">
                    <span className="font-medium text-dark-200">
                      {t('admin.users.detail.subscription.current')}
+                      {userSubscriptions.length > 1 && (
+                        <span className="ml-2 text-xs text-dark-500">#{selectedSub.id}</span>
+                      )}
                    </span>
-                    <StatusBadge status={user.subscription.status} />
+                    <StatusBadge status={selectedSub.status} />
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
@@ -1372,7 +1430,7 @@ export default function AdminUserDetail() {
                        {t('admin.users.detail.subscription.tariff')}
                      </div>
                      <div className="text-dark-100">
-                        {user.subscription.tariff_name ||
+                        {selectedSub.tariff_name ||
                          t('admin.users.detail.subscription.notSpecified')}
                      </div>
                    </div>
@@ -1380,7 +1438,7 @@ export default function AdminUserDetail() {
                      <div className="text-xs text-dark-500">
                        {t('admin.users.detail.subscription.validUntil')}
                      </div>
-                      <div className="text-dark-100">{formatDate(user.subscription.end_date)}</div>
+                      <div className="text-dark-100">{formatDate(selectedSub.end_date)}</div>
                    </div>
                    <div>
                      <div className="text-xs text-dark-500">
@@ -1389,8 +1447,8 @@ export default function AdminUserDetail() {
                      <div className="text-dark-100">
                        {panelInfo?.found
                          ? (panelInfo.used_traffic_bytes / (1024 * 1024 * 1024)).toFixed(1)
-                          : user.subscription.traffic_used_gb.toFixed(1)}{' '}
-                        / {user.subscription.traffic_limit_gb} {t('common.units.gb')}
+                          : selectedSub.traffic_used_gb.toFixed(1)}{' '}
+                        / {selectedSub.traffic_limit_gb} {t('common.units.gb')}
                      </div>
                    </div>
                    <div>
@@ -1399,21 +1457,21 @@ export default function AdminUserDetail() {
                      </div>
                      <div className="flex items-center gap-2">
                        <button
-                          onClick={() => handleSetDeviceLimit(user.subscription!.device_limit - 1)}
-                          disabled={actionLoading || user.subscription.device_limit <= 1}
+                          onClick={() => handleSetDeviceLimit(selectedSub.device_limit - 1)}
+                          disabled={actionLoading || selectedSub.device_limit <= 1}
                          className="flex h-6 w-6 items-center justify-center rounded-md bg-dark-700 text-dark-300 transition-colors hover:bg-dark-600 disabled:opacity-30"
                        >
                          <MinusIcon />
                        </button>
                        <span className="min-w-[2ch] text-center text-dark-100">
-                          {user.subscription.device_limit}
+                          {selectedSub.device_limit}
                        </span>
                        <button
-                          onClick={() => handleSetDeviceLimit(user.subscription!.device_limit + 1)}
+                          onClick={() => handleSetDeviceLimit(selectedSub.device_limit + 1)}
                          disabled={
                            actionLoading ||
                            (currentTariff?.max_device_limit != null &&
-                              user.subscription.device_limit >= currentTariff.max_device_limit)
+                              selectedSub.device_limit >= currentTariff.max_device_limit)
                          }
                          className="flex h-6 w-6 items-center justify-center rounded-md bg-dark-700 text-dark-300 transition-colors hover:bg-dark-600 disabled:opacity-30"
                        >
@@ -1425,66 +1483,65 @@ export default function AdminUserDetail() {
                </div>

                {/* Traffic Packages */}
-                {user.subscription.traffic_purchases &&
-                  user.subscription.traffic_purchases.length > 0 && (
-                    <div className="rounded-xl bg-dark-800/50 p-4">
-                      <div className="mb-3 flex items-center justify-between">
-                        <span className="text-sm font-medium text-dark-200">
-                          {t('admin.users.detail.subscription.trafficPackages')}
-                          {user.subscription.purchased_traffic_gb > 0 && (
-                            <span className="ml-2 text-xs text-dark-400">
-                              ({user.subscription.purchased_traffic_gb} {t('common.units.gb')})
-                            </span>
-                          )}
-                        </span>
-                      </div>
-                      <div className="space-y-2">
-                        {user.subscription.traffic_purchases.map((tp) => (
-                          <div
-                            key={tp.id}
-                            className={`flex items-center justify-between rounded-lg px-3 py-2 ${
-                              tp.is_expired ? 'bg-dark-700/30 opacity-60' : 'bg-dark-700/50'
-                            }`}
-                          >
-                            <div className="min-w-0 flex-1">
-                              <div className="flex items-center gap-2 text-sm text-dark-200">
-                                <span className="font-medium">
-                                  {tp.traffic_gb} {t('common.units.gb')}
-                                </span>
-                                {tp.is_expired ? (
-                                  <span className="rounded-full bg-error-500/20 px-1.5 py-0.5 text-[10px] text-error-400">
-                                    {t('admin.users.detail.subscription.expired')}
-                                  </span>
-                                ) : (
-                                  <span className="text-xs text-dark-400">
-                                    {tp.days_remaining}{' '}
-                                    {t('admin.users.detail.subscription.daysLeft')}
-                                  </span>
-                                )}
-                              </div>
-                            </div>
-                            {!tp.is_expired && (
-                              <button
-                                onClick={() =>
-                                  handleInlineConfirm(`removeTraffic_${tp.id}`, () =>
-                                    handleRemoveTraffic(tp.id),
-                                  )
-                                }
-                                disabled={actionLoading}
-                                className={`ml-2 shrink-0 rounded-lg px-2 py-1 text-xs transition-all disabled:opacity-50 ${
-                                  confirmingAction === `removeTraffic_${tp.id}`
-                                    ? 'bg-error-500 text-white'
-                                    : 'text-dark-500 hover:bg-error-500/15 hover:text-error-400'
-                                }`}
-                              >
-                                {confirmingAction === `removeTraffic_${tp.id}` ? '?' : '\u00D7'}
-                              </button>
-                            )}
-                          </div>
-                        ))}
-                      </div>
+                {selectedSub.traffic_purchases && selectedSub.traffic_purchases.length > 0 && (
+                  <div className="rounded-xl bg-dark-800/50 p-4">
+                    <div className="mb-3 flex items-center justify-between">
+                      <span className="text-sm font-medium text-dark-200">
+                        {t('admin.users.detail.subscription.trafficPackages')}
+                        {selectedSub.purchased_traffic_gb > 0 && (
+                          <span className="ml-2 text-xs text-dark-400">
+                            ({selectedSub.purchased_traffic_gb} {t('common.units.gb')})
+                          </span>
+                        )}
+                      </span>
                    </div>
-                  )}
+                    <div className="space-y-2">
+                      {selectedSub.traffic_purchases.map((tp) => (
+                        <div
+                          key={tp.id}
+                          className={`flex items-center justify-between rounded-lg px-3 py-2 ${
+                            tp.is_expired ? 'bg-dark-700/30 opacity-60' : 'bg-dark-700/50'
+                          }`}
+                        >
+                          <div className="min-w-0 flex-1">
+                            <div className="flex items-center gap-2 text-sm text-dark-200">
+                              <span className="font-medium">
+                                {tp.traffic_gb} {t('common.units.gb')}
+                              </span>
+                              {tp.is_expired ? (
+                                <span className="rounded-full bg-error-500/20 px-1.5 py-0.5 text-[10px] text-error-400">
+                                  {t('admin.users.detail.subscription.expired')}
+                                </span>
+                              ) : (
+                                <span className="text-xs text-dark-400">
+                                  {tp.days_remaining}{' '}
+                                  {t('admin.users.detail.subscription.daysLeft')}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                          {!tp.is_expired && (
+                            <button
+                              onClick={() =>
+                                handleInlineConfirm(`removeTraffic_${tp.id}`, () =>
+                                  handleRemoveTraffic(tp.id),
+                                )
+                              }
+                              disabled={actionLoading}
+                              className={`ml-2 shrink-0 rounded-lg px-2 py-1 text-xs transition-all disabled:opacity-50 ${
+                                confirmingAction === `removeTraffic_${tp.id}`
+                                  ? 'bg-error-500 text-white'
+                                  : 'text-dark-500 hover:bg-error-500/15 hover:text-error-400'
+                              }`}
+                            >
+                              {confirmingAction === `removeTraffic_${tp.id}` ? '?' : '\u00D7'}
+                            </button>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}

                {/* Add Traffic */}
                {currentTariff &&
@@ -1602,10 +1659,18 @@ export default function AdminUserDetail() {
                  </div>
                )}
              </>
-            ) : hasPermission('users:subscription') ? (
+            ) : null}
+
+            {/* Create new subscription (shown when no subs, or always in multi-tariff) */}
+            {hasPermission('users:subscription') && (
              <div className="rounded-xl bg-dark-800/50 p-4">
-                <div className="mb-4 text-center text-dark-400">
-                  {t('admin.users.detail.subscription.noActive')}
+                {userSubscriptions.length === 0 && (
+                  <div className="mb-4 text-center text-dark-400">
+                    {t('admin.users.detail.subscription.noActive')}
+                  </div>
+                )}
+                <div className="mb-3 text-sm font-medium text-dark-200">
+                  {t('admin.users.detail.subscription.createNew', 'Создать подписку')}
                </div>
                <div className="space-y-3">
                  <select
@@ -1642,12 +1707,6 @@ export default function AdminUserDetail() {
                  </button>
                </div>
              </div>
-            ) : (
-              <div className="rounded-xl bg-dark-800/50 p-4">
-                <div className="text-center text-dark-400">
-                  {t('admin.users.detail.subscription.noActive')}
-                </div>
-              </div>
            )}

            {/* Panel Info */}
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Link } from 'react-router';
+import { Link, useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { useAuthStore } from '../store/auth';
 import { useBlockingStore } from '../store/blocking';
@@ -18,6 +18,7 @@ import StatsGrid from '../components/dashboard/StatsGrid';
 import { giftApi } from '../api/gift';
 import { promoApi } from '../api/promo';
 import PendingGiftCard from '../components/dashboard/PendingGiftCard';
+import SubscriptionListCard from '../components/subscription/SubscriptionListCard';
 import { API } from '../config/constants';

 const ChevronRightIcon = () => (
@@ -28,6 +29,7 @@ const ChevronRightIcon = () => (

 export default function Dashboard() {
  const { t } = useTranslation();
+  const navigate = useNavigate();
  const user = useAuthStore((state) => state.user);
  const refreshUser = useAuthStore((state) => state.refreshUser);
  const queryClient = useQueryClient();
@@ -111,6 +113,7 @@ export default function Dashboard() {
    onSuccess: () => {
      setTrialError(null);
      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
      queryClient.invalidateQueries({ queryKey: ['trial-info'] });
      queryClient.invalidateQueries({ queryKey: ['balance'] });
      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
@@ -130,7 +133,7 @@ export default function Dashboard() {
  } | null>(null);

  const refreshTrafficMutation = useMutation({
-    mutationFn: () => subscriptionApi.refreshTraffic(),
+    mutationFn: () => subscriptionApi.refreshTraffic(subscription?.id),
    onSuccess: (data) => {
      setTrafficData({
        traffic_used_gb: data.traffic_used_gb,
@@ -143,7 +146,7 @@ export default function Dashboard() {
      } else {
        setTrafficRefreshCooldown(30);
      }
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['subscription', subscription?.id] });
    },
    onError: (error: {
      response?: { status?: number; headers?: { get?: (key: string) => string } };
@@ -274,7 +277,7 @@ export default function Dashboard() {
      {/* Pending Gift Activations */}
      {pendingGifts && pendingGifts.length > 0 && <PendingGiftCard gifts={pendingGifts} />}

-      {/* Multi-tariff: show mini-cards for each subscription */}
+      {/* Multi-tariff: show subscription cards (max 3) */}
      {isMultiTariff && multiSubData?.subscriptions && (
        <div className="space-y-3">
          <div className="flex items-center justify-between px-1">
@@ -285,42 +288,21 @@ export default function Dashboard() {
              {t('dashboard.manageAll', 'Управление')} →
            </Link>
          </div>
-          {multiSubData.subscriptions.map((sub) => {
-            const isActive = sub.status === 'active' || sub.status === 'trial';
-            const trafficDisplay =
-              sub.traffic_limit_gb === 0
-                ? '∞'
-                : `${sub.traffic_used_gb.toFixed(1)} / ${sub.traffic_limit_gb} ГБ`;
-            const endDate = sub.end_date
-              ? new Date(sub.end_date).toLocaleDateString('ru-RU', {
-                  day: '2-digit',
-                  month: '2-digit',
-                  year: 'numeric',
-                })
-              : '—';
-            return (
-              <Link
-                key={sub.id}
-                to={`/subscription/${sub.id}`}
-                className="bento-card flex items-center justify-between p-4 transition-all hover:scale-[1.01]"
-              >
-                <div className="flex-1">
-                  <div className="flex items-center gap-2">
-                    <span
-                      className={`inline-block h-2 w-2 rounded-full ${isActive ? 'bg-emerald-400' : 'bg-red-400'}`}
-                    />
-                    <span className="font-semibold">{sub.tariff_name || 'Подписка'}</span>
-                  </div>
-                  <div className="mt-1.5 flex gap-4 text-xs opacity-50">
-                    <span>📊 {trafficDisplay}</span>
-                    <span>📱 {sub.device_limit}</span>
-                    <span>📅 {endDate}</span>
-                  </div>
-                </div>
-                <ChevronRightIcon />
-              </Link>
-            );
-          })}
+          {multiSubData.subscriptions.slice(0, 3).map((sub) => (
+            <SubscriptionListCard
+              key={sub.id}
+              subscription={sub}
+              onClick={() => navigate(`/subscriptions/${sub.id}`)}
+            />
+          ))}
+          {multiSubData.subscriptions.length > 3 && (
+            <Link
+              to="/subscriptions"
+              className="flex w-full items-center justify-center rounded-2xl border border-dashed border-white/15 p-3 text-xs opacity-50 transition-opacity hover:opacity-80"
+            >
+              {t('dashboard.showAll', 'Показать все')} ({multiSubData.subscriptions.length})
+            </Link>
+          )}
          <Link
            to="/subscription/purchase"
            className="flex w-full items-center justify-center gap-1.5 rounded-2xl border border-dashed border-white/15 p-3 text-xs opacity-50 transition-opacity hover:opacity-80"
--- a/src/pages/DeepLinkRedirect.tsx
+++ b/src/pages/DeepLinkRedirect.tsx
@@ -311,7 +311,7 @@ export default function DeepLinkRedirect() {

              {/* Back to cabinet */}
              <button
-                onClick={() => navigate('/subscription')}
+                onClick={() => navigate('/subscriptions')}
                className="w-full py-2 text-sm text-dark-500 transition-colors hover:text-dark-300"
              >
                {t('deepLink.backToCabinet')}
@@ -353,7 +353,7 @@ export default function DeepLinkRedirect() {
            </div>
            <p className="mb-2 font-medium text-dark-200">{t('deepLink.errorTitle')}</p>
            <p className="mb-6 text-sm text-dark-400">{t('deepLink.errorDesc')}</p>
-            <button onClick={() => navigate('/subscription')} className="btn-primary w-full">
+            <button onClick={() => navigate('/subscriptions')} className="btn-primary w-full">
              {t('deepLink.goToSubscription')}
            </button>
          </div>
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -196,6 +196,14 @@ export default function Subscription() {
    is_unlimited: boolean;
  } | null>(null);

+  // Detect multi-tariff mode from cached subscriptions-list
+  const { data: multiSubData } = useQuery({
+    queryKey: ['subscriptions-list'],
+    queryFn: () => subscriptionApi.getSubscriptions(),
+    staleTime: 60_000,
+  });
+  const isMultiTariff = multiSubData?.multi_tariff_enabled ?? false;
+
  const { data: subscriptionResponse, isLoading } = useQuery({
    queryKey: ['subscription', subscriptionId],
    queryFn: () => subscriptionApi.getSubscription(subscriptionId),
@@ -376,7 +384,7 @@ export default function Subscription() {
      } else {
        setTrafficRefreshCooldown(30);
      }
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
    },
    onError: (error: {
      response?: { status?: number; headers?: { get?: (key: string) => string } };
@@ -430,6 +438,12 @@ export default function Subscription() {
    }
  };

+  // In multi-tariff mode without a specific subscription ID, redirect to list
+  if (isMultiTariff && !subscriptionId && !isLoading) {
+    navigate('/subscriptions', { replace: true });
+    return null;
+  }
+
  if (isLoading) {
    return (
      <div className="flex min-h-64 items-center justify-center">
@@ -438,9 +452,56 @@ export default function Subscription() {
    );
  }

+  if (!subscription && subscriptionId) {
+    return (
+      <div className="mx-auto max-w-lg p-4 text-center">
+        <div className="mb-4 text-4xl">😕</div>
+        <h2 className="mb-2 text-xl font-bold text-dark-50">
+          {t('subscription.notFound', 'Подписка не найдена')}
+        </h2>
+        <p className="mb-4 text-sm text-dark-50/60">
+          {t('subscription.notFoundDesc', 'Возможно, подписка была удалена или не существует')}
+        </p>
+        <button
+          onClick={() => navigate('/subscriptions')}
+          className="rounded-xl bg-accent-500 px-6 py-2.5 text-sm font-medium text-white"
+        >
+          {t('subscription.backToList', 'Мои подписки')}
+        </button>
+      </div>
+    );
+  }
+
  return (
    <div className="space-y-6">
-      <h1 className="text-2xl font-bold text-dark-50 sm:text-3xl">{t('subscription.title')}</h1>
+      {/* Multi-tariff: back navigation + tariff name */}
+      {isMultiTariff && subscriptionId ? (
+        <div>
+          <button
+            onClick={() => navigate('/subscriptions')}
+            className="mb-2 flex items-center gap-1.5 text-sm text-dark-50/50 transition-colors hover:text-dark-50/80"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M15 18l-6-6 6-6" />
+            </svg>
+            {t('subscription.backToList', 'Мои подписки')}
+          </button>
+          <h1 className="text-2xl font-bold text-dark-50 sm:text-3xl">
+            {subscription?.tariff_name || t('subscription.title')}
+          </h1>
+        </div>
+      ) : (
+        <h1 className="text-2xl font-bold text-dark-50 sm:text-3xl">{t('subscription.title')}</h1>
+      )}

      {/* Current Subscription */}
      {subscription ? (
--- a/src/pages/SubscriptionPurchase.tsx
+++ b/src/pages/SubscriptionPurchase.tsx
@@ -40,7 +40,7 @@ export default function SubscriptionPurchase() {

  // Subscription query (shares cache with /subscription page)
  const { data: subscriptionResponse, isLoading } = useQuery({
-    queryKey: ['subscription'],
+    queryKey: ['subscription', subscriptionId],
    queryFn: () => subscriptionApi.getSubscription(subscriptionId),
    retry: false,
    staleTime: 0,
@@ -55,7 +55,7 @@ export default function SubscriptionPurchase() {
    isError: optionsError,
    refetch: refetchOptions,
  } = useQuery({
-    queryKey: ['purchase-options'],
+    queryKey: ['purchase-options', subscriptionId],
    queryFn: () => subscriptionApi.getPurchaseOptions(subscriptionId),
    staleTime: 0,
    refetchOnMount: 'always',
@@ -237,9 +237,9 @@ export default function SubscriptionPurchase() {
  const purchaseMutation = useMutation({
    mutationFn: () => subscriptionApi.submitPurchase(currentSelection, subscriptionId),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
-      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
-      navigate('/subscription', { replace: true });
+      queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
+      queryClient.invalidateQueries({ queryKey: ['purchase-options', subscriptionId] });
+      navigate('/subscriptions', { replace: true });
    },
  });

@@ -254,11 +254,11 @@ export default function SubscriptionPurchase() {
  const switchTariffMutation = useMutation({
    mutationFn: (tariffId: number) => subscriptionApi.switchTariff(tariffId, subscriptionId),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
-      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
+      queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
+      queryClient.invalidateQueries({ queryKey: ['purchase-options', subscriptionId] });
      setSwitchTariffId(null);

-      navigate('/subscription', { replace: true });
+      navigate('/subscriptions', { replace: true });
    },
    onError: (error: unknown) => {
      if (error instanceof AxiosError) {
@@ -275,7 +275,7 @@ export default function SubscriptionPurchase() {
            setSelectedTariff(targetTariff);
            setSelectedTariffPeriod(targetTariff.periods[0] || null);
            setShowTariffPurchase(true);
-            queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
+            queryClient.invalidateQueries({ queryKey: ['purchase-options', subscriptionId] });
          }
        }
      }
@@ -303,7 +303,8 @@ export default function SubscriptionPurchase() {
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['subscription'] });
      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
-      navigate('/subscription', { replace: true });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
+      navigate('/subscriptions', { replace: true });
    },
  });

@@ -436,7 +437,7 @@ export default function SubscriptionPurchase() {
      {/* Header with back link */}
      <div className="flex items-center gap-3">
        <button
-          onClick={() => navigate('/subscription')}
+          onClick={() => navigate('/subscriptions')}
          aria-label="Back"
          className="flex h-9 w-9 items-center justify-center rounded-xl transition-colors"
          style={{
--- a/src/pages/Subscriptions.tsx
+++ b/src/pages/Subscriptions.tsx
@@ -2,116 +2,22 @@ import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { subscriptionApi } from '../api/subscription';
-import { useTheme } from '../hooks/useTheme';
-import { getGlassColors } from '../utils/glassTheme';
-import { useHaptic } from '../platform';
-import type { SubscriptionListItem } from '../types';
-
-function formatTrafficDisplay(used: number, limit: number): string {
-  if (limit === 0) return '∞';
-  return `${used.toFixed(1)} / ${limit} ГБ`;
-}
-
-function formatDate(iso: string | null): string {
-  if (!iso) return '—';
-  try {
-    return new Date(iso).toLocaleDateString('ru-RU', {
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric',
-    });
-  } catch {
-    return '—';
-  }
-}
-
-function StatusDot({ status }: { status: string }) {
-  const color =
-    status === 'active' || status === 'trial'
-      ? 'bg-emerald-400'
-      : status === 'limited'
-        ? 'bg-amber-400'
-        : 'bg-red-400';
-  return <span className={`inline-block h-2.5 w-2.5 rounded-full ${color}`} />;
-}
-
-function SubscriptionCard({
-  subscription,
-  onClick,
-}: {
-  subscription: SubscriptionListItem;
-  onClick: () => void;
-}) {
-  const { isDark } = useTheme();
-  const g = getGlassColors(isDark);
-  const { impact } = useHaptic();
-
-  const handleClick = () => {
-    impact('light');
-    onClick();
-  };
-
-  return (
-    <button
-      onClick={handleClick}
-      className="bento-card w-full text-left transition-all duration-200 hover:scale-[1.01] active:scale-[0.99]"
-      style={{ background: g.cardBg, borderColor: g.cardBorder }}
-    >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <StatusDot status={subscription.status} />
-          <span className="text-base font-semibold">{subscription.tariff_name || 'Подписка'}</span>
-        </div>
-        <svg
-          className="h-5 w-5 opacity-40"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2}
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-        </svg>
-      </div>
-
-      <div className="mt-3 grid grid-cols-3 gap-3 text-sm opacity-70">
-        <div>
-          <div className="text-xs opacity-60">Трафик</div>
-          <div>
-            {formatTrafficDisplay(subscription.traffic_used_gb, subscription.traffic_limit_gb)}
-          </div>
-        </div>
-        <div>
-          <div className="text-xs opacity-60">Устройства</div>
-          <div>{subscription.device_limit}</div>
-        </div>
-        <div>
-          <div className="text-xs opacity-60">До</div>
-          <div>{formatDate(subscription.end_date)}</div>
-        </div>
-      </div>
-
-      {subscription.is_trial && (
-        <div className="mt-2">
-          <span className="inline-block rounded-full bg-amber-500/20 px-2 py-0.5 text-xs text-amber-300">
-            Тестовая
-          </span>
-        </div>
-      )}
-    </button>
-  );
-}
+import SubscriptionListCard from '../components/subscription/SubscriptionListCard';

 function EmptyState({ onBuy }: { onBuy: () => void }) {
+  const { t } = useTranslation();
  return (
    <div className="bento-card p-6 text-center">
      <div className="mb-3 text-4xl">📋</div>
-      <h3 className="mb-1 text-lg font-semibold">Нет подписок</h3>
-      <p className="mb-4 text-sm opacity-60">У вас пока нет активных подписок</p>
+      <h3 className="mb-1 text-lg font-semibold">{t('subscriptions.empty', 'Нет подписок')}</h3>
+      <p className="mb-4 text-sm opacity-60">
+        {t('subscriptions.emptyDesc', 'У вас пока нет активных подписок')}
+      </p>
      <button
        onClick={onBuy}
        className="rounded-xl bg-blue-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-600"
      >
-        Купить подписку
+        {t('subscriptions.buy', 'Купить подписку')}
      </button>
    </div>
  );
@@ -128,14 +34,15 @@ export default function Subscriptions() {
    refetchOnMount: 'always',
  });

-  // If multi_tariff not enabled, redirect to legacy subscription page
-  if (data && !data.multi_tariff_enabled) {
-    navigate('/subscription', { replace: true });
+  const subscriptions = data?.subscriptions ?? [];
+  const isMultiTariff = data?.multi_tariff_enabled ?? false;
+
+  // Single-tariff mode with one subscription: skip list, go directly to detail
+  if (data && !isMultiTariff && subscriptions.length === 1) {
+    navigate(`/subscriptions/${subscriptions[0].id}`, { replace: true });
    return null;
  }

-  const subscriptions = data?.subscriptions ?? [];
-
  return (
    <div className="mx-auto max-w-lg space-y-4 p-4">
      <h1 className="text-2xl font-bold">{t('subscriptions.title', 'Мои подписки')}</h1>
@@ -153,10 +60,10 @@ export default function Subscriptions() {
      )}

      {subscriptions.map((sub) => (
-        <SubscriptionCard
+        <SubscriptionListCard
          key={sub.id}
          subscription={sub}
-          onClick={() => navigate(`/subscription/${sub.id}`)}
+          onClick={() => navigate(`/subscriptions/${sub.id}`)}
        />
      ))}

--- a/src/pages/TopUpResult.tsx
+++ b/src/pages/TopUpResult.tsx
@@ -305,7 +305,10 @@ export default function TopUpResult() {
      clearTopUpPendingInfo();
      queryClient.invalidateQueries({ queryKey: ['balance'] });
      queryClient.invalidateQueries({ queryKey: ['transactions'] });
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({
+        predicate: (query) => Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+      });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
      refreshUser();
    } else if (resolvedFailed) {
--- a/src/providers/WebSocketContext.ts
+++ b/src/providers/WebSocketContext.ts
@@ -16,6 +16,7 @@ export interface WSMessage {
  new_balance_rubles?: number;
  description?: string;
  // Subscription events
+  subscription_id?: number;
  expires_at?: string;
  new_expires_at?: string;
  tariff_name?: string;