From 217d60ab1909f54ded2ecbd5489a83824706e271 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 27 May 2026 09:28:39 +0300
Subject: [PATCH] refactor(bulk-actions): extract ActionModal + DropdownSelect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

First and largest step in the AdminBulkActions decomp. Two new
files under src/components/admin/bulkActions/:

- DropdownSelect.tsx (47 lines): the small native-<select> wrapper
  used both by the filter row and the ActionModal's tariff/promo
  picker. Exports DropdownSelect + the shared ChevronDownIcon +
  DropdownOption type.

- ActionModal.tsx (712 lines): the per-action configuration +
  execution modal. Wraps three internal views — ProgressView (live
  SSE log + counters while a job streams), ErrorDetails (collapsible
  per-row error list after completion), and the per-action form
  (days / tariff / traffic / balance / promo-group / grant /
  set-devices / delete-* confirmations). Exports the ModalState
  and ProgressState types alongside.

Self-contained: parent feeds modal state + reference data (tariffs,
promo groups, users for active-paid counting) and receives
onExecute(params) when the operator confirms. No queries or
mutations here — execution flow stays in the parent's
handleExecuteAction.

Parent keeps a local CheckIcon (still used by MultiSelectDropdown
checkboxes + the user-table column defs) and re-imports
ChevronDownIcon / DropdownOption from the new file.

AdminBulkActions.tsx: 2539 → 1796 lines (-743).
---
 .../admin/bulkActions/ActionModal.tsx         | 712 ++++++++++++++++
 .../admin/bulkActions/DropdownSelect.tsx      |  47 ++
 src/pages/AdminBulkActions.tsx                | 770 +-----------------
 3 files changed, 784 insertions(+), 745 deletions(-)
 create mode 100644 src/components/admin/bulkActions/ActionModal.tsx
 create mode 100644 src/components/admin/bulkActions/DropdownSelect.tsx

