refactor(Managers): integrate LastSaved component and optimize button layout for enhanced UI consistency and user experience

frontend/src/ASNsNewManager.jsx

@@ -42,6 +42,7 @@ import Tooltip from './components/Tooltip.jsx';
 import Pagination from './components/Pagination.jsx';
 import AddItemModal from './components/AddItemModal.jsx';
 import { getAsnName, getAsnNameSync } from './lib/asn.js';
+import LastSaved from './components/LastSaved.jsx';
 
 const API_URL = '/api';
 
@@ -523,16 +524,8 @@ function ASNsNewManager() {
 
       <PageHeader
         title="ASNs"
+        meta={<LastSaved timestamp={lastModified} variant="compact" />}
         actions={(
-          <div className="d-flex align-items-center gap-2">
-            <button
-              className="btn btn-primary"
-              onClick={() => setAddModalOpen(true)}
-              title="Добавить новый ASN"
-            >
-              <IconPlus className="me-1" size={18} />
-              Добавить
-            </button>
           <PageHeaderActions
             loading={loading}
             onPreview={handlePreviewDiff}
@@ -549,6 +542,7 @@ function ASNsNewManager() {
             onSave={handleSaveChanges}
             disableSave={loading}
             onHistory={() => setHistoryOpen(true)}
+            lastModified={lastModified}
             onOnlineUpdate={() => setWsOpen(true)}
             onBackgroundUpdate={async () => {
               try {
@@ -563,7 +557,6 @@ function ASNsNewManager() {
               }
             }}
           />
-          </div>
         )}
       />
 
@@ -595,7 +588,7 @@ function ASNsNewManager() {
           <div className="card">
             <div className="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
               <h3 className="card-title mb-0">Список ASN <span className="badge bg-blue-lt text-blue ms-2">{items.length}</span></h3>
-              <div className="d-flex gap-2 flex-wrap">
+              <div className="d-flex gap-2 flex-wrap align-items-center">
                 <SavedFilters
                   pageKey="asns"
                   currentFilters={{ searchTerm, filterCommunity, sortField, sortOrder }}
@@ -663,8 +656,15 @@ function ASNsNewManager() {
                     </button>
                   )}
                 </div>
+                <button
+                  className="btn btn-primary"
+                  onClick={() => setAddModalOpen(true)}
+                  title="Добавить новый ASN"
+                >
+                  <IconPlus className="me-1" size={18} />
+                  Добавить
+                </button>
               </div>
-              <div></div>
             </div>
           </div>
 

frontend/src/IPRangesManager.jsx

@@ -43,6 +43,7 @@ import BulkActionsBar from './components/BulkActionsBar.jsx';
 import Tooltip from './components/Tooltip.jsx';
 import Pagination from './components/Pagination.jsx';
 import AddItemModal from './components/AddItemModal.jsx';
+import LastSaved from './components/LastSaved.jsx';
 
 const API_URL = '/api';
 
@@ -783,16 +784,8 @@ function IPRangesManager() {
 
       <PageHeader
         title="IP-диапазоны"
+        meta={<LastSaved timestamp={lastModified} variant="compact" />}
         actions={(
-          <div className="d-flex align-items-center gap-2">
-            <button
-              className="btn btn-primary"
-              onClick={() => setAddModalOpen(true)}
-              title="Добавить новый IP-диапазон"
-            >
-              <IconPlus className="me-1" size={18} />
-              Добавить
-            </button>
           <PageHeaderActions
             loading={loading}
             onPreview={handlePreviewDiff}
@@ -809,6 +802,7 @@ function IPRangesManager() {
             onSave={handleSaveChanges}
             disableSave={loading}
             onHistory={() => setHistoryOpen(true)}
+            lastModified={lastModified}
             onOnlineUpdate={() => setWsOpen(true)}
             onBackgroundUpdate={async () => {
               try {
@@ -823,7 +817,6 @@ function IPRangesManager() {
               }
             }}
           />
-          </div>
         )}
       />
 
@@ -855,7 +848,7 @@ function IPRangesManager() {
           <div className="card">
             <div className="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
               <h3 className="card-title mb-0">Список IP-диапазонов <span className="badge bg-blue-lt text-blue ms-2">{items.length}</span></h3>
-              <div className="d-flex gap-2 flex-wrap">
+              <div className="d-flex gap-2 flex-wrap align-items-center">
                 <SavedFilters
                   pageKey="ip-ranges"
                   currentFilters={{ searchTerm, filterCommunity, sortField, sortOrder }}
@@ -907,12 +900,22 @@ function IPRangesManager() {
                     />
                   </div>
                 </div>
+                <div className="d-flex gap-2">
                   <Tooltip content="Анализ и суммаризация IP-диапазонов">
                     <button className="btn btn-outline-primary" onClick={() => setAnalyzeOpen(true)}>
                       <IconDatabase className="icon me-2" />
                       Анализ
                     </button>
                   </Tooltip>
+                  <button
+                    className="btn btn-primary"
+                    onClick={() => setAddModalOpen(true)}
+                    title="Добавить новый IP-диапазон"
+                  >
+                    <IconPlus className="me-1" size={18} />
+                    Добавить
+                  </button>
+                </div>
               </div>
             </div>
           </div>