feat: Add ConfirmDialog component for enhanced user confirmation in DataManager, FilterManager, and ServerManager; integrate html-to-image library for image conversion functionality

frontend/src/ServerManager.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import api from './lib/api.js';
+import ConfirmDialog from './components/ConfirmDialog.jsx';
 import { 
   IconPlus, 
   IconSearch, 
@@ -92,6 +93,7 @@ function ServerManager() {
   const [graphTunnelFilters, setGraphTunnelFilters] = useState({ GRE: true, IPSec: true, WireGuard: true, OpenVPN: true });
   const [graphCountryFilter, setGraphCountryFilter] = useState('');
   const [graphProviderFilter, setGraphProviderFilter] = useState('');
+  const [confirmState, setConfirmState] = useState({ open: false, text: '', onConfirm: null });
 
   useEffect(() => {
     fetchServers();
@@ -332,14 +334,16 @@ function ServerManager() {
       setError('Оба поля для массового обновления должны быть заполнены.');
       return;
     }
-    const confirm = window.confirm(`Вы уверены, что хотите заменить все туннели "${bulkFrom}" на "${bulkTo}"? Это действие необратимо.`);
-    if (confirm) {
-      const updatedServers = servers.map(s =>
-        s.tunnel === bulkFrom ? { ...s, tunnel: bulkTo } : s
-      );
-      setServers(updatedServers);
-      setSuccess(`Туннели "${bulkFrom}" были успешно заменены на "${bulkTo}". Не забудьте сохранить изменения.`);
-    }
+    setConfirmState({
+      open: true,
+      text: `Вы уверены, что хотите заменить все туннели "${bulkFrom}" на "${bulkTo}"? Это действие необратимо.`,
+      onConfirm: () => {
+        const updatedServers = servers.map(s => s.tunnel === bulkFrom ? { ...s, tunnel: bulkTo } : s);
+        setServers(updatedServers);
+        setSuccess(`Туннели "${bulkFrom}" были успешно заменены на "${bulkTo}". Не забудьте сохранить изменения.`);
+        setConfirmState({ open: false, text: '', onConfirm: null });
+      },
+    });
   };
 
   // Сортировка
@@ -890,6 +894,14 @@ function ServerManager() {
           </div>
         </div>
       )}
+
+      <ConfirmDialog
+        open={confirmState.open}
+        title="Подтверждение"
+        message={confirmState.text}
+        onCancel={() => setConfirmState({ open: false, text: '', onConfirm: null })}
+        onConfirm={() => confirmState.onConfirm?.()}
+      />
     </>
   );
 }