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:
Fringg
2026-04-24 04:40:53 +03:00
parent ebe9d9be48
commit 312e0b4927
4 changed files with 535 additions and 59 deletions

View File

@@ -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,
});
}
},
}; };

View File

@@ -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",

View File

@@ -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": "Статус подписки",

View File

@@ -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,
}, },
{ {