From 001b4d9d9825ee6167dbcdaa7829ee6a138978f1 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Wed, 27 Aug 2025 17:05:36 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D0=B8=20UI?=
 =?UTF-8?q?=20=D0=B2=20=D0=BD=D0=B8=D0=B6=D0=BD=D0=B5=D0=BC=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=BD=D1=82=D0=B8=D1=82=D1=83=D0=BB=D0=B5=20=D0=B8?=
 =?UTF-8?q?=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B8=D1=82=D1=8C=20=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20?=
 =?UTF-8?q?ASN=20=D0=B8=20CIDR=20=D1=81=20=D0=BF=D0=BE=D0=BC=D0=BE=D1=89?=
 =?UTF-8?q?=D1=8C=D1=8E=20=D0=BC=D0=BE=D0=BD=D0=BE=D1=88=D0=B8=D1=80=D0=B8?=
 =?UTF-8?q?=D0=BD=D0=BD=D0=BE=D0=B3=D0=BE=20=D1=88=D1=80=D0=B8=D1=84=D1=82?=
 =?UTF-8?q?=D0=B0=20=D0=B2=20=D0=BC=D0=B5=D0=BD=D0=B5=D0=B4=D0=B6=D0=B5?=
 =?UTF-8?q?=D1=80=D0=B0=D1=85=20ASNs=20=D0=B8=20IPRanges?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/ASNsNewManager.jsx               |  2 +-
 frontend/src/App.jsx                          |  5 +++
 frontend/src/IPRangesManager.jsx              |  2 +-
 frontend/src/components/PageHeaderActions.jsx |  7 ++--
 frontend/src/components/S3MetaBar.jsx         |  5 ++-
 frontend/src/lib/datetime.js                  | 42 +++++++++++++++++++
 6 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/lib/datetime.js

