feat: move campaign statistics to dedicated page

This commit is contained in:
c0mrade
2026-02-02 08:34:35 +03:00
parent 643d4fd3af
commit 1027deb134
7 changed files with 418 additions and 416 deletions

View File

@@ -47,6 +47,7 @@ const AdminPromoGroups = lazy(() => import('./pages/AdminPromoGroups'));
const AdminPromoGroupCreate = lazy(() => import('./pages/AdminPromoGroupCreate'));
const AdminCampaigns = lazy(() => import('./pages/AdminCampaigns'));
const AdminCampaignCreate = lazy(() => import('./pages/AdminCampaignCreate'));
const AdminCampaignStats = lazy(() => import('./pages/AdminCampaignStats'));
const AdminUsers = lazy(() => import('./pages/AdminUsers'));
const AdminPayments = lazy(() => import('./pages/AdminPayments'));
const AdminPaymentMethods = lazy(() => import('./pages/AdminPaymentMethods'));
@@ -456,6 +457,16 @@ function App() {
</AdminRoute>
}
/>
<Route
path="/admin/campaigns/:id/stats"
element={
<AdminRoute>
<LazyPage>
<AdminCampaignStats />
</LazyPage>
</AdminRoute>
}
/>
<Route
path="/admin/users"
element={

View File

@@ -1439,6 +1439,9 @@
"saving": "Saving..."
},
"stats": {
"title": "Campaign Statistics",
"loadError": "Failed to load statistics",
"detailedStats": "Detailed Statistics",
"registrations": "Registrations",
"revenue": "Revenue",
"paidUsers": "Paid",
@@ -1456,7 +1459,10 @@
"inactive": "Inactive",
"copy": "Copy",
"copied": "Copied!",
"users": "Users"
"users": "Users",
"noUsers": "No registered users",
"paid": "Paid",
"hasSub": "Has sub"
},
"users": {
"title": "Campaign Users",

View File

@@ -1232,6 +1232,9 @@
"saving": "در حال ذخیره..."
},
"stats": {
"title": "آمار کمپین",
"loadError": "خطا در بارگذاری آمار",
"detailedStats": "آمار دقیق",
"registrations": "ثبت‌نام‌ها",
"revenue": "درآمد",
"paidUsers": "پرداخت کرده",
@@ -1249,7 +1252,10 @@
"inactive": "غیرفعال",
"copy": "کپی",
"copied": "کپی شد!",
"users": "کاربران"
"users": "کاربران",
"noUsers": "کاربر ثبت‌نام شده‌ای وجود ندارد",
"paid": "پرداخت کرده",
"hasSub": "دارای اشتراک"
},
"users": {
"title": "کاربران کمپین",

View File

@@ -1950,6 +1950,9 @@
"saving": "Сохранение..."
},
"stats": {
"title": "Статистика кампании",
"loadError": "Не удалось загрузить статистику",
"detailedStats": "Детальная статистика",
"registrations": "Регистраций",
"revenue": "Доход",
"paidUsers": "Оплатили",
@@ -1967,7 +1970,10 @@
"inactive": "Неактивна",
"copy": "Копировать",
"copied": "Скопировано!",
"users": "Пользователи"
"users": "Пользователи",
"noUsers": "Нет зарегистрированных пользователей",
"paid": "Платил",
"hasSub": "Подписка"
},
"users": {
"title": "Пользователи кампании",

View File

@@ -1231,6 +1231,9 @@
"saving": "保存中..."
},
"stats": {
"title": "活动统计",
"loadError": "加载统计失败",
"detailedStats": "详细统计",
"registrations": "注册数",
"revenue": "收入",
"paidUsers": "已付费",
@@ -1248,7 +1251,10 @@
"inactive": "未激活",
"copy": "复制",
"copied": "已复制!",
"users": "用户"
"users": "用户",
"noUsers": "没有注册用户",
"paid": "已付费",
"hasSub": "有订阅"
},
"users": {
"title": "活动用户",

View File

@@ -0,0 +1,378 @@
import { useState } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { campaignsApi, CampaignBonusType } from '../api/campaigns';
import { AdminBackButton } from '../components/admin';
// Icons
const CopyIcon = () => (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
/>
</svg>
);
const LinkIcon = () => (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
/>
</svg>
);
const UsersIcon = () => (
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
/>
</svg>
);
const ChartIcon = () => (
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
/>
</svg>
);
// Bonus type config
const bonusTypeConfig: Record<
CampaignBonusType,
{ labelKey: string; color: string; bgColor: string }
> = {
balance: {
labelKey: 'admin.campaigns.bonusType.balance',
color: 'text-success-400',
bgColor: 'bg-success-500/20',
},
subscription: {
labelKey: 'admin.campaigns.bonusType.subscription',
color: 'text-accent-400',
bgColor: 'bg-accent-500/20',
},
tariff: {
labelKey: 'admin.campaigns.bonusType.tariff',
color: 'text-purple-400',
bgColor: 'bg-purple-500/20',
},
none: {
labelKey: 'admin.campaigns.bonusType.none',
color: 'text-dark-400',
bgColor: 'bg-dark-600',
},
};
// Helper functions
const formatRubles = (kopeks: number): string => {
const rubles = kopeks / 100;
return `${rubles.toLocaleString('ru-RU')}`;
};
const formatDate = (date: string | null): string => {
if (!date) return '-';
return new Date(date).toLocaleDateString('ru-RU', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
};
export default function AdminCampaignStats() {
const { t } = useTranslation();
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const [copied, setCopied] = useState(false);
const [showUsers, setShowUsers] = useState(false);
// Fetch stats
const {
data: stats,
isLoading,
error,
} = useQuery({
queryKey: ['campaign-stats', id],
queryFn: () => campaignsApi.getCampaignStats(Number(id)),
enabled: !!id,
});
// Fetch registrations when users section is open
const { data: registrationsData, isLoading: usersLoading } = useQuery({
queryKey: ['campaign-registrations', id],
queryFn: () => campaignsApi.getCampaignRegistrations(Number(id), 1, 50),
enabled: !!id && showUsers,
});
const copyLink = () => {
if (stats?.deep_link) {
navigator.clipboard.writeText(stats.deep_link);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}
};
if (isLoading) {
return (
<div className="flex items-center justify-center py-12">
<div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
</div>
);
}
if (error || !stats) {
return (
<div className="animate-fade-in">
<div className="mb-6 flex items-center gap-3">
<AdminBackButton to="/admin/campaigns" />
<h1 className="text-xl font-semibold text-dark-100">
{t('admin.campaigns.stats.title')}
</h1>
</div>
<div className="rounded-xl border border-error-500/30 bg-error-500/10 p-6 text-center">
<p className="text-error-400">{t('admin.campaigns.stats.loadError')}</p>
<button
onClick={() => navigate('/admin/campaigns')}
className="mt-4 text-sm text-dark-400 hover:text-dark-200"
>
{t('common.back')}
</button>
</div>
</div>
);
}
return (
<div className="animate-fade-in">
{/* Header */}
<div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-3">
<AdminBackButton to="/admin/campaigns" />
<div className="rounded-lg bg-accent-500/20 p-2 text-accent-400">
<ChartIcon />
</div>
<div>
<h1 className="text-xl font-semibold text-dark-100">{stats.name}</h1>
<div className="mt-1 flex items-center gap-2">
<span
className={`rounded px-2 py-0.5 text-xs ${bonusTypeConfig[stats.bonus_type].bgColor} ${bonusTypeConfig[stats.bonus_type].color}`}
>
{t(bonusTypeConfig[stats.bonus_type].labelKey)}
</span>
{stats.is_active ? (
<span className="rounded bg-success-500/20 px-2 py-0.5 text-xs text-success-400">
{t('admin.campaigns.stats.active')}
</span>
) : (
<span className="rounded bg-dark-600 px-2 py-0.5 text-xs text-dark-400">
{t('admin.campaigns.stats.inactive')}
</span>
)}
</div>
</div>
</div>
</div>
<div className="space-y-6">
{/* Deep Link */}
{stats.deep_link && (
<div className="rounded-xl border border-dark-700 bg-dark-800 p-4">
<div className="flex items-center justify-between gap-2">
<div className="flex min-w-0 items-center gap-2">
<LinkIcon />
<span className="truncate text-sm text-dark-300">{stats.deep_link}</span>
</div>
<button
onClick={copyLink}
className="flex shrink-0 items-center gap-1 rounded-lg bg-dark-700 px-3 py-1.5 text-dark-300 transition-colors hover:bg-dark-600"
>
<CopyIcon />
<span className="text-sm">
{copied ? t('admin.campaigns.stats.copied') : t('admin.campaigns.stats.copy')}
</span>
</button>
</div>
</div>
)}
{/* Main Stats */}
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
<div className="rounded-xl border border-dark-700 bg-dark-800 p-4 text-center">
<div className="text-2xl font-bold text-dark-100">{stats.registrations}</div>
<div className="text-xs text-dark-500">{t('admin.campaigns.stats.registrations')}</div>
</div>
<div className="rounded-xl border border-dark-700 bg-dark-800 p-4 text-center">
<div className="text-2xl font-bold text-success-400">
{formatRubles(stats.total_revenue_kopeks)}
</div>
<div className="text-xs text-dark-500">{t('admin.campaigns.stats.revenue')}</div>
</div>
<div className="rounded-xl border border-dark-700 bg-dark-800 p-4 text-center">
<div className="text-2xl font-bold text-accent-400">{stats.paid_users_count}</div>
<div className="text-xs text-dark-500">{t('admin.campaigns.stats.paidUsers')}</div>
</div>
<div className="rounded-xl border border-dark-700 bg-dark-800 p-4 text-center">
<div className="text-2xl font-bold text-accent-400">{stats.conversion_rate}%</div>
<div className="text-xs text-dark-500">{t('admin.campaigns.stats.conversion')}</div>
</div>
</div>
{/* Detailed Stats */}
<div className="rounded-xl border border-dark-700 bg-dark-800 p-4">
<h3 className="mb-4 font-medium text-dark-200">
{t('admin.campaigns.stats.detailedStats')}
</h3>
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
<div className="rounded-lg bg-dark-700/50 p-3">
<div className="mb-1 text-sm text-dark-400">
{t('admin.campaigns.stats.bonusesIssued')}
</div>
{stats.bonus_type === 'balance' && (
<div className="text-lg font-medium text-success-400">
{formatRubles(stats.balance_issued_kopeks)}
</div>
)}
{stats.bonus_type === 'subscription' && (
<div className="text-lg font-medium text-accent-400">
{t('admin.campaigns.stats.subscriptionsIssued', {
count: stats.subscription_issued,
})}
</div>
)}
{stats.bonus_type === 'tariff' && (
<div className="text-lg font-medium text-accent-400">
{t('admin.campaigns.stats.tariffsIssued', { count: stats.subscription_issued })}
</div>
)}
{stats.bonus_type === 'none' && (
<div className="text-lg font-medium text-dark-400">-</div>
)}
</div>
<div className="rounded-lg bg-dark-700/50 p-3">
<div className="mb-1 text-sm text-dark-400">
{t('admin.campaigns.stats.avgRevenuePerUser')}
</div>
<div className="text-lg font-medium text-dark-200">
{formatRubles(stats.avg_revenue_per_user_kopeks)}
</div>
</div>
<div className="rounded-lg bg-dark-700/50 p-3">
<div className="mb-1 text-sm text-dark-400">
{t('admin.campaigns.stats.avgFirstPayment')}
</div>
<div className="text-lg font-medium text-dark-200">
{formatRubles(stats.avg_first_payment_kopeks)}
</div>
</div>
<div className="rounded-lg bg-dark-700/50 p-3">
<div className="mb-1 text-sm text-dark-400">
{t('admin.campaigns.stats.trialSubscriptions')}
</div>
<div className="text-lg font-medium text-dark-200">
{t('admin.campaigns.stats.trialCount', {
total: stats.trial_users_count,
active: stats.active_trials_count,
})}
</div>
</div>
<div className="rounded-lg bg-dark-700/50 p-3">
<div className="mb-1 text-sm text-dark-400">
{t('admin.campaigns.stats.trialConversion')}
</div>
<div className="text-lg font-medium text-dark-200">
{stats.trial_conversion_rate}%
</div>
</div>
<div className="rounded-lg bg-dark-700/50 p-3">
<div className="mb-1 text-sm text-dark-400">
{t('admin.campaigns.stats.lastRegistration')}
</div>
<div className="text-sm font-medium text-dark-200">
{formatDate(stats.last_registration)}
</div>
</div>
</div>
</div>
{/* Users Section */}
<div className="rounded-xl border border-dark-700 bg-dark-800">
<button
onClick={() => setShowUsers(!showUsers)}
className="flex w-full items-center justify-between p-4"
>
<div className="flex items-center gap-2">
<UsersIcon />
<span className="font-medium text-dark-200">
{t('admin.campaigns.stats.users')} ({stats.registrations})
</span>
</div>
<svg
className={`h-5 w-5 text-dark-400 transition-transform ${showUsers ? 'rotate-180' : ''}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</button>
{showUsers && (
<div className="border-t border-dark-700 p-4">
{usersLoading ? (
<div className="flex items-center justify-center py-8">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
</div>
) : registrationsData?.registrations.length === 0 ? (
<div className="py-8 text-center text-dark-500">
{t('admin.campaigns.stats.noUsers')}
</div>
) : (
<div className="space-y-2">
{registrationsData?.registrations.map((reg) => (
<Link
key={reg.id}
to={`/admin/users/${reg.user_id}`}
className="flex items-center justify-between rounded-lg bg-dark-700/50 p-3 transition-colors hover:bg-dark-700"
>
<div>
<div className="font-medium text-dark-100">
{reg.first_name || reg.username || `User #${reg.user_id}`}
</div>
<div className="text-xs text-dark-500">{reg.telegram_id}</div>
</div>
<div className="flex items-center gap-2">
{reg.has_paid && (
<span className="rounded bg-success-500/20 px-2 py-0.5 text-xs text-success-400">
{t('admin.campaigns.stats.paid')}
</span>
)}
{reg.has_subscription && (
<span className="rounded bg-accent-500/20 px-2 py-0.5 text-xs text-accent-400">
{t('admin.campaigns.stats.hasSub')}
</span>
)}
<span className="text-xs text-dark-500">{formatDate(reg.created_at)}</span>
</div>
</Link>
))}
</div>
)}
</div>
)}
</div>
</div>
</div>
);
}

