From 16f14d33502fa557ecc796b63d16fb5649dbc45d Mon Sep 17 00:00:00 2001
From: Denis Shatskiy <admin@shts.su>
Date: Sun, 10 Aug 2025 23:22:17 +0700
Subject: [PATCH] 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    | 23 +++++++++++++++++------
 frontend/src/DomainsNewManager.jsx | 27 +++++++++++++++++++--------
 frontend/src/IPRangesManager.jsx   | 23 +++++++++++++++++------
 3 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/frontend/src/ASNsNewManager.jsx b/frontend/src/ASNsNewManager.jsx
index 8c24275..17b78aa 100644
--- a/frontend/src/ASNsNewManager.jsx
+++ b/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) && (
-              <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>
+            {(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 className="table-responsive">
diff --git a/frontend/src/DomainsNewManager.jsx b/frontend/src/DomainsNewManager.jsx
index 99b18d9..c1c08a2 100644
--- a/frontend/src/DomainsNewManager.jsx
+++ b/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>
diff --git a/frontend/src/IPRangesManager.jsx b/frontend/src/IPRangesManager.jsx
index 4d06d75..d0af55a 100644
--- a/frontend/src/IPRangesManager.jsx
+++ b/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) && (
-              <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>
+            {(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 className="table-responsive">