mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 10:27:49 +00:00
refactor: move campaign editing from modal to separate page
- Create AdminCampaignEdit page for editing campaigns - Remove CampaignModal from AdminCampaigns - Use centralized icons (CampaignIcon, ChartIcon added) - Add route /admin/campaigns/:id/edit - Add localization keys for loadError and updateError
This commit is contained in:
11
src/App.tsx
11
src/App.tsx
@@ -50,6 +50,7 @@ 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 AdminCampaignStats = lazy(() => import('./pages/AdminCampaignStats'));
|
||||||
|
const AdminCampaignEdit = lazy(() => import('./pages/AdminCampaignEdit'));
|
||||||
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'));
|
||||||
@@ -489,6 +490,16 @@ function App() {
|
|||||||
</AdminRoute>
|
</AdminRoute>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="/admin/campaigns/:id/edit"
|
||||||
|
element={
|
||||||
|
<AdminRoute>
|
||||||
|
<LazyPage>
|
||||||
|
<AdminCampaignEdit />
|
||||||
|
</LazyPage>
|
||||||
|
</AdminRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
<Route
|
<Route
|
||||||
path="/admin/users"
|
path="/admin/users"
|
||||||
element={
|
element={
|
||||||
|
|||||||
@@ -558,3 +558,35 @@ export const ServerIcon = ({ className }: IconProps) => (
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const CampaignIcon = ({ className }: IconProps) => (
|
||||||
|
<svg
|
||||||
|
className={cn('h-5 w-5', className)}
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth={1.5}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const ChartIcon = ({ className }: IconProps) => (
|
||||||
|
<svg
|
||||||
|
className={cn('h-4 w-4', className)}
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth={2}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
|||||||
@@ -1489,7 +1489,9 @@
|
|||||||
"deleteText": "This action cannot be undone. Campaigns with registrations cannot be deleted.",
|
"deleteText": "This action cannot be undone. Campaigns with registrations cannot be deleted.",
|
||||||
"cancel": "Cancel",
|
"cancel": "Cancel",
|
||||||
"delete": "Delete"
|
"delete": "Delete"
|
||||||
}
|
},
|
||||||
|
"loadError": "Failed to load campaign",
|
||||||
|
"updateError": "Failed to save changes"
|
||||||
},
|
},
|
||||||
"promocodes": {
|
"promocodes": {
|
||||||
"title": "Promo Codes",
|
"title": "Promo Codes",
|
||||||
|
|||||||
@@ -1282,7 +1282,9 @@
|
|||||||
"deleteText": "این عمل قابل بازگشت نیست. کمپینهایی که ثبتنام دارند قابل حذف نیستند.",
|
"deleteText": "این عمل قابل بازگشت نیست. کمپینهایی که ثبتنام دارند قابل حذف نیستند.",
|
||||||
"cancel": "لغو",
|
"cancel": "لغو",
|
||||||
"delete": "حذف"
|
"delete": "حذف"
|
||||||
}
|
},
|
||||||
|
"loadError": "بارگذاری کمپین ناموفق بود",
|
||||||
|
"updateError": "ذخیره تغییرات ناموفق بود"
|
||||||
},
|
},
|
||||||
"promocodes": {
|
"promocodes": {
|
||||||
"title": "کدهای تخفیف",
|
"title": "کدهای تخفیف",
|
||||||
|
|||||||
@@ -2000,7 +2000,9 @@
|
|||||||
"deleteText": "Это действие нельзя отменить. Кампании с регистрациями удалить нельзя.",
|
"deleteText": "Это действие нельзя отменить. Кампании с регистрациями удалить нельзя.",
|
||||||
"cancel": "Отмена",
|
"cancel": "Отмена",
|
||||||
"delete": "Удалить"
|
"delete": "Удалить"
|
||||||
}
|
},
|
||||||
|
"loadError": "Не удалось загрузить кампанию",
|
||||||
|
"updateError": "Не удалось сохранить изменения"
|
||||||
},
|
},
|
||||||
"promocodes": {
|
"promocodes": {
|
||||||
"title": "Промокоды",
|
"title": "Промокоды",
|
||||||
|
|||||||
@@ -1281,7 +1281,9 @@
|
|||||||
"deleteText": "此操作不可撤销。有注册记录的活动无法删除。",
|
"deleteText": "此操作不可撤销。有注册记录的活动无法删除。",
|
||||||
"cancel": "取消",
|
"cancel": "取消",
|
||||||
"delete": "删除"
|
"delete": "删除"
|
||||||
}
|
},
|
||||||
|
"loadError": "加载活动失败",
|
||||||
|
"updateError": "保存更改失败"
|
||||||
},
|
},
|
||||||
"promocodes": {
|
"promocodes": {
|
||||||
"title": "促销码",
|
"title": "促销码",
|
||||||
|
|||||||
491
src/pages/AdminCampaignEdit.tsx
Normal file
491
src/pages/AdminCampaignEdit.tsx
Normal file
@@ -0,0 +1,491 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import {
|
||||||
|
campaignsApi,
|
||||||
|
CampaignUpdateRequest,
|
||||||
|
CampaignBonusType,
|
||||||
|
ServerSquadInfo,
|
||||||
|
TariffListItem,
|
||||||
|
} from '../api/campaigns';
|
||||||
|
import { AdminBackButton } from '../components/admin';
|
||||||
|
import { CheckIcon, CampaignIcon } from '../components/icons';
|
||||||
|
import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
|
||||||
|
|
||||||
|
// Bonus type config
|
||||||
|
const bonusTypeConfig: Record<
|
||||||
|
CampaignBonusType,
|
||||||
|
{ labelKey: string; color: string; bgColor: string; borderColor: string }
|
||||||
|
> = {
|
||||||
|
balance: {
|
||||||
|
labelKey: 'admin.campaigns.bonusType.balance',
|
||||||
|
color: 'text-success-400',
|
||||||
|
bgColor: 'bg-success-500/10',
|
||||||
|
borderColor: 'border-success-500/30',
|
||||||
|
},
|
||||||
|
subscription: {
|
||||||
|
labelKey: 'admin.campaigns.bonusType.subscription',
|
||||||
|
color: 'text-accent-400',
|
||||||
|
bgColor: 'bg-accent-500/10',
|
||||||
|
borderColor: 'border-accent-500/30',
|
||||||
|
},
|
||||||
|
tariff: {
|
||||||
|
labelKey: 'admin.campaigns.bonusType.tariff',
|
||||||
|
color: 'text-accent-400',
|
||||||
|
bgColor: 'bg-accent-500/10',
|
||||||
|
borderColor: 'border-accent-500/30',
|
||||||
|
},
|
||||||
|
none: {
|
||||||
|
labelKey: 'admin.campaigns.bonusType.none',
|
||||||
|
color: 'text-dark-400',
|
||||||
|
bgColor: 'bg-dark-500/10',
|
||||||
|
borderColor: 'border-dark-500/30',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Server selector component
|
||||||
|
function ServerSelector({
|
||||||
|
servers,
|
||||||
|
selected,
|
||||||
|
onToggle,
|
||||||
|
}: {
|
||||||
|
servers: ServerSquadInfo[];
|
||||||
|
selected: string[];
|
||||||
|
onToggle: (uuid: string) => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
if (servers.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<label className="mb-2 block text-sm font-medium text-dark-300">
|
||||||
|
{t('admin.campaigns.form.servers')}
|
||||||
|
</label>
|
||||||
|
<div className="max-h-48 space-y-2 overflow-y-auto rounded-lg border border-dark-700 bg-dark-800 p-3">
|
||||||
|
{servers.map((server) => (
|
||||||
|
<button
|
||||||
|
key={server.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => onToggle(server.squad_uuid)}
|
||||||
|
className={`flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors ${
|
||||||
|
selected.includes(server.squad_uuid)
|
||||||
|
? 'bg-accent-500/20 text-accent-300'
|
||||||
|
: 'bg-dark-700 text-dark-300 hover:bg-dark-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`flex h-5 w-5 items-center justify-center rounded ${
|
||||||
|
selected.includes(server.squad_uuid) ? 'bg-accent-500 text-white' : 'bg-dark-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{selected.includes(server.squad_uuid) && <CheckIcon />}
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium">{server.display_name}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tariff selector component
|
||||||
|
function TariffSelector({
|
||||||
|
tariffs,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
tariffs: TariffListItem[];
|
||||||
|
value: number | null;
|
||||||
|
onChange: (id: number | null) => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<label className="mb-2 block text-sm font-medium text-dark-300">
|
||||||
|
{t('admin.campaigns.form.selectTariff')}
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={value || ''}
|
||||||
|
onChange={(e) => onChange(e.target.value ? parseInt(e.target.value) : null)}
|
||||||
|
className="input"
|
||||||
|
>
|
||||||
|
<option value="">{t('admin.campaigns.form.notSelected')}</option>
|
||||||
|
{tariffs.map((tariff) => (
|
||||||
|
<option key={tariff.id} value={tariff.id}>
|
||||||
|
{tariff.name} ({tariff.traffic_limit_gb} GB, {tariff.device_limit}{' '}
|
||||||
|
{t('admin.campaigns.form.devices')})
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AdminCampaignEdit() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const campaignId = parseInt(id || '0');
|
||||||
|
|
||||||
|
// Fetch campaign
|
||||||
|
const {
|
||||||
|
data: campaign,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
} = useQuery({
|
||||||
|
queryKey: ['admin-campaign', campaignId],
|
||||||
|
queryFn: () => campaignsApi.getCampaign(campaignId),
|
||||||
|
enabled: campaignId > 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fetch servers
|
||||||
|
const { data: servers = [] } = useQuery({
|
||||||
|
queryKey: ['admin-campaigns-servers'],
|
||||||
|
queryFn: () => campaignsApi.getAvailableServers(),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fetch tariffs
|
||||||
|
const { data: tariffs = [] } = useQuery({
|
||||||
|
queryKey: ['admin-campaigns-tariffs'],
|
||||||
|
queryFn: () => campaignsApi.getAvailableTariffs(),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form state
|
||||||
|
const [name, setName] = useState('');
|
||||||
|
const [startParameter, setStartParameter] = useState('');
|
||||||
|
const [bonusType, setBonusType] = useState<CampaignBonusType>('balance');
|
||||||
|
const [isActive, setIsActive] = useState(true);
|
||||||
|
|
||||||
|
// Balance bonus
|
||||||
|
const [balanceBonusRubles, setBalanceBonusRubles] = useState<number | ''>(0);
|
||||||
|
|
||||||
|
// Subscription bonus
|
||||||
|
const [subscriptionDays, setSubscriptionDays] = useState<number | ''>(7);
|
||||||
|
const [subscriptionTraffic, setSubscriptionTraffic] = useState<number | ''>(10);
|
||||||
|
const [subscriptionDevices, setSubscriptionDevices] = useState<number | ''>(1);
|
||||||
|
const [selectedSquads, setSelectedSquads] = useState<string[]>([]);
|
||||||
|
|
||||||
|
// Tariff bonus
|
||||||
|
const [tariffId, setTariffId] = useState<number | null>(null);
|
||||||
|
const [tariffDays, setTariffDays] = useState<number | ''>(30);
|
||||||
|
|
||||||
|
// Initialize form when campaign loads
|
||||||
|
useEffect(() => {
|
||||||
|
if (campaign) {
|
||||||
|
setName(campaign.name || '');
|
||||||
|
setStartParameter(campaign.start_parameter || '');
|
||||||
|
setBonusType(campaign.bonus_type || 'balance');
|
||||||
|
setIsActive(campaign.is_active ?? true);
|
||||||
|
setBalanceBonusRubles((campaign.balance_bonus_kopeks || 0) / 100);
|
||||||
|
setSubscriptionDays(campaign.subscription_duration_days || 7);
|
||||||
|
setSubscriptionTraffic(campaign.subscription_traffic_gb || 10);
|
||||||
|
setSubscriptionDevices(campaign.subscription_device_limit || 1);
|
||||||
|
setSelectedSquads(campaign.subscription_squads || []);
|
||||||
|
setTariffId(campaign.tariff_id || null);
|
||||||
|
setTariffDays(campaign.tariff_duration_days || 30);
|
||||||
|
}
|
||||||
|
}, [campaign]);
|
||||||
|
|
||||||
|
// Update mutation
|
||||||
|
const updateMutation = useMutation({
|
||||||
|
mutationFn: (data: CampaignUpdateRequest) => campaignsApi.updateCampaign(campaignId, data),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['admin-campaigns'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['admin-campaign', campaignId] });
|
||||||
|
navigate('/admin/campaigns');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggleServer = (uuid: string) => {
|
||||||
|
setSelectedSquads((prev) =>
|
||||||
|
prev.includes(uuid) ? prev.filter((s) => s !== uuid) : [...prev, uuid],
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
const data: CampaignUpdateRequest = {
|
||||||
|
name,
|
||||||
|
start_parameter: startParameter,
|
||||||
|
bonus_type: bonusType,
|
||||||
|
is_active: isActive,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (bonusType === 'balance') {
|
||||||
|
data.balance_bonus_kopeks = Math.round(toNumber(balanceBonusRubles) * 100);
|
||||||
|
} else if (bonusType === 'subscription') {
|
||||||
|
data.subscription_duration_days = toNumber(subscriptionDays, 7);
|
||||||
|
data.subscription_traffic_gb = toNumber(subscriptionTraffic, 10);
|
||||||
|
data.subscription_device_limit = toNumber(subscriptionDevices, 1);
|
||||||
|
data.subscription_squads = selectedSquads;
|
||||||
|
} else if (bonusType === 'tariff') {
|
||||||
|
data.tariff_id = tariffId || undefined;
|
||||||
|
data.tariff_duration_days = toNumber(tariffDays, 30);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateMutation.mutate(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isValid = name.trim() && startParameter.trim() && /^[a-zA-Z0-9_-]+$/.test(startParameter);
|
||||||
|
|
||||||
|
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 || !campaign) {
|
||||||
|
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.modal.editTitle')}
|
||||||
|
</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.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 space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<AdminBackButton to="/admin/campaigns" />
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="rounded-lg bg-accent-500/20 p-2 text-accent-400">
|
||||||
|
<CampaignIcon />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-bold text-dark-100">
|
||||||
|
{t('admin.campaigns.modal.editTitle')}
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm text-dark-400">{campaign.name}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Basic Info */}
|
||||||
|
<div className="card space-y-4">
|
||||||
|
{/* Name */}
|
||||||
|
<div>
|
||||||
|
<label className="mb-2 block text-sm font-medium text-dark-300">
|
||||||
|
{t('admin.campaigns.form.name')}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
className="input"
|
||||||
|
placeholder={t('admin.campaigns.form.namePlaceholder')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Start Parameter */}
|
||||||
|
<div>
|
||||||
|
<label className="mb-2 block text-sm font-medium text-dark-300">
|
||||||
|
{t('admin.campaigns.form.startParameter')}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={startParameter}
|
||||||
|
onChange={(e) => setStartParameter(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ''))}
|
||||||
|
className="input font-mono"
|
||||||
|
placeholder="instagram_jan2024"
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-dark-500">
|
||||||
|
{t('admin.campaigns.form.startParameterHint')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Active toggle */}
|
||||||
|
<div className="flex items-center justify-between rounded-lg border border-dark-700 bg-dark-800 p-4">
|
||||||
|
<span className="text-sm font-medium text-dark-300">
|
||||||
|
{t('admin.campaigns.form.active')}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsActive(!isActive)}
|
||||||
|
className={`relative h-6 w-11 rounded-full transition-colors ${
|
||||||
|
isActive ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
|
||||||
|
isActive ? 'left-6' : 'left-1'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bonus Type */}
|
||||||
|
<div className="card space-y-4">
|
||||||
|
<h2 className="text-lg font-semibold text-dark-100">
|
||||||
|
{t('admin.campaigns.form.bonusType')}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{(Object.keys(bonusTypeConfig) as CampaignBonusType[]).map((type) => (
|
||||||
|
<button
|
||||||
|
key={type}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setBonusType(type)}
|
||||||
|
className={`rounded-lg border p-4 text-left transition-all ${
|
||||||
|
bonusType === type
|
||||||
|
? `${bonusTypeConfig[type].bgColor} ${bonusTypeConfig[type].borderColor} ${bonusTypeConfig[type].color}`
|
||||||
|
: 'border-dark-700 bg-dark-800 text-dark-300 hover:border-dark-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="text-sm font-medium">{t(bonusTypeConfig[type].labelKey)}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bonus Settings */}
|
||||||
|
{bonusType === 'balance' && (
|
||||||
|
<div
|
||||||
|
className={`card space-y-4 border ${bonusTypeConfig.balance.borderColor} ${bonusTypeConfig.balance.bgColor}`}
|
||||||
|
>
|
||||||
|
<h2 className={`text-lg font-semibold ${bonusTypeConfig.balance.color}`}>
|
||||||
|
{t('admin.campaigns.form.balanceBonus')}
|
||||||
|
</h2>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={balanceBonusRubles}
|
||||||
|
onChange={createNumberInputHandler(setBalanceBonusRubles, 0)}
|
||||||
|
className="input w-32"
|
||||||
|
min={0}
|
||||||
|
step={1}
|
||||||
|
/>
|
||||||
|
<span className="text-dark-300">₽</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{bonusType === 'subscription' && (
|
||||||
|
<div
|
||||||
|
className={`card space-y-4 border ${bonusTypeConfig.subscription.borderColor} ${bonusTypeConfig.subscription.bgColor}`}
|
||||||
|
>
|
||||||
|
<h2 className={`text-lg font-semibold ${bonusTypeConfig.subscription.color}`}>
|
||||||
|
{t('admin.campaigns.form.trialSubscription')}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="mb-2 block text-sm text-dark-400">
|
||||||
|
{t('admin.campaigns.form.days')}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={subscriptionDays}
|
||||||
|
onChange={createNumberInputHandler(setSubscriptionDays, 1)}
|
||||||
|
className="input"
|
||||||
|
min={1}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="mb-2 block text-sm text-dark-400">
|
||||||
|
{t('admin.campaigns.form.trafficGb')}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={subscriptionTraffic}
|
||||||
|
onChange={createNumberInputHandler(setSubscriptionTraffic, 0)}
|
||||||
|
className="input"
|
||||||
|
min={0}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="mb-2 block text-sm text-dark-400">
|
||||||
|
{t('admin.campaigns.form.devices')}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={subscriptionDevices}
|
||||||
|
onChange={createNumberInputHandler(setSubscriptionDevices, 1)}
|
||||||
|
className="input"
|
||||||
|
min={1}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ServerSelector servers={servers} selected={selectedSquads} onToggle={toggleServer} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{bonusType === 'tariff' && (
|
||||||
|
<div
|
||||||
|
className={`card space-y-4 border ${bonusTypeConfig.tariff.borderColor} ${bonusTypeConfig.tariff.bgColor}`}
|
||||||
|
>
|
||||||
|
<h2 className={`text-lg font-semibold ${bonusTypeConfig.tariff.color}`}>
|
||||||
|
{t('admin.campaigns.form.tariff')}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<TariffSelector tariffs={tariffs} value={tariffId} onChange={setTariffId} />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="mb-2 block text-sm font-medium text-dark-300">
|
||||||
|
{t('admin.campaigns.form.durationDays')}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={tariffDays}
|
||||||
|
onChange={createNumberInputHandler(setTariffDays, 1)}
|
||||||
|
className="input w-32"
|
||||||
|
min={1}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{bonusType === 'none' && (
|
||||||
|
<div
|
||||||
|
className={`card border ${bonusTypeConfig.none.borderColor} ${bonusTypeConfig.none.bgColor}`}
|
||||||
|
>
|
||||||
|
<p className="text-sm text-dark-400">{t('admin.campaigns.form.noBonusDescription')}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="card flex items-center justify-end gap-3">
|
||||||
|
<button onClick={() => navigate('/admin/campaigns')} className="btn-secondary">
|
||||||
|
{t('common.cancel')}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={!isValid || updateMutation.isPending}
|
||||||
|
className="btn-primary flex items-center gap-2"
|
||||||
|
>
|
||||||
|
{updateMutation.isPending ? (
|
||||||
|
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
||||||
|
) : null}
|
||||||
|
{updateMutation.isPending ? t('common.saving') : t('common.save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{updateMutation.isError && (
|
||||||
|
<div className="rounded-lg border border-error-500/30 bg-error-500/10 p-3 text-sm text-error-400">
|
||||||
|
{t('admin.campaigns.updateError')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -3,67 +3,9 @@ import { useNavigate } from 'react-router-dom';
|
|||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import i18n from '../i18n';
|
import i18n from '../i18n';
|
||||||
import {
|
import { campaignsApi, CampaignListItem, CampaignBonusType } from '../api/campaigns';
|
||||||
campaignsApi,
|
|
||||||
CampaignListItem,
|
|
||||||
CampaignDetail,
|
|
||||||
CampaignUpdateRequest,
|
|
||||||
CampaignBonusType,
|
|
||||||
ServerSquadInfo,
|
|
||||||
TariffListItem,
|
|
||||||
} from '../api/campaigns';
|
|
||||||
import { AdminBackButton } from '../components/admin';
|
import { AdminBackButton } from '../components/admin';
|
||||||
import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
|
import { PlusIcon, EditIcon, TrashIcon, CheckIcon, XIcon, ChartIcon } from '../components/icons';
|
||||||
|
|
||||||
// Icons
|
|
||||||
|
|
||||||
const PlusIcon = () => (
|
|
||||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
const EditIcon = () => (
|
|
||||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
const TrashIcon = () => (
|
|
||||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
const CheckIcon = () => (
|
|
||||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
const XIcon = () => (
|
|
||||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
const ChartIcon = () => (
|
|
||||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<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 labels and colors
|
// Bonus type labels and colors
|
||||||
const bonusTypeConfig: Record<
|
const bonusTypeConfig: Record<
|
||||||
@@ -104,349 +46,12 @@ const formatRubles = (kopeks: number) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Campaign Edit Modal
|
|
||||||
interface CampaignModalProps {
|
|
||||||
campaign: CampaignDetail;
|
|
||||||
servers: ServerSquadInfo[];
|
|
||||||
tariffs: TariffListItem[];
|
|
||||||
onSave: (data: CampaignUpdateRequest) => void;
|
|
||||||
onClose: () => void;
|
|
||||||
isLoading?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
function CampaignModal({
|
|
||||||
campaign,
|
|
||||||
servers,
|
|
||||||
tariffs,
|
|
||||||
onSave,
|
|
||||||
onClose,
|
|
||||||
isLoading,
|
|
||||||
}: CampaignModalProps) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const [name, setName] = useState(campaign.name || '');
|
|
||||||
const [startParameter, setStartParameter] = useState(campaign.start_parameter || '');
|
|
||||||
const [bonusType, setBonusType] = useState<CampaignBonusType>(campaign.bonus_type || 'balance');
|
|
||||||
const [isActive, setIsActive] = useState(campaign.is_active ?? true);
|
|
||||||
|
|
||||||
// Balance bonus
|
|
||||||
const [balanceBonusRubles, setBalanceBonusRubles] = useState<number | ''>(
|
|
||||||
(campaign.balance_bonus_kopeks || 0) / 100,
|
|
||||||
);
|
|
||||||
|
|
||||||
// Subscription bonus
|
|
||||||
const [subscriptionDays, setSubscriptionDays] = useState<number | ''>(
|
|
||||||
campaign.subscription_duration_days || 7,
|
|
||||||
);
|
|
||||||
const [subscriptionTraffic, setSubscriptionTraffic] = useState<number | ''>(
|
|
||||||
campaign.subscription_traffic_gb || 10,
|
|
||||||
);
|
|
||||||
const [subscriptionDevices, setSubscriptionDevices] = useState<number | ''>(
|
|
||||||
campaign.subscription_device_limit || 1,
|
|
||||||
);
|
|
||||||
const [selectedSquads, setSelectedSquads] = useState<string[]>(
|
|
||||||
campaign.subscription_squads || [],
|
|
||||||
);
|
|
||||||
|
|
||||||
// Tariff bonus
|
|
||||||
const [tariffId, setTariffId] = useState<number | null>(campaign.tariff_id || null);
|
|
||||||
const [tariffDays, setTariffDays] = useState<number | ''>(campaign.tariff_duration_days || 30);
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
|
||||||
const data: CampaignUpdateRequest = {
|
|
||||||
name,
|
|
||||||
start_parameter: startParameter,
|
|
||||||
bonus_type: bonusType,
|
|
||||||
is_active: isActive,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (bonusType === 'balance') {
|
|
||||||
data.balance_bonus_kopeks = Math.round(toNumber(balanceBonusRubles) * 100);
|
|
||||||
} else if (bonusType === 'subscription') {
|
|
||||||
data.subscription_duration_days = toNumber(subscriptionDays, 7);
|
|
||||||
data.subscription_traffic_gb = toNumber(subscriptionTraffic, 10);
|
|
||||||
data.subscription_device_limit = toNumber(subscriptionDevices, 1);
|
|
||||||
data.subscription_squads = selectedSquads;
|
|
||||||
} else if (bonusType === 'tariff') {
|
|
||||||
data.tariff_id = tariffId || undefined;
|
|
||||||
data.tariff_duration_days = toNumber(tariffDays, 30);
|
|
||||||
}
|
|
||||||
|
|
||||||
onSave(data);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleServer = (uuid: string) => {
|
|
||||||
setSelectedSquads((prev) =>
|
|
||||||
prev.includes(uuid) ? prev.filter((s) => s !== uuid) : [...prev, uuid],
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const isValid = name.trim() && startParameter.trim() && /^[a-zA-Z0-9_-]+$/.test(startParameter);
|
|
||||||
|
|
||||||
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-lg flex-col overflow-hidden rounded-xl bg-dark-800">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between border-b border-dark-700 p-4">
|
|
||||||
<h2 className="text-lg font-semibold text-dark-100">
|
|
||||||
{t('admin.campaigns.modal.editTitle')}
|
|
||||||
</h2>
|
|
||||||
<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">
|
|
||||||
{/* Name */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-sm text-dark-300">
|
|
||||||
{t('admin.campaigns.form.name')}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={name}
|
|
||||||
onChange={(e) => setName(e.target.value)}
|
|
||||||
className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
|
|
||||||
placeholder={t('admin.campaigns.form.namePlaceholder')}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Start Parameter */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-sm text-dark-300">
|
|
||||||
{t('admin.campaigns.form.startParameter')}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={startParameter}
|
|
||||||
onChange={(e) => setStartParameter(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ''))}
|
|
||||||
className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
|
|
||||||
placeholder="instagram_jan2024"
|
|
||||||
/>
|
|
||||||
<p className="mt-1 text-xs text-dark-500">
|
|
||||||
{t('admin.campaigns.form.startParameterHint')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bonus Type */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-2 block text-sm text-dark-300">
|
|
||||||
{t('admin.campaigns.form.bonusType')}
|
|
||||||
</label>
|
|
||||||
<div className="grid grid-cols-2 gap-2">
|
|
||||||
{(Object.keys(bonusTypeConfig) as CampaignBonusType[]).map((type) => (
|
|
||||||
<button
|
|
||||||
key={type}
|
|
||||||
type="button"
|
|
||||||
onClick={() => setBonusType(type)}
|
|
||||||
className={`rounded-lg p-3 text-left transition-colors ${
|
|
||||||
bonusType === type
|
|
||||||
? `${bonusTypeConfig[type].bgColor} border border-current ${bonusTypeConfig[type].color}`
|
|
||||||
: 'border border-dark-600 bg-dark-700 text-dark-300 hover:border-dark-500'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span className="text-sm font-medium">{t(bonusTypeConfig[type].labelKey)}</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bonus Settings */}
|
|
||||||
{bonusType === 'balance' && (
|
|
||||||
<div className="rounded-lg border border-success-500/30 bg-success-500/10 p-4">
|
|
||||||
<label className="mb-2 block text-sm font-medium text-success-400">
|
|
||||||
{t('admin.campaigns.form.balanceBonus')}
|
|
||||||
</label>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={balanceBonusRubles}
|
|
||||||
onChange={createNumberInputHandler(setBalanceBonusRubles, 0)}
|
|
||||||
className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-success-500 focus:outline-none"
|
|
||||||
min={0}
|
|
||||||
step={1}
|
|
||||||
/>
|
|
||||||
<span className="text-dark-400">₽</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{bonusType === 'subscription' && (
|
|
||||||
<div className="space-y-3 rounded-lg border border-accent-500/30 bg-accent-500/10 p-4">
|
|
||||||
<label className="block text-sm font-medium text-accent-400">
|
|
||||||
{t('admin.campaigns.form.trialSubscription')}
|
|
||||||
</label>
|
|
||||||
<div className="grid grid-cols-3 gap-3">
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs text-dark-500">
|
|
||||||
{t('admin.campaigns.form.days')}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={subscriptionDays}
|
|
||||||
onChange={createNumberInputHandler(setSubscriptionDays, 1)}
|
|
||||||
className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
|
|
||||||
min={1}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs text-dark-500">
|
|
||||||
{t('admin.campaigns.form.trafficGb')}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={subscriptionTraffic}
|
|
||||||
onChange={createNumberInputHandler(setSubscriptionTraffic, 0)}
|
|
||||||
className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
|
|
||||||
min={0}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs text-dark-500">
|
|
||||||
{t('admin.campaigns.form.devices')}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={subscriptionDevices}
|
|
||||||
onChange={createNumberInputHandler(setSubscriptionDevices, 1)}
|
|
||||||
className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
|
|
||||||
min={1}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{servers.length > 0 && (
|
|
||||||
<div>
|
|
||||||
<label className="mb-2 block text-xs text-dark-500">
|
|
||||||
{t('admin.campaigns.form.servers')}
|
|
||||||
</label>
|
|
||||||
<div className="max-h-32 space-y-1 overflow-y-auto">
|
|
||||||
{servers.map((server) => (
|
|
||||||
<button
|
|
||||||
key={server.id}
|
|
||||||
type="button"
|
|
||||||
onClick={() => toggleServer(server.squad_uuid)}
|
|
||||||
className={`flex w-full items-center gap-2 rounded-lg p-2 text-left transition-colors ${
|
|
||||||
selectedSquads.includes(server.squad_uuid)
|
|
||||||
? 'bg-accent-500/20 text-accent-300'
|
|
||||||
: 'bg-dark-600 text-dark-300 hover:bg-dark-500'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`flex h-4 w-4 items-center justify-center rounded ${
|
|
||||||
selectedSquads.includes(server.squad_uuid)
|
|
||||||
? 'bg-accent-500 text-white'
|
|
||||||
: 'bg-dark-500'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{selectedSquads.includes(server.squad_uuid) && <CheckIcon />}
|
|
||||||
</div>
|
|
||||||
<span className="text-sm">{server.display_name}</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{bonusType === 'tariff' && (
|
|
||||||
<div className="space-y-3 rounded-lg border border-accent-500/30 bg-accent-500/10 p-4">
|
|
||||||
<label className="block text-sm font-medium text-accent-400">
|
|
||||||
{t('admin.campaigns.form.tariff')}
|
|
||||||
</label>
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs text-dark-500">
|
|
||||||
{t('admin.campaigns.form.selectTariff')}
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={tariffId || ''}
|
|
||||||
onChange={(e) => setTariffId(e.target.value ? parseInt(e.target.value) : null)}
|
|
||||||
className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
|
|
||||||
>
|
|
||||||
<option value="">{t('admin.campaigns.form.notSelected')}</option>
|
|
||||||
{tariffs.map((tariff) => (
|
|
||||||
<option key={tariff.id} value={tariff.id}>
|
|
||||||
{tariff.name} (
|
|
||||||
{t('admin.campaigns.form.tariffOption', {
|
|
||||||
traffic: tariff.traffic_limit_gb,
|
|
||||||
devices: tariff.device_limit,
|
|
||||||
})}
|
|
||||||
)
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-xs text-dark-500">
|
|
||||||
{t('admin.campaigns.form.durationDays')}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={tariffDays}
|
|
||||||
onChange={createNumberInputHandler(setTariffDays, 1)}
|
|
||||||
className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
|
|
||||||
min={1}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{bonusType === 'none' && (
|
|
||||||
<div className="rounded-lg border border-dark-500/30 bg-dark-500/10 p-4">
|
|
||||||
<p className="text-sm text-dark-400">
|
|
||||||
{t('admin.campaigns.form.noBonusDescription')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Active toggle */}
|
|
||||||
<div className="flex items-center justify-between rounded-lg bg-dark-700 p-3">
|
|
||||||
<span className="text-sm text-dark-300">{t('admin.campaigns.form.active')}</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setIsActive(!isActive)}
|
|
||||||
className={`relative h-6 w-10 rounded-full transition-colors ${
|
|
||||||
isActive ? 'bg-accent-500' : 'bg-dark-600'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
|
|
||||||
isActive ? 'left-5' : 'left-1'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="flex justify-end gap-3 border-t border-dark-700 p-4">
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
|
|
||||||
>
|
|
||||||
{t('admin.campaigns.form.cancel')}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleSubmit}
|
|
||||||
disabled={!isValid || isLoading}
|
|
||||||
className="rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{isLoading ? t('admin.campaigns.form.saving') : t('admin.campaigns.form.save')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Main Component
|
// Main Component
|
||||||
export default function AdminCampaigns() {
|
export default function AdminCampaigns() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
const [editingCampaign, setEditingCampaign] = useState<CampaignDetail | null>(null);
|
|
||||||
const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
|
const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
|
||||||
|
|
||||||
// Queries
|
// Queries
|
||||||
@@ -460,26 +65,7 @@ export default function AdminCampaigns() {
|
|||||||
queryFn: () => campaignsApi.getOverview(),
|
queryFn: () => campaignsApi.getOverview(),
|
||||||
});
|
});
|
||||||
|
|
||||||
const { data: servers = [] } = useQuery({
|
|
||||||
queryKey: ['admin-campaigns-servers'],
|
|
||||||
queryFn: () => campaignsApi.getAvailableServers(),
|
|
||||||
});
|
|
||||||
|
|
||||||
const { data: tariffs = [] } = useQuery({
|
|
||||||
queryKey: ['admin-campaigns-tariffs'],
|
|
||||||
queryFn: () => campaignsApi.getAvailableTariffs(),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Mutations
|
// Mutations
|
||||||
const updateMutation = useMutation({
|
|
||||||
mutationFn: ({ id, data }: { id: number; data: CampaignUpdateRequest }) =>
|
|
||||||
campaignsApi.updateCampaign(id, data),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['admin-campaigns'] });
|
|
||||||
setEditingCampaign(null);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const deleteMutation = useMutation({
|
const deleteMutation = useMutation({
|
||||||
mutationFn: campaignsApi.deleteCampaign,
|
mutationFn: campaignsApi.deleteCampaign,
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
@@ -496,25 +82,6 @@ export default function AdminCampaigns() {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleEdit = async (campaignId: number) => {
|
|
||||||
try {
|
|
||||||
const detail = await campaignsApi.getCampaign(campaignId);
|
|
||||||
setEditingCampaign(detail);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to load campaign:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = (data: CampaignUpdateRequest) => {
|
|
||||||
if (editingCampaign) {
|
|
||||||
updateMutation.mutate({ id: editingCampaign.id, data });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCloseModal = () => {
|
|
||||||
setEditingCampaign(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const campaigns = campaignsData?.campaigns || [];
|
const campaigns = campaignsData?.campaigns || [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -647,7 +214,7 @@ export default function AdminCampaigns() {
|
|||||||
|
|
||||||
{/* Edit */}
|
{/* Edit */}
|
||||||
<button
|
<button
|
||||||
onClick={() => handleEdit(campaign.id)}
|
onClick={() => navigate(`/admin/campaigns/${campaign.id}/edit`)}
|
||||||
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.edit')}
|
title={t('admin.campaigns.table.edit')}
|
||||||
>
|
>
|
||||||
@@ -670,18 +237,6 @@ export default function AdminCampaigns() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Edit Modal */}
|
|
||||||
{editingCampaign && (
|
|
||||||
<CampaignModal
|
|
||||||
campaign={editingCampaign}
|
|
||||||
servers={servers}
|
|
||||||
tariffs={tariffs}
|
|
||||||
onSave={handleSave}
|
|
||||||
onClose={handleCloseModal}
|
|
||||||
isLoading={updateMutation.isPending}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 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