mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
feat: bulk actions — live progress, grant subscription, error details
- Real-time progress: SSE streaming with animated progress bar, live success/error counters, scrollable log of last 10 results with auto-scroll, percentage display - New action "Выдать подписку": tariff selector + days input, warning about users with existing subscriptions being skipped - Error details: collapsible section with per-user error list, colored summary line (green successes / red errors) - Fix: modal cannot be closed during loading (backdrop + Escape) - Fix: row checkbox aria-labels now user-specific - i18n: full progress/grant/error translations (ru + en)
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
import apiClient from './client';
|
import apiClient from './client';
|
||||||
|
import { tokenStorage } from '../utils/token';
|
||||||
|
|
||||||
export type BulkActionType =
|
export type BulkActionType =
|
||||||
| 'extend'
|
| 'extend'
|
||||||
@@ -7,7 +8,8 @@ export type BulkActionType =
|
|||||||
| 'change_tariff'
|
| 'change_tariff'
|
||||||
| 'add_traffic'
|
| 'add_traffic'
|
||||||
| 'add_balance'
|
| 'add_balance'
|
||||||
| 'assign_promo_group';
|
| 'assign_promo_group'
|
||||||
|
| 'grant_subscription';
|
||||||
|
|
||||||
export interface BulkActionRequest {
|
export interface BulkActionRequest {
|
||||||
action: BulkActionType;
|
action: BulkActionType;
|
||||||
@@ -23,20 +25,114 @@ export interface BulkActionParams {
|
|||||||
promo_group_id?: number | null;
|
promo_group_id?: number | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface BulkActionErrorItem {
|
||||||
|
user_id: number;
|
||||||
|
username?: string;
|
||||||
|
error: string;
|
||||||
|
}
|
||||||
|
|
||||||
export interface BulkActionResult {
|
export interface BulkActionResult {
|
||||||
success: boolean;
|
success: boolean;
|
||||||
total: number;
|
total: number;
|
||||||
success_count: number;
|
success_count: number;
|
||||||
error_count: number;
|
error_count: number;
|
||||||
errors: Array<{
|
errors: BulkActionErrorItem[];
|
||||||
user_id: number;
|
|
||||||
error: string;
|
|
||||||
}>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface BulkProgressEvent {
|
||||||
|
type: 'progress';
|
||||||
|
current: number;
|
||||||
|
total: number;
|
||||||
|
user_id: number;
|
||||||
|
username?: string;
|
||||||
|
success: boolean;
|
||||||
|
message?: string;
|
||||||
|
error?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BulkCompleteEvent {
|
||||||
|
type: 'complete';
|
||||||
|
success: boolean;
|
||||||
|
total: number;
|
||||||
|
success_count: number;
|
||||||
|
error_count: number;
|
||||||
|
errors: BulkActionErrorItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export type BulkSSEEvent = BulkProgressEvent | BulkCompleteEvent;
|
||||||
|
|
||||||
|
const API_BASE_URL = import.meta.env.VITE_API_URL || '/api';
|
||||||
|
|
||||||
export const adminBulkActionsApi = {
|
export const adminBulkActionsApi = {
|
||||||
execute: async (data: BulkActionRequest): Promise<BulkActionResult> => {
|
execute: async (data: BulkActionRequest): Promise<BulkActionResult> => {
|
||||||
const response = await apiClient.post('/cabinet/admin/bulk/execute', data);
|
const response = await apiClient.post('/cabinet/admin/bulk/execute', data);
|
||||||
return response.data;
|
return response.data;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
executeWithStream: async (
|
||||||
|
data: BulkActionRequest,
|
||||||
|
onEvent: (event: BulkSSEEvent) => void,
|
||||||
|
signal?: AbortSignal,
|
||||||
|
): Promise<void> => {
|
||||||
|
const token = tokenStorage.getAccessToken();
|
||||||
|
const response = await fetch(`${API_BASE_URL}/cabinet/admin/bulk/execute?stream=true`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
signal,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const contentType = response.headers.get('content-type') || '';
|
||||||
|
|
||||||
|
if (contentType.includes('text/event-stream') && response.body) {
|
||||||
|
const reader = response.body.getReader();
|
||||||
|
const decoder = new TextDecoder();
|
||||||
|
let buffer = '';
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
const { done, value } = await reader.read();
|
||||||
|
if (done) break;
|
||||||
|
|
||||||
|
buffer += decoder.decode(value, { stream: true });
|
||||||
|
const lines = buffer.split('\n');
|
||||||
|
buffer = lines.pop() || '';
|
||||||
|
|
||||||
|
for (const line of lines) {
|
||||||
|
const trimmed = line.trim();
|
||||||
|
if (trimmed.startsWith('data: ')) {
|
||||||
|
try {
|
||||||
|
const event = JSON.parse(trimmed.slice(6)) as BulkSSEEvent;
|
||||||
|
onEvent(event);
|
||||||
|
} catch {
|
||||||
|
// skip malformed SSE lines
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// process remaining buffer
|
||||||
|
if (buffer.trim().startsWith('data: ')) {
|
||||||
|
try {
|
||||||
|
const event = JSON.parse(buffer.trim().slice(6)) as BulkSSEEvent;
|
||||||
|
onEvent(event);
|
||||||
|
} catch {
|
||||||
|
// skip
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Fallback: non-streaming JSON response
|
||||||
|
const result = (await response.json()) as BulkActionResult;
|
||||||
|
onEvent({
|
||||||
|
type: 'complete',
|
||||||
|
...result,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -2028,6 +2028,8 @@
|
|||||||
"selectedCount": "Selected: {{count}}",
|
"selectedCount": "Selected: {{count}}",
|
||||||
"selectAll": "Select all",
|
"selectAll": "Select all",
|
||||||
"deselectAll": "Deselect all",
|
"deselectAll": "Deselect all",
|
||||||
|
"selectUser": "Select user {{name}}",
|
||||||
|
"deselectUser": "Deselect user {{name}}",
|
||||||
"noResults": "No users found",
|
"noResults": "No users found",
|
||||||
"actions": {
|
"actions": {
|
||||||
"extend": "Extend subscription",
|
"extend": "Extend subscription",
|
||||||
@@ -2036,7 +2038,8 @@
|
|||||||
"changeTariff": "Change tariff",
|
"changeTariff": "Change tariff",
|
||||||
"addTraffic": "Add traffic",
|
"addTraffic": "Add traffic",
|
||||||
"addBalance": "Add balance",
|
"addBalance": "Add balance",
|
||||||
"assignPromoGroup": "Assign promo group"
|
"assignPromoGroup": "Assign promo group",
|
||||||
|
"grantSubscription": "Grant subscription"
|
||||||
},
|
},
|
||||||
"params": {
|
"params": {
|
||||||
"days": "Number of days",
|
"days": "Number of days",
|
||||||
@@ -2046,12 +2049,28 @@
|
|||||||
"promoGroup": "Promo group",
|
"promoGroup": "Promo group",
|
||||||
"removePromoGroup": "Remove promo group"
|
"removePromoGroup": "Remove promo group"
|
||||||
},
|
},
|
||||||
|
"grantSubscription": {
|
||||||
|
"warning": "Users who already have a subscription on the selected tariff will be skipped"
|
||||||
|
},
|
||||||
"confirm": "Apply",
|
"confirm": "Apply",
|
||||||
"cancel": "Cancel",
|
"cancel": "Cancel",
|
||||||
"executing": "Executing...",
|
"executing": "Executing...",
|
||||||
"complete": "Complete",
|
"complete": "Complete",
|
||||||
"successCount": "Succeeded: {{count}}",
|
"successCount": "Succeeded: {{count}}",
|
||||||
"errorCount": "Errors: {{count}}",
|
"errorCount": "Errors: {{count}}",
|
||||||
|
"progress": {
|
||||||
|
"processed": "Processed: {{current}} / {{total}}",
|
||||||
|
"succeeded": "succeeded",
|
||||||
|
"failed": "failed",
|
||||||
|
"ok": "OK",
|
||||||
|
"errorGeneric": "Error",
|
||||||
|
"doNotClose": "Please do not close this window while the operation is in progress",
|
||||||
|
"summarySuccess": "{{count}} succeeded",
|
||||||
|
"summaryErrors": "{{count}} errors"
|
||||||
|
},
|
||||||
|
"errors": {
|
||||||
|
"title": "{{count}} errors — show details"
|
||||||
|
},
|
||||||
"filters": {
|
"filters": {
|
||||||
"search": "Search by ID, username, email",
|
"search": "Search by ID, username, email",
|
||||||
"status": "Subscription status",
|
"status": "Subscription status",
|
||||||
|
|||||||
@@ -3776,6 +3776,8 @@
|
|||||||
"selectedCount": "Выбрано: {{count}}",
|
"selectedCount": "Выбрано: {{count}}",
|
||||||
"selectAll": "Выбрать всех",
|
"selectAll": "Выбрать всех",
|
||||||
"deselectAll": "Снять выделение",
|
"deselectAll": "Снять выделение",
|
||||||
|
"selectUser": "Выбрать пользователя {{name}}",
|
||||||
|
"deselectUser": "Снять выбор пользователя {{name}}",
|
||||||
"noResults": "Пользователи не найдены",
|
"noResults": "Пользователи не найдены",
|
||||||
"actions": {
|
"actions": {
|
||||||
"extend": "Продлить подписку",
|
"extend": "Продлить подписку",
|
||||||
@@ -3784,7 +3786,8 @@
|
|||||||
"changeTariff": "Сменить тариф",
|
"changeTariff": "Сменить тариф",
|
||||||
"addTraffic": "Начислить трафик",
|
"addTraffic": "Начислить трафик",
|
||||||
"addBalance": "Начислить баланс",
|
"addBalance": "Начислить баланс",
|
||||||
"assignPromoGroup": "Назначить промогруппу"
|
"assignPromoGroup": "Назначить промогруппу",
|
||||||
|
"grantSubscription": "Выдать подписку"
|
||||||
},
|
},
|
||||||
"params": {
|
"params": {
|
||||||
"days": "Количество дней",
|
"days": "Количество дней",
|
||||||
@@ -3794,12 +3797,28 @@
|
|||||||
"promoGroup": "Промогруппа",
|
"promoGroup": "Промогруппа",
|
||||||
"removePromoGroup": "Убрать промогруппу"
|
"removePromoGroup": "Убрать промогруппу"
|
||||||
},
|
},
|
||||||
|
"grantSubscription": {
|
||||||
|
"warning": "Пользователи, у которых уже есть подписка на выбранный тариф, будут пропущены"
|
||||||
|
},
|
||||||
"confirm": "Применить",
|
"confirm": "Применить",
|
||||||
"cancel": "Отмена",
|
"cancel": "Отмена",
|
||||||
"executing": "Выполнение...",
|
"executing": "Выполнение...",
|
||||||
"complete": "Выполнено",
|
"complete": "Выполнено",
|
||||||
"successCount": "Успешно: {{count}}",
|
"successCount": "Успешно: {{count}}",
|
||||||
"errorCount": "Ошибок: {{count}}",
|
"errorCount": "Ошибок: {{count}}",
|
||||||
|
"progress": {
|
||||||
|
"processed": "Обработано: {{current}} / {{total}}",
|
||||||
|
"succeeded": "успешно",
|
||||||
|
"failed": "ошибок",
|
||||||
|
"ok": "ОК",
|
||||||
|
"errorGeneric": "Ошибка",
|
||||||
|
"doNotClose": "Не закрывайте это окно, пока операция выполняется",
|
||||||
|
"summarySuccess": "{{count}} успешно",
|
||||||
|
"summaryErrors": "{{count}} ошибок"
|
||||||
|
},
|
||||||
|
"errors": {
|
||||||
|
"title": "{{count}} ошибок — показать детали"
|
||||||
|
},
|
||||||
"filters": {
|
"filters": {
|
||||||
"search": "Поиск по ID, нику, email",
|
"search": "Поиск по ID, нику, email",
|
||||||
"status": "Статус подписки",
|
"status": "Статус подписки",
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ import {
|
|||||||
type BulkActionType,
|
type BulkActionType,
|
||||||
type BulkActionParams,
|
type BulkActionParams,
|
||||||
type BulkActionResult,
|
type BulkActionResult,
|
||||||
|
type BulkProgressEvent,
|
||||||
} from '../api/adminBulkActions';
|
} from '../api/adminBulkActions';
|
||||||
import { usePlatform } from '../platform/hooks/usePlatform';
|
import { usePlatform } from '../platform/hooks/usePlatform';
|
||||||
import { useCurrency } from '../hooks/useCurrency';
|
import { useCurrency } from '../hooks/useCurrency';
|
||||||
@@ -32,11 +33,20 @@ interface ActionConfig {
|
|||||||
colorClass: string;
|
colorClass: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface ProgressState {
|
||||||
|
current: number;
|
||||||
|
total: number;
|
||||||
|
successCount: number;
|
||||||
|
errorCount: number;
|
||||||
|
log: BulkProgressEvent[];
|
||||||
|
}
|
||||||
|
|
||||||
interface ModalState {
|
interface ModalState {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
action: BulkActionType | null;
|
action: BulkActionType | null;
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
result: BulkActionResult | null;
|
result: BulkActionResult | null;
|
||||||
|
progress: ProgressState | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ============ Icons ============
|
// ============ Icons ============
|
||||||
@@ -235,6 +245,165 @@ function DropdownSelect({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ============ Progress View ============
|
||||||
|
|
||||||
|
function ProgressView({ progress }: { progress: ProgressState }) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const logEndRef = useRef<HTMLDivElement>(null);
|
||||||
|
const percentage = progress.total > 0 ? Math.round((progress.current / progress.total) * 100) : 0;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
logEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
}, [progress.log.length]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Progress bar */}
|
||||||
|
<div>
|
||||||
|
<div className="mb-2 flex items-center justify-between text-sm">
|
||||||
|
<span className="font-medium text-dark-200">
|
||||||
|
{t('admin.bulkActions.progress.processed', {
|
||||||
|
current: progress.current,
|
||||||
|
total: progress.total,
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
<span className="font-bold tabular-nums text-accent-400">{percentage}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-2.5 overflow-hidden rounded-full bg-dark-700/60">
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full bg-gradient-to-r from-accent-500 to-accent-400 transition-all duration-300 ease-out"
|
||||||
|
style={{ width: `${percentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Counters */}
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<div className="h-2 w-2 rounded-full bg-success-400" />
|
||||||
|
<span className="text-sm tabular-nums text-success-400">{progress.successCount}</span>
|
||||||
|
<span className="text-xs text-dark-500">{t('admin.bulkActions.progress.succeeded')}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<div className="h-2 w-2 rounded-full bg-error-400" />
|
||||||
|
<span className="text-sm tabular-nums text-error-400">{progress.errorCount}</span>
|
||||||
|
<span className="text-xs text-dark-500">{t('admin.bulkActions.progress.failed')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Live log */}
|
||||||
|
{progress.log.length > 0 && (
|
||||||
|
<div className="max-h-48 overflow-y-auto rounded-xl border border-dark-700 bg-dark-800/50 p-3">
|
||||||
|
<div className="space-y-1">
|
||||||
|
{progress.log.slice(-10).map((entry, idx) => (
|
||||||
|
<div key={idx} className="flex items-start gap-2 text-xs">
|
||||||
|
{entry.success ? (
|
||||||
|
<span className="mt-0.5 shrink-0 text-success-400" aria-hidden="true">
|
||||||
|
<svg
|
||||||
|
className="h-3 w-3"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth={3}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M4.5 12.75l6 6 9-13.5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="mt-0.5 shrink-0 text-error-400" aria-hidden="true">
|
||||||
|
<svg
|
||||||
|
className="h-3 w-3"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth={3}
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="font-mono text-dark-400">
|
||||||
|
{entry.username ? `@${entry.username}` : `#${entry.user_id}`}
|
||||||
|
</span>
|
||||||
|
<span className={entry.success ? 'text-dark-300' : 'text-error-300'}>
|
||||||
|
{entry.success
|
||||||
|
? entry.message || t('admin.bulkActions.progress.ok')
|
||||||
|
: entry.error || t('admin.bulkActions.progress.errorGeneric')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div ref={logEndRef} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============ Error Details ============
|
||||||
|
|
||||||
|
function ErrorDetails({ result }: { result: BulkActionResult }) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
|
||||||
|
if (result.error_count === 0 || result.errors.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-xl border border-error-500/20 bg-error-500/5">
|
||||||
|
<button
|
||||||
|
onClick={() => setExpanded(!expanded)}
|
||||||
|
className="flex w-full items-center justify-between px-4 py-3 text-left"
|
||||||
|
aria-expanded={expanded}
|
||||||
|
>
|
||||||
|
<span className="text-sm font-medium text-error-400">
|
||||||
|
{t('admin.bulkActions.errors.title', { count: result.error_count })}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
className={cn(
|
||||||
|
'h-4 w-4 text-error-400 transition-transform duration-200',
|
||||||
|
expanded && 'rotate-180',
|
||||||
|
)}
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth={2}
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
{expanded && (
|
||||||
|
<div className="max-h-48 overflow-y-auto border-t border-error-500/20 px-4 py-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
{result.errors.map((err, idx) => (
|
||||||
|
<div key={idx} className="flex items-start gap-2 text-xs">
|
||||||
|
<span className="mt-0.5 shrink-0 text-error-400" aria-hidden="true">
|
||||||
|
<svg
|
||||||
|
className="h-3 w-3"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth={3}
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span className="shrink-0 font-mono text-dark-400">
|
||||||
|
{err.username ? `@${err.username}` : `#${err.user_id}`}
|
||||||
|
</span>
|
||||||
|
<span className="text-error-300">{err.error}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// ============ Action Modal ============
|
// ============ Action Modal ============
|
||||||
|
|
||||||
interface ActionModalProps {
|
interface ActionModalProps {
|
||||||
@@ -260,12 +429,17 @@ function ActionModal({
|
|||||||
const [trafficGb, setTrafficGb] = useState(10);
|
const [trafficGb, setTrafficGb] = useState(10);
|
||||||
const [balanceRub, setBalanceRub] = useState(100);
|
const [balanceRub, setBalanceRub] = useState(100);
|
||||||
const [promoGroupId, setPromoGroupId] = useState<number | null>(promoGroups[0]?.id ?? null);
|
const [promoGroupId, setPromoGroupId] = useState<number | null>(promoGroups[0]?.id ?? null);
|
||||||
|
const [grantTariffId, setGrantTariffId] = useState<number>(tariffs[0]?.id ?? 0);
|
||||||
|
const [grantDays, setGrantDays] = useState(30);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (tariffs.length > 0 && tariffId === 0) {
|
if (tariffs.length > 0 && tariffId === 0) {
|
||||||
setTariffId(tariffs[0].id);
|
setTariffId(tariffs[0].id);
|
||||||
}
|
}
|
||||||
}, [tariffs, tariffId]);
|
if (tariffs.length > 0 && grantTariffId === 0) {
|
||||||
|
setGrantTariffId(tariffs[0].id);
|
||||||
|
}
|
||||||
|
}, [tariffs, tariffId, grantTariffId]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (promoGroups.length > 0 && promoGroupId === null) {
|
if (promoGroups.length > 0 && promoGroupId === null) {
|
||||||
@@ -273,6 +447,18 @@ function ActionModal({
|
|||||||
}
|
}
|
||||||
}, [promoGroups, promoGroupId]);
|
}, [promoGroups, promoGroupId]);
|
||||||
|
|
||||||
|
// Escape key handler — only when not loading
|
||||||
|
useEffect(() => {
|
||||||
|
if (!modal.open) return;
|
||||||
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape' && !modal.loading) {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
}, [modal.open, modal.loading, onClose]);
|
||||||
|
|
||||||
if (!modal.open || !modal.action) return null;
|
if (!modal.open || !modal.action) return null;
|
||||||
|
|
||||||
const actionLabelKeys: Record<BulkActionType, string> = {
|
const actionLabelKeys: Record<BulkActionType, string> = {
|
||||||
@@ -283,6 +469,7 @@ function ActionModal({
|
|||||||
add_traffic: 'admin.bulkActions.actions.addTraffic',
|
add_traffic: 'admin.bulkActions.actions.addTraffic',
|
||||||
add_balance: 'admin.bulkActions.actions.addBalance',
|
add_balance: 'admin.bulkActions.actions.addBalance',
|
||||||
assign_promo_group: 'admin.bulkActions.actions.assignPromoGroup',
|
assign_promo_group: 'admin.bulkActions.actions.assignPromoGroup',
|
||||||
|
grant_subscription: 'admin.bulkActions.actions.grantSubscription',
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
@@ -303,10 +490,20 @@ function ActionModal({
|
|||||||
case 'assign_promo_group':
|
case 'assign_promo_group':
|
||||||
params.promo_group_id = promoGroupId;
|
params.promo_group_id = promoGroupId;
|
||||||
break;
|
break;
|
||||||
|
case 'grant_subscription':
|
||||||
|
params.tariff_id = grantTariffId;
|
||||||
|
params.days = grantDays;
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
onExecute(params);
|
onExecute(params);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleBackdropClick = () => {
|
||||||
|
if (!modal.loading) {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const renderInputs = () => {
|
const renderInputs = () => {
|
||||||
switch (modal.action) {
|
switch (modal.action) {
|
||||||
case 'extend':
|
case 'extend':
|
||||||
@@ -386,6 +583,40 @@ function ActionModal({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
case 'grant_subscription':
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="mb-1.5 block text-sm font-medium text-dark-300">
|
||||||
|
{t('admin.bulkActions.params.tariff')}
|
||||||
|
</label>
|
||||||
|
<DropdownSelect
|
||||||
|
value={String(grantTariffId)}
|
||||||
|
options={tariffs.map((tt) => ({ value: String(tt.id), label: tt.name }))}
|
||||||
|
onChange={(v) => setGrantTariffId(Number(v))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="mb-1.5 block text-sm font-medium text-dark-300">
|
||||||
|
{t('admin.bulkActions.params.days')}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min={1}
|
||||||
|
max={365}
|
||||||
|
value={grantDays}
|
||||||
|
onChange={(e) => setGrantDays(Number(e.target.value))}
|
||||||
|
className="w-full rounded-xl border border-dark-700 bg-dark-800 px-3 py-2.5 text-sm text-dark-100 outline-none transition-colors focus:border-accent-500/40"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* Warning about users with existing subscriptions */}
|
||||||
|
<div className="rounded-xl border border-amber-500/20 bg-amber-500/5 px-3 py-2.5">
|
||||||
|
<p className="text-xs text-amber-400">
|
||||||
|
{t('admin.bulkActions.grantSubscription.warning')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@@ -397,30 +628,64 @@ function ActionModal({
|
|||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
>
|
>
|
||||||
{/* Backdrop */}
|
{/* Backdrop — no close on click during loading */}
|
||||||
<div className="absolute inset-0 bg-dark-950/80 backdrop-blur-sm" onClick={onClose} />
|
<div
|
||||||
|
className="absolute inset-0 bg-dark-950/80 backdrop-blur-sm"
|
||||||
|
onClick={handleBackdropClick}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Modal */}
|
{/* Modal */}
|
||||||
<div className="relative w-full max-w-md rounded-2xl border border-dark-700 bg-dark-900 p-6 shadow-2xl">
|
<div className="relative w-full max-w-md rounded-2xl border border-dark-700 bg-dark-900 p-6 shadow-2xl">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="mb-5 flex items-center justify-between">
|
<div className="mb-5 flex items-center justify-between">
|
||||||
<h3 className="text-lg font-bold text-dark-100">{t(actionLabelKeys[modal.action])}</h3>
|
<h3 className="text-lg font-bold text-dark-100">{t(actionLabelKeys[modal.action])}</h3>
|
||||||
<button
|
{!modal.loading && (
|
||||||
onClick={onClose}
|
<button
|
||||||
className="rounded-lg p-1 text-dark-400 transition-colors hover:bg-dark-800 hover:text-dark-200"
|
onClick={onClose}
|
||||||
aria-label={t('admin.bulkActions.cancel')}
|
className="rounded-lg p-1 text-dark-400 transition-colors hover:bg-dark-800 hover:text-dark-200"
|
||||||
>
|
aria-label={t('common.close')}
|
||||||
<XCloseIcon />
|
>
|
||||||
</button>
|
<XCloseIcon />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Result view */}
|
{/* Progress view during execution */}
|
||||||
{modal.result ? (
|
{modal.loading && modal.progress ? (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
|
<ProgressView progress={modal.progress} />
|
||||||
|
<p className="text-center text-xs text-dark-500">
|
||||||
|
{t('admin.bulkActions.progress.doNotClose')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : modal.result ? (
|
||||||
|
/* Result view */
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Summary line */}
|
||||||
<div className="rounded-xl border border-dark-700 bg-dark-800/50 p-4">
|
<div className="rounded-xl border border-dark-700 bg-dark-800/50 p-4">
|
||||||
<div className="mb-3 text-center text-sm font-semibold text-dark-100">
|
<div className="mb-3 text-center text-sm font-semibold text-dark-100">
|
||||||
{t('admin.bulkActions.complete')}
|
{t('admin.bulkActions.complete')}
|
||||||
</div>
|
</div>
|
||||||
|
{/* Colored summary */}
|
||||||
|
<div className="mb-3 text-center text-sm">
|
||||||
|
<span className="font-medium text-success-400">
|
||||||
|
{t('admin.bulkActions.progress.summarySuccess', {
|
||||||
|
count: modal.result.success_count,
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
{modal.result.error_count > 0 && (
|
||||||
|
<>
|
||||||
|
<span className="mx-1.5 text-dark-600" aria-hidden="true">
|
||||||
|
/
|
||||||
|
</span>
|
||||||
|
<span className="font-medium text-error-400">
|
||||||
|
{t('admin.bulkActions.progress.summaryErrors', {
|
||||||
|
count: modal.result.error_count,
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<div className="flex justify-center gap-6">
|
<div className="flex justify-center gap-6">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="text-2xl font-bold text-success-400">
|
<div className="text-2xl font-bold text-success-400">
|
||||||
@@ -442,6 +707,10 @@ function ActionModal({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Collapsible error details */}
|
||||||
|
<ErrorDetails result={modal.result} />
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
className="w-full rounded-xl bg-accent-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent-600"
|
className="w-full rounded-xl bg-accent-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent-600"
|
||||||
@@ -475,14 +744,7 @@ function ActionModal({
|
|||||||
disabled={modal.loading}
|
disabled={modal.loading}
|
||||||
className="flex flex-1 items-center justify-center gap-2 rounded-xl bg-accent-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
|
className="flex flex-1 items-center justify-center gap-2 rounded-xl bg-accent-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{modal.loading ? (
|
{t('admin.bulkActions.confirm')}
|
||||||
<>
|
|
||||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
|
||||||
{t('admin.bulkActions.executing')}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
t('admin.bulkActions.confirm')
|
|
||||||
)}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
@@ -554,6 +816,12 @@ function FloatingActionBar({
|
|||||||
icon: <span aria-hidden="true">$</span>,
|
icon: <span aria-hidden="true">$</span>,
|
||||||
colorClass: 'text-warning-400 hover:bg-warning-500/10',
|
colorClass: 'text-warning-400 hover:bg-warning-500/10',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'grant_subscription',
|
||||||
|
labelKey: 'admin.bulkActions.actions.grantSubscription',
|
||||||
|
icon: <span aria-hidden="true">+</span>,
|
||||||
|
colorClass: 'text-success-400 hover:bg-success-500/10',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'assign_promo_group',
|
type: 'assign_promo_group',
|
||||||
labelKey: 'admin.bulkActions.actions.assignPromoGroup',
|
labelKey: 'admin.bulkActions.actions.assignPromoGroup',
|
||||||
@@ -655,6 +923,7 @@ export default function AdminBulkActions() {
|
|||||||
action: null,
|
action: null,
|
||||||
loading: false,
|
loading: false,
|
||||||
result: null,
|
result: null,
|
||||||
|
progress: null,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Debounce timer ref
|
// Debounce timer ref
|
||||||
@@ -763,32 +1032,100 @@ export default function AdminBulkActions() {
|
|||||||
}, [rowSelection]);
|
}, [rowSelection]);
|
||||||
|
|
||||||
const handleOpenAction = (type: BulkActionType) => {
|
const handleOpenAction = (type: BulkActionType) => {
|
||||||
setModal({ open: true, action: type, loading: false, result: null });
|
setModal({ open: true, action: type, loading: false, result: null, progress: null });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleExecuteAction = async (params: BulkActionParams) => {
|
const handleExecuteAction = async (params: BulkActionParams) => {
|
||||||
if (!modal.action || selectedUserIds.length === 0) return;
|
if (!modal.action || selectedUserIds.length === 0) return;
|
||||||
|
|
||||||
setModal((prev) => ({ ...prev, loading: true }));
|
const totalCount = selectedUserIds.length;
|
||||||
|
setModal((prev) => ({
|
||||||
|
...prev,
|
||||||
|
loading: true,
|
||||||
|
progress: {
|
||||||
|
current: 0,
|
||||||
|
total: totalCount,
|
||||||
|
successCount: 0,
|
||||||
|
errorCount: 0,
|
||||||
|
log: [],
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const result = await adminBulkActionsApi.execute({
|
await adminBulkActionsApi.executeWithStream(
|
||||||
action: modal.action,
|
{
|
||||||
user_ids: selectedUserIds,
|
action: modal.action,
|
||||||
params,
|
user_ids: selectedUserIds,
|
||||||
|
params,
|
||||||
|
},
|
||||||
|
(event) => {
|
||||||
|
if (event.type === 'progress') {
|
||||||
|
setModal((prev) => ({
|
||||||
|
...prev,
|
||||||
|
progress: prev.progress
|
||||||
|
? {
|
||||||
|
current: event.current,
|
||||||
|
total: event.total,
|
||||||
|
successCount: prev.progress.successCount + (event.success ? 1 : 0),
|
||||||
|
errorCount: prev.progress.errorCount + (event.success ? 0 : 1),
|
||||||
|
log: [...prev.progress.log, event],
|
||||||
|
}
|
||||||
|
: prev.progress,
|
||||||
|
}));
|
||||||
|
} else if (event.type === 'complete') {
|
||||||
|
setModal((prev) => ({
|
||||||
|
...prev,
|
||||||
|
loading: false,
|
||||||
|
progress: null,
|
||||||
|
result: {
|
||||||
|
success: event.success,
|
||||||
|
total: event.total,
|
||||||
|
success_count: event.success_count,
|
||||||
|
error_count: event.error_count,
|
||||||
|
errors: event.errors,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
loadUsers();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// If stream ended without a complete event, finalize from progress
|
||||||
|
setModal((prev) => {
|
||||||
|
if (prev.loading && prev.progress) {
|
||||||
|
return {
|
||||||
|
...prev,
|
||||||
|
loading: false,
|
||||||
|
result: {
|
||||||
|
success: prev.progress.errorCount === 0,
|
||||||
|
total: prev.progress.total,
|
||||||
|
success_count: prev.progress.successCount,
|
||||||
|
error_count: prev.progress.errorCount,
|
||||||
|
errors: prev.progress.log
|
||||||
|
.filter((e) => !e.success)
|
||||||
|
.map((e) => ({
|
||||||
|
user_id: e.user_id,
|
||||||
|
username: e.username,
|
||||||
|
error: e.error || '',
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
progress: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return prev;
|
||||||
});
|
});
|
||||||
setModal((prev) => ({ ...prev, loading: false, result }));
|
|
||||||
// Refresh the user list after action
|
|
||||||
loadUsers();
|
loadUsers();
|
||||||
} catch {
|
} catch {
|
||||||
setModal((prev) => ({
|
setModal((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
loading: false,
|
loading: false,
|
||||||
|
progress: null,
|
||||||
result: {
|
result: {
|
||||||
success: false,
|
success: false,
|
||||||
total: selectedUserIds.length,
|
total: totalCount,
|
||||||
success_count: 0,
|
success_count: prev.progress?.successCount ?? 0,
|
||||||
error_count: selectedUserIds.length,
|
error_count: totalCount - (prev.progress?.successCount ?? 0),
|
||||||
errors: [],
|
errors: [],
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
@@ -796,10 +1133,11 @@ export default function AdminBulkActions() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleCloseModal = () => {
|
const handleCloseModal = () => {
|
||||||
|
if (modal.loading) return;
|
||||||
if (modal.result) {
|
if (modal.result) {
|
||||||
setRowSelection({});
|
setRowSelection({});
|
||||||
}
|
}
|
||||||
setModal({ open: false, action: null, loading: false, result: null });
|
setModal({ open: false, action: null, loading: false, result: null, progress: null });
|
||||||
};
|
};
|
||||||
|
|
||||||
// ---- TanStack Table ----
|
// ---- TanStack Table ----
|
||||||
@@ -830,26 +1168,30 @@ export default function AdminBulkActions() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => {
|
||||||
<div className="flex items-center justify-center">
|
const userName =
|
||||||
<button
|
row.original.full_name || row.original.username || String(row.original.telegram_id);
|
||||||
onClick={row.getToggleSelectedHandler()}
|
return (
|
||||||
className={cn(
|
<div className="flex items-center justify-center">
|
||||||
'h-4.5 w-4.5 flex items-center justify-center rounded border transition-colors',
|
<button
|
||||||
row.getIsSelected()
|
onClick={row.getToggleSelectedHandler()}
|
||||||
? 'border-accent-500 bg-accent-500'
|
className={cn(
|
||||||
: 'border-dark-600 bg-dark-800 hover:border-dark-500',
|
'h-4.5 w-4.5 flex items-center justify-center rounded border transition-colors',
|
||||||
)}
|
row.getIsSelected()
|
||||||
aria-label={
|
? 'border-accent-500 bg-accent-500'
|
||||||
row.getIsSelected()
|
: 'border-dark-600 bg-dark-800 hover:border-dark-500',
|
||||||
? t('admin.bulkActions.deselectAll')
|
)}
|
||||||
: t('admin.bulkActions.selectAll')
|
aria-label={
|
||||||
}
|
row.getIsSelected()
|
||||||
>
|
? t('admin.bulkActions.deselectUser', { name: userName })
|
||||||
{row.getIsSelected() && <CheckIcon />}
|
: t('admin.bulkActions.selectUser', { name: userName })
|
||||||
</button>
|
}
|
||||||
</div>
|
>
|
||||||
),
|
{row.getIsSelected() && <CheckIcon />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
enableSorting: false,
|
enableSorting: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user