mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
feat: move campaign statistics to dedicated page
This commit is contained in:
11
src/App.tsx
11
src/App.tsx
@@ -47,6 +47,7 @@ const AdminPromoGroups = lazy(() => import('./pages/AdminPromoGroups'));
|
|||||||
const AdminPromoGroupCreate = lazy(() => import('./pages/AdminPromoGroupCreate'));
|
const AdminPromoGroupCreate = lazy(() => import('./pages/AdminPromoGroupCreate'));
|
||||||
const AdminCampaigns = lazy(() => import('./pages/AdminCampaigns'));
|
const AdminCampaigns = lazy(() => import('./pages/AdminCampaigns'));
|
||||||
const AdminCampaignCreate = lazy(() => import('./pages/AdminCampaignCreate'));
|
const AdminCampaignCreate = lazy(() => import('./pages/AdminCampaignCreate'));
|
||||||
|
const AdminCampaignStats = lazy(() => import('./pages/AdminCampaignStats'));
|
||||||
const AdminUsers = lazy(() => import('./pages/AdminUsers'));
|
const AdminUsers = lazy(() => import('./pages/AdminUsers'));
|
||||||
const AdminPayments = lazy(() => import('./pages/AdminPayments'));
|
const AdminPayments = lazy(() => import('./pages/AdminPayments'));
|
||||||
const AdminPaymentMethods = lazy(() => import('./pages/AdminPaymentMethods'));
|
const AdminPaymentMethods = lazy(() => import('./pages/AdminPaymentMethods'));
|
||||||
@@ -456,6 +457,16 @@ function App() {
|
|||||||
</AdminRoute>
|
</AdminRoute>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="/admin/campaigns/:id/stats"
|
||||||
|
element={
|
||||||
|
<AdminRoute>
|
||||||
|
<LazyPage>
|
||||||
|
<AdminCampaignStats />
|
||||||
|
</LazyPage>
|
||||||
|
</AdminRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
<Route
|
<Route
|
||||||
path="/admin/users"
|
path="/admin/users"
|
||||||
element={
|
element={
|
||||||
|
|||||||
@@ -1439,6 +1439,9 @@
|
|||||||
"saving": "Saving..."
|
"saving": "Saving..."
|
||||||
},
|
},
|
||||||
"stats": {
|
"stats": {
|
||||||
|
"title": "Campaign Statistics",
|
||||||
|
"loadError": "Failed to load statistics",
|
||||||
|
"detailedStats": "Detailed Statistics",
|
||||||
"registrations": "Registrations",
|
"registrations": "Registrations",
|
||||||
"revenue": "Revenue",
|
"revenue": "Revenue",
|
||||||
"paidUsers": "Paid",
|
"paidUsers": "Paid",
|
||||||
@@ -1456,7 +1459,10 @@
|
|||||||
"inactive": "Inactive",
|
"inactive": "Inactive",
|
||||||
"copy": "Copy",
|
"copy": "Copy",
|
||||||
"copied": "Copied!",
|
"copied": "Copied!",
|
||||||
"users": "Users"
|
"users": "Users",
|
||||||
|
"noUsers": "No registered users",
|
||||||
|
"paid": "Paid",
|
||||||
|
"hasSub": "Has sub"
|
||||||
},
|
},
|
||||||
"users": {
|
"users": {
|
||||||
"title": "Campaign Users",
|
"title": "Campaign Users",
|
||||||
|
|||||||
@@ -1232,6 +1232,9 @@
|
|||||||
"saving": "در حال ذخیره..."
|
"saving": "در حال ذخیره..."
|
||||||
},
|
},
|
||||||
"stats": {
|
"stats": {
|
||||||
|
"title": "آمار کمپین",
|
||||||
|
"loadError": "خطا در بارگذاری آمار",
|
||||||
|
"detailedStats": "آمار دقیق",
|
||||||
"registrations": "ثبتنامها",
|
"registrations": "ثبتنامها",
|
||||||
"revenue": "درآمد",
|
"revenue": "درآمد",
|
||||||
"paidUsers": "پرداخت کرده",
|
"paidUsers": "پرداخت کرده",
|
||||||
@@ -1249,7 +1252,10 @@
|
|||||||
"inactive": "غیرفعال",
|
"inactive": "غیرفعال",
|
||||||
"copy": "کپی",
|
"copy": "کپی",
|
||||||
"copied": "کپی شد!",
|
"copied": "کپی شد!",
|
||||||
"users": "کاربران"
|
"users": "کاربران",
|
||||||
|
"noUsers": "کاربر ثبتنام شدهای وجود ندارد",
|
||||||
|
"paid": "پرداخت کرده",
|
||||||
|
"hasSub": "دارای اشتراک"
|
||||||
},
|
},
|
||||||
"users": {
|
"users": {
|
||||||
"title": "کاربران کمپین",
|
"title": "کاربران کمپین",
|
||||||
|
|||||||
@@ -1950,6 +1950,9 @@
|
|||||||
"saving": "Сохранение..."
|
"saving": "Сохранение..."
|
||||||
},
|
},
|
||||||
"stats": {
|
"stats": {
|
||||||
|
"title": "Статистика кампании",
|
||||||
|
"loadError": "Не удалось загрузить статистику",
|
||||||
|
"detailedStats": "Детальная статистика",
|
||||||
"registrations": "Регистраций",
|
"registrations": "Регистраций",
|
||||||
"revenue": "Доход",
|
"revenue": "Доход",
|
||||||
"paidUsers": "Оплатили",
|
"paidUsers": "Оплатили",
|
||||||
@@ -1967,7 +1970,10 @@
|
|||||||
"inactive": "Неактивна",
|
"inactive": "Неактивна",
|
||||||
"copy": "Копировать",
|
"copy": "Копировать",
|
||||||
"copied": "Скопировано!",
|
"copied": "Скопировано!",
|
||||||
"users": "Пользователи"
|
"users": "Пользователи",
|
||||||
|
"noUsers": "Нет зарегистрированных пользователей",
|
||||||
|
"paid": "Платил",
|
||||||
|
"hasSub": "Подписка"
|
||||||
},
|
},
|
||||||
"users": {
|
"users": {
|
||||||
"title": "Пользователи кампании",
|
"title": "Пользователи кампании",
|
||||||
|
|||||||
@@ -1231,6 +1231,9 @@
|
|||||||
"saving": "保存中..."
|
"saving": "保存中..."
|
||||||
},
|
},
|
||||||
"stats": {
|
"stats": {
|
||||||
|
"title": "活动统计",
|
||||||
|
"loadError": "加载统计失败",
|
||||||
|
"detailedStats": "详细统计",
|
||||||
"registrations": "注册数",
|
"registrations": "注册数",
|
||||||
"revenue": "收入",
|
"revenue": "收入",
|
||||||
"paidUsers": "已付费",
|
"paidUsers": "已付费",
|
||||||
@@ -1248,7 +1251,10 @@
|
|||||||
"inactive": "未激活",
|
"inactive": "未激活",
|
||||||
"copy": "复制",
|
"copy": "复制",
|
||||||
"copied": "已复制!",
|
"copied": "已复制!",
|
||||||
"users": "用户"
|
"users": "用户",
|
||||||
|
"noUsers": "没有注册用户",
|
||||||
|
"paid": "已付费",
|
||||||
|
"hasSub": "有订阅"
|
||||||
},
|
},
|
||||||
"users": {
|
"users": {
|
||||||
"title": "活动用户",
|
"title": "活动用户",
|
||||||
|
|||||||
378
src/pages/AdminCampaignStats.tsx
Normal file
378
src/pages/AdminCampaignStats.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -7,12 +7,10 @@ import {
|
|||||||
campaignsApi,
|
campaignsApi,
|
||||||
CampaignListItem,
|
CampaignListItem,
|
||||||
CampaignDetail,
|
CampaignDetail,
|
||||||
CampaignStatistics,
|
|
||||||
CampaignUpdateRequest,
|
CampaignUpdateRequest,
|
||||||
CampaignBonusType,
|
CampaignBonusType,
|
||||||
ServerSquadInfo,
|
ServerSquadInfo,
|
||||||
TariffListItem,
|
TariffListItem,
|
||||||
CampaignRegistrationItem,
|
|
||||||
} from '../api/campaigns';
|
} from '../api/campaigns';
|
||||||
import { AdminBackButton } from '../components/admin';
|
import { AdminBackButton } from '../components/admin';
|
||||||
import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
|
import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
|
||||||
@@ -67,36 +65,6 @@ const ChartIcon = () => (
|
|||||||
</svg>
|
</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
|
// Bonus type labels and colors
|
||||||
const bonusTypeConfig: Record<
|
const bonusTypeConfig: Record<
|
||||||
CampaignBonusType,
|
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
|
// Campaign Edit Modal
|
||||||
interface CampaignModalProps {
|
interface CampaignModalProps {
|
||||||
campaign: CampaignDetail;
|
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
|
// Main Component
|
||||||
export default function AdminCampaigns() {
|
export default function AdminCampaigns() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@@ -826,8 +447,6 @@ export default function AdminCampaigns() {
|
|||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
const [editingCampaign, setEditingCampaign] = useState<CampaignDetail | null>(null);
|
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);
|
const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
|
||||||
|
|
||||||
// Queries
|
// 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) => {
|
const handleSave = (data: CampaignUpdateRequest) => {
|
||||||
if (editingCampaign) {
|
if (editingCampaign) {
|
||||||
updateMutation.mutate({ id: editingCampaign.id, data });
|
updateMutation.mutate({ id: editingCampaign.id, data });
|
||||||
@@ -1011,7 +621,7 @@ export default function AdminCampaigns() {
|
|||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{/* Stats */}
|
{/* Stats */}
|
||||||
<button
|
<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"
|
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')}
|
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 */}
|
{/* Delete Confirmation */}
|
||||||
{deleteConfirm !== null && (
|
{deleteConfirm !== null && (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user