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

frontend/src/DataManager.jsx

@@ -14,6 +14,7 @@ import {
   IconUpload,
   IconAlertTriangle
 } from '@tabler/icons-react';
+import ConfirmDialog from './components/ConfirmDialog.jsx'
 
 const API_URL = '/api';
 
@@ -36,6 +37,7 @@ function DataManager({ entityName, entityKey, placeholder }) {
   const [filterType, setFilterType] = useState('');
   const editInputRef = useRef(null);
   const pageSize = 10;
+  const [confirmState, setConfirmState] = useState({ open: false, text: '', onConfirm: null });
 
   useEffect(() => {
     fetchItems();
@@ -118,14 +120,16 @@ function DataManager({ entityName, entityKey, placeholder }) {
       setError('Оба поля для массового обновления должны быть заполнены.');
       return;
     }
-    const confirm = window.confirm(`Вы уверены, что хотите заменить все шлюзы "${bulkFrom}" на "${bulkTo}"? Это действие необратимо.`);
-    if (confirm) {
-      const updatedItems = items.map(i =>
-        i.type === bulkFrom ? { ...i, type: bulkTo } : i
-      );
-      setItems(updatedItems);
-      setSuccess(`Шлюзы "${bulkFrom}" были успешно заменены на "${bulkTo}". Не забудьте сохранить изменения.`);
-    }
+    setConfirmState({
+      open: true,
+      text: `Вы уверены, что хотите заменить все шлюзы "${bulkFrom}" на "${bulkTo}"? Это действие необратимо.`,
+      onConfirm: () => {
+        const updatedItems = items.map(i => i.type === bulkFrom ? { ...i, type: bulkTo } : i);
+        setItems(updatedItems);
+        setSuccess(`Шлюзы "${bulkFrom}" были успешно заменены на "${bulkTo}". Не забудьте сохранить изменения.`);
+        setConfirmState({ open: false, text: '', onConfirm: null });
+      },
+    });
   };
 
   // Сортировка
@@ -500,6 +504,14 @@ function DataManager({ entityName, entityKey, placeholder }) {
           </div>
         </div>
       )}
+
+      <ConfirmDialog
+        open={confirmState.open}
+        title="Подтверждение"
+        message={confirmState.text}
+        onCancel={() => setConfirmState({ open: false, text: '', onConfirm: null })}
+        onConfirm={() => confirmState.onConfirm?.()}
+      />
     </>
   );
 }