From cdf42aa589333d615bc328cc27d38d4389b47302 Mon Sep 17 00:00:00 2001
From: Denis Shatskiy <admin@shts.su>
Date: Tue, 12 Aug 2025 13:29:19 +0700
Subject: [PATCH] feat: Introduce cursor utility class for pointer interactions
 and refactor action buttons into PageHeaderActions component across multiple
 managers for improved UI consistency

---
 frontend/src/ASNsNewManager.jsx               | 94 +++++--------------
 frontend/src/App.css                          |  5 +
 frontend/src/BillingManager.jsx               | 35 ++-----
 frontend/src/CommunitiesManager.jsx           |  4 +-
 frontend/src/DataManager.jsx                  |  4 +-
 frontend/src/DomainsNewManager.jsx            | 94 +++++--------------
 frontend/src/FilterManager.jsx                |  6 +-
 frontend/src/IPRangesManager.jsx              | 94 +++++--------------
 frontend/src/ServerManager.jsx                | 12 +--
 frontend/src/components/PageHeaderActions.jsx | 74 +++++++++++++++
 10 files changed, 162 insertions(+), 260 deletions(-)
 create mode 100644 frontend/src/components/PageHeaderActions.jsx

diff --git a/frontend/src/ASNsNewManager.jsx b/frontend/src/ASNsNewManager.jsx
index d239e29..ca67e0c 100644
--- a/frontend/src/ASNsNewManager.jsx
+++ b/frontend/src/ASNsNewManager.jsx
@@ -15,11 +15,13 @@ import {
   IconDeviceFloppy,
   IconHash,
   IconClock,
-  IconFileText
+  IconFileText,
+  IconEye
 } from '@tabler/icons-react';
 import LockBanner from './components/LockBanner.jsx';
 import TableSkeleton from './components/TableSkeleton.jsx';
 import S3MetaBar from './components/S3MetaBar.jsx';
+import PageHeaderActions from './components/PageHeaderActions.jsx';
 import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
 import HistoryModal from './components/HistoryModal.jsx';
 
