feat(BulkActions): integrate FloatingBulkActionsBar for improved bulk action handling in ASNs and IPRanges managers

frontend/src/ASNsNewManager.jsx

@@ -874,6 +874,14 @@ function ASNsNewManager() {
         </div>
       </div>
 
+      <BulkActionsBar
+        selectedCount={selectedItems.size}
+        totalCount={paginatedItems.length}
+        onDeselectAll={deselectAll}
+        onDelete={handleBulkDelete}
+        onExport={handleBulkExport}
+      />
+
       <ConfirmDialog
         open={showDeleteModal}
         title={'Удалить ASN?'}

frontend/src/IPRangesManager.jsx

@@ -1088,6 +1088,14 @@ function IPRangesManager() {
         </div>
       </div>
 
+      <BulkActionsBar
+        selectedCount={selectedItems.size}
+        totalCount={paginatedItems.length}
+        onDeselectAll={deselectAll}
+        onDelete={handleBulkDelete}
+        onExport={handleBulkExport}
+      />
+
       <ConfirmDialog
         open={showDeleteModal}
         title={'Удалить IP-диапазон?'}

frontend/src/components/BulkActionsBar.jsx

@@ -1,10 +1,12 @@
-import { IconTrash, IconEdit, IconDownload, IconX, IconChecks } from '@tabler/icons-react'
+import { IconTrash, IconEdit, IconDownload } from '@tabler/icons-react';
+import FloatingBulkActionsBar from './FloatingBulkActionsBar.jsx';
 
 /**
- * Панель массовых действий для таблиц
- * Показывается когда выбраны элементы
+ * Панель массовых действий для таблиц (всплывающая, как на скрине).
+ * Показывается когда выбраны элементы. Использует единый дизайн тёмной плавающей панели.
+ * «Выбрать все» остаётся в тулбаре/шапке таблицы (чекбокс).
  */
-function BulkActionsBar({ 
+function BulkActionsBar({
   selectedCount = 0,
   totalCount = 0,
   onSelectAll = () => {},
@@ -12,109 +14,60 @@ function BulkActionsBar({
   onDelete = null,
   onEdit = null,
   onExport = null,
-  customActions = [], // [{icon: Icon, label, onClick, variant}]
-  className = ''
+  customActions = [],
+  className = '',
 }) {
-  if (selectedCount === 0) return null
+  const actions = [];
 
-  const allSelected = selectedCount === totalCount
+  if (onExport) {
+    actions.push({
+      type: 'button',
+      label: 'Экспорт',
+      icon: IconDownload,
+      onClick: onExport,
+      title: 'Экспортировать выбранное',
+    });
+  }
+
+  if (onEdit) {
+    actions.push({
+      type: 'button',
+      label: 'Изменить',
+      icon: IconEdit,
+      onClick: onEdit,
+      title: 'Редактировать выбранное',
+    });
+  }
+
+  customActions.forEach((action) => {
+    actions.push({
+      type: 'button',
+      label: action.label,
+      icon: action.icon,
+      onClick: action.onClick,
+      variant: action.variant === 'btn-outline-danger' || action.variant === 'danger' ? 'danger' : undefined,
+      title: action.title,
+    });
+  });
+
+  if (onDelete) {
+    actions.push({
+      type: 'button',
+      label: 'Удалить',
+      icon: IconTrash,
+      onClick: onDelete,
+      variant: 'danger',
+      title: 'Удалить выбранное',
+    });
+  }
 
   return (
-    <div className={`card mb-3 ${className}`} style={{ 
-      position: 'sticky', 
-      top: '10px', 
-      zIndex: 10,
-      boxShadow: '0 0.5rem 1rem rgba(0,0,0,.15)'
-    }}>
-      <div className="card-body py-2 px-3">
-        <div className="d-flex align-items-center justify-content-between">
-          {/* Левая часть: информация о выборе */}
-          <div className="d-flex align-items-center gap-3">
-            <div className="d-flex align-items-center">
-              <IconChecks size={20} className="text-blue me-2" />
-              <span className="fw-bold">
-                Выбрано: <span className="text-blue">{selectedCount}</span>
-              </span>
-            </div>
-
-            {/* Кнопка выбрать все / снять выбор */}
-            {!allSelected && totalCount > selectedCount && (
-              <button
-                className="btn btn-sm btn-outline-primary"
-                onClick={onSelectAll}
-              >
-                Выбрать все ({totalCount})
-              </button>
-            )}
-
-            <button
-              className="btn btn-sm btn-ghost-secondary"
-              onClick={onDeselectAll}
-            >
-              <IconX size={16} className="me-1" />
-              Снять выбор
-            </button>
-          </div>
-
-          {/* Правая часть: действия */}
-          <div className="d-flex align-items-center gap-2">
-            {/* Экспорт */}
-            {onExport && (
-              <button
-                className="btn btn-sm btn-outline-primary"
-                onClick={onExport}
-                title="Экспортировать выбранное"
-              >
-                <IconDownload size={16} className="me-1" />
-                Экспорт
-              </button>
-            )}
-
-            {/* Редактирование */}
-            {onEdit && (
-              <button
-                className="btn btn-sm btn-outline-primary"
-                onClick={onEdit}
-                title="Редактировать выбранное"
-              >
-                <IconEdit size={16} className="me-1" />
-                Изменить
-              </button>
-            )}
-
-            {/* Пользовательские действия */}
-            {customActions.map((action, idx) => {
-              const Icon = action.icon
-              return (
-                <button
-                  key={idx}
-                  className={`btn btn-sm ${action.variant || 'btn-outline-primary'}`}
-                  onClick={action.onClick}
-                  title={action.title}
-                >
-                  {Icon && <Icon size={16} className="me-1" />}
-                  {action.label}
-                </button>
-              )
-            })}
-
-            {/* Удаление */}
-            {onDelete && (
-              <button
-                className="btn btn-sm btn-outline-danger"
-                onClick={onDelete}
-                title="Удалить выбранное"
-              >
-                <IconTrash size={16} className="me-1" />
-                Удалить ({selectedCount})
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
+    <FloatingBulkActionsBar
+      selectedCount={selectedCount}
+      onClearSelection={onDeselectAll}
+      actions={actions}
+    />
+  );
 }
 
-export default BulkActionsBar
-
+export default BulkActionsBar;

frontend/src/components/FloatingBulkActionsBar.jsx

@@ -0,0 +1,185 @@
+import { IconX } from '@tabler/icons-react';
+
+/**
+ * Всплывающая панель массовых действий в стиле со скрина:
+ * тёмная панель по центру снизу, счётчик "N выбрано", кнопки действий, закрыть.
+ * Используется на страницах типа Manager при выборе элементов.
+ *
+ * @param {number} selectedCount - количество выбранных элементов
+ * @param {() => void} onClearSelection - снять выделение (кнопка X)
+ * @param {Array<{ type: 'button', label: string, icon: React.ComponentType, onClick: () => void, variant?: 'danger', title?: string } | { type: 'dropdown', label: string, icon: React.ComponentType, items: Array<{ label: string, onClick: () => void }>, title?: string }>} actions - кнопки и выпадающие меню
+ */
+function FloatingBulkActionsBar({ selectedCount = 0, onClearSelection, actions = [] }) {
+  if (selectedCount === 0) return null;
+
+  return (
+    <div
+      className="floating-bulk-actions-bar"
+      style={{
+        position: 'fixed',
+        bottom: '20px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 1050,
+        maxWidth: '720px',
+        width: '100%',
+        padding: '0 12px',
+        boxSizing: 'border-box',
+      }}
+    >
+      <div
+        className="d-flex align-items-center justify-content-between gap-3 rounded-3 shadow-lg px-3 py-2"
+        style={{
+          animation: 'floatingBulkSlideUp 0.2s ease',
+          background: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
+          border: '1px solid rgba(255,255,255,0.1)',
+        }}
+      >
+        {/* Счётчик выбранных */}
+        <div className="d-flex align-items-center gap-2">
+          <span
+            className="rounded"
+            style={{
+              background: '#3b82f6',
+              color: '#fff',
+              padding: '6px 10px',
+              fontWeight: 600,
+              fontSize: '0.95rem',
+            }}
+          >
+            {selectedCount}
+          </span>
+          <span style={{ color: '#e2e8f0', fontWeight: 500 }}>выбрано</span>
+        </div>
+
+        {/* Действия */}
+        <div className="d-flex align-items-center gap-2">
+          {actions.map((action, idx) => {
+            if (action.type === 'dropdown') {
+              const Icon = action.icon;
+              return (
+                <div key={idx} className="dropdown">
+                  <button
+                    type="button"
+                    className="floating-bulk-btn dropdown-toggle"
+                    data-bs-toggle="dropdown"
+                    title={action.title}
+                  >
+                    {Icon && <Icon size={15} />}
+                    <span>{action.label}</span>
+                  </button>
+                  <div className="dropdown-menu dropdown-menu-dark">
+                    {action.items?.map((item, i) => (
+                      <button
+                        key={i}
+                        type="button"
+                        className="dropdown-item"
+                        onClick={() => item.onClick()}
+                      >
+                        {item.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              );
+            }
+            const Icon = action.icon;
+            const isDanger = action.variant === 'danger';
+            return (
+              <button
+                key={idx}
+                type="button"
+                className={`floating-bulk-btn ${isDanger ? 'floating-bulk-btn-danger' : ''}`}
+                onClick={action.onClick}
+                title={action.title}
+              >
+                {Icon && <Icon size={15} />}
+                <span>{action.label}</span>
+              </button>
+            );
+          })}
+
+          {actions.length > 0 && (
+            <div
+              style={{
+                width: 1,
+                height: 20,
+                background: 'rgba(255,255,255,0.2)',
+                margin: '0 4px',
+              }}
+            />
+          )}
+
+          <button
+            type="button"
+            className="floating-bulk-btn-close"
+            onClick={onClearSelection}
+            title="Снять выделение"
+            aria-label="Снять выделение"
+          >
+            <IconX size={16} />
+          </button>
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes floatingBulkSlideUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .floating-bulk-btn {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 6px 12px;
+          border: none;
+          border-radius: 6px;
+          background: rgba(255, 255, 255, 0.1);
+          color: #e2e8f0;
+          font-size: 13px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.15s ease;
+        }
+        .floating-bulk-btn:hover {
+          background: rgba(255, 255, 255, 0.2);
+          color: #fff;
+        }
+        .floating-bulk-btn-danger {
+          background: rgba(239, 68, 68, 0.2);
+          color: #fca5a5;
+        }
+        .floating-bulk-btn-danger:hover {
+          background: rgba(239, 68, 68, 0.4);
+          color: #fef2f2;
+        }
+        .floating-bulk-btn-close {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 28px;
+          height: 28px;
+          padding: 0;
+          border: none;
+          border-radius: 6px;
+          background: rgba(255, 255, 255, 0.05);
+          color: #94a3b8;
+          cursor: pointer;
+          transition: all 0.15s ease;
+        }
+        .floating-bulk-btn-close:hover {
+          background: rgba(255, 255, 255, 0.15);
+          color: #fff;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default FloatingBulkActionsBar;

frontend/src/components/server/ServerBulkActions.jsx

@@ -1,12 +1,11 @@
 import {
   IconTrash,
-  IconEdit,
   IconCopy,
   IconX,
   IconNetwork,
   IconDownload,
-  IconCheck
 } from '@tabler/icons-react';
+import FloatingBulkActionsBar from '../FloatingBulkActionsBar.jsx';
 
 export default function ServerBulkActions({
   selectedCount,
@@ -15,169 +14,48 @@ export default function ServerBulkActions({
   onBulkChangeTunnel,
   onBulkExport,
   onBulkCopyLinks,
-  tunnelTypes = ['GRE', 'IPSec', 'WireGuard', 'OpenVPN']
+  tunnelTypes = ['GRE', 'IPSec', 'WireGuard', 'OpenVPN'],
 }) {
-  if (selectedCount === 0) return null;
+  const actions = [
+    {
+      type: 'dropdown',
+      label: 'Туннель',
+      icon: IconNetwork,
+      title: 'Сменить тип туннеля',
+      items: tunnelTypes.map((tunnel) => ({
+        label: tunnel,
+        onClick: () => onBulkChangeTunnel(tunnel),
+      })),
+    },
+    {
+      type: 'button',
+      label: 'Ссылки',
+      icon: IconCopy,
+      onClick: onBulkCopyLinks,
+      title: 'Скопировать ссылки',
+    },
+    {
+      type: 'button',
+      label: 'Экспорт',
+      icon: IconDownload,
+      onClick: onBulkExport,
+      title: 'Экспорт',
+    },
+    {
+      type: 'button',
+      label: 'Удалить',
+      icon: IconTrash,
+      onClick: onBulkDelete,
+      variant: 'danger',
+      title: 'Удалить',
+    },
+  ];
 
   return (
-    <div
-      className="server-bulk-actions position-sticky rounded-3 shadow-lg mx-auto px-3 py-2"
-      style={{
-        bottom: '20px',
-        zIndex: 1050,
-        maxWidth: '720px',
-        animation: 'slideUp 0.2s ease',
-        background: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
-        border: '1px solid rgba(255,255,255,0.1)'
-      }}
-    >
-      <div className="d-flex align-items-center justify-content-between gap-3">
-        {/* Счётчик выбранных */}
-        <div className="d-flex align-items-center gap-2">
-          <span 
-            className="badge fs-6"
-            style={{ 
-              background: '#3b82f6',
-              color: '#fff',
-              padding: '6px 10px'
-            }}
-          >
-            {selectedCount}
-          </span>
-          <span style={{ color: '#e2e8f0', fontWeight: 500 }}>выбрано</span>
-        </div>
-
-        {/* Действия */}
-        <div className="d-flex align-items-center gap-2">
-          {/* Смена типа туннеля */}
-          <div className="dropdown">
-            <button
-              className="bulk-btn dropdown-toggle"
-              type="button"
-              data-bs-toggle="dropdown"
-            >
-              <IconNetwork size={15} />
-              <span>Туннель</span>
-            </button>
-            <div className="dropdown-menu dropdown-menu-dark">
-              <div className="dropdown-header">Сменить тип туннеля</div>
-              {tunnelTypes.map(tunnel => (
-                <button
-                  key={tunnel}
-                  className="dropdown-item"
-                  onClick={() => onBulkChangeTunnel(tunnel)}
-                >
-                  {tunnel}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Копировать ссылки */}
-          <button
-            className="bulk-btn"
-            onClick={onBulkCopyLinks}
-            title="Скопировать ссылки"
-          >
-            <IconCopy size={15} />
-            <span>Ссылки</span>
-          </button>
-
-          {/* Экспорт */}
-          <button
-            className="bulk-btn"
-            onClick={onBulkExport}
-            title="Экспорт"
-          >
-            <IconDownload size={15} />
-            <span>Экспорт</span>
-          </button>
-
-          <div style={{ width: '1px', height: '20px', background: 'rgba(255,255,255,0.2)', margin: '0 4px' }} />
-
-          {/* Удалить */}
-          <button
-            className="bulk-btn bulk-btn-danger"
-            onClick={onBulkDelete}
-            title="Удалить"
-          >
-            <IconTrash size={15} />
-            <span>Удалить</span>
-          </button>
-
-          {/* Отменить выделение */}
-          <button
-            className="bulk-btn-close"
-            onClick={onClearSelection}
-            title="Снять выделение"
-          >
-            <IconX size={16} />
-          </button>
-        </div>
-      </div>
-
-      <style>{`
-        @keyframes slideUp {
-          from {
-            opacity: 0;
-            transform: translateY(20px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-        
-        .bulk-btn {
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          padding: 6px 12px;
-          border: none;
-          border-radius: 6px;
-          background: rgba(255, 255, 255, 0.1);
-          color: #e2e8f0;
-          font-size: 13px;
-          font-weight: 500;
-          cursor: pointer;
-          transition: all 0.15s ease;
-        }
-        
-        .bulk-btn:hover {
-          background: rgba(255, 255, 255, 0.2);
-          color: #fff;
-        }
-        
-        .bulk-btn-danger {
-          background: rgba(239, 68, 68, 0.2);
-          color: #fca5a5;
-        }
-        
-        .bulk-btn-danger:hover {
-          background: rgba(239, 68, 68, 0.4);
-          color: #fef2f2;
-        }
-        
-        .bulk-btn-close {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 28px;
-          height: 28px;
-          padding: 0;
-          border: none;
-          border-radius: 6px;
-          background: rgba(255, 255, 255, 0.05);
-          color: #94a3b8;
-          cursor: pointer;
-          transition: all 0.15s ease;
-        }
-        
-        .bulk-btn-close:hover {
-          background: rgba(255, 255, 255, 0.15);
-          color: #fff;
-        }
-      `}</style>
-    </div>
+    <FloatingBulkActionsBar
+      selectedCount={selectedCount}
+      onClearSelection={onClearSelection}
+      actions={actions}
+    />
   );
 }