diff --git a/frontend/src/ASNsNewManager.jsx b/frontend/src/ASNsNewManager.jsx
index c9fcb8b..d951a90 100644
--- a/frontend/src/ASNsNewManager.jsx
+++ b/frontend/src/ASNsNewManager.jsx
@@ -578,7 +578,7 @@ function ASNsNewManager() {
                 <tbody>
                   {paginatedItems.map((item) => (
                     <tr key={item.asn} className={editingAsn === item.asn ? 'table-info' : ''}>
-                      <td>{item.asn}</td>
+                      <td className="font-monospace" title="ASN">{item.asn}</td>
                       <td>{renderCommunityBadge(item.community)}</td>
                       <td className="text-end">
                         {editingAsn === item.asn ? (
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f485b04..5af0209 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -336,6 +336,11 @@ function MainLayout() {
           <Route path="/" element={<Navigate to="/dashboard" replace />} />
         </Routes>
       </div>
+      <footer className="footer mt-auto py-3">
+        <div className="container-xl text-muted small">
+          Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}
+        </div>
+      </footer>
       <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
     </div>
   );
diff --git a/frontend/src/IPRangesManager.jsx b/frontend/src/IPRangesManager.jsx
index 9f9618c..d0c911d 100644
--- a/frontend/src/IPRangesManager.jsx
+++ b/frontend/src/IPRangesManager.jsx
@@ -841,7 +841,7 @@ function IPRangesManager() {
                 <tbody>
                   {paginatedItems.map((item) => (
                     <tr key={item.ipRange} className={editingIp === item.ipRange ? 'table-info' : ''}>
-                      <td>{item.ipRange}</td>
+                      <td className="font-monospace" title="CIDR">{item.ipRange}</td>
                       <td>{renderCommunityBadge(item.community)}</td>
                       <td className="text-end">
                         {editingIp === item.ipRange ? (
diff --git a/frontend/src/components/PageHeaderActions.jsx b/frontend/src/components/PageHeaderActions.jsx
index 590d94d..00343b5 100644
--- a/frontend/src/components/PageHeaderActions.jsx
+++ b/frontend/src/components/PageHeaderActions.jsx
@@ -9,6 +9,7 @@ import {
 } from '@tabler/icons-react';
 import PortalDropdown from './PortalDropdown.jsx';
 import { IconClock } from '@tabler/icons-react';
+import { formatDateTimeWithRelative } from '../lib/datetime.js';
 
 function PageHeaderActions({
   loading = false,
@@ -149,10 +150,10 @@ function PageHeaderActions({
           <div className="btn-group">
             <button className="btn btn-outline-secondary" type="button" onClick={onHistory} title="История версий">История</button>
             {lastModified && (
-              <button className="btn btn-outline-secondary" type="button" onClick={onHistory} title={`Последние изменения: ${new Date(lastModified).toLocaleString()}`}>
+              <button className="btn btn-outline-secondary" type="button" onClick={onHistory} title={`Последние изменения: ${formatDateTimeWithRelative(lastModified)}`}>
                 <IconClock className="me-1" />
-                <span className="d-none d-sm-inline">{new Date(lastModified).toLocaleTimeString()}</span>
-                <span className="d-inline d-sm-none">{new Date(lastModified).toLocaleTimeString()}</span>
+                <span className="d-none d-sm-inline">{formatDateTimeWithRelative(lastModified)}</span>
+                <span className="d-inline d-sm-none">{formatDateTimeWithRelative(lastModified)}</span>
               </button>
             )}
           </div>
diff --git a/frontend/src/components/S3MetaBar.jsx b/frontend/src/components/S3MetaBar.jsx
index 7276b4a..de263b7 100644
--- a/frontend/src/components/S3MetaBar.jsx
+++ b/frontend/src/components/S3MetaBar.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import api from '../lib/api.js';
 import { IconHash, IconClock, IconFileText, IconRefresh } from '@tabler/icons-react';
+import { formatDateTimeWithRelative } from '../lib/datetime.js';
 
 function S3MetaBar({ keys = [], className = '' }) {
   const [meta, setMeta] = useState({});
@@ -35,8 +36,8 @@ function S3MetaBar({ keys = [], className = '' }) {
     const it = meta[k];
     return (
       <div key={k} className="d-flex align-items-center gap-2 flex-wrap">
-        <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center"><IconHash size={14} className="me-1" />{it?.etag || '—'}</span>
-        <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center"><IconClock size={14} className="me-1" />{it?.lastModified ? new Date(it.lastModified).toLocaleString() : '—'}</span>
+        <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center" title="ETag"><IconHash size={14} className="me-1" /><span className="font-monospace">{it?.etag || '—'}</span></span>
+        <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center" title="Время последнего изменения"><IconClock size={14} className="me-1" />{it?.lastModified ? formatDateTimeWithRelative(it.lastModified) : '—'}</span>
         <span className="badge bg-blue-lt text-blue d-inline-flex align-items-center"><IconFileText size={14} className="me-1" />{typeof it?.contentLength === 'number' ? `${it.contentLength} байт` : '—'}</span>
         <button className="btn btn-outline-secondary btn-sm" type="button" onClick={() => copyMeta(k)} title="Копировать ETag/Last-Modified">
           <IconFileText size={14} className="me-1" />Копировать
diff --git a/frontend/src/lib/datetime.js b/frontend/src/lib/datetime.js
new file mode 100644
index 0000000..67affa0
--- /dev/null
+++ b/frontend/src/lib/datetime.js
@@ -0,0 +1,42 @@
+function pad(num) {
+  return String(num).padStart(2, '0');
+}
+
+export function formatDateTime(input) {
+  if (!input) return '';
+  const d = input instanceof Date ? input : new Date(input);
+  if (Number.isNaN(d.getTime())) return '';
+  const day = pad(d.getDate());
+  const month = pad(d.getMonth() + 1);
+  const year = d.getFullYear();
+  const h = pad(d.getHours());
+  const m = pad(d.getMinutes());
+  const s = pad(d.getSeconds());
+  return `${day}.${month}.${year} ${h}:${m}:${s}`;
+}
+
+export function formatRelative(input) {
+  if (!input) return '';
+  const d = input instanceof Date ? input : new Date(input);
+  if (Number.isNaN(d.getTime())) return '';
+  const diffMs = Date.now() - d.getTime();
+  const sec = Math.floor(diffMs / 1000);
+  if (sec < 5) return 'только что';
+  if (sec < 60) return `${sec} сек назад`;
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min} мин назад`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr} ч назад`;
+  const days = Math.floor(hr / 24);
+  return `${days} дн назад`;
+}
+
+export function formatDateTimeWithRelative(input) {
+  const abs = formatDateTime(input);
+  const rel = formatRelative(input);
+  if (!abs && !rel) return '';
+  if (abs && rel) return `${abs} (${rel})`;
+  return abs || rel;
+}
+
+