diff --git a/src/components/admin/bulkActions/ActionModal.tsx b/src/components/admin/bulkActions/ActionModal.tsx
new file mode 100644
index 0000000..e9d442d
--- /dev/null
+++ b/src/components/admin/bulkActions/ActionModal.tsx
@@ -0,0 +1,712 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { cn } from '@/lib/utils';
+import { useFocusTrap } from '@/hooks/useFocusTrap';
+import { DropdownSelect } from './DropdownSelect';
+import type { UserListItem } from '../../../api/adminUsers';
+import type { TariffListItem } from '../../../api/tariffs';
+import type { PromoGroup } from '../../../api/promocodes';
+import type {
+  BulkActionType,
+  BulkActionParams,
+  BulkActionResult,
+  BulkProgressEvent,
+} from '../../../api/adminBulkActions';
+
+// ──────────────────────────────────────────────────────────────────
+// ActionModal
+//
+// The per-action configuration + execution modal for AdminBulkActions.
+// Wraps three internal views:
+//   - ProgressView (live SSE log + counters while a job streams)
+//   - ErrorDetails (collapsible per-row error list after completion)
+//   - the per-action form (days / tariff / traffic / balance /
+//     promo-group / grant / set-devices / delete-* confirmations)
+//
+// Self-contained: the parent feeds modal state + reference data
+// (tariffs, promo groups, users for active-paid counting) and
+// receives onExecute(params) when the operator confirms. No queries
+// or mutations here — execution flow lives in the parent's
+// handleExecuteAction (which streams progress back into the modal
+// via setModal({ ..., progress })).
+// ──────────────────────────────────────────────────────────────────
+
+export interface ProgressState {
+  current: number;
+  total: number;
+  successCount: number;
+  errorCount: number;
+  log: BulkProgressEvent[];
+}
+
+export interface ModalState {
+  open: boolean;
+  action: BulkActionType | null;
+  loading: boolean;
+  result: BulkActionResult | null;
+  progress: ProgressState | null;
+}
+
+const CheckIcon = () => (
+  <svg
+    className="h-3 w-3 text-white"
+    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>
+);
+
+const XCloseIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+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">
+      <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>
+
+      <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>
+
+      {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.message || entry.error || t('admin.bulkActions.progress.errorGeneric')}
+                </span>
+              </div>
+            ))}
+            <div ref={logEndRef} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+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>
+  );
+}
+
+export interface ActionModalProps {
+  modal: ModalState;
+  selectedCount: number;
+  tariffs: TariffListItem[];
+  promoGroups: PromoGroup[];
+  users: UserListItem[];
+  selectedSubscriptionIds: number[];
+  onClose: () => void;
+  onExecute: (params: BulkActionParams) => void;
+}
+
+export function ActionModal({
+  modal,
+  selectedCount,
+  tariffs,
+  promoGroups,
+  users,
+  selectedSubscriptionIds,
+  onClose,
+  onExecute,
+}: ActionModalProps) {
+  const { t } = useTranslation();
+  const [days, setDays] = useState(30);
+  const [tariffId, setTariffId] = useState<number>(tariffs[0]?.id ?? 0);
+  const [trafficGb, setTrafficGb] = useState(10);
+  const [balanceRub, setBalanceRub] = useState(100);
+  const [promoGroupId, setPromoGroupId] = useState<number | null>(promoGroups[0]?.id ?? null);
+  const [grantTariffId, setGrantTariffId] = useState<number>(tariffs[0]?.id ?? 0);
+  const [grantDays, setGrantDays] = useState(30);
+  const [deviceLimit, setDeviceLimit] = useState(1);
+  const [deleteFromPanel, setDeleteFromPanel] = useState(true);
+  const [forceDeleteActivePaid, setForceDeleteActivePaid] = useState(false);
+
+  useEffect(() => {
+    if (tariffs.length > 0 && tariffId === 0) {
+      setTariffId(tariffs[0].id);
+    }
+    if (tariffs.length > 0 && grantTariffId === 0) {
+      setGrantTariffId(tariffs[0].id);
+    }
+  }, [tariffs, tariffId, grantTariffId]);
+
+  useEffect(() => {
+    if (promoGroups.length > 0 && promoGroupId === null) {
+      setPromoGroupId(promoGroups[0].id);
+    }
+  }, [promoGroups, promoGroupId]);
+
+  useEffect(() => {
+    if (modal.open) {
+      if (modal.action === 'delete_user') {
+        setDeleteFromPanel(true);
+      }
+      if (modal.action === 'delete_subscription') {
+        setForceDeleteActivePaid(false);
+      }
+    }
+  }, [modal.open, modal.action]);
+
+  // Focus trap + scroll lock + Escape close (only while not loading).
+  const dialogRef = useFocusTrap<HTMLDivElement>(modal.open, {
+    onEscape: modal.loading ? undefined : onClose,
+  });
+
+  // Count active paid subscriptions among selected ones
+  const activePaidCount = useMemo(() => {
+    if (modal.action !== 'delete_subscription') return 0;
+    const selectedSubIdSet = new Set(selectedSubscriptionIds);
+    let count = 0;
+    for (const user of users) {
+      for (const sub of user.subscriptions ?? []) {
+        if (selectedSubIdSet.has(sub.id) && sub.status === 'active' && !sub.is_trial) {
+          count++;
+        }
+      }
+    }
+    return count;
+  }, [modal.action, selectedSubscriptionIds, users]);
+
+  const isConfirmDisabled =
+    modal.loading ||
+    (modal.action === 'delete_subscription' && activePaidCount > 0 && !forceDeleteActivePaid);
+
+  if (!modal.open || !modal.action) return null;
+
+  const actionLabelKeys: Record<BulkActionType, string> = {
+    extend_subscription: 'admin.bulkActions.actions.extend',
+    add_days: 'admin.bulkActions.actions.extend',
+    cancel_subscription: 'admin.bulkActions.actions.cancel',
+    activate_subscription: 'admin.bulkActions.actions.activate',
+    change_tariff: 'admin.bulkActions.actions.changeTariff',
+    add_traffic: 'admin.bulkActions.actions.addTraffic',
+    add_balance: 'admin.bulkActions.actions.addBalance',
+    assign_promo_group: 'admin.bulkActions.actions.assignPromoGroup',
+    grant_subscription: 'admin.bulkActions.actions.grantSubscription',
+    set_devices: 'admin.bulkActions.actions.setDevices',
+    delete_subscription: 'admin.bulkActions.actions.deleteSubscription',
+    delete_user: 'admin.bulkActions.actions.deleteUser',
+  };
+
+  const handleSubmit = () => {
+    const params: BulkActionParams = {};
+    switch (modal.action) {
+      case 'extend_subscription':
+        params.days = days;
+        break;
+      case 'change_tariff':
+        params.tariff_id = tariffId;
+        break;
+      case 'add_traffic':
+        params.traffic_gb = trafficGb;
+        break;
+      case 'add_balance':
+        params.amount_kopeks = Math.round(balanceRub * 100);
+        break;
+      case 'assign_promo_group':
+        params.promo_group_id = promoGroupId;
+        break;
+      case 'grant_subscription':
+        params.tariff_id = grantTariffId;
+        params.days = grantDays;
+        break;
+      case 'set_devices':
+        params.device_limit = deviceLimit;
+        break;
+      case 'delete_subscription':
+        params.force_delete_active_paid = forceDeleteActivePaid;
+        break;
+      case 'delete_user':
+        params.delete_from_panel = deleteFromPanel;
+        break;
+    }
+    onExecute(params);
+  };
+
+  const handleBackdropClick = () => {
+    if (!modal.loading) {
+      onClose();
+    }
+  };
+
+  const renderInputs = () => {
+    switch (modal.action) {
+      case 'extend_subscription':
+        return (
+          <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={days}
+              onChange={(e) => setDays(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>
+        );
+      case 'change_tariff':
+        return (
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-dark-300">
+              {t('admin.bulkActions.params.tariff')}
+            </label>
+            <DropdownSelect
+              value={String(tariffId)}
+              options={tariffs.map((tt) => ({ value: String(tt.id), label: tt.name }))}
+              onChange={(v) => setTariffId(Number(v))}
+            />
+          </div>
+        );
+      case 'add_traffic':
+        return (
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-dark-300">
+              {t('admin.bulkActions.params.trafficGb')}
+            </label>
+            <input
+              type="number"
+              min={1}
+              max={10000}
+              value={trafficGb}
+              onChange={(e) => setTrafficGb(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>
+        );
+      case 'add_balance':
+        return (
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-dark-300">
+              {t('admin.bulkActions.params.balanceRub')}
+            </label>
+            <input
+              type="number"
+              min={1}
+              max={100000}
+              value={balanceRub}
+              onChange={(e) => setBalanceRub(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>
+        );
+      case 'assign_promo_group':
+        return (
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-dark-300">
+              {t('admin.bulkActions.params.promoGroup')}
+            </label>
+            <DropdownSelect
+              value={promoGroupId !== null ? String(promoGroupId) : 'null'}
+              options={[
+                { value: 'null', label: t('admin.bulkActions.params.removePromoGroup') },
+                ...promoGroups.map((pg) => ({ value: String(pg.id), label: pg.name })),
+              ]}
+              onChange={(v) => setPromoGroupId(v === 'null' ? null : Number(v))}
+            />
+          </div>
+        );
+      case 'set_devices':
+        return (
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-dark-300">
+              {t('admin.bulkActions.params.deviceLimit')}
+            </label>
+            <input
+              type="number"
+              min={1}
+              max={50}
+              value={deviceLimit}
+              onChange={(e) => setDeviceLimit(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>
+        );
+      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>
+            <div className="rounded-xl border border-warning-500/20 bg-warning-500/5 px-3 py-2.5">
+              <p className="text-xs text-warning-400">
+                {t('admin.bulkActions.grantSubscription.warning')}
+              </p>
+            </div>
+          </div>
+        );
+      case 'delete_subscription': {
+        const totalSelected = selectedSubscriptionIds.length;
+        return (
+          <div className="space-y-4">
+            <div className="rounded-xl border border-error-500/20 bg-error-500/5 px-3 py-2.5">
+              <p className="text-sm font-medium text-error-400">
+                {t('admin.bulkActions.deleteSubscription.warning')}
+              </p>
+              <p className="mt-1 text-xs text-error-300/70">
+                {t('admin.bulkActions.deleteSubscription.hint')}
+              </p>
+            </div>
+            {activePaidCount > 0 && (
+              <>
+                <div className="rounded-xl border border-warning-500/20 bg-warning-500/5 px-3 py-2.5">
+                  <p className="text-sm font-medium text-warning-400">
+                    {t('admin.bulkActions.deleteSubscription.activePaidWarning', {
+                      count: activePaidCount,
+                      total: totalSelected,
+                    })}
+                  </p>
+                </div>
+                <label className="inline-flex min-h-[44px] cursor-pointer items-center gap-2">
+                  <button
+                    onClick={() => setForceDeleteActivePaid((prev) => !prev)}
+                    className={cn(
+                      'flex h-6 w-6 items-center justify-center rounded-md border-2 transition-all duration-150',
+                      forceDeleteActivePaid
+                        ? 'border-error-500 bg-error-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]'
+                        : 'border-dark-500 bg-dark-700/60 hover:border-error-500/50 hover:bg-dark-600/60',
+                    )}
+                    aria-pressed={forceDeleteActivePaid}
+                  >
+                    {forceDeleteActivePaid && <CheckIcon />}
+                  </button>
+                  <span
+                    className={cn(
+                      'text-sm',
+                      forceDeleteActivePaid ? 'font-medium text-error-400' : 'text-dark-400',
+                    )}
+                  >
+                    {t('admin.bulkActions.deleteSubscription.forceDeleteConfirm')}
+                  </span>
+                </label>
+              </>
+            )}
+          </div>
+        );
+      }
+      case 'delete_user':
+        return (
+          <div className="space-y-4">
+            <div className="rounded-xl border border-error-500/20 bg-error-500/5 px-3 py-2.5">
+              <p className="text-sm font-medium text-error-400">
+                {t('admin.bulkActions.deleteUser.warning')}
+              </p>
+              <p className="mt-1 text-xs text-error-300/70">
+                {t('admin.bulkActions.deleteUser.hint')}
+              </p>
+            </div>
+            <label className="inline-flex min-h-[44px] cursor-pointer items-center gap-2">
+              <button
+                onClick={() => setDeleteFromPanel((prev) => !prev)}
+                className={cn(
+                  'flex h-6 w-6 items-center justify-center rounded-md border-2 transition-all duration-150',
+                  deleteFromPanel
+                    ? 'border-error-500 bg-error-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]'
+                    : 'border-dark-500 bg-dark-700/60 hover:border-error-500/50 hover:bg-dark-600/60',
+                )}
+                aria-pressed={deleteFromPanel}
+              >
+                {deleteFromPanel && <CheckIcon />}
+              </button>
+              <span
+                className={cn(
+                  'text-sm',
+                  deleteFromPanel ? 'font-medium text-error-400' : 'text-dark-400',
+                )}
+              >
+                {t('admin.bulkActions.deleteUser.deleteFromPanel')}
+              </span>
+            </label>
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center"
+      style={{
+        paddingTop: 'max(1rem, env(safe-area-inset-top))',
+        paddingBottom: 'max(1rem, env(safe-area-inset-bottom))',
+        paddingLeft: 'max(1rem, env(safe-area-inset-left))',
+        paddingRight: 'max(1rem, env(safe-area-inset-right))',
+      }}
+    >
+      <div
+        className="absolute inset-0 bg-dark-950/80 backdrop-blur-sm"
+        onClick={handleBackdropClick}
+      />
+
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="bulk-action-modal-title"
+        tabIndex={-1}
+        className="relative max-h-[calc(100dvh-2rem)] w-full max-w-md overflow-y-auto rounded-2xl border border-dark-700 bg-dark-900 p-6 shadow-2xl"
+      >
+        <div className="mb-5 flex items-center justify-between">
+          <h3 id="bulk-action-modal-title" className="text-lg font-bold text-dark-100">
+            {t(actionLabelKeys[modal.action])}
+          </h3>
+          {!modal.loading && (
+            <button
+              onClick={onClose}
+              className="min-h-[44px] min-w-[44px] rounded-lg p-2.5 text-dark-400 transition-colors hover:bg-dark-800 hover:text-dark-200"
+              aria-label={t('common.close')}
+            >
+              <XCloseIcon />
+            </button>
+          )}
+        </div>
+
+        {modal.loading && modal.progress ? (
+          <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 ? (
+          <div className="space-y-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">
+                {t('admin.bulkActions.complete')}
+              </div>
+              <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="text-center">
+                  <div className="text-2xl font-bold text-success-400">
+                    {modal.result.success_count}
+                  </div>
+                  <div className="text-xs text-dark-400">
+                    {t('admin.bulkActions.successCount', { count: modal.result.success_count })}
+                  </div>
+                </div>
+                {modal.result.error_count > 0 && (
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-error-400">
+                      {modal.result.error_count}
+                    </div>
+                    <div className="text-xs text-dark-400">
+                      {t('admin.bulkActions.errorCount', { count: modal.result.error_count })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <ErrorDetails result={modal.result} />
+
+            <button
+              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"
+            >
+              {t('common.close')}
+            </button>
+          </div>
+        ) : (
+          <>
+            <div className="mb-4 rounded-xl border border-accent-500/20 bg-accent-500/5 px-4 py-3">
+              <p className="text-sm text-dark-200">
+                {t('admin.bulkActions.selectedCount', { count: selectedCount })}
+              </p>
+            </div>
+
+            <div className="mb-6">{renderInputs()}</div>
+
+            <div className="flex gap-3">
+              <button
+                onClick={onClose}
+                disabled={modal.loading}
+                className="min-h-[44px] flex-1 rounded-xl border border-dark-700 bg-dark-800 px-4 py-2.5 text-sm font-medium text-dark-300 transition-colors hover:bg-dark-700 disabled:opacity-50"
+              >
+                {t('admin.bulkActions.cancel')}
+              </button>
+              <button
+                onClick={handleSubmit}
+                disabled={isConfirmDisabled}
+                className="flex min-h-[44px] 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"
+              >
+                {t('admin.bulkActions.confirm')}
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/src/components/admin/bulkActions/DropdownSelect.tsx b/src/components/admin/bulkActions/DropdownSelect.tsx
new file mode 100644
index 0000000..6b40139
--- /dev/null
+++ b/src/components/admin/bulkActions/DropdownSelect.tsx
@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils';
+
+// ──────────────────────────────────────────────────────────────────
+// DropdownSelect — small native-<select> wrapper used both by the
+// AdminBulkActions filter row and the ActionModal's tariff/promo
+// picker. Shared primitive so both consumers stay on the same
+// chrome (border, focus ring, chevron).
+// ──────────────────────────────────────────────────────────────────
+
+export const ChevronDownIcon = () => (
+  <svg className="h-4 w-4" 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>
+);
+
+export interface DropdownOption {
+  value: string;
+  label: string;
+}
+
+export interface DropdownSelectProps {
+  value: string;
+  options: DropdownOption[];
+  onChange: (v: string) => void;
+  className?: string;
+}
+
+export function DropdownSelect({ value, options, onChange, className }: DropdownSelectProps) {
+  return (
+    <div className={cn('relative', className)}>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full appearance-none rounded-xl border border-dark-700 bg-dark-800 px-3 py-2.5 pr-8 text-sm text-dark-100 outline-none transition-colors focus:border-accent-500/40 focus:shadow-[0_0_0_3px_rgba(var(--color-accent-500),0.08)]"
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+      <div className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-dark-500">
+        <ChevronDownIcon />
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/AdminBulkActions.tsx b/src/pages/AdminBulkActions.tsx
index a53500f..8ffb851 100644
--- a/src/pages/AdminBulkActions.tsx
+++ b/src/pages/AdminBulkActions.tsx
@@ -19,13 +19,16 @@ import {
   adminBulkActionsApi,
   type BulkActionType,
   type BulkActionParams,
-  type BulkActionResult,
-  type BulkProgressEvent,
 } from '../api/adminBulkActions';
 import { usePlatform } from '../platform/hooks/usePlatform';
 import { useCurrency } from '../hooks/useCurrency';
-import { useFocusTrap } from '@/hooks/useFocusTrap';
 import { cn } from '@/lib/utils';
+import { ActionModal, type ModalState } from '@/components/admin/bulkActions/ActionModal';
+import {
+  DropdownSelect,
+  ChevronDownIcon,
+  type DropdownOption,
+} from '@/components/admin/bulkActions/DropdownSelect';
 
 // ============ Types ============
 
@@ -38,21 +41,22 @@ interface ActionConfig {
   colorClass: string;
 }
 
-interface ProgressState {
-  current: number;
-  total: number;
-  successCount: number;
-  errorCount: number;
-  log: BulkProgressEvent[];
-}
+// (ProgressState + ModalState moved into <ActionModal>; ModalState is re-exported.)
 
-interface ModalState {
-  open: boolean;
-  action: BulkActionType | null;
-  loading: boolean;
-  result: BulkActionResult | null;
-  progress: ProgressState | null;
-}
+// Local CheckIcon — still used by MultiSelectDropdown checkboxes and
+// the user-table column defs (not the modal). Kept here rather than
+// re-exported from a shared icons module.
+const CheckIcon = () => (
+  <svg
+    className="h-3 w-3 text-white"
+    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>
+);
 
 // ============ Icons ============
 
@@ -100,30 +104,6 @@ const RefreshIcon = ({ className = 'w-5 h-5' }: { className?: string }) => (
   </svg>
 );
 
-const CheckIcon = () => (
-  <svg
-    className="h-3 w-3 text-white"
-    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>
-);
-
-const XCloseIcon = () => (
-  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-  </svg>
-);
-
-const ChevronDownIcon = () => (
-  <svg className="h-4 w-4" 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>
-);
-
 const ChevronExpandIcon = ({ expanded }: { expanded: boolean }) => (
   <svg
     className={cn('h-4 w-4 text-white transition-transform duration-200', expanded && 'rotate-180')}
@@ -387,43 +367,7 @@ function ProgressBar({ loading }: { loading: boolean }) {
   );
 }
 
-// ============ Dropdown Select ============
-
-interface DropdownOption {
-  value: string;
-  label: string;
-}
-
-function DropdownSelect({
-  value,
-  options,
-  onChange,
-  className,
-}: {
-  value: string;
-  options: DropdownOption[];
-  onChange: (v: string) => void;
-  className?: string;
-}) {
-  return (
-    <div className={cn('relative', className)}>
-      <select
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        className="w-full appearance-none rounded-xl border border-dark-700 bg-dark-800 px-3 py-2.5 pr-8 text-sm text-dark-100 outline-none transition-colors focus:border-accent-500/40 focus:shadow-[0_0_0_3px_rgba(var(--color-accent-500),0.08)]"
-      >
-        {options.map((o) => (
-          <option key={o.value} value={o.value}>
-            {o.label}
-          </option>
-        ))}
-      </select>
-      <div className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-dark-500">
-        <ChevronDownIcon />
-      </div>
-    </div>
-  );
-}
+// (DropdownSelect moved into ./bulkActions/DropdownSelect.tsx)
 
 // ============ Multi-Select Dropdown ============
 
@@ -581,675 +525,11 @@ function MultiSelectDropdown({
   );
 }
 
-// ============ Progress View ============
+// (ProgressView moved into <ActionModal>)
 
-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;
+// (ErrorDetails moved into <ActionModal>)
 
-  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.message || 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 ============
-
-interface ActionModalProps {
-  modal: ModalState;
-  selectedCount: number;
-  tariffs: TariffListItem[];
-  promoGroups: PromoGroup[];
-  users: UserListItem[];
-  selectedSubscriptionIds: number[];
-  onClose: () => void;
-  onExecute: (params: BulkActionParams) => void;
-}
-
-function ActionModal({
-  modal,
-  selectedCount,
-  tariffs,
-  promoGroups,
-  users,
-  selectedSubscriptionIds,
-  onClose,
-  onExecute,
-}: ActionModalProps) {
-  const { t } = useTranslation();
-  const [days, setDays] = useState(30);
-  const [tariffId, setTariffId] = useState<number>(tariffs[0]?.id ?? 0);
-  const [trafficGb, setTrafficGb] = useState(10);
-  const [balanceRub, setBalanceRub] = useState(100);
-  const [promoGroupId, setPromoGroupId] = useState<number | null>(promoGroups[0]?.id ?? null);
-  const [grantTariffId, setGrantTariffId] = useState<number>(tariffs[0]?.id ?? 0);
-  const [grantDays, setGrantDays] = useState(30);
-  const [deviceLimit, setDeviceLimit] = useState(1);
-  const [deleteFromPanel, setDeleteFromPanel] = useState(true);
-  const [forceDeleteActivePaid, setForceDeleteActivePaid] = useState(false);
-
-  useEffect(() => {
-    if (tariffs.length > 0 && tariffId === 0) {
-      setTariffId(tariffs[0].id);
-    }
-    if (tariffs.length > 0 && grantTariffId === 0) {
-      setGrantTariffId(tariffs[0].id);
-    }
-  }, [tariffs, tariffId, grantTariffId]);
-
-  useEffect(() => {
-    if (promoGroups.length > 0 && promoGroupId === null) {
-      setPromoGroupId(promoGroups[0].id);
-    }
-  }, [promoGroups, promoGroupId]);
-
-  // Reset modal-specific state when modal opens
-  useEffect(() => {
-    if (modal.open) {
-      if (modal.action === 'delete_user') {
-        setDeleteFromPanel(true);
-      }
-      if (modal.action === 'delete_subscription') {
-        setForceDeleteActivePaid(false);
-      }
-    }
-  }, [modal.open, modal.action]);
-
-  // Escape key handler — only when not loading
-  // Focus trap + scroll lock + Escape close (only while not loading).
-  const dialogRef = useFocusTrap<HTMLDivElement>(modal.open, {
-    onEscape: modal.loading ? undefined : onClose,
-  });
-
-  // Count active paid subscriptions among selected ones
-  const activePaidCount = useMemo(() => {
-    if (modal.action !== 'delete_subscription') return 0;
-    const selectedSubIdSet = new Set(selectedSubscriptionIds);
-    let count = 0;
-    for (const user of users) {
-      for (const sub of user.subscriptions ?? []) {
-        if (selectedSubIdSet.has(sub.id) && sub.status === 'active' && !sub.is_trial) {
-          count++;
-        }
-      }
-    }
-    return count;
-  }, [modal.action, selectedSubscriptionIds, users]);
-
-  const isConfirmDisabled =
-    modal.loading ||
-    (modal.action === 'delete_subscription' && activePaidCount > 0 && !forceDeleteActivePaid);
-
-  if (!modal.open || !modal.action) return null;
-
-  const actionLabelKeys: Record<BulkActionType, string> = {
-    extend_subscription: 'admin.bulkActions.actions.extend',
-    add_days: 'admin.bulkActions.actions.extend',
-    cancel_subscription: 'admin.bulkActions.actions.cancel',
-    activate_subscription: 'admin.bulkActions.actions.activate',
-    change_tariff: 'admin.bulkActions.actions.changeTariff',
-    add_traffic: 'admin.bulkActions.actions.addTraffic',
-    add_balance: 'admin.bulkActions.actions.addBalance',
-    assign_promo_group: 'admin.bulkActions.actions.assignPromoGroup',
-    grant_subscription: 'admin.bulkActions.actions.grantSubscription',
-    set_devices: 'admin.bulkActions.actions.setDevices',
-    delete_subscription: 'admin.bulkActions.actions.deleteSubscription',
-    delete_user: 'admin.bulkActions.actions.deleteUser',
-  };
-
-  const handleSubmit = () => {
-    const params: BulkActionParams = {};
-    switch (modal.action) {
-      case 'extend_subscription':
-        params.days = days;
-        break;
-      case 'change_tariff':
-        params.tariff_id = tariffId;
-        break;
-      case 'add_traffic':
-        params.traffic_gb = trafficGb;
-        break;
-      case 'add_balance':
-        params.amount_kopeks = Math.round(balanceRub * 100);
-        break;
-      case 'assign_promo_group':
-        params.promo_group_id = promoGroupId;
-        break;
-      case 'grant_subscription':
-        params.tariff_id = grantTariffId;
-        params.days = grantDays;
-        break;
-      case 'set_devices':
-        params.device_limit = deviceLimit;
-        break;
-      case 'delete_subscription':
-        params.force_delete_active_paid = forceDeleteActivePaid;
-        break;
-      case 'delete_user':
-        params.delete_from_panel = deleteFromPanel;
-        break;
-    }
-    onExecute(params);
-  };
-
-  const handleBackdropClick = () => {
-    if (!modal.loading) {
-      onClose();
-    }
-  };
-
-  const renderInputs = () => {
-    switch (modal.action) {
-      case 'extend_subscription':
-        return (
-          <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={days}
-              onChange={(e) => setDays(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>
-        );
-      case 'change_tariff':
-        return (
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-dark-300">
-              {t('admin.bulkActions.params.tariff')}
-            </label>
-            <DropdownSelect
-              value={String(tariffId)}
-              options={tariffs.map((tt) => ({ value: String(tt.id), label: tt.name }))}
-              onChange={(v) => setTariffId(Number(v))}
-            />
-          </div>
-        );
-      case 'add_traffic':
-        return (
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-dark-300">
-              {t('admin.bulkActions.params.trafficGb')}
-            </label>
-            <input
-              type="number"
-              min={1}
-              max={10000}
-              value={trafficGb}
-              onChange={(e) => setTrafficGb(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>
-        );
-      case 'add_balance':
-        return (
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-dark-300">
-              {t('admin.bulkActions.params.balanceRub')}
-            </label>
-            <input
-              type="number"
-              min={1}
-              max={100000}
-              value={balanceRub}
-              onChange={(e) => setBalanceRub(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>
-        );
-      case 'assign_promo_group':
-        return (
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-dark-300">
-              {t('admin.bulkActions.params.promoGroup')}
-            </label>
-            <DropdownSelect
-              value={promoGroupId !== null ? String(promoGroupId) : 'null'}
-              options={[
-                { value: 'null', label: t('admin.bulkActions.params.removePromoGroup') },
-                ...promoGroups.map((pg) => ({ value: String(pg.id), label: pg.name })),
-              ]}
-              onChange={(v) => setPromoGroupId(v === 'null' ? null : Number(v))}
-            />
-          </div>
-        );
-      case 'set_devices':
-        return (
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-dark-300">
-              {t('admin.bulkActions.params.deviceLimit')}
-            </label>
-            <input
-              type="number"
-              min={1}
-              max={50}
-              value={deviceLimit}
-              onChange={(e) => setDeviceLimit(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>
-        );
-      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-warning-500/20 bg-warning-500/5 px-3 py-2.5">
-              <p className="text-xs text-warning-400">
-                {t('admin.bulkActions.grantSubscription.warning')}
-              </p>
-            </div>
-          </div>
-        );
-      case 'delete_subscription': {
-        const totalSelected = selectedSubscriptionIds.length;
-
-        return (
-          <div className="space-y-4">
-            <div className="rounded-xl border border-error-500/20 bg-error-500/5 px-3 py-2.5">
-              <p className="text-sm font-medium text-error-400">
-                {t('admin.bulkActions.deleteSubscription.warning')}
-              </p>
-              <p className="mt-1 text-xs text-error-300/70">
-                {t('admin.bulkActions.deleteSubscription.hint')}
-              </p>
-            </div>
-            {activePaidCount > 0 && (
-              <>
-                <div className="rounded-xl border border-warning-500/20 bg-warning-500/5 px-3 py-2.5">
-                  <p className="text-sm font-medium text-warning-400">
-                    {t('admin.bulkActions.deleteSubscription.activePaidWarning', {
-                      count: activePaidCount,
-                      total: totalSelected,
-                    })}
-                  </p>
-                </div>
-                <label className="inline-flex min-h-[44px] cursor-pointer items-center gap-2">
-                  <button
-                    onClick={() => setForceDeleteActivePaid((prev) => !prev)}
-                    className={cn(
-                      'flex h-6 w-6 items-center justify-center rounded-md border-2 transition-all duration-150',
-                      forceDeleteActivePaid
-                        ? 'border-error-500 bg-error-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]'
-                        : 'border-dark-500 bg-dark-700/60 hover:border-error-500/50 hover:bg-dark-600/60',
-                    )}
-                    aria-pressed={forceDeleteActivePaid}
-                  >
-                    {forceDeleteActivePaid && <CheckIcon />}
-                  </button>
-                  <span
-                    className={cn(
-                      'text-sm',
-                      forceDeleteActivePaid ? 'font-medium text-error-400' : 'text-dark-400',
-                    )}
-                  >
-                    {t('admin.bulkActions.deleteSubscription.forceDeleteConfirm')}
-                  </span>
-                </label>
-              </>
-            )}
-          </div>
-        );
-      }
-      case 'delete_user':
-        return (
-          <div className="space-y-4">
-            <div className="rounded-xl border border-error-500/20 bg-error-500/5 px-3 py-2.5">
-              <p className="text-sm font-medium text-error-400">
-                {t('admin.bulkActions.deleteUser.warning')}
-              </p>
-              <p className="mt-1 text-xs text-error-300/70">
-                {t('admin.bulkActions.deleteUser.hint')}
-              </p>
-            </div>
-            <label className="inline-flex min-h-[44px] cursor-pointer items-center gap-2">
-              <button
-                onClick={() => setDeleteFromPanel((prev) => !prev)}
-                className={cn(
-                  'flex h-6 w-6 items-center justify-center rounded-md border-2 transition-all duration-150',
-                  deleteFromPanel
-                    ? 'border-error-500 bg-error-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]'
-                    : 'border-dark-500 bg-dark-700/60 hover:border-error-500/50 hover:bg-dark-600/60',
-                )}
-                aria-pressed={deleteFromPanel}
-              >
-                {deleteFromPanel && <CheckIcon />}
-              </button>
-              <span
-                className={cn(
-                  'text-sm',
-                  deleteFromPanel ? 'font-medium text-error-400' : 'text-dark-400',
-                )}
-              >
-                {t('admin.bulkActions.deleteUser.deleteFromPanel')}
-              </span>
-            </label>
-          </div>
-        );
-      default:
-        return null;
-    }
-  };
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-[9999] flex items-center justify-center"
-      style={{
-        paddingTop: 'max(1rem, env(safe-area-inset-top))',
-        paddingBottom: 'max(1rem, env(safe-area-inset-bottom))',
-        paddingLeft: 'max(1rem, env(safe-area-inset-left))',
-        paddingRight: 'max(1rem, env(safe-area-inset-right))',
-      }}
-    >
-      {/* Backdrop — no close on click during loading */}
-      <div
-        className="absolute inset-0 bg-dark-950/80 backdrop-blur-sm"
-        onClick={handleBackdropClick}
-      />
-
-      {/* Modal — role/aria-modal live on the focus-trapped element so AT
-          announces and Tab cycles correctly. */}
-      <div
-        ref={dialogRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="bulk-action-modal-title"
-        tabIndex={-1}
-        className="relative max-h-[calc(100dvh-2rem)] w-full max-w-md overflow-y-auto rounded-2xl border border-dark-700 bg-dark-900 p-6 shadow-2xl"
-      >
-        {/* Header */}
-        <div className="mb-5 flex items-center justify-between">
-          <h3 id="bulk-action-modal-title" className="text-lg font-bold text-dark-100">
-            {t(actionLabelKeys[modal.action])}
-          </h3>
-          {!modal.loading && (
-            <button
-              onClick={onClose}
-              className="min-h-[44px] min-w-[44px] rounded-lg p-2.5 text-dark-400 transition-colors hover:bg-dark-800 hover:text-dark-200"
-              aria-label={t('common.close')}
-            >
-              <XCloseIcon />
-            </button>
-          )}
-        </div>
-
-        {/* Progress view during execution */}
-        {modal.loading && modal.progress ? (
-          <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="mb-3 text-center text-sm font-semibold text-dark-100">
-                {t('admin.bulkActions.complete')}
-              </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="text-center">
-                  <div className="text-2xl font-bold text-success-400">
-                    {modal.result.success_count}
-                  </div>
-                  <div className="text-xs text-dark-400">
-                    {t('admin.bulkActions.successCount', { count: modal.result.success_count })}
-                  </div>
-                </div>
-                {modal.result.error_count > 0 && (
-                  <div className="text-center">
-                    <div className="text-2xl font-bold text-error-400">
-                      {modal.result.error_count}
-                    </div>
-                    <div className="text-xs text-dark-400">
-                      {t('admin.bulkActions.errorCount', { count: modal.result.error_count })}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Collapsible error details */}
-            <ErrorDetails result={modal.result} />
-
-            <button
-              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"
-            >
-              {t('common.close')}
-            </button>
-          </div>
-        ) : (
-          <>
-            {/* Affected count */}
-            <div className="mb-4 rounded-xl border border-accent-500/20 bg-accent-500/5 px-4 py-3">
-              <p className="text-sm text-dark-200">
-                {t('admin.bulkActions.selectedCount', { count: selectedCount })}
-              </p>
-            </div>
-
-            {/* Action-specific inputs */}
-            <div className="mb-6">{renderInputs()}</div>
-
-            {/* Buttons */}
-            <div className="flex gap-3">
-              <button
-                onClick={onClose}
-                disabled={modal.loading}
-                className="min-h-[44px] flex-1 rounded-xl border border-dark-700 bg-dark-800 px-4 py-2.5 text-sm font-medium text-dark-300 transition-colors hover:bg-dark-700 disabled:opacity-50"
-              >
-                {t('admin.bulkActions.cancel')}
-              </button>
-              <button
-                onClick={handleSubmit}
-                disabled={isConfirmDisabled}
-                className="flex min-h-[44px] 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"
-              >
-                {t('admin.bulkActions.confirm')}
-              </button>
-            </div>
-          </>
-        )}
-      </div>
-    </div>,
-    document.body,
-  );
-}
+// (ActionModal moved into ./bulkActions/ActionModal.tsx)
 
 // ============ Floating Action Bar ============