fix(config): добавить новые зависимости и обновить конфигурацию компонентов

app/(main)/ip-ranges/page.tsx

@@ -1,20 +1,22 @@
 "use client"
 
-import { useMemo } from "react"
+import { useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
 import { DataTable } from "@/components/data-table"
+import { FileImportDialog } from "@/components/file-import-dialog"
 import { ipRanges as mockIpRanges } from "@/lib/data"
 import { Button } from "@/components/ui/button"
 import { UploadIcon, DownloadIcon, PlusIcon, FilterIcon, LoaderCircleIcon } from "lucide-react"
 import { useDataSource } from "@/lib/data-source"
 import { useEvoBGP } from "@/lib/evobgp-context"
 import { cn } from "@/lib/utils"
+import { toast } from "sonner"
 
 export default function IpRangesPage() {
   const { mode } = useDataSource()
   const { enabled, snapshot, loading, error } = useEvoBGP()
+  const [importOpen, setImportOpen] = useState(false)
 
-  /** При включённом EvoBGP в live локальные моки не показываем — только каталог API (или пусто при загрузке/ошибке). */
   const useEvoCatalog = mode === "live" && enabled
 
   const rows = useMemo(() => {
@@ -29,7 +31,9 @@ export default function IpRangesPage() {
         crumbs={[{ label: "Данные" }, { label: "IP-диапазоны" }]}
         actions={
           <>
-            <Button variant="outline" size="sm"><UploadIcon className="size-4" />Импорт</Button>
+            <Button variant="outline" size="sm" onClick={() => setImportOpen(true)}>
+              <UploadIcon className="size-4" />Импорт
+            </Button>
             <Button variant="outline" size="sm"><DownloadIcon className="size-4" />Экспорт</Button>
             <Button size="sm"><PlusIcon className="size-4" />Добавить диапазон</Button>
           </>
@@ -58,6 +62,7 @@ export default function IpRangesPage() {
           </div>
           <DataTable
             data={rows}
+            isLoading={useEvoCatalog && loading && !snapshot}
             searchPlaceholder="Поиск по CIDR, ASN…"
             searchKeys={["cidr", "asn", "country", "filter"]}
             columns={[
@@ -108,6 +113,16 @@ export default function IpRangesPage() {
           />
         </div>
       </div>
+      <FileImportDialog
+        open={importOpen}
+        onOpenChange={setImportOpen}
+        title="Импорт IP-диапазонов"
+        description="Загрузите CSV или JSON со списком CIDR-блоков"
+        accept=".csv,.json,text/csv,application/json"
+        onImport={async (files) => {
+          toast.info(`Выбран файл: ${files[0]?.name ?? "—"}`)
+        }}
+      />
     </div>
   )
 }