View File

@@ -7,12 +7,10 @@ import {
campaignsApi,
CampaignListItem,
CampaignDetail,
CampaignStatistics,
CampaignUpdateRequest,
CampaignBonusType,
ServerSquadInfo,
TariffListItem,
CampaignRegistrationItem,
} from '../api/campaigns';
import { AdminBackButton } from '../components/admin';
import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
@@ -67,36 +65,6 @@ const ChartIcon = () => (
</svg>
);
const UsersIcon = () => (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
/>
</svg>
);
const LinkIcon = () => (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
/>
</svg>
);
const CopyIcon = () => (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
/>
</svg>
);
// Bonus type labels and colors
const bonusTypeConfig: Record<
CampaignBonusType,
@@ -136,19 +104,6 @@ const formatRubles = (kopeks: number) => {
);
};
// Format date
const formatDate = (dateStr: string | null) => {
if (!dateStr) return '-';
const locale = localeMap[i18n.language] || 'ru-RU';
return new Date(dateStr).toLocaleDateString(locale, {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
};
// Campaign Edit Modal
interface CampaignModalProps {
campaign: CampaignDetail;
@@ -485,340 +440,6 @@ function CampaignModal({
);
}
// Statistics Modal
interface StatsModalProps {
stats: CampaignStatistics;
onClose: () => void;
onViewUsers: () => void;
}
function StatsModal({ stats, onClose, onViewUsers }: StatsModalProps) {
const { t } = useTranslation();
const [copied, setCopied] = useState(false);
const copyLink = () => {
if (stats.deep_link) {
navigator.clipboard.writeText(stats.deep_link);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-dark-800">
{/* Header */}
<div className="flex items-center justify-between border-b border-dark-700 p-4">
<div>
<h2 className="text-lg font-semibold text-dark-100">{stats.name}</h2>
<div className="mt-1 flex items-center gap-2">
<span
className={`rounded px-2 py-0.5 text-xs ${bonusTypeConfig[stats.bonus_type].bgColor} ${bonusTypeConfig[stats.bonus_type].color}`}
>
{t(bonusTypeConfig[stats.bonus_type].labelKey)}
</span>
{stats.is_active ? (
<span className="rounded bg-success-500/20 px-2 py-0.5 text-xs text-success-400">
{t('admin.campaigns.stats.active')}
</span>
) : (
<span className="rounded bg-dark-600 px-2 py-0.5 text-xs text-dark-400">
{t('admin.campaigns.stats.inactive')}
</span>
)}
</div>
</div>
<button onClick={onClose} className="rounded-lg p-1 transition-colors hover:bg-dark-700">
<XIcon />
</button>
</div>
{/* Content */}
<div className="flex-1 space-y-4 overflow-y-auto p-4">
{/* Deep Link */}
{stats.deep_link && (
<div className="rounded-lg bg-dark-700 p-3">
<div className="flex items-center justify-between gap-2">
<div className="flex min-w-0 items-center gap-2">
<LinkIcon />
<span className="truncate text-sm text-dark-300">{stats.deep_link}</span>
</div>
<button
onClick={copyLink}
className="flex shrink-0 items-center gap-1 rounded-lg bg-dark-600 px-3 py-1.5 text-dark-300 transition-colors hover:bg-dark-500"
>
<CopyIcon />
<span className="text-sm">
{copied ? t('admin.campaigns.stats.copied') : t('admin.campaigns.stats.copy')}
</span>
</button>
</div>
</div>
)}
{/* Main Stats */}
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
<div className="rounded-lg bg-dark-700 p-3 text-center">
<div className="text-2xl font-bold text-dark-100">{stats.registrations}</div>
<div className="text-xs text-dark-500">
{t('admin.campaigns.stats.registrations')}
</div>
</div>
<div className="rounded-lg bg-dark-700 p-3 text-center">
<div className="text-2xl font-bold text-success-400">
{formatRubles(stats.total_revenue_kopeks)}
</div>
<div className="text-xs text-dark-500">{t('admin.campaigns.stats.revenue')}</div>
</div>
<div className="rounded-lg bg-dark-700 p-3 text-center">
<div className="text-2xl font-bold text-accent-400">{stats.paid_users_count}</div>
<div className="text-xs text-dark-500">{t('admin.campaigns.stats.paidUsers')}</div>
</div>
<div className="rounded-lg bg-dark-700 p-3 text-center">
<div className="text-2xl font-bold text-accent-400">{stats.conversion_rate}%</div>
<div className="text-xs text-dark-500">{t('admin.campaigns.stats.conversion')}</div>
</div>
</div>
{/* Detailed Stats */}
<div className="grid grid-cols-2 gap-3">
<div className="rounded-lg bg-dark-700/50 p-3">
<div className="mb-2 text-sm text-dark-400">
{t('admin.campaigns.stats.bonusesIssued')}
</div>
{stats.bonus_type === 'balance' && (
<div className="text-lg font-medium text-success-400">
{formatRubles(stats.balance_issued_kopeks)}
</div>
)}
{stats.bonus_type === 'subscription' && (
<div className="text-lg font-medium text-accent-400">
{t('admin.campaigns.stats.subscriptionsIssued', {
count: stats.subscription_issued,
})}
</div>
)}
{stats.bonus_type === 'tariff' && (
<div className="text-lg font-medium text-accent-400">
{t('admin.campaigns.stats.tariffsIssued', { count: stats.subscription_issued })}
</div>
)}
{stats.bonus_type === 'none' && (
<div className="text-lg font-medium text-dark-400">-</div>
)}
</div>
<div className="rounded-lg bg-dark-700/50 p-3">
<div className="mb-2 text-sm text-dark-400">
{t('admin.campaigns.stats.avgRevenuePerUser')}
</div>
<div className="text-lg font-medium text-dark-200">
{formatRubles(stats.avg_revenue_per_user_kopeks)}
</div>
</div>
<div className="rounded-lg bg-dark-700/50 p-3">
<div className="mb-2 text-sm text-dark-400">
{t('admin.campaigns.stats.avgFirstPayment')}
</div>
<div className="text-lg font-medium text-dark-200">
{formatRubles(stats.avg_first_payment_kopeks)}
</div>
</div>
<div className="rounded-lg bg-dark-700/50 p-3">
<div className="mb-2 text-sm text-dark-400">
{t('admin.campaigns.stats.trialSubscriptions')}
</div>
<div className="text-lg font-medium text-dark-200">
{t('admin.campaigns.stats.trialCount', {
total: stats.trial_users_count,
active: stats.active_trials_count,
})}
</div>
</div>
<div className="rounded-lg bg-dark-700/50 p-3">
<div className="mb-2 text-sm text-dark-400">
{t('admin.campaigns.stats.trialConversion')}
</div>
<div className="text-lg font-medium text-dark-200">
{stats.trial_conversion_rate}%
</div>
</div>
<div className="rounded-lg bg-dark-700/50 p-3">
<div className="mb-2 text-sm text-dark-400">
{t('admin.campaigns.stats.lastRegistration')}
</div>
<div className="text-sm font-medium text-dark-200">
{formatDate(stats.last_registration)}
</div>
</div>
</div>
</div>
{/* Footer */}
<div className="flex justify-between gap-3 border-t border-dark-700 p-4">
<button
onClick={onViewUsers}
className="flex items-center gap-2 rounded-lg bg-dark-700 px-4 py-2 text-dark-300 transition-colors hover:bg-dark-600"
>
<UsersIcon />
{t('admin.campaigns.stats.users')}
</button>
<button
onClick={onClose}
className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
>
{t('admin.campaigns.modal.close')}
</button>
</div>
</div>
</div>
);
}
// Users Modal
interface UsersModalProps {
campaignId: number;
campaignName: string;
onClose: () => void;
}
function UsersModal({ campaignId, campaignName, onClose }: UsersModalProps) {
const { t } = useTranslation();
const [page, setPage] = useState(1);
const { data, isLoading } = useQuery({
queryKey: ['campaign-registrations', campaignId, page],
queryFn: () => campaignsApi.getCampaignRegistrations(campaignId, page, 20),
});
const registrations = data?.registrations || [];
const total = data?.total || 0;
const totalPages = Math.ceil(total / 20);
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-xl bg-dark-800">
{/* Header */}
<div className="flex items-center justify-between border-b border-dark-700 p-4">
<div>
<h2 className="text-lg font-semibold text-dark-100">
{t('admin.campaigns.users.title')}
</h2>
<p className="text-sm text-dark-400">
{t('admin.campaigns.users.campaignRegistrations', {
name: campaignName,
count: total,
})}
</p>
</div>
<button onClick={onClose} className="rounded-lg p-1 transition-colors hover:bg-dark-700">
<XIcon />
</button>
</div>
{/* Content */}
<div className="flex-1 overflow-y-auto">
{isLoading ? (
<div className="flex items-center justify-center py-12">
<div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
</div>
) : registrations.length === 0 ? (
<div className="py-12 text-center text-dark-400">
{t('admin.campaigns.users.noUsers')}
</div>
) : (
<table className="w-full">
<thead className="sticky top-0 bg-dark-700">
<tr>
<th className="p-3 text-left text-xs font-medium text-dark-400">
{t('admin.campaigns.users.user')}
</th>
<th className="p-3 text-left text-xs font-medium text-dark-400">
{t('admin.campaigns.users.bonus')}
</th>
<th className="p-3 text-left text-xs font-medium text-dark-400">
{t('admin.campaigns.users.balance')}
</th>
<th className="p-3 text-left text-xs font-medium text-dark-400">
{t('admin.campaigns.users.status')}
</th>
<th className="p-3 text-left text-xs font-medium text-dark-400">
{t('admin.campaigns.users.date')}
</th>
</tr>
</thead>
<tbody className="divide-y divide-dark-700">
{registrations.map((reg: CampaignRegistrationItem) => (
<tr key={reg.id} className="hover:bg-dark-700/50">
<td className="p-3">
<div className="text-sm text-dark-100">
{reg.first_name || t('admin.campaigns.users.noName')}
{reg.username && (
<span className="ml-1 text-dark-400">@{reg.username}</span>
)}
</div>
<div className="text-xs text-dark-500">{reg.telegram_id}</div>
</td>
<td className="p-3">
<span
className={`rounded px-2 py-0.5 text-xs ${bonusTypeConfig[reg.bonus_type as CampaignBonusType]?.bgColor || 'bg-dark-600'} ${bonusTypeConfig[reg.bonus_type as CampaignBonusType]?.color || 'text-dark-400'}`}
>
{bonusTypeConfig[reg.bonus_type as CampaignBonusType]?.labelKey
? t(bonusTypeConfig[reg.bonus_type as CampaignBonusType].labelKey)
: reg.bonus_type}
</span>
</td>
<td className="p-3 text-sm text-dark-300">
{formatRubles(reg.user_balance_kopeks)}
</td>
<td className="p-3">
<div className="flex gap-1">
{reg.has_subscription && (
<span className="rounded bg-accent-500/20 px-1.5 py-0.5 text-xs text-accent-400">
VPN
</span>
)}
{reg.has_paid && (
<span className="rounded bg-success-500/20 px-1.5 py-0.5 text-xs text-success-400">
{t('admin.campaigns.users.paid')}
</span>
)}
</div>
</td>
<td className="p-3 text-sm text-dark-400">{formatDate(reg.created_at)}</td>
</tr>
))}
</tbody>
</table>
)}
</div>
{/* Pagination */}
{totalPages > 1 && (
<div className="flex items-center justify-center gap-2 border-t border-dark-700 p-4">
<button
onClick={() => setPage((p) => Math.max(1, p - 1))}
disabled={page === 1}
className="rounded-lg bg-dark-700 px-3 py-1.5 text-dark-300 hover:bg-dark-600 disabled:cursor-not-allowed disabled:opacity-50"
>
{t('admin.campaigns.users.prev')}
</button>
<span className="text-sm text-dark-400">
{t('admin.campaigns.users.pageOf', { page, totalPages })}
</span>
<button
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
disabled={page === totalPages}
className="rounded-lg bg-dark-700 px-3 py-1.5 text-dark-300 hover:bg-dark-600 disabled:cursor-not-allowed disabled:opacity-50"
>
{t('admin.campaigns.users.next')}
</button>
</div>
)}
</div>
</div>
);
}
// Main Component
export default function AdminCampaigns() {
const { t } = useTranslation();
@@ -826,8 +447,6 @@ export default function AdminCampaigns() {
const queryClient = useQueryClient();
const [editingCampaign, setEditingCampaign] = useState<CampaignDetail | null>(null);
const [showStats, setShowStats] = useState<CampaignStatistics | null>(null);
const [showUsers, setShowUsers] = useState<{ id: number; name: string } | null>(null);
const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
// Queries
@@ -886,15 +505,6 @@ export default function AdminCampaigns() {
}
};
const handleViewStats = async (campaignId: number) => {
try {
const stats = await campaignsApi.getCampaignStats(campaignId);
setShowStats(stats);
} catch (error) {
console.error('Failed to load stats:', error);
}
};
const handleSave = (data: CampaignUpdateRequest) => {
if (editingCampaign) {
updateMutation.mutate({ id: editingCampaign.id, data });
@@ -1011,7 +621,7 @@ export default function AdminCampaigns() {
<div className="flex items-center gap-2">
{/* Stats */}
<button
onClick={() => handleViewStats(campaign.id)}
onClick={() => navigate(`/admin/campaigns/${campaign.id}/stats`)}
className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100"
title={t('admin.campaigns.table.statistics')}
>
@@ -1072,27 +682,6 @@ export default function AdminCampaigns() {
/>
)}
{/* Stats Modal */}
{showStats && (
<StatsModal
stats={showStats}
onClose={() => setShowStats(null)}
onViewUsers={() => {
setShowUsers({ id: showStats.id, name: showStats.name });
setShowStats(null);
}}
/>
)}
{/* Users Modal */}
{showUsers && (
<UsersModal
campaignId={showUsers.id}
campaignName={showUsers.name}
onClose={() => setShowUsers(null)}
/>
)}
{/* Delete Confirmation */}
{deleteConfirm !== null && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">