diff --git a/src/components/admin/userDetail/InfoTab.tsx b/src/components/admin/userDetail/InfoTab.tsx
new file mode 100644
index 0000000..358afb5
--- /dev/null
+++ b/src/components/admin/userDetail/InfoTab.tsx
@@ -0,0 +1,540 @@
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router';
+import { useCurrency } from '../../../hooks/useCurrency';
+import { createNumberInputHandler } from '../../../utils/inputHelpers';
+import type {
+  UserDetailResponse,
+  UserListItem,
+  UserPanelInfo,
+  UserSubscriptionInfo,
+} from '../../../api/adminUsers';
+import type { PromoGroup } from '../../../api/promocodes';
+
+// ──────────────────────────────────────────────────────────────────
+// Local status badge (parent has its own — duplicating here to keep
+// this file self-contained for the tab's smallest unit of meaning).
+// ──────────────────────────────────────────────────────────────────
+
+function StatusBadge({ status }: { status: string }) {
+  const { t } = useTranslation();
+  const styles: Record<string, string> = {
+    active: 'bg-success-500/20 text-success-400 border-success-500/30',
+    blocked: 'bg-error-500/20 text-error-400 border-error-500/30',
+    deleted: 'bg-dark-600 text-dark-400 border-dark-500',
+  };
+  return (
+    <span
+      className={`rounded-full border px-2 py-0.5 text-xs font-medium ${styles[status] || styles.deleted}`}
+    >
+      {t(`admin.users.status.${status}`, status)}
+    </span>
+  );
+}
+
+// ──────────────────────────────────────────────────────────────────
+// Info tab — user metadata + VPN connection + promo group + referral
+// + restrictions + 4 destructive actions (reset/disable/delete).
+//
+// The tab is a "view facade" — it reads parent state (panelInfo,
+// promoGroups, etc. live up there because subscription tab also
+// consumes them) and delegates every mutation to a parent handler.
+// Local UI state is parent-owned for the same reason: the parent
+// already maintains the inline-confirm armer for actions shared
+// with the subscription tab.
+// ──────────────────────────────────────────────────────────────────
+
+export interface InfoTabProps {
+  user: UserDetailResponse;
+  hasPermission: (perm: string) => boolean;
+  formatDate: (date: string | null) => string;
+  locale: string;
+
+  // Subscription / panel info (also used by Subscription tab in parent)
+  panelInfo: UserPanelInfo | null;
+  panelInfoLoading: boolean;
+  userSubscriptions: UserSubscriptionInfo[];
+  activeSubscriptionId: number | null;
+  onActiveSubscriptionChange: (id: number) => void;
+
+  // Promo-group editor
+  promoGroups: PromoGroup[];
+  editingPromoGroup: boolean;
+  onToggleEditingPromoGroup: () => void;
+  onChangePromoGroup: (groupId: number | null) => void;
+
+  // Referral commission editor
+  editingReferralCommission: boolean;
+  referralCommissionValue: number | '';
+  onSetReferralCommissionValue: (value: number | '') => void;
+  onToggleEditingReferralCommission: () => void;
+  onUpdateReferralCommission: () => void;
+
+  // Referrals mini-list
+  referrals: UserListItem[];
+  referralsLoading: boolean;
+
+  // Status block/unblock
+  actionLoading: boolean;
+  onBlockUser: () => void;
+  onUnblockUser: () => void;
+
+  // Destructive actions + inline-confirm armer
+  confirmingAction: string | null;
+  onInlineConfirm: (actionKey: string, executeFn: () => Promise<void>) => void;
+  onResetTrial: () => Promise<void>;
+  onResetSubscription: () => Promise<void>;
+  onDisableUser: () => Promise<void>;
+  onFullDeleteUser: () => Promise<void>;
+}
+
+export function InfoTab(props: InfoTabProps) {
+  const { t } = useTranslation();
+  const { formatWithCurrency } = useCurrency();
+  const navigate = useNavigate();
+  const {
+    user,
+    hasPermission,
+    formatDate,
+    locale,
+    panelInfo,
+    panelInfoLoading,
+    userSubscriptions,
+    activeSubscriptionId,
+    onActiveSubscriptionChange,
+    promoGroups,
+    editingPromoGroup,
+    onToggleEditingPromoGroup,
+    onChangePromoGroup,
+    editingReferralCommission,
+    referralCommissionValue,
+    onSetReferralCommissionValue,
+    onToggleEditingReferralCommission,
+    onUpdateReferralCommission,
+    referrals,
+    referralsLoading,
+    actionLoading,
+    onBlockUser,
+    onUnblockUser,
+    confirmingAction,
+    onInlineConfirm,
+    onResetTrial,
+    onResetSubscription,
+    onDisableUser,
+    onFullDeleteUser,
+  } = props;
+
+  return (
+    <div className="space-y-4">
+      {/* Status */}
+      <div className="flex items-center justify-between rounded-xl bg-dark-800/50 p-3">
+        <span className="text-dark-400">{t('admin.users.detail.status')}</span>
+        <div className="flex items-center gap-2">
+          <StatusBadge status={user.status} />
+          {user.status === 'active' ? (
+            <button
+              onClick={onBlockUser}
+              disabled={actionLoading}
+              className="rounded-lg bg-error-500/20 px-3 py-1 text-xs text-error-400 transition-colors hover:bg-error-500/30"
+            >
+              {t('admin.users.actions.block')}
+            </button>
+          ) : user.status === 'blocked' ? (
+            <button
+              onClick={onUnblockUser}
+              disabled={actionLoading}
+              className="rounded-lg bg-success-500/20 px-3 py-1 text-xs text-success-400 transition-colors hover:bg-success-500/30"
+            >
+              {t('admin.users.actions.unblock')}
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Details grid */}
+      <div className="grid grid-cols-2 gap-3">
+        <div className="rounded-xl bg-dark-800/50 p-3">
+          <div className="mb-1 text-xs text-dark-500">Email</div>
+          <div className="text-dark-100">{user.email || '-'}</div>
+        </div>
+        <div className="rounded-xl bg-dark-800/50 p-3">
+          <div className="mb-1 text-xs text-dark-500">{t('admin.users.detail.language')}</div>
+          <div className="text-dark-100">{user.language}</div>
+        </div>
+        <div className="rounded-xl bg-dark-800/50 p-3">
+          <div className="mb-1 text-xs text-dark-500">{t('admin.users.detail.registration')}</div>
+          <div className="text-dark-100">{formatDate(user.created_at)}</div>
+        </div>
+        <div className="rounded-xl bg-dark-800/50 p-3">
+          <div className="mb-1 text-xs text-dark-500">{t('admin.users.detail.botActivity')}</div>
+          <div className="text-dark-100">{formatDate(user.last_activity)}</div>
+        </div>
+        <div className="rounded-xl bg-dark-800/50 p-3">
+          <div className="mb-1 text-xs text-dark-500">
+            {t('admin.users.detail.cabinetLastLogin')}
+          </div>
+          <div className="text-dark-100">{formatDate(user.cabinet_last_login)}</div>
+        </div>
+        <div className="rounded-xl bg-dark-800/50 p-3">
+          <div className="mb-1 text-xs text-dark-500">{t('admin.users.detail.totalSpent')}</div>
+          <div className="text-dark-100">{formatWithCurrency(user.total_spent_kopeks / 100)}</div>
+        </div>
+        <div className="rounded-xl bg-dark-800/50 p-3">
+          <div className="mb-1 text-xs text-dark-500">{t('admin.users.detail.purchases')}</div>
+          <div className="text-dark-100">{user.purchase_count}</div>
+        </div>
+      </div>
+
+      {/* VPN Connection Info */}
+      {(panelInfo || userSubscriptions.length > 0) && (
+        <div className="rounded-xl border border-dark-700/30 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.vpnConnection')}
+            </span>
+            {userSubscriptions.length > 1 && (
+              <select
+                value={activeSubscriptionId ?? ''}
+                onChange={(e) => onActiveSubscriptionChange(Number(e.target.value))}
+                className="rounded-lg border border-dark-600 bg-dark-700 px-3 py-1.5 text-xs text-dark-200"
+              >
+                {userSubscriptions.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.tariff_name || `#${s.id}`} — {s.status}
+                  </option>
+                ))}
+              </select>
+            )}
+          </div>
+          {panelInfoLoading && !panelInfo?.found && (
+            <div className="flex items-center justify-center py-4">
+              <div className="h-5 w-5 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+            </div>
+          )}
+          {panelInfo?.found && (
+            <div className="grid grid-cols-2 gap-3">
+              <div className="rounded-lg bg-dark-700/30 p-3">
+                <div className="mb-1 text-xs text-dark-500">
+                  {t('admin.users.detail.lastConnection')}
+                </div>
+                <div className="flex items-center gap-2">
+                  {panelInfo.online_at &&
+                    (() => {
+                      const onlineDate = new Date(panelInfo.online_at);
+                      const isRecent = Date.now() - onlineDate.getTime() < 5 * 60 * 1000;
+                      return (
+                        <>
+                          <span
+                            className={`inline-block h-2 w-2 shrink-0 rounded-full ${isRecent ? 'bg-success-400 shadow-[0_0_6px_rgba(74,222,128,0.5)]' : 'bg-dark-500'}`}
+                            title={isRecent ? t('admin.users.detail.online') : ''}
+                          />
+                          <span
+                            className={`text-sm ${isRecent ? 'font-medium text-success-400' : 'text-dark-100'}`}
+                          >
+                            {isRecent
+                              ? t('admin.users.detail.online')
+                              : formatDate(panelInfo.online_at)}
+                          </span>
+                        </>
+                      );
+                    })()}
+                  {!panelInfo.online_at && <span className="text-sm text-dark-100">-</span>}
+                </div>
+              </div>
+              <div className="rounded-lg bg-dark-700/30 p-3">
+                <div className="mb-1 text-xs text-dark-500">
+                  {t('admin.users.detail.firstConnection')}
+                </div>
+                <div className="text-sm text-dark-100">
+                  {panelInfo.first_connected_at
+                    ? new Date(panelInfo.first_connected_at).toLocaleDateString(locale, {
+                        day: '2-digit',
+                        month: '2-digit',
+                        year: 'numeric',
+                      })
+                    : '-'}
+                </div>
+              </div>
+              {panelInfo.last_connected_node_name && (
+                <div className="col-span-2 rounded-lg bg-dark-700/30 p-3">
+                  <div className="mb-1 text-xs text-dark-500">
+                    {t('admin.users.detail.lastNode')}
+                  </div>
+                  <div className="flex items-center gap-2 text-sm text-dark-100">
+                    <svg
+                      className="h-4 w-4 shrink-0 text-dark-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"
+                      />
+                    </svg>
+                    {panelInfo.last_connected_node_name}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+          {!panelInfoLoading && !panelInfo?.found && userSubscriptions.length > 0 && (
+            <div className="py-2 text-center text-xs text-dark-500">
+              {t('admin.users.detail.noVpnData')}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Campaign */}
+      {user.campaign_name && (
+        <div className="rounded-xl border border-accent-500/20 bg-accent-500/5 p-3">
+          <div className="mb-1 text-xs text-dark-500">{t('admin.users.detail.campaign')}</div>
+          <div className="text-sm font-medium text-accent-400">{user.campaign_name}</div>
+        </div>
+      )}
+
+      {/* Promo Group */}
+      <div className="rounded-xl bg-dark-800/50 p-3">
+        <div className="mb-1 flex items-center justify-between">
+          <span className="text-xs text-dark-500">{t('admin.users.detail.promoGroup')}</span>
+          {hasPermission('users:promo_group') && (
+            <button
+              onClick={onToggleEditingPromoGroup}
+              className="text-xs text-accent-400 transition-colors hover:text-accent-300"
+            >
+              {editingPromoGroup ? t('common.cancel') : t('admin.users.detail.changePromoGroup')}
+            </button>
+          )}
+        </div>
+        {editingPromoGroup ? (
+          <div className="mt-2 space-y-2">
+            <select
+              value={user.promo_group?.id ?? ''}
+              onChange={(e) => {
+                const val = e.target.value;
+                onChangePromoGroup(val ? parseInt(val, 10) : null);
+              }}
+              disabled={actionLoading}
+              className="input text-sm"
+            >
+              <option value="">{t('admin.users.detail.selectPromoGroup')}</option>
+              {promoGroups.map((g) => (
+                <option key={g.id} value={g.id}>
+                  {g.name}
+                </option>
+              ))}
+            </select>
+            {user.promo_group && (
+              <button
+                onClick={() => onChangePromoGroup(null)}
+                disabled={actionLoading}
+                className="w-full rounded-lg bg-dark-700 py-1.5 text-xs text-dark-300 transition-colors hover:bg-dark-600"
+              >
+                {t('admin.users.detail.removePromoGroup')}
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="text-sm font-medium text-dark-100">
+            {user.promo_group?.name || (
+              <span className="text-dark-500">{t('admin.users.detail.noPromoGroup')}</span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Referral */}
+      <div className="rounded-xl bg-dark-800/50 p-3">
+        <div className="mb-2 flex items-center justify-between">
+          <span className="text-sm font-medium text-dark-200">
+            {t('admin.users.detail.referral.title')}
+          </span>
+          {hasPermission('users:referral') && (
+            <button
+              onClick={onToggleEditingReferralCommission}
+              className="text-xs text-accent-400 transition-colors hover:text-accent-300"
+            >
+              {editingReferralCommission ? t('common.cancel') : t('common.edit')}
+            </button>
+          )}
+        </div>
+        <div className="grid grid-cols-3 gap-3 text-center">
+          <div>
+            <div className="text-lg font-bold text-dark-100">{user.referral.referrals_count}</div>
+            <div className="text-xs text-dark-500">
+              {t('admin.users.detail.referral.referrals')}
+            </div>
+          </div>
+          <div>
+            <div className="text-lg font-bold text-dark-100">
+              {formatWithCurrency(user.referral.total_earnings_kopeks / 100)}
+            </div>
+            <div className="text-xs text-dark-500">{t('admin.users.detail.referral.earned')}</div>
+          </div>
+          <div>
+            {editingReferralCommission ? (
+              <div className="space-y-1">
+                <input
+                  type="number"
+                  value={referralCommissionValue}
+                  onChange={createNumberInputHandler(onSetReferralCommissionValue, 0)}
+                  placeholder="0-100"
+                  className="input w-full text-center text-sm"
+                  min={0}
+                  max={100}
+                  disabled={actionLoading}
+                />
+                <button
+                  onClick={onUpdateReferralCommission}
+                  disabled={actionLoading}
+                  className="w-full rounded-lg bg-accent-500 px-2 py-1 text-xs text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
+                >
+                  {actionLoading ? t('common.loading') : t('common.save')}
+                </button>
+              </div>
+            ) : (
+              <>
+                <div className="text-lg font-bold text-dark-100">
+                  {user.referral.commission_percent != null
+                    ? `${user.referral.commission_percent}%`
+                    : t('admin.users.detail.referral.default')}
+                </div>
+                <div className="text-xs text-dark-500">
+                  {t('admin.users.detail.referral.commission')}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Referrals list */}
+      {user.referral.referrals_count > 0 && (
+        <div className="rounded-xl bg-dark-800/50 p-3">
+          <div className="mb-2 text-sm font-medium text-dark-200">
+            {t('admin.users.detail.referralsList')}
+          </div>
+          {referralsLoading ? (
+            <div className="flex justify-center py-4">
+              <div className="h-5 w-5 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+            </div>
+          ) : referrals.length === 0 ? (
+            <div className="py-2 text-center text-xs text-dark-500">
+              {t('admin.users.detail.noReferrals')}
+            </div>
+          ) : (
+            <div className="max-h-48 space-y-2 overflow-y-auto">
+              {referrals.map((ref) => (
+                <button
+                  key={ref.id}
+                  onClick={() => navigate(`/admin/users/${ref.id}`)}
+                  className="flex w-full items-center justify-between rounded-lg bg-dark-700/50 p-2 text-left transition-colors hover:bg-dark-700"
+                >
+                  <div className="flex items-center gap-2">
+                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-dark-600 text-xs font-bold text-dark-300">
+                      {ref.first_name?.[0] || ref.username?.[0] || '?'}
+                    </div>
+                    <div>
+                      <div className="text-sm text-dark-100">{ref.full_name}</div>
+                      <div className="text-xs text-dark-500">{formatDate(ref.created_at)}</div>
+                    </div>
+                  </div>
+                  <div className="text-xs text-dark-400">
+                    {formatWithCurrency(ref.total_spent_kopeks / 100)}
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Restrictions */}
+      {(user.restriction_topup || user.restriction_subscription) && (
+        <div className="rounded-xl border border-error-500/30 bg-error-500/10 p-3">
+          <div className="mb-2 text-sm font-medium text-error-400">
+            {t('admin.users.detail.restrictions.title')}
+          </div>
+          {user.restriction_topup && (
+            <div className="text-xs text-error-300">
+              {t('admin.users.detail.restrictions.topup')}
+            </div>
+          )}
+          {user.restriction_subscription && (
+            <div className="text-xs text-error-300">
+              {t('admin.users.detail.restrictions.subscription')}
+            </div>
+          )}
+          {user.restriction_reason && (
+            <div className="mt-1 text-xs text-dark-400">
+              {t('admin.users.detail.restrictions.reason')}: {user.restriction_reason}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="rounded-xl bg-dark-800/50 p-4">
+        <div className="mb-3 text-sm font-medium text-dark-200">
+          {t('admin.users.detail.actions.title')}
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          <button
+            onClick={() => onInlineConfirm('resetTrial', onResetTrial)}
+            disabled={actionLoading}
+            className={`rounded-lg px-3 py-2 text-sm font-medium transition-all disabled:opacity-50 ${
+              confirmingAction === 'resetTrial'
+                ? 'bg-accent-500 text-white'
+                : 'bg-accent-500/15 text-accent-400 hover:bg-accent-500/25'
+            }`}
+          >
+            {confirmingAction === 'resetTrial'
+              ? t('admin.users.detail.actions.areYouSure')
+              : t('admin.users.userActions.resetTrial')}
+          </button>
+          <button
+            onClick={() => onInlineConfirm('resetSubscription', onResetSubscription)}
+            disabled={actionLoading}
+            className={`rounded-lg px-3 py-2 text-sm font-medium transition-all disabled:opacity-50 ${
+              confirmingAction === 'resetSubscription'
+                ? 'bg-warning-500 text-white'
+                : 'bg-warning-500/15 text-warning-400 hover:bg-warning-500/25'
+            }`}
+          >
+            {confirmingAction === 'resetSubscription'
+              ? t('admin.users.detail.actions.areYouSure')
+              : t('admin.users.userActions.resetSubscription')}
+          </button>
+          <button
+            onClick={() => onInlineConfirm('disable', onDisableUser)}
+            disabled={actionLoading}
+            className={`rounded-lg px-3 py-2 text-sm font-medium transition-all disabled:opacity-50 ${
+              confirmingAction === 'disable'
+                ? 'bg-dark-500 text-white'
+                : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
+            }`}
+          >
+            {confirmingAction === 'disable'
+              ? t('admin.users.detail.actions.areYouSure')
+              : t('admin.users.userActions.disable')}
+          </button>
+          <button
+            onClick={() => onInlineConfirm('fullDelete', onFullDeleteUser)}
+            disabled={actionLoading}
+            className={`rounded-lg px-3 py-2 text-sm font-medium transition-all disabled:opacity-50 ${
+              confirmingAction === 'fullDelete'
+                ? 'bg-rose-500 text-white'
+                : 'bg-rose-500/15 text-rose-400 hover:bg-rose-500/25'
+            }`}
+          >
+            {confirmingAction === 'fullDelete'
+              ? t('admin.users.detail.actions.areYouSure')
+              : t('admin.users.userActions.delete')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/AdminUserDetail.tsx b/src/pages/AdminUserDetail.tsx
index d4574b8..71dd8fd 100644
--- a/src/pages/AdminUserDetail.tsx
+++ b/src/pages/AdminUserDetail.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { useQuery } from '@tanstack/react-query';
 import i18n from '../i18n';
 import { DEVICE_ALIAS_MAX_LENGTH } from '../constants/devices';
-import { useCurrency } from '../hooks/useCurrency';
 import { useNotify } from '../platform/hooks/useNotify';
 import { copyToClipboard as copyText } from '../utils/clipboard';
 import {
@@ -26,6 +25,7 @@ import { SyncTab } from '../components/admin/userDetail/SyncTab';
 import { ReferralsTab } from '../components/admin/userDetail/ReferralsTab';
 import { BalanceTab } from '../components/admin/userDetail/BalanceTab';
 import { TicketsTab } from '../components/admin/userDetail/TicketsTab';
+import { InfoTab } from '../components/admin/userDetail/InfoTab';
 import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
 import { usePermissionStore } from '../store/permissions';
 import { getFlagEmoji } from '../utils/subscriptionHelpers';
@@ -95,7 +95,6 @@ function StatusBadge({ status }: { status: string }) {
 
 export default function AdminUserDetail() {
   const { t } = useTranslation();
-  const { formatWithCurrency } = useCurrency();
   const navigate = useNavigate();
   const notify = useNotify();
   const { id } = useParams<{ id: string }>();
@@ -861,444 +860,42 @@ export default function AdminUserDetail() {
       <div className="space-y-4">
         {/* Info Tab */}
         {activeTab === 'info' && (
-          <div className="space-y-4">
-            {/* Status */}
-            <div className="flex items-center justify-between rounded-xl bg-dark-800/50 p-3">
-              <span className="text-dark-400">{t('admin.users.detail.status')}</span>
-              <div className="flex items-center gap-2">
-                <StatusBadge status={user.status} />
-                {user.status === 'active' ? (
-                  <button
-                    onClick={handleBlockUser}
-                    disabled={actionLoading}
-                    className="rounded-lg bg-error-500/20 px-3 py-1 text-xs text-error-400 transition-colors hover:bg-error-500/30"
-                  >
-                    {t('admin.users.actions.block')}
-                  </button>
-                ) : user.status === 'blocked' ? (
-                  <button
-                    onClick={handleUnblockUser}
-                    disabled={actionLoading}
-                    className="rounded-lg bg-success-500/20 px-3 py-1 text-xs text-success-400 transition-colors hover:bg-success-500/30"
-                  >
-                    {t('admin.users.actions.unblock')}
-                  </button>
-                ) : null}
-              </div>
-            </div>
-
-            {/* Details grid */}
-            <div className="grid grid-cols-2 gap-3">
-              <div className="rounded-xl bg-dark-800/50 p-3">
-                <div className="mb-1 text-xs text-dark-500">Email</div>
-                <div className="text-dark-100">{user.email || '-'}</div>
-              </div>
-              <div className="rounded-xl bg-dark-800/50 p-3">
-                <div className="mb-1 text-xs text-dark-500">{t('admin.users.detail.language')}</div>
-                <div className="text-dark-100">{user.language}</div>
-              </div>
-              <div className="rounded-xl bg-dark-800/50 p-3">
-                <div className="mb-1 text-xs text-dark-500">
-                  {t('admin.users.detail.registration')}
-                </div>
-                <div className="text-dark-100">{formatDate(user.created_at)}</div>
-              </div>
-              <div className="rounded-xl bg-dark-800/50 p-3">
-                <div className="mb-1 text-xs text-dark-500">
-                  {t('admin.users.detail.botActivity')}
-                </div>
-                <div className="text-dark-100">{formatDate(user.last_activity)}</div>
-              </div>
-              <div className="rounded-xl bg-dark-800/50 p-3">
-                <div className="mb-1 text-xs text-dark-500">
-                  {t('admin.users.detail.cabinetLastLogin')}
-                </div>
-                <div className="text-dark-100">{formatDate(user.cabinet_last_login)}</div>
-              </div>
-              <div className="rounded-xl bg-dark-800/50 p-3">
-                <div className="mb-1 text-xs text-dark-500">
-                  {t('admin.users.detail.totalSpent')}
-                </div>
-                <div className="text-dark-100">
-                  {formatWithCurrency(user.total_spent_kopeks / 100)}
-                </div>
-              </div>
-              <div className="rounded-xl bg-dark-800/50 p-3">
-                <div className="mb-1 text-xs text-dark-500">
-                  {t('admin.users.detail.purchases')}
-                </div>
-                <div className="text-dark-100">{user.purchase_count}</div>
-              </div>
-            </div>
-
-            {/* VPN Connection Info */}
-            {(panelInfo || userSubscriptions.length > 0) && (
-              <div className="rounded-xl border border-dark-700/30 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.vpnConnection')}
-                  </span>
-                  {userSubscriptions.length > 1 && (
-                    <select
-                      value={activeSubscriptionId ?? ''}
-                      onChange={(e) => {
-                        const subId = Number(e.target.value);
-                        setActiveSubscriptionId(subId);
-                      }}
-                      className="rounded-lg border border-dark-600 bg-dark-700 px-3 py-1.5 text-xs text-dark-200"
-                    >
-                      {userSubscriptions.map((s) => (
-                        <option key={s.id} value={s.id}>
-                          {s.tariff_name || `#${s.id}`} — {s.status}
-                        </option>
-                      ))}
-                    </select>
-                  )}
-                </div>
-                {panelInfoLoading && !panelInfo?.found && (
-                  <div className="flex items-center justify-center py-4">
-                    <div className="h-5 w-5 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
-                  </div>
-                )}
-                {panelInfo?.found && (
-                  <div className="grid grid-cols-2 gap-3">
-                    <div className="rounded-lg bg-dark-700/30 p-3">
-                      <div className="mb-1 text-xs text-dark-500">
-                        {t('admin.users.detail.lastConnection')}
-                      </div>
-                      <div className="flex items-center gap-2">
-                        {panelInfo.online_at &&
-                          (() => {
-                            const onlineDate = new Date(panelInfo.online_at);
-                            const isRecent = Date.now() - onlineDate.getTime() < 5 * 60 * 1000;
-                            return (
-                              <>
-                                <span
-                                  className={`inline-block h-2 w-2 shrink-0 rounded-full ${isRecent ? 'bg-success-400 shadow-[0_0_6px_rgba(74,222,128,0.5)]' : 'bg-dark-500'}`}
-                                  title={isRecent ? t('admin.users.detail.online') : ''}
-                                />
-                                <span
-                                  className={`text-sm ${isRecent ? 'font-medium text-success-400' : 'text-dark-100'}`}
-                                >
-                                  {isRecent
-                                    ? t('admin.users.detail.online')
-                                    : formatDate(panelInfo.online_at)}
-                                </span>
-                              </>
-                            );
-                          })()}
-                        {!panelInfo.online_at && <span className="text-sm text-dark-100">-</span>}
-                      </div>
-                    </div>
-                    <div className="rounded-lg bg-dark-700/30 p-3">
-                      <div className="mb-1 text-xs text-dark-500">
-                        {t('admin.users.detail.firstConnection')}
-                      </div>
-                      <div className="text-sm text-dark-100">
-                        {panelInfo.first_connected_at
-                          ? new Date(panelInfo.first_connected_at).toLocaleDateString(locale, {
-                              day: '2-digit',
-                              month: '2-digit',
-                              year: 'numeric',
-                            })
-                          : '-'}
-                      </div>
-                    </div>
-                    {panelInfo.last_connected_node_name && (
-                      <div className="col-span-2 rounded-lg bg-dark-700/30 p-3">
-                        <div className="mb-1 text-xs text-dark-500">
-                          {t('admin.users.detail.lastNode')}
-                        </div>
-                        <div className="flex items-center gap-2 text-sm text-dark-100">
-                          <svg
-                            className="h-4 w-4 shrink-0 text-dark-400"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                            strokeWidth={2}
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"
-                            />
-                          </svg>
-                          {panelInfo.last_connected_node_name}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                )}
-                {!panelInfoLoading && !panelInfo?.found && userSubscriptions.length > 0 && (
-                  <div className="py-2 text-center text-xs text-dark-500">
-                    {t('admin.users.detail.noVpnData')}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Campaign */}
-            {user.campaign_name && (
-              <div className="rounded-xl border border-accent-500/20 bg-accent-500/5 p-3">
-                <div className="mb-1 text-xs text-dark-500">{t('admin.users.detail.campaign')}</div>
-                <div className="text-sm font-medium text-accent-400">{user.campaign_name}</div>
-              </div>
-            )}
-
-            {/* Promo Group */}
-            <div className="rounded-xl bg-dark-800/50 p-3">
-              <div className="mb-1 flex items-center justify-between">
-                <span className="text-xs text-dark-500">{t('admin.users.detail.promoGroup')}</span>
-                {hasPermission('users:promo_group') && (
-                  <button
-                    onClick={() => setEditingPromoGroup(!editingPromoGroup)}
-                    className="text-xs text-accent-400 transition-colors hover:text-accent-300"
-                  >
-                    {editingPromoGroup
-                      ? t('common.cancel')
-                      : t('admin.users.detail.changePromoGroup')}
-                  </button>
-                )}
-              </div>
-              {editingPromoGroup ? (
-                <div className="mt-2 space-y-2">
-                  <select
-                    value={user.promo_group?.id ?? ''}
-                    onChange={(e) => {
-                      const val = e.target.value;
-                      handleChangePromoGroup(val ? parseInt(val, 10) : null);
-                    }}
-                    disabled={actionLoading}
-                    className="input text-sm"
-                  >
-                    <option value="">{t('admin.users.detail.selectPromoGroup')}</option>
-                    {promoGroups.map((g) => (
-                      <option key={g.id} value={g.id}>
-                        {g.name}
-                      </option>
-                    ))}
-                  </select>
-                  {user.promo_group && (
-                    <button
-                      onClick={() => handleChangePromoGroup(null)}
-                      disabled={actionLoading}
-                      className="w-full rounded-lg bg-dark-700 py-1.5 text-xs text-dark-300 transition-colors hover:bg-dark-600"
-                    >
-                      {t('admin.users.detail.removePromoGroup')}
-                    </button>
-                  )}
-                </div>
-              ) : (
-                <div className="text-sm font-medium text-dark-100">
-                  {user.promo_group?.name || (
-                    <span className="text-dark-500">{t('admin.users.detail.noPromoGroup')}</span>
-                  )}
-                </div>
-              )}
-            </div>
-
-            {/* Referral */}
-            <div className="rounded-xl bg-dark-800/50 p-3">
-              <div className="mb-2 flex items-center justify-between">
-                <span className="text-sm font-medium text-dark-200">
-                  {t('admin.users.detail.referral.title')}
-                </span>
-                {hasPermission('users:referral') && (
-                  <button
-                    onClick={() => {
-                      if (!editingReferralCommission) {
-                        setReferralCommissionValue(user.referral.commission_percent ?? '');
-                      }
-                      setEditingReferralCommission(!editingReferralCommission);
-                    }}
-                    className="text-xs text-accent-400 transition-colors hover:text-accent-300"
-                  >
-                    {editingReferralCommission ? t('common.cancel') : t('common.edit')}
-                  </button>
-                )}
-              </div>
-              <div className="grid grid-cols-3 gap-3 text-center">
-                <div>
-                  <div className="text-lg font-bold text-dark-100">
-                    {user.referral.referrals_count}
-                  </div>
-                  <div className="text-xs text-dark-500">
-                    {t('admin.users.detail.referral.referrals')}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-lg font-bold text-dark-100">
-                    {formatWithCurrency(user.referral.total_earnings_kopeks / 100)}
-                  </div>
-                  <div className="text-xs text-dark-500">
-                    {t('admin.users.detail.referral.earned')}
-                  </div>
-                </div>
-                <div>
-                  {editingReferralCommission ? (
-                    <div className="space-y-1">
-                      <input
-                        type="number"
-                        value={referralCommissionValue}
-                        onChange={createNumberInputHandler(setReferralCommissionValue, 0)}
-                        placeholder="0-100"
-                        className="input w-full text-center text-sm"
-                        min={0}
-                        max={100}
-                        disabled={actionLoading}
-                      />
-                      <button
-                        onClick={handleUpdateReferralCommission}
-                        disabled={actionLoading}
-                        className="w-full rounded-lg bg-accent-500 px-2 py-1 text-xs text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
-                      >
-                        {actionLoading ? t('common.loading') : t('common.save')}
-                      </button>
-                    </div>
-                  ) : (
-                    <>
-                      <div className="text-lg font-bold text-dark-100">
-                        {user.referral.commission_percent != null
-                          ? `${user.referral.commission_percent}%`
-                          : t('admin.users.detail.referral.default')}
-                      </div>
-                      <div className="text-xs text-dark-500">
-                        {t('admin.users.detail.referral.commission')}
-                      </div>
-                    </>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {/* Referrals list */}
-            {user.referral.referrals_count > 0 && (
-              <div className="rounded-xl bg-dark-800/50 p-3">
-                <div className="mb-2 text-sm font-medium text-dark-200">
-                  {t('admin.users.detail.referralsList')}
-                </div>
-                {referralsLoading ? (
-                  <div className="flex justify-center py-4">
-                    <div className="h-5 w-5 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
-                  </div>
-                ) : referrals.length === 0 ? (
-                  <div className="py-2 text-center text-xs text-dark-500">
-                    {t('admin.users.detail.noReferrals')}
-                  </div>
-                ) : (
-                  <div className="max-h-48 space-y-2 overflow-y-auto">
-                    {referrals.map((ref) => (
-                      <button
-                        key={ref.id}
-                        onClick={() => navigate(`/admin/users/${ref.id}`)}
-                        className="flex w-full items-center justify-between rounded-lg bg-dark-700/50 p-2 text-left transition-colors hover:bg-dark-700"
-                      >
-                        <div className="flex items-center gap-2">
-                          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-dark-600 text-xs font-bold text-dark-300">
-                            {ref.first_name?.[0] || ref.username?.[0] || '?'}
-                          </div>
-                          <div>
-                            <div className="text-sm text-dark-100">{ref.full_name}</div>
-                            <div className="text-xs text-dark-500">
-                              {formatDate(ref.created_at)}
-                            </div>
-                          </div>
-                        </div>
-                        <div className="text-xs text-dark-400">
-                          {formatWithCurrency(ref.total_spent_kopeks / 100)}
-                        </div>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Restrictions */}
-            {(user.restriction_topup || user.restriction_subscription) && (
-              <div className="rounded-xl border border-error-500/30 bg-error-500/10 p-3">
-                <div className="mb-2 text-sm font-medium text-error-400">
-                  {t('admin.users.detail.restrictions.title')}
-                </div>
-                {user.restriction_topup && (
-                  <div className="text-xs text-error-300">
-                    {t('admin.users.detail.restrictions.topup')}
-                  </div>
-                )}
-                {user.restriction_subscription && (
-                  <div className="text-xs text-error-300">
-                    {t('admin.users.detail.restrictions.subscription')}
-                  </div>
-                )}
-                {user.restriction_reason && (
-                  <div className="mt-1 text-xs text-dark-400">
-                    {t('admin.users.detail.restrictions.reason')}: {user.restriction_reason}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Actions */}
-            <div className="rounded-xl bg-dark-800/50 p-4">
-              <div className="mb-3 text-sm font-medium text-dark-200">
-                {t('admin.users.detail.actions.title')}
-              </div>
-              <div className="grid grid-cols-2 gap-2">
-                <button
-                  onClick={() => handleInlineConfirm('resetTrial', handleResetTrial)}
-                  disabled={actionLoading}
-                  className={`rounded-lg px-3 py-2 text-sm font-medium transition-all disabled:opacity-50 ${
-                    confirmingAction === 'resetTrial'
-                      ? 'bg-accent-500 text-white'
-                      : 'bg-accent-500/15 text-accent-400 hover:bg-accent-500/25'
-                  }`}
-                >
-                  {confirmingAction === 'resetTrial'
-                    ? t('admin.users.detail.actions.areYouSure')
-                    : t('admin.users.userActions.resetTrial')}
-                </button>
-                <button
-                  onClick={() => handleInlineConfirm('resetSubscription', handleResetSubscription)}
-                  disabled={actionLoading}
-                  className={`rounded-lg px-3 py-2 text-sm font-medium transition-all disabled:opacity-50 ${
-                    confirmingAction === 'resetSubscription'
-                      ? 'bg-warning-500 text-white'
-                      : 'bg-warning-500/15 text-warning-400 hover:bg-warning-500/25'
-                  }`}
-                >
-                  {confirmingAction === 'resetSubscription'
-                    ? t('admin.users.detail.actions.areYouSure')
-                    : t('admin.users.userActions.resetSubscription')}
-                </button>
-                <button
-                  onClick={() => handleInlineConfirm('disable', handleDisableUser)}
-                  disabled={actionLoading}
-                  className={`rounded-lg px-3 py-2 text-sm font-medium transition-all disabled:opacity-50 ${
-                    confirmingAction === 'disable'
-                      ? 'bg-dark-500 text-white'
-                      : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
-                  }`}
-                >
-                  {confirmingAction === 'disable'
-                    ? t('admin.users.detail.actions.areYouSure')
-                    : t('admin.users.userActions.disable')}
-                </button>
-                <button
-                  onClick={() => handleInlineConfirm('fullDelete', handleFullDeleteUser)}
-                  disabled={actionLoading}
-                  className={`rounded-lg px-3 py-2 text-sm font-medium transition-all disabled:opacity-50 ${
-                    confirmingAction === 'fullDelete'
-                      ? 'bg-rose-500 text-white'
-                      : 'bg-rose-500/15 text-rose-400 hover:bg-rose-500/25'
-                  }`}
-                >
-                  {confirmingAction === 'fullDelete'
-                    ? t('admin.users.detail.actions.areYouSure')
-                    : t('admin.users.userActions.delete')}
-                </button>
-              </div>
-            </div>
-          </div>
+          <InfoTab
+            user={user}
+            hasPermission={hasPermission}
+            formatDate={formatDate}
+            locale={locale}
+            panelInfo={panelInfo}
+            panelInfoLoading={panelInfoLoading}
+            userSubscriptions={userSubscriptions}
+            activeSubscriptionId={activeSubscriptionId}
+            onActiveSubscriptionChange={setActiveSubscriptionId}
+            promoGroups={promoGroups}
+            editingPromoGroup={editingPromoGroup}
+            onToggleEditingPromoGroup={() => setEditingPromoGroup(!editingPromoGroup)}
+            onChangePromoGroup={handleChangePromoGroup}
+            editingReferralCommission={editingReferralCommission}
+            referralCommissionValue={referralCommissionValue}
+            onSetReferralCommissionValue={setReferralCommissionValue}
+            onToggleEditingReferralCommission={() => {
+              if (!editingReferralCommission) {
+                setReferralCommissionValue(user.referral.commission_percent ?? '');
+              }
+              setEditingReferralCommission(!editingReferralCommission);
+            }}
+            onUpdateReferralCommission={handleUpdateReferralCommission}
+            referrals={referrals}
+            referralsLoading={referralsLoading}
+            actionLoading={actionLoading}
+            onBlockUser={handleBlockUser}
+            onUnblockUser={handleUnblockUser}
+            confirmingAction={confirmingAction}
+            onInlineConfirm={handleInlineConfirm}
+            onResetTrial={handleResetTrial}
+            onResetSubscription={handleResetSubscription}
+            onDisableUser={handleDisableUser}
+            onFullDeleteUser={handleFullDeleteUser}
+          />
         )}
 
         {/* Subscription Tab */}