feat: Update ASNs, Domains, and IPRanges managers to display ETag, Last-Modified, and content length with new icon badges for improved metadata visibility and user experience

frontend/src/ASNsNewManager.jsx

@@ -12,7 +12,10 @@ import {
   IconRefresh,
   IconUpload,
   IconDownload,
-  IconDeviceFloppy
+  IconDeviceFloppy,
+  IconHash,
+  IconClock,
+  IconFileText
 } from '@tabler/icons-react';
 
 const API_URL = '/api';
@@ -498,11 +501,19 @@ function ASNsNewManager() {
                 </div>
               </div>
             </div>
-            {(etag || lastModified) && (
+            {(etag || lastModified || contentLength !== null) && (
-              <div className="card-status-bottom bg-transparent px-3 py-2 text-muted small">
+              <div className="card-footer">
-                <span className="me-3">ETag: <code>{etag || '—'}</code></span>
+                <div className="d-flex flex-wrap gap-2 align-items-center small">
-                <span className="me-3">Last-Modified: {lastModified || '—'}</span>
+                  <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center">
-                <span>Размер (байт): {contentLength ?? '—'}</span>
+                    <IconHash size={14} className="me-1" /> {etag || '—'}
+                  </span>
+                  <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center">
+                    <IconClock size={14} className="me-1" /> {lastModified || '—'}
+                  </span>
+                  <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center">
+                    <IconFileText size={14} className="me-1" /> {(contentLength ?? '—') + (contentLength !== null ? ' байт' : '')}
+                  </span>
+                </div>
               </div>
             )}
             <div className="table-responsive">

frontend/src/DomainsNewManager.jsx

@@ -12,7 +12,10 @@ import {
   IconRefresh,
   IconUpload,
   IconDownload,
-  IconDeviceFloppy
+  IconDeviceFloppy,
+  IconHash,
+  IconClock,
+  IconFileText
 } from '@tabler/icons-react';
 
 const API_URL = '/api';
@@ -505,13 +508,6 @@ function DomainsNewManager() {
                 </div>
               </div>
             </div>
-            { (etag || lastModified) && (
-              <div className="card-status-bottom bg-transparent px-3 py-2 text-muted small">
-                <span className="me-3">ETag: <code>{etag || '—'}</code></span>
-                <span className="me-3">Last-Modified: {lastModified || '—'}</span>
-                <span>Размер (байт): {contentLength ?? '—'}</span>
-              </div>
-            )}
             <div className="table-responsive">
               <table className="table card-table table-vcenter table-nowrap mb-0">
                 <thead>
@@ -605,6 +601,21 @@ function DomainsNewManager() {
                 </ul>
               </div>
             )}
+            {(etag || lastModified || contentLength !== null) && (
+              <div className="card-footer">
+                <div className="d-flex flex-wrap gap-2 align-items-center small">
+                  <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center">
+                    <IconHash size={14} className="me-1" /> {etag || '—'}
+                  </span>
+                  <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center">
+                    <IconClock size={14} className="me-1" /> {lastModified || '—'}
+                  </span>
+                  <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center">
+                    <IconFileText size={14} className="me-1" /> {(contentLength ?? '—') + (contentLength !== null ? ' байт' : '')}
+                  </span>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </div>

frontend/src/IPRangesManager.jsx

@@ -12,7 +12,10 @@ import {
   IconRefresh,
   IconUpload,
   IconDownload,
-  IconDeviceFloppy
+  IconDeviceFloppy,
+  IconHash,
+  IconClock,
+  IconFileText
 } from '@tabler/icons-react';
 
 const API_URL = '/api';
@@ -513,11 +516,19 @@ function IPRangesManager() {
                 </div>
               </div>
             </div>
-            {(etag || lastModified) && (
+            {(etag || lastModified || contentLength !== null) && (
-              <div className="card-status-bottom bg-transparent px-3 py-2 text-muted small">
+              <div className="card-footer">
-                <span className="me-3">ETag: <code>{etag || '—'}</code></span>
+                <div className="d-flex flex-wrap gap-2 align-items-center small">
-                <span className="me-3">Last-Modified: {lastModified || '—'}</span>
+                  <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center">
-                <span>Размер (байт): {contentLength ?? '—'}</span>
+                    <IconHash size={14} className="me-1" /> {etag || '—'}
+                  </span>
+                  <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center">
+                    <IconClock size={14} className="me-1" /> {lastModified || '—'}
+                  </span>
+                  <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center">
+                    <IconFileText size={14} className="me-1" /> {(contentLength ?? '—') + (contentLength !== null ? ' байт' : '')}
+                  </span>
+                </div>
               </div>
             )}
             <div className="table-responsive">