feat: Добавить компонент AccordionCard в менеджеры ASNs, Domains и IPRanges для улучшения интерфейса ввода данных и поддержки функции перетаскивания файлов для импорта

frontend/src/IPRangesManager.jsx

@@ -31,6 +31,7 @@ import ErrorAlert from './components/ErrorAlert.jsx';
 import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
 import ImportModal from './components/ImportModal.jsx';
 import QuickAddBar from './components/QuickAddBar.jsx';
+import AccordionCard from './components/AccordionCard.jsx';
 
 const API_URL = '/api';
 
@@ -779,24 +780,34 @@ function IPRangesManager() {
             </div>
           </div>
 
-          {/* QuickAdd stays for batch input */}
-          <QuickAddBar
-            placeholder={'192.168.1.0/24 65000:100'}
-            help={'Вставьте строки: CIDR ПРОБЕЛ COMMUNITY'}
-            parseLine={(line) => { const [cidr, c] = String(line).split(/\s+/); return { ipRange: (cidr||'').trim(), community: (c||'').trim() }; }}
-            validateItem={(obj) => isValidCidr(obj.ipRange) && isValidCommunity(obj.community)}
-            onApply={(list) => {
-              setItems(prev => {
-                const merged = [...prev, ...list];
-                const map = new Map();
-                for (const it of merged) {
-                  const key = String(it.ipRange).trim();
-                  if (!map.has(key)) map.set(key, { ipRange: key, community: String(it.community).trim() });
-                }
-                return Array.from(map.values());
-              });
-            }}
-          />
+          {/* Дополнительные варианты */}
+          <AccordionCard title={'Дополнительные варианты'} defaultOpen={false}>
+            <QuickAddBar
+              placeholder={'192.168.1.0/24 65000:100'}
+              help={'Вставьте строки: CIDR ПРОБЕЛ COMMUNITY'}
+              parseLine={(line) => { const [cidr, c] = String(line).split(/\s+/); return { ipRange: (cidr||'').trim(), community: (c||'').trim() }; }}
+              validateItem={(obj) => isValidCidr(obj.ipRange) && isValidCommunity(obj.community)}
+              onApply={(list) => {
+                setItems(prev => {
+                  const merged = [...prev, ...list];
+                  const map = new Map();
+                  for (const it of merged) {
+                    const key = String(it.ipRange).trim();
+                    if (!map.has(key)) map.set(key, { ipRange: key, community: String(it.community).trim() });
+                  }
+                  return Array.from(map.values());
+                });
+              }}
+            />
+            <div className="card card-md border-dashed mt-3"
+                 onDragOver={(e) => { e.preventDefault(); }}
+                 onDrop={onDropImport}
+            >
+              <div className="card-body text-center text-muted">
+                Перетащите файл TXT/CSV сюда для импорта (формат: CIDR community)
+              </div>
+            </div>
+          </AccordionCard>
           {/* Drag & Drop импорт */}
           <div
             className="card card-md border-dashed"