@@ -393,9 +395,21 @@ function ASNsNewManager() {
             <div className="page-pretitle">Главная / Данные / ASNs</div>
           </div>
           <div className="col-auto ms-auto d-print-none">
-            <div className="btn-list">
-              <button className="btn btn-outline-secondary" onClick={() => setHistoryOpen(true)}>История</button>
-            </div>
+            <PageHeaderActions
+              loading={loading}
+              onPreview={handlePreviewDiff}
+              disablePreview={loading || items.length === 0}
+              onRefresh={fetchItems}
+              disableRefresh={loading}
+              onImport={handleImport}
+              onExport={handleExport}
+              disableExport={items.length === 0}
+              onClear={clearInvalid}
+              disableClear={items.length === 0}
+              onSave={handleSaveChanges}
+              disableSave={loading}
+              onHistory={() => setHistoryOpen(true)}
+            />
           </div>
         </div>
       </div>
@@ -467,73 +481,7 @@ function ASNsNewManager() {
             </div>
           </div>
 
-          {/* Actions Card */}
-          <div className="card card-md">
-            <div className="card-header">
-              <h3 className="card-title">
-                <IconDatabase className="icon me-2" />
-                Действия
-              </h3>
-            </div>
-            <div className="card-body">
-              <div className="d-grid gap-2">
-                <button 
-                  className="btn btn-primary"
-                  onClick={handleSaveChanges}
-                  disabled={loading}
-                >
-                  {loading ? (
-                    <>
-                      <span className="spinner-border spinner-border-sm me-2" role="status"></span>
-                      Сохранение...
-                    </>
-                  ) : (
-                    <>
-                      <IconDeviceFloppy className="icon me-2" />
-                      Сохранить в S3
-                    </>
-                  )}
-                </button>
-                <button 
-                  className="btn btn-outline-secondary"
-                  onClick={fetchItems}
-                  disabled={loading}
-                >
-                  <IconRefresh className="icon me-2" />
-                  Обновить
-                </button>
-                <button 
-                  className="btn btn-outline-primary"
-                  onClick={handleImport}
-                >
-                  <IconUpload className="icon me-2" />
-                  Импорт из буфера
-                </button>
-                <button 
-                  className="btn btn-outline-primary"
-                  onClick={handleExport}
-                  disabled={items.length === 0}
-                >
-                  <IconDownload className="icon me-2" />
-                  Экспорт CSV
-                </button>
-                <button 
-                  className="btn btn-outline-secondary"
-                  onClick={handlePreviewDiff}
-                  disabled={loading}
-                >
-                  Предпросмотр изменений
-                </button>
-                <button 
-                  className="btn btn-outline-secondary"
-                  onClick={clearInvalid}
-                  disabled={items.length === 0}
-                >
-                  Очистить пустые/невалидные
-                </button>
-              </div>
-            </div>
-          </div>
+          {/* Карточка действий больше не нужна — действия перенесены в page-header */}
         </div>
 
         <div className="col-lg-9">
@@ -572,7 +520,7 @@ function ASNsNewManager() {
               <table className="table card-table table-vcenter table-nowrap mb-0">
                 <thead>
                   <tr>
-                    <th style={{cursor:'pointer'}} onClick={() => handleSort('asn')}>
+                    <th className="cursor-pointer" onClick={() => handleSort('asn')}>
                       Номер AS
                       {sortField === 'asn' && (
                         <span className="ms-1">
@@ -580,7 +528,7 @@ function ASNsNewManager() {
                         </span>
                       )}
                     </th>
-                    <th style={{cursor:'pointer'}} onClick={() => handleSort('community')}>
+                    <th className="cursor-pointer" onClick={() => handleSort('community')}>
                       Community
                       {sortField === 'community' && (
                         <span className="ms-1">
diff --git a/frontend/src/App.css b/frontend/src/App.css
index d892a78..6dd7f06 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -219,6 +219,11 @@
   }
 }
 
+/* Utility: pointer cursor */
+.cursor-pointer {
+  cursor: pointer;
+}
+
 /* Custom responsive adjustments */
 @media (max-width: 992px) {
   .page-wrapper {
diff --git a/frontend/src/BillingManager.jsx b/frontend/src/BillingManager.jsx
index ebcb585..f9fb7ae 100644
--- a/frontend/src/BillingManager.jsx
+++ b/frontend/src/BillingManager.jsx
@@ -683,64 +683,43 @@ function BillingManager() {
             <table className="table card-table table-vcenter table-nowrap mb-0">
               <thead>
                 <tr>
-                  <th 
-                    className="cursor-pointer"
-                    onClick={() => handleSort('hostName')}
-                  >
+                  <th className="cursor-pointer" onClick={() => handleSort('hostName')}>
                     Имя хостера
                     {sortField === 'hostName' && (
                       <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
                     )}
                   </th>
-                  <th 
-                    className="cursor-pointer"
-                    onClick={() => handleSort('purpose')}
-                  >
+                  <th className="cursor-pointer" onClick={() => handleSort('purpose')}>
                     Назначение
                     {sortField === 'purpose' && (
                       <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
                     )}
                   </th>
-                  <th 
-                    className="cursor-pointer"
-                    onClick={() => handleSort('country')}
-                  >
+                  <th className="cursor-pointer" onClick={() => handleSort('country')}>
                     Страна
                     {sortField === 'country' && (
                       <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
                     )}
                   </th>
-                  <th 
-                    className="cursor-pointer"
-                    onClick={() => handleSort('provider')}
-                  >
+                  <th className="cursor-pointer" onClick={() => handleSort('provider')}>
                     Провайдер
                     {sortField === 'provider' && (
                       <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
                     )}
                   </th>
-                  <th 
-                    className="cursor-pointer"
-                    onClick={() => handleSort('monthlyCost')}
-                  >
+                  <th className="cursor-pointer" onClick={() => handleSort('monthlyCost')}>
                     Месячная стоимость
                     {sortField === 'monthlyCost' && (
                       <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
                     )}
                   </th>
-                  <th 
-                    className="cursor-pointer"
-                    onClick={() => handleSort('nextPaymentDate')}
-                  >
+                  <th className="cursor-pointer" onClick={() => handleSort('nextPaymentDate')}>
                     Следующий платеж
                     {sortField === 'nextPaymentDate' && (
                       <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
                     )}
                   </th>
-                  <th 
-                    className="cursor-pointer"
-                    onClick={() => handleSort('status')}
-                  >
+                  <th className="cursor-pointer" onClick={() => handleSort('status')}>
                     Статус
                     {sortField === 'status' && (
                       <span className="ms-1">{sortOrder === 'asc' ? '↑' : '↓'}</span>
diff --git a/frontend/src/CommunitiesManager.jsx b/frontend/src/CommunitiesManager.jsx
index 2c93ce5..facda58 100644
--- a/frontend/src/CommunitiesManager.jsx
+++ b/frontend/src/CommunitiesManager.jsx
@@ -260,8 +260,8 @@ function CommunitiesManager() {
               <table className="table card-table table-vcenter table-nowrap mb-0">
                 <thead>
                   <tr>
-                    <th style={{cursor:'pointer'}} onClick={()=>changeSort('value')}>Value {sortField==='value' && <span className="ms-1">{sortOrder==='asc'?'▲':'▼'}</span>}</th>
-                    <th style={{cursor:'pointer'}} onClick={()=>changeSort('name')}>Название {sortField==='name' && <span className="ms-1">{sortOrder==='asc'?'▲':'▼'}</span>}</th>
+                    <th className="cursor-pointer" onClick={()=>changeSort('value')}>Value {sortField==='value' && <span className="ms-1">{sortOrder==='asc'?'▲':'▼'}</span>}</th>
+                    <th className="cursor-pointer" onClick={()=>changeSort('name')}>Название {sortField==='name' && <span className="ms-1">{sortOrder==='asc'?'▲':'▼'}</span>}</th>
                     <th>Описание</th>
                     <th>Теги</th>
                     <th>Gateway</th>
diff --git a/frontend/src/DataManager.jsx b/frontend/src/DataManager.jsx
index 8ba163b..a5a7c63 100644
--- a/frontend/src/DataManager.jsx
+++ b/frontend/src/DataManager.jsx
@@ -364,7 +364,7 @@ function DataManager({ entityName, entityKey, placeholder }) {
               <table className="table card-table table-vcenter table-nowrap mb-0">
                 <thead>
                   <tr>
-                    <th style={{cursor:'pointer'}} onClick={() => handleSort('domain')}>
+                    <th className="cursor-pointer" onClick={() => handleSort('domain')}>
                       Домен
                       {sortField === 'domain' && (
                         <span className="ms-1">
@@ -372,7 +372,7 @@ function DataManager({ entityName, entityKey, placeholder }) {
                         </span>
                       )}
                     </th>
-                    <th style={{cursor:'pointer'}} onClick={() => handleSort('type')}>
+                    <th className="cursor-pointer" onClick={() => handleSort('type')}>
                       Шлюз
                       {sortField === 'type' && (
                         <span className="ms-1">
diff --git a/frontend/src/DomainsNewManager.jsx b/frontend/src/DomainsNewManager.jsx
index f0acdf5..ea9c37c 100644
--- a/frontend/src/DomainsNewManager.jsx
+++ b/frontend/src/DomainsNewManager.jsx
@@ -15,11 +15,13 @@ import {
   IconDeviceFloppy,
   IconHash,
   IconClock,
-  IconFileText
+  IconFileText,
+  IconEye
 } from '@tabler/icons-react';
 import LockBanner from './components/LockBanner.jsx';
 import TableSkeleton from './components/TableSkeleton.jsx';
 import S3MetaBar from './components/S3MetaBar.jsx';
+import PageHeaderActions from './components/PageHeaderActions.jsx';
 import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
 import HistoryModal from './components/HistoryModal.jsx';
 
@@ -400,9 +402,21 @@ function DomainsNewManager() {
             <div className="page-pretitle">Главная / Данные / Домены</div>
           </div>
           <div className="col-auto ms-auto d-print-none">
-            <div className="btn-list">
-              <button className="btn btn-outline-secondary" onClick={() => setHistoryOpen(true)}>История</button>
-            </div>
+            <PageHeaderActions
+              loading={loading}
+              onPreview={handlePreviewDiff}
+              disablePreview={loading || items.length === 0}
+              onRefresh={fetchItems}
+              disableRefresh={loading}
+              onImport={handleImport}
+              onExport={handleExport}
+              disableExport={items.length === 0}
+              onClear={clearInvalid}
+              disableClear={items.length === 0}
+              onSave={handleSaveChanges}
+              disableSave={loading}
+              onHistory={() => setHistoryOpen(true)}
+            />
           </div>
         </div>
       </div>
@@ -465,73 +479,7 @@ function DomainsNewManager() {
             </div>
           </div>
 
-          {/* Actions Card */}
-          <div className="card card-md">
-            <div className="card-header">
-              <h3 className="card-title">
-                <IconDatabase className="icon me-2" />
-                Действия
-              </h3>
-            </div>
-          <div className="card-body">
-              <div className="d-grid gap-2">
-                <button 
-                  className="btn btn-primary"
-                  onClick={handleSaveChanges}
-                  disabled={loading}
-                >
-                  {loading ? (
-                    <>
-                      <span className="spinner-border spinner-border-sm me-2" role="status"></span>
-                      Сохранение...
-                    </>
-                  ) : (
-                    <>
-                      <IconDeviceFloppy className="icon me-2" />
-                      Сохранить в S3
-                    </>
-                  )}
-                </button>
-                <button 
-                  className="btn btn-outline-secondary"
-                  onClick={handlePreviewDiff}
-                  disabled={loading}
-                >
-                  Предпросмотр изменений
-                </button>
-                <button 
-                  className="btn btn-outline-secondary"
-                  onClick={fetchItems}
-                  disabled={loading}
-                >
-                  <IconRefresh className="icon me-2" />
-                  Обновить
-                </button>
-                <button 
-                  className="btn btn-outline-primary"
-                  onClick={handleImport}
-                >
-                  <IconUpload className="icon me-2" />
-                  Импорт из буфера
-                </button>
-                <button 
-                  className="btn btn-outline-primary"
-                  onClick={handleExport}
-                  disabled={items.length === 0}
-                >
-                  <IconDownload className="icon me-2" />
-                  Экспорт CSV
-                </button>
-                <button 
-                  className="btn btn-outline-secondary"
-                  onClick={clearInvalid}
-                  disabled={items.length === 0}
-                >
-                  Очистить пустые/невалидные
-                </button>
-              </div>
-            </div>
-          </div>
+          {/* Карточка действий больше не нужна — действия перенесены в page-header */}
           {/* Drag & Drop импорт */}
           <div
             className="card card-md border-dashed"
@@ -580,7 +528,7 @@ function DomainsNewManager() {
               <table className="table card-table table-vcenter table-nowrap mb-0">
                 <thead>
                   <tr>
-                    <th style={{cursor:'pointer'}} onClick={() => handleSort('domain')}>
+                    <th className="cursor-pointer" onClick={() => handleSort('domain')}>
                       Домен
                       {sortField === 'domain' && (
                         <span className="ms-1">
@@ -588,7 +536,7 @@ function DomainsNewManager() {
                         </span>
                       )}
                     </th>
-                    <th style={{cursor:'pointer'}} onClick={() => handleSort('community')}>
+                    <th className="cursor-pointer" onClick={() => handleSort('community')}>
                       Community
                       {sortField === 'community' && (
                         <span className="ms-1">
diff --git a/frontend/src/FilterManager.jsx b/frontend/src/FilterManager.jsx
index 397a310..a38f9e7 100644
--- a/frontend/src/FilterManager.jsx
+++ b/frontend/src/FilterManager.jsx
@@ -1218,15 +1218,15 @@ function FilterManager() {
                               onChange={toggleSelectAllProcessed}
                             />
                           </th>
-                          <th style={{ width: '25%', cursor: 'pointer' }} onClick={() => toggleSort('community')}>
+                          <th style={{ width: '25%' }} className="cursor-pointer" onClick={() => toggleSort('community')}>
                             <span className="me-1">COMMUNITY</span>
                             {sortBy === 'community' && (sortDir === 'asc' ? <IconSortAscending size={16} /> : <IconSortDescending size={16} />)}
                           </th>
-                          <th style={{ width: '25%', cursor: 'pointer' }} onClick={() => toggleSort('gateway')}>
+                          <th style={{ width: '25%' }} className="cursor-pointer" onClick={() => toggleSort('gateway')}>
                             <span className="me-1">GATEWAY</span>
                             {sortBy === 'gateway' && (sortDir === 'asc' ? <IconSortAscending size={16} /> : <IconSortDescending size={16} />)}
                           </th>
-                          <th style={{ width: '35%', cursor: 'pointer' }} onClick={() => toggleSort('description')}>
+                          <th style={{ width: '35%' }} className="cursor-pointer" onClick={() => toggleSort('description')}>
                             <span className="me-1">ОПИСАНИЕ</span>
                             {sortBy === 'description' && (sortDir === 'asc' ? <IconSortAscending size={16} /> : <IconSortDescending size={16} />)}
                           </th>
diff --git a/frontend/src/IPRangesManager.jsx b/frontend/src/IPRangesManager.jsx
index 6f0508d..6172f8f 100644
--- a/frontend/src/IPRangesManager.jsx
+++ b/frontend/src/IPRangesManager.jsx
@@ -15,11 +15,13 @@ import {
   IconDeviceFloppy,
   IconHash,
   IconClock,
-  IconFileText
+  IconFileText,
+  IconEye
 } from '@tabler/icons-react';
 import LockBanner from './components/LockBanner.jsx';
 import TableSkeleton from './components/TableSkeleton.jsx';
 import S3MetaBar from './components/S3MetaBar.jsx';
+import PageHeaderActions from './components/PageHeaderActions.jsx';
 import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
 import HistoryModal from './components/HistoryModal.jsx';
 
@@ -409,9 +411,21 @@ function IPRangesManager() {
             <div className="page-pretitle">Главная / Данные / IP ranges</div>
           </div>
           <div className="col-auto ms-auto d-print-none">
-            <div className="btn-list">
-              <button className="btn btn-outline-secondary" onClick={() => setHistoryOpen(true)}>История</button>
-            </div>
+            <PageHeaderActions
+              loading={loading}
+              onPreview={handlePreviewDiff}
+              disablePreview={loading || items.length === 0}
+              onRefresh={fetchItems}
+              disableRefresh={loading}
+              onImport={handleImport}
+              onExport={handleExport}
+              disableExport={items.length === 0}
+              onClear={clearInvalid}
+              disableClear={items.length === 0}
+              onSave={handleSaveChanges}
+              disableSave={loading}
+              onHistory={() => setHistoryOpen(true)}
+            />
           </div>
         </div>
       </div>
@@ -483,73 +497,7 @@ function IPRangesManager() {
             </div>
           </div>
 
-          {/* Actions Card */}
-          <div className="card card-md">
-            <div className="card-header">
-              <h3 className="card-title">
-                <IconDatabase className="icon me-2" />
-                Действия
-              </h3>
-            </div>
-            <div className="card-body">
-              <div className="d-grid gap-2">
-                <button 
-                  className="btn btn-primary"
-                  onClick={handleSaveChanges}
-                  disabled={loading}
-                >
-                  {loading ? (
-                    <>
-                      <span className="spinner-border spinner-border-sm me-2" role="status"></span>
-                      Сохранение...
-                    </>
-                  ) : (
-                    <>
-                      <IconDeviceFloppy className="icon me-2" />
-                      Сохранить в S3
-                    </>
-                  )}
-                </button>
-                <button 
-                  className="btn btn-outline-secondary"
-                  onClick={fetchItems}
-                  disabled={loading}
-                >
-                  <IconRefresh className="icon me-2" />
-                  Обновить
-                </button>
-                <button 
-                  className="btn btn-outline-primary"
-                  onClick={handleImport}
-                >
-                  <IconUpload className="icon me-2" />
-                  Импорт из буфера
-                </button>
-                <button 
-                  className="btn btn-outline-primary"
-                  onClick={handleExport}
-                  disabled={items.length === 0}
-                >
-                  <IconDownload className="icon me-2" />
-                  Экспорт CSV
-                </button>
-                <button 
-                  className="btn btn-outline-secondary"
-                  onClick={handlePreviewDiff}
-                  disabled={loading}
-                >
-                  Предпросмотр изменений
-                </button>
-                <button 
-                  className="btn btn-outline-secondary"
-                  onClick={clearInvalid}
-                  disabled={items.length === 0}
-                >
-                  Очистить пустые/невалидные
-                </button>
-              </div>
-            </div>
-          </div>
+          {/* Карточка действий больше не нужна — действия перенесены в page-header */}
         </div>
 
         <div className="col-lg-9">
@@ -588,7 +536,7 @@ function IPRangesManager() {
               <table className="table card-table table-vcenter table-nowrap mb-0">
                 <thead>
                   <tr>
-                    <th style={{cursor:'pointer'}} onClick={() => handleSort('ipRange')}>
+                    <th className="cursor-pointer" onClick={() => handleSort('ipRange')}>
                       IP-диапазон
                       {sortField === 'ipRange' && (
                         <span className="ms-1">
@@ -596,7 +544,7 @@ function IPRangesManager() {
                         </span>
                       )}
                     </th>
-                    <th style={{cursor:'pointer'}} onClick={() => handleSort('community')}>
+                    <th className="cursor-pointer" onClick={() => handleSort('community')}>
                       Community
                       {sortField === 'community' && (
                         <span className="ms-1">
diff --git a/frontend/src/ServerManager.jsx b/frontend/src/ServerManager.jsx
index 285006a..924cc15 100644
--- a/frontend/src/ServerManager.jsx
+++ b/frontend/src/ServerManager.jsx
@@ -558,7 +558,7 @@ function ServerManager() {
           <table className="table card-table table-vcenter table-nowrap mb-0">
             <thead>
               <tr>
-                <th style={{cursor:'pointer'}} onClick={() => handleSort('ip')}>
+                <th className="cursor-pointer" onClick={() => handleSort('ip')}>
                   IP адрес
                   {sortField === 'ip' && (
                     <span className="ms-1">
@@ -566,7 +566,7 @@ function ServerManager() {
                     </span>
                   )}
                 </th>
-                <th style={{cursor:'pointer'}} onClick={() => handleSort('dns')}>
+                <th className="cursor-pointer" onClick={() => handleSort('dns')}>
                   DNS имя
                   {sortField === 'dns' && (
                     <span className="ms-1">
@@ -574,7 +574,7 @@ function ServerManager() {
                     </span>
                   )}
                 </th>
-                <th style={{cursor:'pointer'}} onClick={() => handleSort('country')}>
+                <th className="cursor-pointer" onClick={() => handleSort('country')}>
                   Страна
                   {sortField === 'country' && (
                     <span className="ms-1">
@@ -582,7 +582,7 @@ function ServerManager() {
                     </span>
                   )}
                 </th>
-                <th style={{cursor:'pointer'}} onClick={() => handleSort('provider')}>
+                <th className="cursor-pointer" onClick={() => handleSort('provider')}>
                   Провайдер
                   {sortField === 'provider' && (
                     <span className="ms-1">
@@ -590,7 +590,7 @@ function ServerManager() {
                     </span>
                   )}
                 </th>
-                <th style={{cursor:'pointer'}} onClick={() => handleSort('tunnel')}>
+                <th className="cursor-pointer" onClick={() => handleSort('tunnel')}>
                   Туннель
                   {sortField === 'tunnel' && (
                     <span className="ms-1">
@@ -598,7 +598,7 @@ function ServerManager() {
                     </span>
                   )}
                 </th>
-                <th style={{cursor:'pointer'}} onClick={() => handleSort('gateway')}>
+                <th className="cursor-pointer" onClick={() => handleSort('gateway')}>
                   Основной шлюз
                   {sortField === 'gateway' && (
                     <span className="ms-1">
diff --git a/frontend/src/components/PageHeaderActions.jsx b/frontend/src/components/PageHeaderActions.jsx
new file mode 100644
index 0000000..98cc431
--- /dev/null
+++ b/frontend/src/components/PageHeaderActions.jsx
@@ -0,0 +1,74 @@
+import { 
+  IconEye,
+  IconRefresh,
+  IconUpload,
+  IconDownload,
+  IconDeviceFloppy
+} from '@tabler/icons-react';
+
+function PageHeaderActions({
+  loading = false,
+  onPreview,
+  disablePreview = false,
+  onRefresh,
+  disableRefresh = false,
+  onImport,
+  onExport,
+  disableExport = false,
+  onClear,
+  disableClear = false,
+  onSave,
+  disableSave = false,
+  onHistory,
+}) {
+  return (
+    <div className="btn-list">
+      {onPreview && (
+        <button className="btn btn-outline-secondary" onClick={onPreview} disabled={disablePreview} title="Предпросмотр изменений">
+          <IconEye className="me-1" /> Предпросмотр
+        </button>
+      )}
+      {onRefresh && (
+        <button className="btn btn-outline-secondary" onClick={onRefresh} disabled={disableRefresh} title="Обновить данные">
+          <IconRefresh className={loading ? 'spin me-1' : 'me-1'} /> Обновить
+        </button>
+      )}
+      {onImport && (
+        <button className="btn btn-outline-primary" onClick={onImport} title="Импорт">
+          <IconUpload className="me-1" /> Импорт
+        </button>
+      )}
+      {onExport && (
+        <button className="btn btn-outline-primary" onClick={onExport} disabled={disableExport} title="Экспорт">
+          <IconDownload className="me-1" /> Экспорт
+        </button>
+      )}
+      {onClear && (
+        <button className="btn btn-outline-secondary" onClick={onClear} disabled={disableClear} title="Очистить пустые/невалидные">
+          Очистить
+        </button>
+      )}
+      {onSave && (
+        <button className="btn btn-primary" onClick={onSave} disabled={disableSave} title="Сохранить">
+          {loading ? (
+            <>
+              <span className="spinner-border spinner-border-sm me-2" role="status"></span>
+              Сохранение...
+            </>
+          ) : (
+            <>
+              <IconDeviceFloppy className="me-1" /> Сохранить
+            </>
+          )}
+        </button>
+      )}
+      {onHistory && (
+        <button className="btn btn-outline-secondary" onClick={onHistory} title="История версий">История</button>
+      )}
+    </div>
+  );
+}
+
+export default PageHeaderActions;
+
+