feat: Implement date formatting utility functions and update components to use formatted timestamps for improved readability and consistency across the application.

2025-12-24 15:52:01 +07:00
parent 6e7a63dd28
commit 27dade3eda
20 changed files with 1832 additions and 1045 deletions
@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react';
+import { IconAlertTriangle } from '@tabler/icons-react';
+
+/**
+ * Модальное окно подтверждения удаления сервера
+ */
+function DeleteServerModal({ show, server, onDelete, onClose }) {
+  const modalRef = useRef(null);
+
+  useEffect(() => {
+    if (window.Tabler && window.Tabler.Modal && modalRef.current) {
+      const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
+      if (show) {
+        modalInstance.show();
+      } else {
+        modalInstance.hide();
+      }
+      const handler = () => onClose && onClose();
+      modalRef.current.addEventListener('hide.bs.modal', handler);
+      return () => {
+        if (modalRef.current) {
+          modalRef.current.removeEventListener('hide.bs.modal', handler);
+        }
+      };
+    }
+  }, [show, onClose]);
+
+  return (
+    <div className="modal" tabIndex="-1" ref={modalRef}>
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-status bg-danger"></div>
+          <div className="modal-header">
+            <IconAlertTriangle className="icon text-danger me-2" size={28} />
+            <h5 className="modal-title">Подтверждение удаления</h5>
+            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div className="modal-body">
+            <p>Вы уверены, что хотите удалить сервер <strong>{server?.ip}</strong>?</p>
+            <p className="text-muted">Это действие нельзя отменить.</p>
+          </div>
+          <div className="modal-footer">
+            <button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
+              <span className="fw-bold">Отмена</span>
+            </button>
+            <button type="button" className="btn btn-danger d-flex align-items-center" onClick={onDelete}>
+              <span className="fw-bold">Удалить</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DeleteServerModal;
+