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

app/(main)/alerts/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useDataSource } from "@/lib/data-source"
 import { PageHeader } from "@/components/page-header"
+import { FormToggle } from "@/components/form-kit"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
 import { Separator } from "@/components/ui/separator"
@@ -685,23 +686,6 @@ const INIT_TG: TelegramConfig = {
 
 // ─── small helpers ────────────────────────────────────────────────────────────
 
-function Toggle({ checked, onChange, disabled }: { checked: boolean; onChange: (v: boolean) => void; disabled?: boolean }) {
-  return (
-    <button role="switch" aria-checked={checked} aria-disabled={disabled} disabled={disabled}
-      onClick={() => { if (!disabled) onChange(!checked) }}
-      className={cn(
-        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors",
-        disabled && "opacity-50 pointer-events-none",
-        checked ? "bg-primary" : "bg-muted-foreground/30",
-      )}>
-      <span className={cn(
-        "inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform",
-        checked ? "translate-x-4" : "translate-x-0.5",
-      )} />
-    </button>
-  )
-}
-
 function FieldLabel({ children, className }: { children: React.ReactNode; className?: string }) {
   return <p className={cn("text-sm font-medium mb-1.5 leading-none", className)}>{children}</p>
 }
@@ -739,7 +723,7 @@ function AlertRuleRow({ rule, onToggle, onDelete, onEdit, interactionsDisabled }
       !rule.enabled && "opacity-55",
     )}>
       {/* toggle */}
-      <Toggle checked={rule.enabled} onChange={v => onToggle(rule.id, v)} disabled={interactionsDisabled} />
+      <FormToggle checked={rule.enabled} onChange={v => onToggle(rule.id, v)} disabled={interactionsDisabled} />
 
       {/* severity dot */}
       <SeverityDot severity={rule.severity} />

app/(main)/asns/page.tsx

@@ -1,18 +1,21 @@
 "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 { asns as mockAsns } 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 AsnsPage() {
   const { mode } = useDataSource()
   const { enabled, snapshot, loading, error } = useEvoBGP()
+  const [importOpen, setImportOpen] = useState(false)
 
   const useEvoCatalog = mode === "live" && enabled
 
@@ -28,7 +31,9 @@ export default function AsnsPage() {
         crumbs={[{ label: "Данные" }, { label: "ASN" }]}
         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" />Добавить ASN</Button>
           </>
@@ -57,6 +62,7 @@ export default function AsnsPage() {
           </div>
           <DataTable
             data={rows}
+            isLoading={useEvoCatalog && loading && !snapshot}
             searchPlaceholder="Поиск по ASN, имени, префиксам…"
             searchKeys={["asn", "org", "prefixes"]}
             columns={[
@@ -106,6 +112,16 @@ export default function AsnsPage() {
           />
         </div>
       </div>
+      <FileImportDialog
+        open={importOpen}
+        onOpenChange={setImportOpen}
+        title="Импорт ASN"
+        description="Загрузите CSV или JSON со списком автономных систем"
+        accept=".csv,.json,text/csv,application/json"
+        onImport={async (files) => {
+          toast.info(`Выбран файл: ${files[0]?.name ?? "—"}`)
+        }}
+      />
     </div>
   )
 }

app/(main)/backups/page.tsx

@@ -2,6 +2,10 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import { BackupsDataGrid } from "@/components/data-grids/backups-data-grid"
+import { FileImportDialog } from "@/components/file-import-dialog"
+import { FormField, FormToggle, SectionTitle, SegmentedControl } from "@/components/form-kit"
 import { StatusBadge } from "@/components/status-badge"
 import type { Backup, Server } from "@/lib/data"
 import { Card, CardContent } from "@/components/ui/card"
@@ -22,52 +26,17 @@ import { listServers } from "@/shared/api/servers"
 import { toFrontendServer } from "@/entities/server/model/mappers"
 import { createBackupsAsync, deleteBackup, getBackupJob, getBackupScheduleSettings, listBackups, putBackupScheduleSettings, type BackupItem } from "@/shared/api/backups"
 import { toast } from "sonner"
-
-// ─── small UI helpers ─────────────────────────────────────────────────────────
-
-function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button type="button" role="switch" aria-checked={checked} onClick={() => onChange(!checked)}
-      className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors ${checked ? "bg-primary" : "bg-input"}`}>
-      <span className={`pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${checked ? "translate-x-4" : "translate-x-0"}`} />
-    </button>
-  )
-}
-
-function SectionTitle({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-2 pb-1">
-      <span className="text-muted-foreground">{icon}</span>
-      <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{children}</span>
-      <div className="flex-1 h-px bg-border" />
-    </div>
-  )
-}
-
-function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <label className="text-sm font-medium">{label}</label>
-      {children}
-      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
-    </div>
-  )
-}
-
-function SegmentedControl<T extends string>({ value, onChange, options }: {
-  value: T; onChange: (v: T) => void; options: { value: T; label: string }[]
-}) {
-  return (
-    <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5 w-fit">
-      {options.map((o) => (
-        <button key={o.value} type="button" onClick={() => onChange(o.value)}
-          className={`px-3 py-1 text-sm rounded transition-colors ${value === o.value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}>
-          {o.label}
-        </button>
-      ))}
-    </div>
-  )
-}
+import {
+  Stepper,
+  StepperContent,
+  StepperIndicator,
+  StepperItem,
+  StepperNav,
+  StepperPanel,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from "@/components/reui/stepper"
 
 // ─── types ────────────────────────────────────────────────────────────────────
 
@@ -168,8 +137,11 @@ export default function BackupsPage() {
 
   // Manual backup sheet
   const [manualOpen,    setManualOpen]    = useState(false)
+  const [manualStep,    setManualStep]    = useState(1)
   const [manualServers, setManualServers] = useState<Set<string>>(new Set())
   const [manualNotes,   setManualNotes]   = useState("")
+  const [restoreOpen, setRestoreOpen] = useState(false)
+  const [restoreTarget, setRestoreTarget] = useState<Backup | null>(null)
   function toggleManualServer(id: string) {
     setManualServers((prev) => {
       const next = new Set(prev)
@@ -356,7 +328,7 @@ export default function BackupsPage() {
             </Button>
             <Button
               size="sm"
-              onClick={() => { setManualServers(new Set()); setManualNotes(""); setManualOpen(true) }}
+              onClick={() => { setManualServers(new Set()); setManualNotes(""); setManualStep(1); setManualOpen(true) }}
               disabled={loading}
             >
               <PlusIcon className="size-4" />Новый бэкап
@@ -425,81 +397,27 @@ export default function BackupsPage() {
           {/* ── История ──────────────────────────────────────────────────── */}
           {tab === "history" && (
             <Card>
-              <div className="flex items-center gap-3 px-5 py-3 border-b flex-wrap">
-                <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5">
-                  {([
-                    { value: "all",    label: "Все",      count: backupList.length },
-                    { value: "auto",   label: "Авто",     count: autoCount   },
-                    { value: "manual", label: "Вручную",  count: manualCount },
-                  ] as { value: KindFilter; label: string; count: number }[]).map((t) => (
-                    <button key={t.value} onClick={() => setKindFilter(t.value)}
-                      className={`flex items-center gap-1.5 rounded px-3 py-1 text-sm transition-colors ${kindFilter === t.value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}>
-                      {t.label}
-                      <span className="text-xs tabular-nums opacity-60">{t.count}</span>
-                    </button>
-                  ))}
-                </div>
-                <span className="text-sm text-muted-foreground ml-auto">{filtered.length} бэкапов</span>
-              </div>
-
-              <div className="overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="border-b border-border text-xs text-muted-foreground">
-                      <th className="text-left font-medium px-5 py-3">Файл</th>
-                      <th className="text-left font-medium px-4 py-3">Сервер</th>
-                      <th className="text-left font-medium px-4 py-3">Размер</th>
-                      <th className="text-left font-medium px-4 py-3">Тип</th>
-                      <th className="text-left font-medium px-4 py-3">Заметки</th>
-                      <th className="text-left font-medium px-4 py-3">Создан</th>
-                      <th className="w-28 px-3 py-3" />
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-border">
-                    {filtered.length === 0 && (
-                      <tr><td colSpan={7} className="px-5 py-10 text-center text-sm text-muted-foreground">Нет бэкапов</td></tr>
-                    )}
-                    {filtered.map((b) => (
-                      <tr key={b.id} className="hover:bg-muted/40 transition-colors group">
-                        <td className="px-5 py-3 font-mono text-xs font-medium">{b.filename}</td>
-                        <td className="px-4 py-3 text-sm text-muted-foreground">{b.server}</td>
-                        <td className="px-4 py-3 font-mono text-xs text-muted-foreground">{b.size}</td>
-                        <td className="px-4 py-3">
-                          <span className={cn("text-xs px-2 py-0.5 rounded border font-medium",
-                            b.kind === "manual"
-                              ? "bg-blue-500/10 text-blue-400 border-blue-500/20"
-                              : "bg-muted text-muted-foreground border-border"
-                          )}>
-                            {b.kind === "auto" ? "авто" : "вручную"}
-                          </span>
-                        </td>
-                        <td className="px-4 py-3 text-xs text-muted-foreground max-w-[200px] truncate">{b.notes || "—"}</td>
-                        <td className="px-4 py-3 text-xs text-muted-foreground">{b.created}</td>
-                        <td className="px-3 py-3">
-                          <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="size-7"
-                              title="Скачать"
-                              onClick={() => void handleDownload(b.id, b.filename)}
-                            >
-                              <DownloadIcon className="size-3.5" />
-                            </Button>
-                            <Button variant="ghost" size="icon" className="size-7" title="Восстановить">
-                              <RefreshCwIcon className="size-3.5" />
-                            </Button>
-                            <Button variant="ghost" size="icon" className="size-7 text-destructive hover:text-destructive"
-                              title="Удалить" onClick={() => void handleDelete(b.id)}>
-                              <Trash2Icon className="size-3.5" />
-                            </Button>
-                          </div>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
+              <DataPageToolbar
+                segmented={{
+                  value: kindFilter,
+                  onChange: setKindFilter,
+                  options: [
+                    { value: "all", label: "Все", count: backupList.length },
+                    { value: "auto", label: "Авто", count: autoCount },
+                    { value: "manual", label: "Вручную", count: manualCount },
+                  ],
+                }}
+                countLabel={`${filtered.length} бэкапов`}
+              />
+              <BackupsDataGrid
+                backups={filtered}
+                onDownload={handleDownload}
+                onRestore={(b) => {
+                  setRestoreTarget(b)
+                  setRestoreOpen(true)
+                }}
+                onDelete={handleDelete}
+              />
             </Card>
           )}
 
@@ -517,11 +435,11 @@ export default function BackupsPage() {
                       <p className="text-sm font-medium">Автоматический бэкап</p>
                       <p className="text-xs text-muted-foreground mt-0.5">Создавать бэкапы по расписанию</p>
                     </div>
-                    <Toggle checked={schedule.enabled} onChange={(v) => setSched("enabled", v)} />
+                    <FormToggle checked={schedule.enabled} onChange={(v) => setSched("enabled", v)} />
                   </div>
 
                   <div className={cn("flex flex-col gap-4 transition-opacity", !schedule.enabled && "opacity-40 pointer-events-none")}>
-                    <Field label="Частота">
+                    <FormField label="Частота">
                       <SegmentedControl
                         value={schedule.frequency}
                         onChange={(v) => setSched("frequency", v)}
@@ -531,10 +449,10 @@ export default function BackupsPage() {
                           { value: "monthly", label: "Ежемесячно" },
                         ]}
                       />
-                    </Field>
+                    </FormField>
 
                     {schedule.frequency === "weekly" && (
-                      <Field label="День недели">
+                      <FormField label="День недели">
                         <div className="flex gap-1">
                           {WEEK_DAYS.map((d, i) => (
                             <button key={i} type="button" onClick={() => setSched("weekDay", i)}
@@ -548,18 +466,18 @@ export default function BackupsPage() {
                             </button>
                           ))}
                         </div>
-                      </Field>
+                      </FormField>
                     )}
 
                     {schedule.frequency === "monthly" && (
-                      <Field label="День месяца" hint="1–28">
+                      <FormField label="День месяца" hint="1–28">
                         <Input type="number" min={1} max={28} className="font-mono w-24"
                           value={schedule.monthDay}
                           onChange={(e) => setSched("monthDay", Math.min(28, Math.max(1, Number(e.target.value))))} />
-                      </Field>
+                      </FormField>
                     )}
 
-                    <Field label="Время запуска">
+                    <FormField label="Время запуска">
                       <div className="flex items-center gap-2">
                         <div className="relative">
                           <Input type="number" min={0} max={23} className="font-mono w-20 text-center"
@@ -581,15 +499,15 @@ export default function BackupsPage() {
                           ))}
                         </div>
                       </div>
-                    </Field>
+                    </FormField>
 
                     <div className="grid grid-cols-2 gap-4">
-                      <Field label="Хранить бэкапов" hint="На каждый сервер">
+                      <FormField label="Хранить бэкапов" hint="На каждый сервер">
                         <Input type="number" min={1} max={90} className="font-mono"
                           value={schedule.keepCount}
                           onChange={(e) => setSched("keepCount", Math.max(1, Number(e.target.value)))} />
-                      </Field>
-                      <Field label="Формат файла">
+                      </FormField>
+                      <FormField label="Формат файла">
                         <SegmentedControl
                           value={schedule.format}
                           onChange={(v) => setSched("format", v)}
@@ -598,7 +516,7 @@ export default function BackupsPage() {
                             { value: "backup", label: ".backup" },
                           ]}
                         />
-                      </Field>
+                      </FormField>
                     </div>
                   </div>
                 </CardContent>
@@ -609,7 +527,7 @@ export default function BackupsPage() {
                 <CardContent className="px-5 py-5 flex flex-col gap-5">
                   <SectionTitle icon={<FolderIcon className="size-3.5" />}>Хранилище</SectionTitle>
 
-                  <Field label="Тип хранилища">
+                  <FormField label="Тип хранилища">
                     <SegmentedControl
                       value={storage.type}
                       onChange={(v) => setStore("type", v)}
@@ -620,45 +538,45 @@ export default function BackupsPage() {
                         { value: "smb",   label: "SMB" },
                       ]}
                     />
-                  </Field>
+                  </FormField>
 
                   {storage.type === "local" && (
-                    <Field label="Путь сохранения" hint="Директория на сервере приложения">
+                    <FormField label="Путь сохранения" hint="Директория на сервере приложения">
                       <Input className="font-mono" placeholder="/var/backup/mikrotik"
                         value={storage.localPath}
                         onChange={(e) => setStore("localPath", e.target.value)} />
-                    </Field>
+                    </FormField>
                   )}
 
                   {storage.type !== "local" && (
                     <>
                       <div className="grid grid-cols-3 gap-3">
                         <div className="col-span-2">
-                          <Field label="Хост">
+                          <FormField label="Хост">
                             <Input className="font-mono" placeholder="192.168.1.100"
                               value={storage.host} onChange={(e) => setStore("host", e.target.value)} />
-                          </Field>
+                          </FormField>
                         </div>
-                        <Field label="Порт">
+                        <FormField label="Порт">
                           <Input className="font-mono"
                             placeholder={storage.type === "ftp" ? "21" : storage.type === "scp" ? "22" : "445"}
                             value={storage.port} onChange={(e) => setStore("port", e.target.value)} />
-                        </Field>
+                        </FormField>
                       </div>
 
                       {storage.type === "smb" && (
-                        <Field label="Общая папка (Share)">
+                        <FormField label="Общая папка (Share)">
                           <Input className="font-mono" placeholder="backups"
                             value={storage.share} onChange={(e) => setStore("share", e.target.value)} />
-                        </Field>
+                        </FormField>
                       )}
 
                       <div className="grid grid-cols-2 gap-3">
-                        <Field label="Пользователь">
+                        <FormField label="Пользователь">
                           <Input className="font-mono" placeholder="backup-user"
                             value={storage.username} onChange={(e) => setStore("username", e.target.value)} />
-                        </Field>
-                        <Field label={storage.type === "scp" ? "Пароль / ключ" : "Пароль"}>
+                        </FormField>
+                        <FormField label={storage.type === "scp" ? "Пароль / ключ" : "Пароль"}>
                           <div className="relative">
                             <Input
                               type={storage.showPassword ? "text" : "password"}
@@ -673,13 +591,13 @@ export default function BackupsPage() {
                               {storage.showPassword ? "скрыть" : "показ"}
                             </button>
                           </div>
-                        </Field>
+                        </FormField>
                       </div>
 
-                      <Field label="Удалённый путь">
+                      <FormField label="Удалённый путь">
                         <Input className="font-mono" placeholder="/mikrotik-backups"
                           value={storage.remotePath} onChange={(e) => setStore("remotePath", e.target.value)} />
-                      </Field>
+                      </FormField>
                     </>
                   )}
 
@@ -759,71 +677,129 @@ export default function BackupsPage() {
       </div>
 
       {/* ══ Sheet: Manual backup ══════════════════════════════════════════════ */}
-      <Sheet open={manualOpen} onOpenChange={setManualOpen}>
+      <Sheet open={manualOpen} onOpenChange={(v) => { setManualOpen(v); if (!v) setManualStep(1) }}>
         <SheetContent side="right" className="w-full sm:max-w-md flex flex-col gap-0 p-0">
           <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
             <SheetTitle>Новый бэкап</SheetTitle>
             <SheetDescription>Снять конфигурацию вручную с выбранных серверов</SheetDescription>
           </SheetHeader>
 
-          <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
-            <div className="flex flex-col gap-3">
-              <div className="flex items-center justify-between mb-1">
-                <p className="text-sm font-medium">Выберите серверы</p>
-                <div className="flex items-center gap-2">
-                  <button type="button" onClick={() => setManualServers(new Set(liveServers.map((s) => s.id)))}
-                    className="text-xs text-primary hover:underline">Все</button>
-                  <span className="text-border">·</span>
-                  <button type="button" onClick={() => setManualServers(new Set())}
-                    className="text-xs text-muted-foreground hover:text-foreground hover:underline">Сбросить</button>
+          <Stepper value={manualStep} onValueChange={setManualStep} className="flex-1 flex flex-col min-h-0 px-6 py-5">
+            <StepperNav className="mb-5">
+              <StepperItem step={1}>
+                <StepperTrigger>
+                  <StepperIndicator>1</StepperIndicator>
+                  <StepperTitle className="sr-only">Серверы</StepperTitle>
+                </StepperTrigger>
+                <StepperSeparator />
+              </StepperItem>
+              <StepperItem step={2}>
+                <StepperTrigger>
+                  <StepperIndicator>2</StepperIndicator>
+                  <StepperTitle className="sr-only">Заметка</StepperTitle>
+                </StepperTrigger>
+                <StepperSeparator />
+              </StepperItem>
+              <StepperItem step={3}>
+                <StepperTrigger>
+                  <StepperIndicator>3</StepperIndicator>
+                  <StepperTitle className="sr-only">Подтверждение</StepperTitle>
+                </StepperTrigger>
+              </StepperItem>
+            </StepperNav>
+            <StepperPanel className="flex-1 overflow-y-auto">
+              <StepperContent value={1} className="flex flex-col gap-3">
+                <div className="flex items-center justify-between mb-1">
+                  <p className="text-sm font-medium">Выберите серверы</p>
+                  <div className="flex items-center gap-2">
+                    <button type="button" onClick={() => setManualServers(new Set(liveServers.map((s) => s.id)))}
+                      className="text-xs text-primary hover:underline">Все</button>
+                    <span className="text-border">·</span>
+                    <button type="button" onClick={() => setManualServers(new Set())}
+                      className="text-xs text-muted-foreground hover:text-foreground hover:underline">Сбросить</button>
+                  </div>
                 </div>
-              </div>
-              {liveServers.map((s) => {
-                const checked = manualServers.has(s.id)
-                return (
-                  <button key={s.id} type="button" onClick={() => toggleManualServer(s.id)}
-                    className={cn(
-                      "flex items-center gap-3 rounded-lg border p-3 text-left transition-colors",
-                      checked ? "border-primary/40 bg-primary/5" : "border-border hover:bg-muted/40"
-                    )}>
-                    <div className={cn(
-                      "flex size-4 shrink-0 items-center justify-center rounded border transition-colors",
-                      checked ? "bg-primary border-primary" : "border-border"
-                    )}>
-                      {checked && <svg width="10" height="8" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.5 2.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium">{s.name}</p>
-                      <div className="flex items-center gap-1.5 mt-0.5">
-                        <span className="text-xs font-mono text-muted-foreground">{s.host}</span>
-                        <StatusBadge status={s.status} />
+                {liveServers.map((s) => {
+                  const checked = manualServers.has(s.id)
+                  return (
+                    <button key={s.id} type="button" onClick={() => toggleManualServer(s.id)}
+                      className={cn(
+                        "flex items-center gap-3 rounded-lg border p-3 text-left transition-colors",
+                        checked ? "border-primary/40 bg-primary/5" : "border-border hover:bg-muted/40"
+                      )}>
+                      <div className={cn(
+                        "flex size-4 shrink-0 items-center justify-center rounded border transition-colors",
+                        checked ? "bg-primary border-primary" : "border-border"
+                      )}>
+                        {checked && <svg width="10" height="8" viewBox="0 0 10 8" fill="none"><path d="M1 4l2.5 2.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                       </div>
-                    </div>
-                    {s.status === "offline" && (
-                      <span className="text-xs text-muted-foreground">недоступен</span>
-                    )}
-                  </button>
-                )
-              })}
-            </div>
-
-            <div className="flex flex-col gap-1.5">
-              <label className="text-sm font-medium">Заметка</label>
-              <Input placeholder="Например: перед обновлением BGP"
-                value={manualNotes} onChange={(e) => setManualNotes(e.target.value)} />
-            </div>
-          </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium">{s.name}</p>
+                        <div className="flex items-center gap-1.5 mt-0.5">
+                          <span className="text-xs font-mono text-muted-foreground">{s.host}</span>
+                          <StatusBadge status={s.status} />
+                        </div>
+                      </div>
+                      {s.status === "offline" && (
+                        <span className="text-xs text-muted-foreground">недоступен</span>
+                      )}
+                    </button>
+                  )
+                })}
+              </StepperContent>
+              <StepperContent value={2} className="flex flex-col gap-4">
+                <FormField label="Заметка">
+                  <Input placeholder="Например: перед обновлением BGP"
+                    value={manualNotes} onChange={(e) => setManualNotes(e.target.value)} />
+                </FormField>
+              </StepperContent>
+              <StepperContent value={3} className="flex flex-col gap-3 text-sm">
+                <p className="text-muted-foreground">
+                  Будет создан бэкап для <strong className="text-foreground">{manualServers.size}</strong> серверов.
+                </p>
+                {manualNotes && (
+                  <p className="text-muted-foreground">Заметка: {manualNotes}</p>
+                )}
+              </StepperContent>
+            </StepperPanel>
+          </Stepper>
 
           <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
             <SheetClose render={<Button variant="outline" className="flex-1" />}>Отмена</SheetClose>
-            <Button className="flex-1"
-              disabled={manualServers.size === 0 || backupJobId !== null}
-              onClick={handleManualBackup}>
-              Снять бэкап ({manualServers.size})
-            </Button>
+            {manualStep > 1 && (
+              <Button variant="outline" className="flex-1" onClick={() => setManualStep((s) => s - 1)}>
+                Назад
+              </Button>
+            )}
+            {manualStep < 3 ? (
+              <Button
+                className="flex-1"
+                disabled={manualStep === 1 && manualServers.size === 0}
+                onClick={() => setManualStep((s) => s + 1)}
+              >
+                Далее
+              </Button>
+            ) : (
+              <Button className="flex-1"
+                disabled={manualServers.size === 0 || backupJobId !== null}
+                onClick={handleManualBackup}>
+                Снять бэкап ({manualServers.size})
+              </Button>
+            )}
           </SheetFooter>
         </SheetContent>
       </Sheet>
+
+      <FileImportDialog
+        open={restoreOpen}
+        onOpenChange={setRestoreOpen}
+        title={restoreTarget ? `Восстановление: ${restoreTarget.filename}` : "Восстановление бэкапа"}
+        description="Выберите файл конфигурации для загрузки на роутер"
+        accept=".backup,.rsc,.zip"
+        onImport={async (files) => {
+          toast.success(`Файл ${files[0]?.name} подготовлен к восстановлению на ${restoreTarget?.server ?? "сервер"}`)
+        }}
+      />
     </div>
   )
 }

app/(main)/bgp/page.tsx

@@ -2,6 +2,13 @@
 
 import { Fragment, useState, useMemo, useEffect } from "react"
 import { PageHeader } from "@/components/page-header"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import { BgpSessionsDataGrid } from "@/components/data-grids/bgp-sessions-data-grid"
+import type { Filter } from "@/components/reui/filters"
+import { applyReuiFilters } from "@/lib/data-filters/apply-reui-filters"
+import { BGP_FILTER_FIELDS } from "@/lib/data-filters/bgp-filter-fields"
+import type { BgpSessionRow, BgpState, BgpType } from "@/lib/bgp/types"
+import { BGP_AS_NAMES } from "@/lib/bgp/types"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -17,49 +24,12 @@ import { useDataSource } from "@/lib/data-source"
 
 // ─── types ────────────────────────────────────────────────────────────────────
 
-type BgpState  = "Established" | "Active" | "Idle" | "Connect" | "OpenSent" | "OpenConfirm"
-type BgpType   = "eBGP" | "iBGP"
-type BgpAfi    = "IPv4 Unicast" | "IPv6 Unicast" | "VPNv4 Unicast"
+type BgpSession = BgpSessionRow
 type BgpTab    = "sessions" | "routers" | "analytics"
 type StateFilter = "all" | BgpState
 type TypeFilter  = "all" | BgpType
 
-interface BgpSession {
-  id: string
-  serverId: string
-  serverLabel: string
-  serverSite: string
-  peerIp: string
-  remoteAs: number
-  localAs: number
-  routerId: string
-  description: string
-  state: BgpState
-  type: BgpType
-  afi: BgpAfi
-  uptime: string | null
-  holdTime: number
-  keepalive: number
-  prefixesRx: number
-  prefixesTx: number
-  prefixesActive: number
-  inputMessages: number
-  outputMessages: number
-  capabilities: string[]
-  lastError: string | null
-}
-
-// ─── AS name lookup ───────────────────────────────────────────────────────────
-
-const AS_NAMES: Record<number, string> = {
-  8359:  "МТС / Tele2",
-  13238: "Яндекс",
-  12389: "Ростелеком",
-  24940: "Hetzner",
-  6777:  "AMS-IX",
-  1299:  "Telia",
-  65001: "iBGP internal",
-}
+const AS_NAMES = BGP_AS_NAMES
 // ─── mock data ────────────────────────────────────────────────────────────────
 
 const SESSIONS: BgpSession[] = [
@@ -240,13 +210,6 @@ function TypeBadge({ type }: { type: BgpType }) {
   )
 }
 
-function CapChip({ cap }: { cap: string }) {
-  return (
-    <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium border bg-muted/60 text-muted-foreground border-border/60">
-      {cap}
-    </span>
-  )
-}
 
 function fmtNum(n: number) {
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
@@ -254,108 +217,6 @@ function fmtNum(n: number) {
   return String(n)
 }
 
-function PrefixBar({ rx, tx, active }: { rx: number; tx: number; active: number }) {
-  const max = Math.max(rx, 1)
-  return (
-    <div className="flex flex-col gap-1.5 text-[10px] font-mono">
-      {[
-        { label: "Получено",   val: rx,     color: "bg-[var(--chart-rx)]", w: rx / max },
-        { label: "Активных",   val: active, color: "bg-[var(--chart-1)]",  w: active / max },
-        { label: "Отправлено", val: tx,     color: "bg-[var(--chart-tx)]", w: Math.min(tx / max, 1) },
-      ].map(r => (
-        <div key={r.label} className="flex items-center gap-2">
-          <span className="w-20 text-muted-foreground shrink-0">{r.label}</span>
-          <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
-            <div className={cn("h-full rounded-full", r.color)}
-              style={{ width: `${Math.max(r.w * 100, r.val > 0 ? 2 : 0)}%` }} />
-          </div>
-          <span className="w-14 text-right tabular-nums">{fmtNum(r.val)}</span>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// ─── RSC snippet ──────────────────────────────────────────────────────────────
-
-function rscSnippet(s: BgpSession) {
-  return `/routing bgp connection\nadd name=peer-as${s.remoteAs} remote.address=${s.peerIp}/32 \\\n    remote.as=${s.remoteAs} local.role=${s.type === "eBGP" ? "ebgp" : "ibgp"} \\\n    output.filter-chain=export-filter input.filter=import-filter \\\n    routing-table=main`
-}
-
-// ─── session expanded row ─────────────────────────────────────────────────────
-
-function SessionDetail({ s }: { s: BgpSession }) {
-  const [copied, setCopied] = useState(false)
-  function copy() {
-    navigator.clipboard.writeText(rscSnippet(s)).then(() => {
-      setCopied(true); setTimeout(() => setCopied(false), 1800)
-    })
-  }
-  return (
-    <div className="px-4 pb-4 pt-2 bg-muted/20 border-t border-border/60">
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
-        {[
-          { label: "Router ID",      value: s.routerId },
-          { label: "Hold / KA",      value: `${s.holdTime}s / ${s.keepalive}s` },
-          { label: "AFI/SAFI",       value: s.afi },
-          { label: "Сообщения ↓/↑",  value: `${fmtNum(s.inputMessages)} / ${fmtNum(s.outputMessages)}` },
-        ].map(({ label, value }) => (
-          <div key={label}>
-            <p className="text-[10px] text-muted-foreground mb-0.5">{label}</p>
-            <p className="text-xs font-mono font-medium">{value}</p>
-          </div>
-        ))}
-      </div>
-
-      {/* prefix bars */}
-      {s.state === "Established" && (
-        <div className="mb-4">
-          <p className="text-[10px] text-muted-foreground mb-2 uppercase tracking-wider font-semibold">Префиксы</p>
-          <PrefixBar rx={s.prefixesRx} tx={s.prefixesTx} active={s.prefixesActive} />
-        </div>
-      )}
-
-      {/* capabilities */}
-      {s.capabilities.length > 0 && (
-        <div className="mb-4">
-          <p className="text-[10px] text-muted-foreground mb-1.5 uppercase tracking-wider font-semibold">Capabilities</p>
-          <div className="flex flex-wrap gap-1.5">
-            {s.capabilities.map(c => <CapChip key={c} cap={c} />)}
-          </div>
-        </div>
-      )}
-
-      {/* last error */}
-      {s.lastError && (
-        <div className="mb-4 flex items-center gap-2 rounded-md border border-red-500/20 bg-red-500/5 px-3 py-2">
-          <span className="size-1.5 rounded-full bg-red-500 shrink-0" />
-          <p className="text-xs font-mono text-red-500">{s.lastError}</p>
-        </div>
-      )}
-
-      {/* rsc export */}
-      <div className="mt-2">
-        <p className="text-[10px] text-muted-foreground mb-1.5 uppercase tracking-wider font-semibold">RouterOS Export</p>
-        <div className="rounded-md bg-[#0a0f1a] border border-white/8 px-3 py-2.5 flex items-start justify-between gap-3">
-          <pre className="text-[10px] font-mono text-[#94a3b8] leading-relaxed whitespace-pre-wrap flex-1 min-w-0">
-            {rscSnippet(s)}
-          </pre>
-          <button onClick={copy}
-            className={cn(
-              "shrink-0 flex items-center gap-1 text-[10px] px-2 py-1 rounded border transition-colors",
-              copied
-                ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-400"
-                : "border-white/10 text-white/40 hover:text-white/70 hover:border-white/20",
-            )}>
-            <ClipboardCopyIcon className="size-3" />
-            {copied ? "Скопировано" : "Копировать"}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
 // ─── backend mapping ──────────────────────────────────────────────────────────
 
 interface BackendBgpSession {
@@ -397,158 +258,81 @@ function backendToFrontend(b: BackendBgpSession): BgpSession {
 
 // ─── sessions tab ─────────────────────────────────────────────────────────────
 
-const STATE_FILTERS: Array<{ value: StateFilter; label: string }> = [
-  { value: "all",          label: "Все"          },
-  { value: "Established",  label: "Established"  },
-  { value: "Active",       label: "Active"       },
-  { value: "Idle",         label: "Idle"         },
-  { value: "OpenSent",     label: "OpenSent"     },
-]
+const BGP_FILTER_ACCESSORS = {
+  state: (s: BgpSession) => s.state,
+  type: (s: BgpSession) => s.type,
+  afi: (s: BgpSession) => s.afi,
+}
 
 function SessionsTab({ sessions }: { sessions: BgpSession[] }) {
-  const [search,      setSearch]      = useState("")
+  const [search, setSearch] = useState("")
   const [stateFilter, setStateFilter] = useState<StateFilter>("all")
-  const [typeFilter,  setTypeFilter]  = useState<TypeFilter>("all")
-  const [expandedId,  setExpandedId]  = useState<string | null>(null)
+  const [typeFilter, setTypeFilter] = useState<TypeFilter>("all")
+  const [advancedFilters, setAdvancedFilters] = useState<Filter[]>([])
 
   const q = search.toLowerCase()
-  const filtered = useMemo(() => sessions.filter(s => {
-    if (stateFilter !== "all" && s.state !== stateFilter) return false
-    if (typeFilter  !== "all" && s.type  !== typeFilter)  return false
-    if (q && !s.peerIp.includes(q) && !s.description.toLowerCase().includes(q)
-          && !s.serverLabel.includes(q) && !String(s.remoteAs).includes(q)
-          && !(AS_NAMES[s.remoteAs] ?? "").toLowerCase().includes(q)) return false
-    return true
-  }), [sessions, q, stateFilter, typeFilter])
+  const filtered = useMemo(() => {
+    const base = sessions.filter((s) => {
+      if (stateFilter !== "all" && s.state !== stateFilter) return false
+      if (typeFilter !== "all" && s.type !== typeFilter) return false
+      if (
+        q &&
+        !s.peerIp.includes(q) &&
+        !s.description.toLowerCase().includes(q) &&
+        !s.serverLabel.includes(q) &&
+        !String(s.remoteAs).includes(q) &&
+        !(AS_NAMES[s.remoteAs] ?? "").toLowerCase().includes(q)
+      ) {
+        return false
+      }
+      return true
+    })
+    return applyReuiFilters(base, advancedFilters, BGP_FILTER_ACCESSORS)
+  }, [sessions, q, stateFilter, typeFilter, advancedFilters])
 
   return (
     <div className="flex flex-col gap-4">
-
-      {/* filter bar */}
-      <div className="flex items-center gap-2 flex-wrap">
-        {/* search */}
-        <div className="relative">
-          <SearchIcon className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground pointer-events-none z-10" />
-          <Input
-            value={search} onChange={e => setSearch(e.target.value)}
-            placeholder="IP, AS, описание…"
-            className="h-8 pl-8 pr-8 w-52 text-xs"
-          />
-          {search && (
-            <button onClick={() => setSearch("")}
-              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground z-10">
-              <XIcon className="size-3" />
-            </button>
-          )}
-        </div>
-
-        {/* state filter */}
-        <div className="flex items-center gap-0.5 p-0.5 rounded-md border border-border bg-muted/40">
-          {STATE_FILTERS.map(f => (
-            <button key={f.value} onClick={() => setStateFilter(f.value)}
-              className={cn(
-                "px-2.5 py-1 text-[11px] rounded transition-colors whitespace-nowrap",
-                stateFilter === f.value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
-              )}>
-              {f.label}
-            </button>
-          ))}
-        </div>
-
-        {/* type filter */}
-        <div className="flex items-center gap-0.5 p-0.5 rounded-md border border-border bg-muted/40">
-          {(["all", "eBGP", "iBGP"] as const).map(t => (
-            <button key={t} onClick={() => setTypeFilter(t)}
-              className={cn(
-                "px-2.5 py-1 text-[11px] rounded transition-colors",
-                typeFilter === t ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
-              )}>
-              {t === "all" ? "Все типы" : t}
-            </button>
-          ))}
-        </div>
-
-        <span className="text-xs text-muted-foreground ml-auto">
-          {filtered.length} из {sessions.length}
-        </span>
-      </div>
-
-      {/* table */}
       <Card className="overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="w-full text-xs">
-            <thead>
-              <tr className="border-b bg-muted/40">
-                <th className="w-8" />
-                {["Роутер", "Peer IP", "Remote AS", "Описание", "Тип", "Состояние", "Uptime", "Prefixes ↓", "Prefixes ↑"].map(h => (
-                  <th key={h} className="text-left px-3 py-2.5 font-medium text-muted-foreground whitespace-nowrap">{h}</th>
-                ))}
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-border/60">
-              {filtered.map(s => {
-                const isOpen = expandedId === s.id
-                return (
-                  <Fragment key={s.id}>
-                    <tr
-                      onClick={() => setExpandedId(isOpen ? null : s.id)}
-                      className={cn(
-                        "cursor-pointer transition-colors",
-                        isOpen ? "bg-muted/30" : "hover:bg-muted/20",
-                      )}>
-                      <td className="pl-3 py-2.5">
-                        {isOpen
-                          ? <ChevronDownIcon  className="size-3.5 text-muted-foreground" />
-                          : <ChevronRightIcon className="size-3.5 text-muted-foreground" />}
-                      </td>
-                      <td className="px-3 py-2.5 font-mono whitespace-nowrap">{s.serverLabel}</td>
-                      <td className="px-3 py-2.5 font-mono">{s.peerIp}</td>
-                      <td className="px-3 py-2.5 font-mono">
-                        <div className="flex items-center gap-1.5">
-                          <span>AS{s.remoteAs}</span>
-                          {AS_NAMES[s.remoteAs] && (
-                            <span className="text-muted-foreground text-[10px]">{AS_NAMES[s.remoteAs]}</span>
-                          )}
-                        </div>
-                      </td>
-                      <td className="px-3 py-2.5 text-muted-foreground max-w-[180px] truncate">{s.description}</td>
-                      <td className="px-3 py-2.5"><TypeBadge type={s.type} /></td>
-                      <td className="px-3 py-2.5"><StateBadge state={s.state} /></td>
-                      <td className="px-3 py-2.5 font-mono tabular-nums text-muted-foreground">
-                        {s.uptime ?? "—"}
-                      </td>
-                      <td className="px-3 py-2.5 font-mono tabular-nums text-right">
-                        {s.prefixesRx > 0
-                          ? <span className="text-emerald-600 dark:text-emerald-400">{fmtNum(s.prefixesRx)}</span>
-                          : <span className="text-muted-foreground">—</span>}
-                      </td>
-                      <td className="px-3 py-2.5 font-mono tabular-nums text-right">
-                        {s.prefixesTx > 0
-                          ? <span className="text-[var(--chart-tx)]">{fmtNum(s.prefixesTx)}</span>
-                          : <span className="text-muted-foreground">—</span>}
-                      </td>
-                    </tr>
-                    {isOpen && (
-                      <tr>
-                        <td colSpan={10} className="p-0">
-                          <SessionDetail s={s} />
-                        </td>
-                      </tr>
-                    )}
-                  </Fragment>
-                )
-              })}
-
-              {filtered.length === 0 && (
-                <tr>
-                  <td colSpan={10} className="px-4 py-8 text-center text-sm text-muted-foreground">
-                    Нет сессий по заданным фильтрам
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
+        <DataPageToolbar
+          segmented={{
+            value: stateFilter,
+            onChange: setStateFilter,
+            options: [
+              { value: "all", label: "Все", count: sessions.length },
+              { value: "Established", label: "Established", count: sessions.filter((s) => s.state === "Established").length },
+              { value: "Active", label: "Active", count: sessions.filter((s) => s.state === "Active").length },
+              { value: "Idle", label: "Idle", count: sessions.filter((s) => s.state === "Idle").length },
+              { value: "OpenSent", label: "OpenSent", count: sessions.filter((s) => s.state === "OpenSent").length },
+            ],
+          }}
+          filters={advancedFilters}
+          onFiltersChange={setAdvancedFilters}
+          filterFields={BGP_FILTER_FIELDS}
+          search={search}
+          onSearchChange={setSearch}
+          searchPlaceholder="IP, AS, описание…"
+          countLabel={`${filtered.length} из ${sessions.length}`}
+          actions={
+            <div className="flex items-center gap-0.5 p-0.5 rounded-md border border-border bg-muted/40">
+              {(["all", "eBGP", "iBGP"] as const).map((t) => (
+                <button
+                  key={t}
+                  type="button"
+                  onClick={() => setTypeFilter(t)}
+                  className={cn(
+                    "px-2.5 py-1 text-[11px] rounded transition-colors",
+                    typeFilter === t
+                      ? "bg-background text-foreground shadow-sm"
+                      : "text-muted-foreground hover:text-foreground",
+                  )}
+                >
+                  {t === "all" ? "Все типы" : t}
+                </button>
+              ))}
+            </div>
+          }
+        />
+        <BgpSessionsDataGrid sessions={filtered} />
       </Card>
     </div>
   )

app/(main)/certificates/page.tsx

@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react"
 import { PageHeader } from "@/components/page-header"
+import { FormField, FormToggle, SectionTitle } from "@/components/form-kit"
+import { FileImportDialog } from "@/components/file-import-dialog"
 import { routerCertificates, servers as mockServers } from "@/lib/data"
 import type { CertStatus, Server } from "@/lib/data"
 import type { CertificateDto } from "@mmapp/contracts/certificates"
@@ -47,7 +49,19 @@ import {
   ChevronDownIcon,
   ChevronRightIcon,
   RefreshCwIcon,
+  UploadIcon,
 } from "lucide-react"
+import {
+  Stepper,
+  StepperContent,
+  StepperIndicator,
+  StepperItem,
+  StepperNav,
+  StepperPanel,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from "@/components/reui/stepper"
 
 const STATUS_CONFIG: Record<
   CertStatus,
@@ -93,60 +107,6 @@ function daysLeftBar(days: number, total = 365): number {
   return Math.min(100, Math.round((days / total) * 100))
 }
 
-function Field({
-  label,
-  hint,
-  required,
-  children,
-}: {
-  label: string
-  hint?: string
-  required?: boolean
-  children: ReactNode
-}) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <label className="text-sm font-medium">
-        {label}
-        {required && <span className="text-destructive ml-0.5">*</span>}
-      </label>
-      {children}
-      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
-    </div>
-  )
-}
-
-function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      onClick={() => onChange(!checked)}
-      className={cn(
-        "relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors",
-        checked ? "bg-primary" : "bg-input",
-      )}
-    >
-      <span
-        className={cn(
-          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
-          checked ? "translate-x-4" : "translate-x-0",
-        )}
-      />
-    </button>
-  )
-}
-
-function SectionTitle({ children }: { children: ReactNode }) {
-  return (
-    <div className="flex items-center gap-2 py-0.5">
-      <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{children}</span>
-      <div className="flex-1 h-px bg-border" />
-    </div>
-  )
-}
-
 function mockToDto(cert: (typeof routerCertificates)[number]): CertificateDto {
   return {
     id: cert.id,
@@ -679,6 +639,7 @@ function CertPartIssueForm({
   setIssueTrustWww,
   issueTrustApi,
   setIssueTrustApi,
+  step,
 }: {
   serverList: Server[]
   issueServerId: string
@@ -693,12 +654,15 @@ function CertPartIssueForm({
   setIssueTrustWww: (v: boolean) => void
   issueTrustApi: boolean
   setIssueTrustApi: (v: boolean) => void
+  step?: 1 | 2 | 3 | 4
 }) {
+  const showAll = step == null
   return (
     <div className="flex flex-col gap-5">
+      {(showAll || step === 1) && (
       <div className="flex flex-col gap-4">
         <SectionTitle>Основные</SectionTitle>
-        <Field label="Сервер" required hint="RouterOS 7.22+, куда импортируется сертификат">
+        <FormField label="Сервер" required hint="RouterOS 7.22+, куда импортируется сертификат">
           <select
             value={issueServerId}
             onChange={(e) => setIssueServerId(e.target.value)}
@@ -713,41 +677,45 @@ function CertPartIssueForm({
               </option>
             ))}
           </select>
-        </Field>
-        <Field label="Имя сертификата на роутере" required hint="Имя объекта /certificate на устройстве">
+        </FormField>
+        <FormField label="Имя сертификата на роутере" required hint="Имя объекта /certificate на устройстве">
           <Input
             className="font-mono"
             value={issueCertName}
             onChange={(e) => setIssueCertName(e.target.value)}
             placeholder="router-le"
           />
-        </Field>
+        </FormField>
       </div>
+      )}
 
+      {(showAll || step === 2) && (
       <div className="flex flex-col gap-4">
         <SectionTitle>Домены</SectionTitle>
-        <Field label="Common Name" required hint="Основное имя в сертификате">
+        <FormField label="Common Name" required hint="Основное имя в сертификате">
           <Input
             className="font-mono"
             value={issueCommonName}
             onChange={(e) => setIssueCommonName(e.target.value)}
             placeholder="vpn.example.com"
           />
-        </Field>
-        <Field label="SAN" hint="По одному имени в строке">
+        </FormField>
+        <FormField label="SAN" hint="По одному имени в строке">
           <textarea
             className="min-h-24 w-full rounded-lg border border-input bg-background px-2.5 py-2 text-sm font-mono text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
             value={issueSans}
             onChange={(e) => setIssueSans(e.target.value)}
             placeholder="www.example.com"
           />
-        </Field>
+        </FormField>
         <div className="rounded-lg border border-border bg-muted/20 px-4 py-3 text-xs text-muted-foreground">
           <p className="font-medium text-foreground mb-1">Let&apos;s Encrypt · DNS-01 (Cloudflare)</p>
           <p>TXT-запись создаётся в Cloudflare, сертификат импортируется на выбранный RouterOS.</p>
         </div>
       </div>
+      )}
 
+      {(showAll || step === 3) && (
       <div className="flex flex-col gap-4">
         <SectionTitle>Импорт на RouterOS</SectionTitle>
         <div className="flex items-center justify-between">
@@ -755,16 +723,29 @@ function CertPartIssueForm({
             <p className="text-sm font-medium">Trust store · www</p>
             <p className="text-xs text-muted-foreground">Веб-интерфейс и HTTPS-сервисы</p>
           </div>
-          <Toggle checked={issueTrustWww} onChange={setIssueTrustWww} />
+          <FormToggle checked={issueTrustWww} onChange={setIssueTrustWww} />
         </div>
         <div className="flex items-center justify-between">
           <div>
             <p className="text-sm font-medium">Trust store · api</p>
             <p className="text-xs text-muted-foreground">REST API и управление</p>
           </div>
-          <Toggle checked={issueTrustApi} onChange={setIssueTrustApi} />
+          <FormToggle checked={issueTrustApi} onChange={setIssueTrustApi} />
         </div>
       </div>
+      )}
+
+      {(showAll || step === 4) && (
+        <div className="rounded-lg border border-border bg-muted/20 px-4 py-3 text-sm">
+          <p className="font-medium mb-2">Проверьте параметры</p>
+          <ul className="text-xs text-muted-foreground space-y-1">
+            <li>Сервер: {serverList.find((s) => s.id === issueServerId)?.name ?? "—"}</li>
+            <li>Имя: {issueCertName || "—"}</li>
+            <li>CN: {issueCommonName || "—"}</li>
+            <li>Trust www: {issueTrustWww ? "да" : "нет"} · api: {issueTrustApi ? "да" : "нет"}</li>
+          </ul>
+        </div>
+      )}
     </div>
   )
 }
@@ -783,6 +764,8 @@ export default function CertificatesPage() {
   const [serverList, setServerList] = useState<Server[]>([])
 
   const [issueOpen, setIssueOpen] = useState(false)
+  const [issueStep, setIssueStep] = useState(1)
+  const [importOpen, setImportOpen] = useState(false)
   const [issueBusy, setIssueBusy] = useState(false)
   const [issueServerId, setIssueServerId] = useState("")
   const [issueCertName, setIssueCertName] = useState("")
@@ -1004,7 +987,11 @@ export default function CertificatesPage() {
               <RefreshCwIcon className={cn("size-4", loadState === "loading" && "animate-spin")} />
               Обновить
             </Button>
-            <Button size="sm" disabled={!liveReady || issueBusy} onClick={() => setIssueOpen(true)}>
+            <Button variant="outline" size="sm" onClick={() => setImportOpen(true)}>
+              <UploadIcon className="size-4" />
+              Импорт
+            </Button>
+            <Button size="sm" disabled={!liveReady || issueBusy} onClick={() => { setIssueStep(1); setIssueOpen(true) }}>
               <PlusIcon className="size-4" />
               Выпустить сертификат
             </Button>
@@ -1090,7 +1077,7 @@ export default function CertificatesPage() {
         </div>
       </div>
 
-      <Sheet open={issueOpen} onOpenChange={setIssueOpen}>
+      <Sheet open={issueOpen} onOpenChange={(v) => { setIssueOpen(v); if (!v) setIssueStep(1) }}>
         <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
           <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
             <SheetTitle>Выпуск сертификата</SheetTitle>
@@ -1099,40 +1086,87 @@ export default function CertificatesPage() {
             </SheetDescription>
           </SheetHeader>
 
-          <div className="flex-1 overflow-y-auto px-6 py-5">
-            <CertPartIssueForm
-              serverList={serverList}
-              issueServerId={issueServerId}
-              setIssueServerId={setIssueServerId}
-              issueCertName={issueCertName}
-              setIssueCertName={setIssueCertName}
-              issueCommonName={issueCommonName}
-              setIssueCommonName={setIssueCommonName}
-              issueSans={issueSans}
-              setIssueSans={setIssueSans}
-              issueTrustWww={issueTrustWww}
-              setIssueTrustWww={setIssueTrustWww}
-              issueTrustApi={issueTrustApi}
-              setIssueTrustApi={setIssueTrustApi}
-            />
-          </div>
+          <Stepper value={issueStep} onValueChange={setIssueStep} className="flex-1 flex flex-col min-h-0 px-6 py-5">
+            <StepperNav className="mb-5">
+              {[
+                { step: 1, title: "Основные" },
+                { step: 2, title: "Домены" },
+                { step: 3, title: "Импорт" },
+                { step: 4, title: "Проверка" },
+              ].map(({ step, title }, i, arr) => (
+                <StepperItem key={step} step={step}>
+                  <StepperTrigger>
+                    <StepperIndicator>{step}</StepperIndicator>
+                    <StepperTitle className="sr-only">{title}</StepperTitle>
+                  </StepperTrigger>
+                  {i < arr.length - 1 && <StepperSeparator />}
+                </StepperItem>
+              ))}
+            </StepperNav>
+            <StepperPanel className="flex-1 overflow-y-auto">
+              {[1, 2, 3, 4].map((s) => (
+                <StepperContent key={s} value={s}>
+                  <CertPartIssueForm
+                    step={s as 1 | 2 | 3 | 4}
+                    serverList={serverList}
+                    issueServerId={issueServerId}
+                    setIssueServerId={setIssueServerId}
+                    issueCertName={issueCertName}
+                    setIssueCertName={setIssueCertName}
+                    issueCommonName={issueCommonName}
+                    setIssueCommonName={setIssueCommonName}
+                    issueSans={issueSans}
+                    setIssueSans={setIssueSans}
+                    issueTrustWww={issueTrustWww}
+                    setIssueTrustWww={setIssueTrustWww}
+                    issueTrustApi={issueTrustApi}
+                    setIssueTrustApi={setIssueTrustApi}
+                  />
+                </StepperContent>
+              ))}
+            </StepperPanel>
+          </Stepper>
 
           <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
             <SheetClose render={<Button variant="outline" className="flex-1" disabled={issueBusy} />}>
               Отмена
             </SheetClose>
-            <Button
-              className="flex-1"
-              disabled={!liveReady || issueBusy}
-              onClick={() => {
-                void handleIssue()
-              }}
-            >
-              {issueBusy ? "Выпуск…" : "Выпустить"}
-            </Button>
+            {issueStep > 1 && (
+              <Button variant="outline" className="flex-1" disabled={issueBusy} onClick={() => setIssueStep((s) => s - 1)}>
+                Назад
+              </Button>
+            )}
+            {issueStep < 4 ? (
+              <Button
+                className="flex-1"
+                disabled={issueStep === 1 && (!issueServerId || !issueCertName)}
+                onClick={() => setIssueStep((s) => s + 1)}
+              >
+                Далее
+              </Button>
+            ) : (
+              <Button
+                className="flex-1"
+                disabled={!liveReady || issueBusy}
+                onClick={() => { void handleIssue() }}
+              >
+                {issueBusy ? "Выпуск…" : "Выпустить"}
+              </Button>
+            )}
           </SheetFooter>
         </SheetContent>
       </Sheet>
+
+      <FileImportDialog
+        open={importOpen}
+        onOpenChange={setImportOpen}
+        title="Импорт сертификата"
+        description="Загрузите PEM, CRT или PKCS#12 для импорта на RouterOS"
+        accept=".pem,.crt,.cer,.p12,.pfx"
+        onImport={async (files) => {
+          toast.success(`Файл ${files[0]?.name} готов к импорту на роутер`)
+        }}
+      />
     </div>
   )
 }

app/(main)/data-collection/page.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
+import { FormToggle } from "@/components/form-kit"
 import { Badge } from "@/components/ui/badge"
 import { Button, buttonVariants } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -79,38 +80,6 @@ function collectSettledErrors(results: PromiseSettledResult<unknown>[], labels:
   return errors
 }
 
-function Toggle({
-  checked,
-  onChange,
-  disabled,
-}: {
-  checked: boolean
-  onChange: (v: boolean) => void
-  disabled?: boolean
-}) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      disabled={disabled}
-      onClick={() => onChange(!checked)}
-      className={cn(
-        "relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors",
-        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-        checked ? "bg-primary" : "bg-input",
-      )}
-    >
-      <span
-        className={cn(
-          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
-          checked ? "translate-x-4" : "translate-x-0",
-        )}
-      />
-    </button>
-  )
-}
-
 function fmtMs(ms: number): string {
   if (ms < 1000) return `${ms} мс`
   const s = ms / 1000
@@ -1341,7 +1310,7 @@ export default function DataCollectionPage() {
                               </td>
                               <td className="px-3 py-3 text-center align-top">
                                 <span className={fixedSchedule ? "inline-flex pointer-events-none opacity-50" : "inline-flex"}>
-                                  <Toggle
+                                  <FormToggle
                                     checked={en}
                                     disabled={fixedSchedule || schedulerSaveBusy}
                                     onChange={(v) => {

app/(main)/domains/page.tsx

@@ -1,18 +1,21 @@
 "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 { domains as mockDomains } 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 DomainsPage() {
   const { mode } = useDataSource()
   const { enabled, snapshot, loading, error } = useEvoBGP()
+  const [importOpen, setImportOpen] = useState(false)
 
   const useEvoCatalog = mode === "live" && enabled
 
@@ -28,7 +31,9 @@ export default function DomainsPage() {
         crumbs={[{ label: "Данные" }, { label: "Домены" }]}
         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>
           </>
@@ -57,6 +62,7 @@ export default function DomainsPage() {
           </div>
           <DataTable
             data={rows}
+            isLoading={useEvoCatalog && loading && !snapshot}
             searchPlaceholder="Поиск по домену…"
             searchKeys={["domain", "asn", "filter"]}
             columns={[
@@ -109,6 +115,16 @@ export default function DomainsPage() {
           />
         </div>
       </div>
+      <FileImportDialog
+        open={importOpen}
+        onOpenChange={setImportOpen}
+        title="Импорт доменов"
+        description="Загрузите CSV или JSON со списком доменов"
+        accept=".csv,.json,text/csv,application/json"
+        onImport={async (files) => {
+          toast.info(`Выбран файл: ${files[0]?.name ?? "—"}`)
+        }}
+      />
     </div>
   )
 }

app/(main)/filters/page.tsx

@@ -2,6 +2,7 @@
 
 import { useMemo, useState, useCallback, useEffect } from "react"
 import { PageHeader } from "@/components/page-header"
+import { EmptyState } from "@/components/empty-state"
 import { StatusDot } from "@/components/status-dot"
 import { Flag } from "@/components/flag"
 import { Card } from "@/components/ui/card"
@@ -2062,22 +2063,23 @@ export default function FiltersPage() {
 
             {currentRules.length === 0 ? (
               /* empty state */
-              <div className="flex flex-col items-center justify-center py-20 gap-3 text-center">
-                <NetworkIcon className="size-8 text-muted-foreground/20" />
-                <div>
-                  <p className="text-sm font-medium text-muted-foreground">Нет правил фильтрации</p>
-                  <p className="text-xs text-muted-foreground/60 mt-1">
-                    {(isLive ? allTunnels.length > 0 : allTunnels.some(t => t.serverId === selectedServerId))
-                      ? "Добавьте правило: BGP community → GRE-шлюз"
-                      : "Сначала добавьте GRE-туннели для этого сервера"}
-                  </p>
-                </div>
-                {(isLive ? allTunnels.length > 0 : allTunnels.some(t => t.serverId === selectedServerId)) && (
-                  <Button size="sm" onClick={openCreate}>
-                    <PlusIcon className="size-4" />Добавить правило
-                  </Button>
-                )}
-              </div>
+              <EmptyState
+                icon={<NetworkIcon className="size-4" />}
+                title="Нет правил фильтрации"
+                description={
+                  (isLive ? allTunnels.length > 0 : allTunnels.some(t => t.serverId === selectedServerId))
+                    ? "Добавьте правило: BGP community → GRE-шлюз"
+                    : "Сначала добавьте GRE-туннели для этого сервера"
+                }
+                action={
+                  (isLive ? allTunnels.length > 0 : allTunnels.some(t => t.serverId === selectedServerId)) ? (
+                    <Button size="sm" onClick={openCreate}>
+                      <PlusIcon className="size-4" />Добавить правило
+                    </Button>
+                  ) : undefined
+                }
+                className="py-20"
+              />
             ) : filteredRules.length === 0 ? (
               /* no search results */
               <div className="flex flex-col items-center justify-center py-16 gap-2 text-muted-foreground">

app/(main)/firewall/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from "react"
 import { PageHeader } from "@/components/page-header"
+import { FormField, FormToggle, SectionTitle } from "@/components/form-kit"
 import { firewallRules, type FirewallRule } from "@/lib/data"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
@@ -341,22 +342,6 @@ function fmtHits(n: number): string {
   return String(n)
 }
 
-function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button type="button" role="switch" aria-checked={checked}
-      onClick={() => onChange(!checked)}
-      className={cn(
-        "relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors",
-        checked ? "bg-primary" : "bg-input",
-      )}>
-      <span className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
-        checked ? "translate-x-4" : "translate-x-0",
-      )} />
-    </button>
-  )
-}
-
 function ActionBadge({ action }: { action: string }) {
   const cls = ACTION_STYLES[action] ?? "bg-muted text-muted-foreground border-border"
   return (
@@ -375,29 +360,6 @@ function ChainBadge({ chain }: { chain: string }) {
   )
 }
 
-function Field({ label, hint, required, children }: {
-  label: string; hint?: string; required?: boolean; children: React.ReactNode
-}) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <label className="text-sm font-medium">
-        {label}{required && <span className="text-destructive ml-0.5">*</span>}
-      </label>
-      {children}
-      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
-    </div>
-  )
-}
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-2 py-0.5">
-      <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{children}</span>
-      <div className="flex-1 h-px bg-border" />
-    </div>
-  )
-}
-
 function NativeSelect({ value, onChange, children, className }: {
   value: string; onChange: (v: string) => void; children: React.ReactNode; className?: string
 }) {
@@ -507,67 +469,67 @@ function RuleSheet({ open, onClose, initialRule, chainGroup }: {
           <div className="flex flex-col gap-4">
             <SectionTitle>Цепочка и действие</SectionTitle>
             <div className="grid grid-cols-2 gap-3">
-              <Field label="Цепочка" required>
+              <FormField label="Цепочка" required>
                 <NativeSelect value={form.chain} onChange={(v) => set("chain", v)}>
                   {chainsForGroup.map((c) => <option key={c} value={c}>{c}</option>)}
                 </NativeSelect>
-              </Field>
-              <Field label="Действие" required>
+              </FormField>
+              <FormField label="Действие" required>
                 <NativeSelect value={form.action} onChange={(v) => set("action", v)}>
                   {actions.map((a) => <option key={a} value={a}>{a}</option>)}
                 </NativeSelect>
-              </Field>
+              </FormField>
             </div>
           </div>
 
           {/* Matching */}
           <div className="flex flex-col gap-4">
             <SectionTitle>Условие совпадения</SectionTitle>
-            <Field label="Протокол">
+            <FormField label="Протокол">
               <NativeSelect value={form.proto} onChange={(v) => set("proto", v)}>
                 {["all","tcp","udp","icmp","gre","esp","ah","ipencap","ospf"].map((p) =>
                   <option key={p} value={p}>{p}</option>
                 )}
               </NativeSelect>
-            </Field>
+            </FormField>
 
             <div className="grid grid-cols-2 gap-3">
-              <Field label="Src-address / Address-list" hint="IP, CIDR или имя address-list">
+              <FormField label="Src-address / Address-list" hint="IP, CIDR или имя address-list">
                 <Input className="font-mono h-8" placeholder="10.0.0.0/8"
                   value={form.srcAddrList} onChange={(e) => set("srcAddrList", e.target.value)} />
-              </Field>
-              <Field label="Dst-address / Address-list">
+              </FormField>
+              <FormField label="Dst-address / Address-list">
                 <Input className="font-mono h-8" placeholder="0.0.0.0/0"
                   value={form.dstAddrList} onChange={(e) => set("dstAddrList", e.target.value)} />
-              </Field>
+              </FormField>
             </div>
 
             <div className="grid grid-cols-2 gap-3">
-              <Field label="Src-port" hint="TCP/UDP, напр. 1024-65535">
+              <FormField label="Src-port" hint="TCP/UDP, напр. 1024-65535">
                 <Input className="font-mono h-8" placeholder="—"
                   value={form.srcPort} onChange={(e) => set("srcPort", e.target.value)} />
-              </Field>
-              <Field label="Dst-port">
+              </FormField>
+              <FormField label="Dst-port">
                 <Input className="font-mono h-8" placeholder="443"
                   value={form.dstPort} onChange={(e) => set("dstPort", e.target.value)} />
-              </Field>
+              </FormField>
             </div>
 
             <div className="grid grid-cols-2 gap-3">
-              <Field label="In-interface" hint="Входящий интерфейс">
+              <FormField label="In-interface" hint="Входящий интерфейс">
                 <Input className="font-mono h-8" placeholder="wan-msk"
                   value={form.inIface} onChange={(e) => set("inIface", e.target.value)} />
-              </Field>
-              <Field label="Out-interface">
+              </FormField>
+              <FormField label="Out-interface">
                 <Input className="font-mono h-8" placeholder="lan"
                   value={form.outIface} onChange={(e) => set("outIface", e.target.value)} />
-              </Field>
+              </FormField>
             </div>
 
-            <Field label="Connection-state" hint="Через запятую: new, established, related, invalid">
+            <FormField label="Connection-state" hint="Через запятую: new, established, related, invalid">
               <Input className="font-mono h-8" placeholder="new,established"
                 value={form.connState} onChange={(e) => set("connState", e.target.value)} />
-            </Field>
+            </FormField>
           </div>
 
           {/* Log + Comment */}
@@ -578,18 +540,18 @@ function RuleSheet({ open, onClose, initialRule, chainGroup }: {
                 <p className="text-sm font-medium">Log</p>
                 <p className="text-xs text-muted-foreground">Записывать совпадения в системный лог</p>
               </div>
-              <Toggle checked={form.log} onChange={(v) => set("log", v)} />
+              <FormToggle checked={form.log} onChange={(v) => set("log", v)} />
             </div>
             {form.log && (
-              <Field label="Log-prefix" hint="Метка в логе, например FW-DROP">
+              <FormField label="Log-prefix" hint="Метка в логе, например FW-DROP">
                 <Input className="font-mono h-8" placeholder="FW-RULE"
                   value={form.logPrefix} onChange={(e) => set("logPrefix", e.target.value)} />
-              </Field>
+              </FormField>
             )}
-            <Field label="Комментарий">
+            <FormField label="Комментарий">
               <Input className="h-8" placeholder="Описание правила"
                 value={form.comment} onChange={(e) => set("comment", e.target.value)} />
-            </Field>
+            </FormField>
           </div>
 
           {/* Enabled */}
@@ -598,7 +560,7 @@ function RuleSheet({ open, onClose, initialRule, chainGroup }: {
               <p className="text-sm font-medium">Правило включено</p>
               <p className="text-xs text-muted-foreground">Отключённые правила сохраняются, но не применяются</p>
             </div>
-            <Toggle checked={form.enabled} onChange={(v) => set("enabled", v)} />
+            <FormToggle checked={form.enabled} onChange={(v) => set("enabled", v)} />
           </div>
 
           {/* CLI preview */}
@@ -1039,14 +1001,14 @@ function ScenarioSheet({ open, onClose, initial, onSave }: {
           <div className="flex flex-col gap-3">
             <SectionTitle>Название</SectionTitle>
             <div className="grid grid-cols-2 gap-3">
-              <Field label="Название сценария" required>
+              <FormField label="Название сценария" required>
                 <Input className="h-8" placeholder="Блокировка Tor Exit"
                   value={name} onChange={e => setName(e.target.value)} />
-              </Field>
-              <Field label="Описание">
+              </FormField>
+              <FormField label="Описание">
                 <Input className="h-8" placeholder="Краткое описание"
                   value={desc} onChange={e => setDesc(e.target.value)} />
-              </Field>
+              </FormField>
             </div>
           </div>
 
@@ -1054,7 +1016,7 @@ function ScenarioSheet({ open, onClose, initial, onSave }: {
           <div className="flex flex-col gap-3">
             <SectionTitle>Тестовый пакет по умолчанию</SectionTitle>
             <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
-              <Field label="Направление / цепочка">
+              <FormField label="Направление / цепочка">
                 <NativeSelect value={pkt.chain} onChange={v => setP("chain", v)}>
                   <optgroup label="Полный маршрут">
                     <option value="forward">forward — транзит</option>
@@ -1067,40 +1029,40 @@ function ScenarioSheet({ open, onClose, initial, onSave }: {
                       .map(c => <option key={c} value={c}>{c}</option>)}
                   </optgroup>
                 </NativeSelect>
-              </Field>
-              <Field label="Протокол">
+              </FormField>
+              <FormField label="Протокол">
                 <NativeSelect value={pkt.proto} onChange={v => setP("proto", v)}>
                   {PROTO_OPTS.map(p => <option key={p} value={p}>{p}</option>)}
                 </NativeSelect>
-              </Field>
-              <Field label="Conn-state">
+              </FormField>
+              <FormField label="Conn-state">
                 <Input className="font-mono h-8" value={pkt.connState}
                   placeholder="new" onChange={e => setP("connState", e.target.value)} />
-              </Field>
-              <Field label="Src IP">
+              </FormField>
+              <FormField label="Src IP">
                 <Input className="font-mono h-8" value={pkt.srcAddr}
                   onChange={e => setP("srcAddr", e.target.value)} />
-              </Field>
-              <Field label="Dst IP">
+              </FormField>
+              <FormField label="Dst IP">
                 <Input className="font-mono h-8" value={pkt.dstAddr}
                   onChange={e => setP("dstAddr", e.target.value)} />
-              </Field>
-              <Field label="Dst Port">
+              </FormField>
+              <FormField label="Dst Port">
                 <Input className="font-mono h-8" value={pkt.dstPort}
                   placeholder="443" onChange={e => setP("dstPort", e.target.value)} />
-              </Field>
-              <Field label="In-interface">
+              </FormField>
+              <FormField label="In-interface">
                 <Input className="font-mono h-8" value={pkt.inIface}
                   placeholder="lan" onChange={e => setP("inIface", e.target.value)} />
-              </Field>
-              <Field label="Out-interface">
+              </FormField>
+              <FormField label="Out-interface">
                 <Input className="font-mono h-8" value={pkt.outIface}
                   placeholder="wan-msk" onChange={e => setP("outIface", e.target.value)} />
-              </Field>
-              <Field label="Dst addr-list">
+              </FormField>
+              <FormField label="Dst addr-list">
                 <Input className="font-mono h-8" value={pkt.dstAddrList}
                   placeholder="" onChange={e => setP("dstAddrList", e.target.value)} />
-              </Field>
+              </FormField>
             </div>
           </div>
 
@@ -1170,7 +1132,7 @@ function ScenarioSheet({ open, onClose, initial, onSave }: {
                 </div>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <Toggle checked={addForm.enabled} onChange={v => setAF("enabled", v)} />
+                    <FormToggle checked={addForm.enabled} onChange={v => setAF("enabled", v)} />
                     <span className="text-xs text-muted-foreground">Включено</span>
                   </div>
                   <Button size="sm" onClick={addRule}><PlusIcon className="size-4" />Добавить</Button>
@@ -1783,7 +1745,7 @@ function RulesTable({ rules, onToggle, onEdit }: {
                 </span>
               </td>
               <td className="px-4 py-2.5">
-                <Toggle checked={r.enabled} onChange={() => onToggle(r.id)} />
+                <FormToggle checked={r.enabled} onChange={() => onToggle(r.id)} />
               </td>
               <td className="px-3 py-2.5">
                 <DropdownMenu>

app/(main)/gre/page.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
+import { FormField, FormToggle, SectionTitle, SegmentedControl } from "@/components/form-kit"
 import { greTunnels as mockGreTunnels, grePools as mockGrePools, servers as mockServers } from "@/lib/data"
 import type { GrePool, GreTunnel, GreStatus, IpsecEncAlg, IpsecAuthAlg, IpsecDhGroup, IkeVersion, Server } from "@/lib/data"
 import { useDataSource } from "@/lib/data-source"
@@ -138,58 +139,6 @@ function IpsecBadge({ secured }: { secured: boolean }) {
   )
 }
 
-function Field({ label, hint, required, children }: {
-  label: string; hint?: string; required?: boolean; children: React.ReactNode
-}) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <label className="text-sm font-medium">
-        {label}{required && <span className="text-destructive ml-0.5">*</span>}
-      </label>
-      {children}
-      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
-    </div>
-  )
-}
-
-function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      onClick={() => onChange(!checked)}
-      className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors ${checked ? "bg-primary" : "bg-input"}`}
-    >
-      <span className={`pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${checked ? "translate-x-4" : "translate-x-0"}`} />
-    </button>
-  )
-}
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-2 py-1">
-      <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{children}</span>
-      <div className="flex-1 h-px bg-border" />
-    </div>
-  )
-}
-
-function SegmentedControl<T extends string>({ value, onChange, options }: {
-  value: T; onChange: (v: T) => void; options: { value: T; label: string }[]
-}) {
-  return (
-    <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5 w-fit">
-      {options.map((o) => (
-        <button key={o.value} type="button" onClick={() => onChange(o.value)}
-          className={`px-3 py-1 text-sm rounded transition-colors ${value === o.value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}>
-          {o.label}
-        </button>
-      ))}
-    </div>
-  )
-}
-
 // ─── Live API (как на /filters) ─────────────────────────────────────────────
 
 interface BackendServer {
@@ -838,51 +787,51 @@ export default function GrePage() {
           <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
             <div className="flex flex-col gap-4">
               <SectionTitle>Основные</SectionTitle>
-              <Field label="Имя интерфейса" required hint="Только латиница, цифры и дефис, например gre-msk-spb">
+              <FormField label="Имя интерфейса" required hint="Только латиница, цифры и дефис, например gre-msk-spb">
                 <Input className="font-mono" placeholder="gre-msk-spb" value={tForm.name} onChange={(e) => setT("name", e.target.value)} />
-              </Field>
-              <Field label="Сервер (MikroTik)" required>
+              </FormField>
+              <FormField label="Сервер (MikroTik)" required>
                 <select value={tForm.serverId} onChange={(e) => setT("serverId", e.target.value)}
                   className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
                   <option value="" disabled>Выбрать сервер…</option>
                   {displayServers.map((s) => <option key={s.id} value={s.id}>{s.name} ({s.site})</option>)}
                 </select>
-              </Field>
-              <Field label="Комментарий">
+              </FormField>
+              <FormField label="Комментарий">
                 <Input placeholder="Описание туннеля" value={tForm.comment} onChange={(e) => setT("comment", e.target.value)} />
-              </Field>
+              </FormField>
               <div className="flex items-center justify-between">
                 <span className="text-sm font-medium">Включён</span>
-                <Toggle checked={tForm.enabled} onChange={(v) => setT("enabled", v)} />
+                <FormToggle checked={tForm.enabled} onChange={(v) => setT("enabled", v)} />
               </div>
             </div>
 
             <div className="flex flex-col gap-4">
               <SectionTitle>Эндпоинты</SectionTitle>
-              <Field label="Локальный адрес" hint="Оставьте пустым или 0.0.0.0 для автоопределения">
+              <FormField label="Локальный адрес" hint="Оставьте пустым или 0.0.0.0 для автоопределения">
                 <Input className="font-mono" placeholder="0.0.0.0" value={tForm.localAddress} onChange={(e) => setT("localAddress", e.target.value)} />
-              </Field>
-              <Field label="Удалённый адрес" required hint="Внешний IP удалённого MikroTik">
+              </FormField>
+              <FormField label="Удалённый адрес" required hint="Внешний IP удалённого MikroTik">
                 <Input className="font-mono" placeholder="203.0.113.1" value={tForm.remoteAddress} onChange={(e) => setT("remoteAddress", e.target.value)} />
-              </Field>
+              </FormField>
             </div>
 
             <div className="flex flex-col gap-4">
               <SectionTitle>Внутренний IP</SectionTitle>
-              <Field label="IP-пул" required hint="Из какого пула выделяется /30-блок">
+              <FormField label="IP-пул" required hint="Из какого пула выделяется /30-блок">
                 <select value={tForm.poolId} onChange={(e) => setT("poolId", e.target.value)}
                   className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
                   <option value="" disabled>Выбрать пул…</option>
                   {displayPools.map((p) => <option key={p.id} value={p.id}>{p.name} ({p.cidr}) — свободно {p.total - p.allocated} блоков</option>)}
                 </select>
-              </Field>
+              </FormField>
               <div className="grid grid-cols-2 gap-3">
-                <Field label="Локальный IP" required hint="/ip address на этом конце">
+                <FormField label="Локальный IP" required hint="/ip address на этом конце">
                   <Input className="font-mono" placeholder="10.200.0.1/30" value={tForm.localInnerIp} onChange={(e) => setT("localInnerIp", e.target.value)} />
-                </Field>
-                <Field label="Удалённый IP" required hint="/ip address на другом конце">
+                </FormField>
+                <FormField label="Удалённый IP" required hint="/ip address на другом конце">
                   <Input className="font-mono" placeholder="10.200.0.2/30" value={tForm.remoteInnerIp} onChange={(e) => setT("remoteInnerIp", e.target.value)} />
-                </Field>
+                </FormField>
               </div>
             </div>
 
@@ -893,12 +842,12 @@ export default function GrePage() {
                   <p className="text-sm font-medium">Включить IPsec</p>
                   <p className="text-xs text-muted-foreground">RouterOS автоматически создаст peer, policy и proposal</p>
                 </div>
-                <Toggle checked={tForm.ipsecEnabled} onChange={(v) => setT("ipsecEnabled", v)} />
+                <FormToggle checked={tForm.ipsecEnabled} onChange={(v) => setT("ipsecEnabled", v)} />
               </div>
 
               {tForm.ipsecEnabled && (
                 <div className="flex flex-col gap-4 pl-4 border-l-2 border-emerald-500/30">
-                  <Field label="Пароль (PSK)" required hint="ipsec-secret — pre-shared key для автоматического IKE">
+                  <FormField label="Пароль (PSK)" required hint="ipsec-secret — pre-shared key для автоматического IKE">
                     <div className="relative">
                       <Input type={tForm.ipsecShowSecret ? "text" : "password"} className="font-mono pr-9"
                         placeholder="Минимум 8 символов" value={tForm.ipsecSecret} onChange={(e) => setT("ipsecSecret", e.target.value)} />
@@ -907,38 +856,38 @@ export default function GrePage() {
                         {tForm.ipsecShowSecret ? <EyeOffIcon className="size-3.5" /> : <EyeIcon className="size-3.5" />}
                       </button>
                     </div>
-                  </Field>
-                  <Field label="IKE-версия">
+                  </FormField>
+                  <FormField label="IKE-версия">
                     <SegmentedControl value={tForm.ipsecIkeVersion} onChange={(v) => setT("ipsecIkeVersion", v)}
                       options={[{ value: "ikev1", label: "IKEv1" }, { value: "ikev2", label: "IKEv2 (рек.)" }]} />
-                  </Field>
+                  </FormField>
                   <div className="grid grid-cols-2 gap-3">
-                    <Field label="Шифрование">
+                    <FormField label="Шифрование">
                       <select value={tForm.ipsecEncAlg} onChange={(e) => setT("ipsecEncAlg", e.target.value as IpsecEncAlg)}
                         className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
                         {(Object.entries(ENC_LABELS) as [IpsecEncAlg, string][]).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
                       </select>
-                    </Field>
-                    <Field label="Хеш-алгоритм">
+                    </FormField>
+                    <FormField label="Хеш-алгоритм">
                       <select value={tForm.ipsecAuthAlg} onChange={(e) => setT("ipsecAuthAlg", e.target.value as IpsecAuthAlg)}
                         className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
                         {(Object.entries(AUTH_LABELS) as [IpsecAuthAlg, string][]).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
                       </select>
-                    </Field>
+                    </FormField>
                   </div>
-                  <Field label="DH-группа" hint="Группа Диффи-Хеллмана для обмена ключами">
+                  <FormField label="DH-группа" hint="Группа Диффи-Хеллмана для обмена ключами">
                     <select value={tForm.ipsecDhGroup} onChange={(e) => setT("ipsecDhGroup", e.target.value as IpsecDhGroup)}
                       className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
                       {(Object.entries(DH_LABELS) as [IpsecDhGroup, string][]).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
                     </select>
-                  </Field>
+                  </FormField>
                   <div className="grid grid-cols-2 gap-3">
-                    <Field label="Срок жизни SA" hint="Формат: 1d 00:00:00">
+                    <FormField label="Срок жизни SA" hint="Формат: 1d 00:00:00">
                       <Input className="font-mono" value={tForm.ipsecLifetime} onChange={(e) => setT("ipsecLifetime", e.target.value)} />
-                    </Field>
+                    </FormField>
                     <div className="flex items-center justify-between pt-6">
                       <span className="text-sm font-medium">PFS</span>
-                      <Toggle checked={tForm.ipsecPfs} onChange={(v) => setT("ipsecPfs", v)} />
+                      <FormToggle checked={tForm.ipsecPfs} onChange={(v) => setT("ipsecPfs", v)} />
                     </div>
                   </div>
                 </div>
@@ -955,23 +904,23 @@ export default function GrePage() {
               {tForm.showAdvanced && (
                 <div className="flex flex-col gap-4">
                   <div className="grid grid-cols-3 gap-3">
-                    <Field label="MTU" hint="По умолч. 1476">
+                    <FormField label="MTU" hint="По умолч. 1476">
                       <Input type="number" className="font-mono" value={tForm.mtu} onChange={(e) => setT("mtu", Number(e.target.value))} />
-                    </Field>
-                    <Field label="Keepalive, с" hint="0 = откл.">
+                    </FormField>
+                    <FormField label="Keepalive, с" hint="0 = откл.">
                       <Input type="number" className="font-mono" value={tForm.keepaliveInterval} onChange={(e) => setT("keepaliveInterval", Number(e.target.value))} />
-                    </Field>
-                    <Field label="Попытки">
+                    </FormField>
+                    <FormField label="Попытки">
                       <Input type="number" className="font-mono" value={tForm.keepaliveRetries} onChange={(e) => setT("keepaliveRetries", Number(e.target.value))} />
-                    </Field>
+                    </FormField>
                   </div>
-                  <Field label="DSCP">
+                  <FormField label="DSCP">
                     <select value={tForm.dscp} onChange={(e) => setT("dscp", e.target.value)}
                       className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
                       <option value="inherit">inherit</option>
                       {Array.from({ length: 64 }, (_, i) => <option key={i} value={String(i)}>{i}</option>)}
                     </select>
-                  </Field>
+                  </FormField>
                   {[
                     { key: "clampTcpMss" as const, label: "Clamp TCP MSS", desc: "Ограничить MSS до MTU туннеля" },
                     { key: "allowFastPath" as const, label: "Allow Fast Path", desc: "Аппаратное ускорение трафика" },
@@ -981,7 +930,7 @@ export default function GrePage() {
                         <p className="text-sm font-medium">{label}</p>
                         <p className="text-xs text-muted-foreground">{desc}</p>
                       </div>
-                      <Toggle checked={tForm[key] as boolean} onChange={(v) => setT(key, v)} />
+                      <FormToggle checked={tForm[key] as boolean} onChange={(v) => setT(key, v)} />
                     </div>
                   ))}
                 </div>
@@ -1006,18 +955,18 @@ export default function GrePage() {
           <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
             <div className="flex flex-col gap-4">
               <SectionTitle>Параметры пула</SectionTitle>
-              <Field label="Имя пула" required hint="Например pool-gre-office или pool-gre-dc2">
+              <FormField label="Имя пула" required hint="Например pool-gre-office или pool-gre-dc2">
                 <Input className="font-mono" placeholder="pool-gre-core" value={pForm.name}
                   onChange={(e) => setPForm((f) => ({ ...f, name: e.target.value }))} />
-              </Field>
-              <Field label="Диапазон CIDR" required hint="Блок, из которого будут нарезаться /30 на каждый туннель">
+              </FormField>
+              <FormField label="Диапазон CIDR" required hint="Блок, из которого будут нарезаться /30 на каждый туннель">
                 <Input className="font-mono" placeholder="10.200.0.0/24" value={pForm.cidr}
                   onChange={(e) => setPForm((f) => ({ ...f, cidr: e.target.value }))} />
-              </Field>
-              <Field label="Назначение / Комментарий">
+              </FormField>
+              <FormField label="Назначение / Комментарий">
                 <Input placeholder="Ядровые межузловые туннели" value={pForm.comment}
                   onChange={(e) => setPForm((f) => ({ ...f, comment: e.target.value }))} />
-              </Field>
+              </FormField>
               {pForm.cidr && /\/\d+$/.test(pForm.cidr) && (() => {
                 const prefix = parseInt(pForm.cidr.split("/")[1] ?? "0")
                 const blocks = prefix <= 30 ? Math.pow(2, 30 - prefix) : 0

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>
   )
 }

app/(main)/loading.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export default function MainLoading() {
+  return (
+    <div className="flex flex-col gap-5 p-6">
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} className="h-24 rounded-xl" />
+        ))}
+      </div>
+      <Skeleton className="h-10 w-full max-w-md rounded-lg" />
+      <Skeleton className="h-96 w-full rounded-xl" />
+    </div>
+  )
+}

app/(main)/probes/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState, useMemo, useCallback } from "react"
 import { PageHeader } from "@/components/page-header"
+import { FormToggle } from "@/components/form-kit"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -353,17 +354,6 @@ function NativeSelect({ value, onChange, children, className }: {
   )
 }
 
-function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button onClick={() => onChange(!checked)}
-      className={cn("relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors",
-        checked ? "bg-primary" : "bg-muted-foreground/30")}>
-      <span className={cn("inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform",
-        checked ? "translate-x-4" : "translate-x-0.5")} />
-    </button>
-  )
-}
-
 function OptionLabel({ children }: { children: React.ReactNode }) {
   return <p className="text-[11px] font-medium text-muted-foreground mb-1">{children}</p>
 }
@@ -593,7 +583,7 @@ function ScheduleTab({
                     "grid grid-cols-[40px_1fr_140px_80px_100px_1fr_auto] gap-2 items-center px-4 py-2.5 hover:bg-muted/20 transition-colors",
                     !rule.enabled && "opacity-50",
                   )}>
-                    <Toggle checked={rule.enabled}
+                    <FormToggle checked={rule.enabled}
                       onChange={v => setRules(p => p.map(r => r.id === rule.id ? { ...r, enabled: v } : r))} />
                     <code className="font-mono text-xs truncate">{tun?.name ?? rule.tunnelId}</code>
                     <span className="text-xs text-muted-foreground truncate">{src?.name ?? rule.srcId}</span>
@@ -1115,7 +1105,7 @@ export default function ProbesPage() {
                           Как в RouterOS: резолвить IP промежуточных узлов в DNS-имена на самом MikroTik.
                         </p>
                       </div>
-                      <Toggle checked={traceUseDns} onChange={setTraceUseDns} />
+                      <FormToggle checked={traceUseDns} onChange={setTraceUseDns} />
                     </div>
                   </>
                 )}

app/(main)/recursive-routes/page.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
+import { FormField, SectionTitle } from "@/components/form-kit"
 import { Card } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -148,32 +149,6 @@ const emptyForm = (): RouteForm => ({
   endpoints: [newEndpoint()],
 })
 
-function Field({ label, hint, required, children }: {
-  label: string
-  hint?: string
-  required?: boolean
-  children: React.ReactNode
-}) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <label className="text-sm font-medium">
-        {label}{required && <span className="text-destructive ml-0.5">*</span>}
-      </label>
-      {children}
-      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
-    </div>
-  )
-}
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-2 py-0.5">
-      <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{children}</span>
-      <div className="flex-1 h-px bg-border" />
-    </div>
-  )
-}
-
 function RouteGroupRows({
   group, expanded, onToggle, onEdit, onDelete,
 }: {
@@ -370,9 +345,9 @@ function RouteSheet({
         <div className="flex-1 overflow-y-auto overflow-x-hidden px-6 py-5 flex flex-col gap-5">
           <div className="flex flex-col gap-4">
             <SectionTitle>Основные</SectionTitle>
-            <Field label="Dst Address" required hint="Например 8.8.8.8/32 или 1.1.1.0/24">
+            <FormField label="Dst Address" required hint="Например 8.8.8.8/32 или 1.1.1.0/24">
               <Input className="font-mono h-9" placeholder="8.8.8.8/32" value={form.dstAddress} onChange={(e) => set("dstAddress", e.target.value)} />
-            </Field>
+            </FormField>
           </div>
 
           <div className="flex flex-col gap-4">
@@ -396,26 +371,26 @@ function RouteSheet({
 
                   <EndpointCountryField value={ep.country} onChange={(v) => setEp(ep.id, "country", v)} />
 
-                  <Field label="Gateway" required hint="Можно выбрать карточкой ниже или ввести вручную в формате ip%gateway">
+                  <FormField label="Gateway" required hint="Можно выбрать карточкой ниже или ввести вручную в формате ip%gateway">
                     <Input className="font-mono h-9" placeholder="1.2.3.4%GW-NAME" value={ep.gateway} onChange={(e) => setEp(ep.id, "gateway", e.target.value)} />
-                  </Field>
+                  </FormField>
 
                   <div className="grid grid-cols-2 gap-2">
-                    <Field label="Distance (приоритет)">
+                    <FormField label="Distance (приоритет)">
                       <Input type="number" className="h-9" value={ep.distance} onChange={(e) => setEp(ep.id, "distance", Number(e.target.value) || 1)} />
-                    </Field>
-                    <Field label="Check Gateway">
+                    </FormField>
+                    <FormField label="Check Gateway">
                       <Input className="h-9 font-mono" placeholder="ping" value={ep.checkGateway} onChange={(e) => setEp(ep.id, "checkGateway", e.target.value)} />
-                    </Field>
+                    </FormField>
                   </div>
 
                   <div className="grid grid-cols-2 gap-2">
-                    <Field label="Scope">
+                    <FormField label="Scope">
                       <Input type="number" className="h-9" value={ep.scope ?? ""} onChange={(e) => setEp(ep.id, "scope", e.target.value ? Number(e.target.value) : null)} />
-                    </Field>
-                    <Field label="T.Scope">
+                    </FormField>
+                    <FormField label="T.Scope">
                       <Input type="number" className="h-9" value={ep.targetScope ?? ""} onChange={(e) => setEp(ep.id, "targetScope", e.target.value ? Number(e.target.value) : null)} />
-                    </Field>
+                    </FormField>
                   </div>
 
                   <div className="flex flex-col gap-1.5 max-h-[180px] overflow-y-auto overflow-x-hidden pr-1">
@@ -467,10 +442,10 @@ function RouteSheet({
 
           <div className="flex flex-col gap-4">
             <SectionTitle>Параметры</SectionTitle>
-            <Field label="Routing Table"><Input className="h-9 font-mono" value={form.routingTable} onChange={(e) => set("routingTable", e.target.value)} /></Field>
-            <Field label="Комментарий">
+            <FormField label="Routing Table"><Input className="h-9 font-mono" value={form.routingTable} onChange={(e) => set("routingTable", e.target.value)} /></FormField>
+            <FormField label="Комментарий">
               <Input className="h-9" value={form.comment} onChange={(e) => set("comment", e.target.value)} />
-            </Field>
+            </FormField>
           </div>
           {error && <div className="flex items-center gap-2 text-sm text-destructive bg-destructive/10 border border-destructive/20 px-3 py-2 rounded-md"><AlertCircleIcon className="size-4 shrink-0" />{error}</div>}
         </div>

app/(main)/route-optimizer/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useState, useMemo, useRef } from "react"
 import Link from "next/link"
 import { PageHeader } from "@/components/page-header"
+import { FormToggle } from "@/components/form-kit"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -245,17 +246,6 @@ function LossChip({ loss }: { loss: number }) {
   )
 }
 
-function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button type="button" onClick={() => onChange(!checked)}
-      className={cn("relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors cursor-pointer",
-        checked ? "bg-primary" : "bg-input")}>
-      <span className={cn("pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
-        checked ? "translate-x-4" : "translate-x-0")} />
-    </button>
-  )
-}
-
 function NInput({ value, onChange, min, max }: { value: number; onChange: (v: number) => void; min?: number; max?: number }) {
   return (
     <Input type="number" value={value} min={min} max={max}
@@ -1167,7 +1157,7 @@ export default function RouteOptimizerPage() {
                     <p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">Автоприменение</p>
                     <div className="flex items-center justify-between">
                       <span className="text-sm">Применять автоматически</span>
-                      <Toggle checked={settings.autoApply} onChange={v => set("autoApply", v)} />
+                      <FormToggle checked={settings.autoApply} onChange={v => set("autoApply", v)} />
                     </div>
                     {settings.autoApply && (
                       <>

app/(main)/servers/page.tsx

@@ -1,8 +1,13 @@
 "use client"
 
-import { Fragment, useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
-import { StatusBadge } from "@/components/status-badge"
+import { FormField, FormToggle, SectionTitle, SegmentedControl } from "@/components/form-kit"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import { ServersDataGrid } from "@/components/data-grids/servers-data-grid"
+import type { Filter } from "@/components/reui/filters"
+import { applyReuiFilters } from "@/lib/data-filters/apply-reui-filters"
+import { SERVER_FILTER_ACCESSORS, SERVER_FILTER_FIELDS } from "@/lib/data-filters/server-filter-fields"
 import { servers as initialServers } from "@/lib/data"
 import type { ServerType, Server, WanUplink } from "@/lib/data"
 import type { ServerCreate, ServerUpdate } from "@mmapp/contracts/servers"
@@ -30,56 +35,25 @@ import {
   SheetDescription, SheetFooter, SheetClose,
 } from "@/components/ui/sheet"
 import {
-  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
-  DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuGroup,
-} from "@/components/ui/dropdown-menu"
+  Stepper,
+  StepperContent,
+  StepperIndicator,
+  StepperItem,
+  StepperNav,
+  StepperPanel,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from "@/components/reui/stepper"
 import {
-  SearchIcon, RefreshCwIcon, DownloadIcon, PlusIcon, TrashIcon,
-  MoreHorizontalIcon, EyeIcon, EyeOffIcon,
+  RefreshCwIcon, DownloadIcon, PlusIcon, TrashIcon,
+  EyeIcon, EyeOffIcon,
   ChevronRightIcon, ChevronDownIcon,
   CheckCircleIcon, XCircleIcon, LoaderCircleIcon,
-  ShieldIcon, WifiIcon, PencilIcon, PowerIcon, Trash2Icon, ExternalLinkIcon,
+  ShieldIcon, WifiIcon,
   HomeIcon, ServerIcon, NetworkIcon,
 } from "lucide-react"
 
-// ─── RouterOS version utilities ───────────────────────────────────────────────
-
-/** Numeric version score: "7.20.1 (stable)" → 720, "7.14.2" → 714, "7.9" → 709 */
-function rosVer(os: string): number {
-  const m = os.match(/(\d+)\.(\d+)/)
-  if (!m) return 0
-  return parseInt(m[1], 10) * 100 + parseInt(m[2], 10)
-}
-
-interface RosFeature { name: string; minVer: number; label: string; desc: string }
-
-const ROS_FEATURES: RosFeature[] = [
-  { name: "WireGuard",             minVer: 701, label: "7.1+",  desc: "WireGuard VPN туннели" },
-  { name: "Container",             minVer: 704, label: "7.4+",  desc: "Docker-совместимые контейнеры" },
-  { name: "BFD",                   minVer: 705, label: "7.5+",  desc: "Bidirectional Forwarding Detection" },
-  { name: "Large Communities",     minVer: 707, label: "7.7+",  desc: "BGP Large Communities (RFC 8092)" },
-  { name: "VXLAN",                 minVer: 710, label: "7.10+", desc: "VXLAN overlay туннели" },
-  { name: "RPKI",                  minVer: 713, label: "7.13+", desc: "Route Origin Validation" },
-  { name: "BGP Flowspec",          minVer: 714, label: "7.14+", desc: "BGP Flow Spec (RFC 8955)" },
-  { name: "IPv6 Firewall",         minVer: 715, label: "7.15+", desc: "Расширенный IPv6 Firewall" },
-  { name: "REST API v2",           minVer: 716, label: "7.16+", desc: "Обновлённый REST API" },
-  { name: "VRF Enhanced",          minVer: 717, label: "7.17+", desc: "Расширенная поддержка VRF" },
-]
-
-function RosBadge({ os }: { os: string }) {
-  const v = rosVer(os)
-  const cls = v >= 715
-    ? "bg-[var(--status-online-bg)] text-[var(--status-online-fg)] border-current/20"
-    : v >= 710
-      ? "bg-[var(--status-degraded-bg)] text-[var(--status-degraded-fg)] border-current/20"
-      : "bg-[var(--status-offline-bg)] text-[var(--status-offline-fg)] border-current/20"
-  return (
-    <span className={cn("text-xs font-mono border rounded px-2 py-0.5", cls)}>
-      {os}
-    </span>
-  )
-}
-
 // ─── Countries ───────────────────────────────────────────────────────────────
 
 const COUNTRIES = [
@@ -97,90 +71,8 @@ const COUNTRIES = [
   { code: "NO", label: "Норвегия" },
 ]
 
-// ─── Type config ─────────────────────────────────────────────────────────────
-
-const TYPE_LABELS: Record<ServerType, string> = {
-  "jump-host":   "JumpHost",
-  "exit-node":   "Exit Node",
-  "home-router": "Home Router",
-}
-
-const TYPE_STYLES: Record<ServerType, string> = {
-  "jump-host":   "bg-violet-500/10 text-violet-400 border-violet-500/20",
-  "exit-node":   "bg-sky-500/10 text-sky-400 border-sky-500/20",
-  "home-router": "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
-}
-
-const TYPE_ICONS: Record<ServerType, React.ReactNode> = {
-  "jump-host":   <ServerIcon className="size-3 mr-1" />,
-  "exit-node":   <NetworkIcon className="size-3 mr-1" />,
-  "home-router": <HomeIcon className="size-3 mr-1" />,
-}
-
-function TypeBadge({ type }: { type: ServerType }) {
-  return (
-    <span className={cn(
-      "inline-flex items-center text-xs font-medium border rounded px-2 py-0.5",
-      TYPE_STYLES[type],
-    )}>
-      {TYPE_ICONS[type]}{TYPE_LABELS[type]}
-    </span>
-  )
-}
-
 // ─── Shared small components ──────────────────────────────────────────────────
 
-function Field({ label, hint, required, children }: {
-  label: string; hint?: string; required?: boolean; children: React.ReactNode
-}) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <label className="text-sm font-medium">
-        {label}{required && <span className="text-destructive ml-0.5">*</span>}
-      </label>
-      {children}
-      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
-    </div>
-  )
-}
-
-function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button type="button" role="switch" aria-checked={checked}
-      onClick={() => onChange(!checked)}
-      className={cn("relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors",
-        checked ? "bg-primary" : "bg-input")}>
-      <span className={cn("pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
-        checked ? "translate-x-4" : "translate-x-0")} />
-    </button>
-  )
-}
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-2 py-0.5">
-      <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{children}</span>
-      <div className="flex-1 h-px bg-border" />
-    </div>
-  )
-}
-
-function SegmentedControl<T extends string>({ value, onChange, options }: {
-  value: T; onChange: (v: T) => void; options: { value: T; label: string }[]
-}) {
-  return (
-    <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5 w-fit">
-      {options.map((o) => (
-        <button key={o.value} type="button" onClick={() => onChange(o.value)}
-          className={cn("px-3 py-1 text-sm rounded transition-colors",
-            value === o.value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground")}>
-          {o.label}
-        </button>
-      ))}
-    </div>
-  )
-}
-
 // ─── Country field ────────────────────────────────────────────────────────────
 
 function CountryField({ value, onChange }: { value: string; onChange: (v: string) => void }) {
@@ -267,30 +159,30 @@ function WanUplinkEditor({ wans, onChange }: {
             </button>
           </div>
           <div className="grid grid-cols-2 gap-2">
-            <Field label="Имя" required>
+            <FormField label="Имя" required>
               <Input className="h-8 font-mono text-xs" placeholder="WAN1-RT"
                 value={wan.name} onChange={e => updateWan(wan.id, { name: e.target.value })} />
-            </Field>
-            <Field label="Интерфейс">
+            </FormField>
+            <FormField label="Интерфейс">
               <Input className="h-8 font-mono text-xs" placeholder="ether1"
                 value={wan.iface} onChange={e => updateWan(wan.id, { iface: e.target.value })} />
-            </Field>
-            <Field label="Провайдер (ISP)">
+            </FormField>
+            <FormField label="Провайдер (ISP)">
               <Input className="h-8 text-xs" placeholder="Rostelecom"
                 value={wan.isp} onChange={e => updateWan(wan.id, { isp: e.target.value })} />
-            </Field>
-            <Field label="Внешний IP">
+            </FormField>
+            <FormField label="Внешний IP">
               <Input className="h-8 font-mono text-xs" placeholder="94.25.168.1"
                 value={wan.ip} onChange={e => updateWan(wan.id, { ip: e.target.value })} />
-            </Field>
-            <Field label="↓ Макс. Мбит">
+            </FormField>
+            <FormField label="↓ Макс. Мбит">
               <Input className="h-8 font-mono text-xs" type="number" min={1}
                 value={wan.maxDl} onChange={e => updateWan(wan.id, { maxDl: Number(e.target.value) })} />
-            </Field>
-            <Field label="↑ Макс. Мбит">
+            </FormField>
+            <FormField label="↑ Макс. Мбит">
               <Input className="h-8 font-mono text-xs" type="number" min={1}
                 value={wan.maxUl} onChange={e => updateWan(wan.id, { maxUl: Number(e.target.value) })} />
-            </Field>
+            </FormField>
           </div>
         </div>
       ))}
@@ -328,10 +220,11 @@ export default function ServersPage() {
   const [_backendOk,   setBackendOk]   = useState(false)
   const [search,       setSearch]       = useState("")
   const [typeFilter,   setTypeFilter]   = useState<TypeFilter>("all")
+  const [advancedFilters, setAdvancedFilters] = useState<Filter[]>([])
   const [open,         setOpen]         = useState(false)
   const [sheetMode,    setSheetMode]    = useState<SheetMode>("add")
   const [editingId,    setEditingId]    = useState<string | null>(null)
-  const [expandedId,   setExpandedId]   = useState<string | null>(null)
+  const [sheetStep,    setSheetStep]    = useState(1)
   const [form,         setForm]         = useState<FormState>(defaultForm)
   const [testState,    setTestState]    = useState<TestState>("idle")
   const [testMsg,      setTestMsg]      = useState("")
@@ -368,6 +261,7 @@ export default function ServersPage() {
   function openAdd() {
     setSheetMode("add"); setEditingId(null)
     setForm(defaultForm); setTestState("idle"); setTestMsg("")
+    setSheetStep(1)
     setOpen(true)
   }
 
@@ -381,7 +275,7 @@ export default function ServersPage() {
       lanSubnet: s.lanSubnet ?? "",
       wanUplinks: s.wanUplinks ? JSON.parse(JSON.stringify(s.wanUplinks)) : [],
     })
-    setTestState("idle"); setTestMsg(""); setOpen(true)
+    setTestState("idle"); setTestMsg(""); setSheetStep(1); setOpen(true)
 
     // Fetch full server details (including credentials) from backend
     if (isLive) {
@@ -549,13 +443,14 @@ export default function ServersPage() {
   // ── derived ──────────────────────────────────────────────────────────────
 
   const filtered = useMemo(() => {
-    return serverList.filter(sv => {
+    const base = serverList.filter(sv => {
       if (typeFilter !== "all" && sv.type !== typeFilter) return false
       if (!search) return true
       const q = search.toLowerCase()
       return sv.name.toLowerCase().includes(q) || sv.host.includes(q) || sv.site.toLowerCase().includes(q)
     })
-  }, [serverList, search, typeFilter])
+    return applyReuiFilters(base, advancedFilters, SERVER_FILTER_ACCESSORS)
+  }, [serverList, search, typeFilter, advancedFilters])
 
   const counts = useMemo(() => ({
     all:          serverList.length,
@@ -615,272 +510,34 @@ export default function ServersPage() {
           </div>
 
           {/* Table */}
-          <Card>
-            <div className="flex items-center gap-3 px-5 py-3 border-b flex-wrap">
-              <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5">
-                {tabs.map(tab => (
-                  <button key={tab.value} onClick={() => setTypeFilter(tab.value)}
-                    className={cn(
-                      "flex items-center gap-1.5 rounded px-3 py-1 text-sm transition-colors",
-                      typeFilter === tab.value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
-                    )}>
-                    {tab.label}
-                    <span className="text-xs tabular-nums opacity-60">
-                      {tab.value === "all" ? counts.all : counts[tab.value as ServerType]}
-                    </span>
-                  </button>
-                ))}
-              </div>
-              <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[220px]">
-                <SearchIcon className="size-3.5 text-muted-foreground shrink-0" />
-                <input className="flex-1 bg-transparent outline-none placeholder:text-muted-foreground text-sm"
-                  placeholder="Поиск по имени, хосту…" value={search} onChange={e => setSearch(e.target.value)} />
-              </div>
-              <span className="text-sm text-muted-foreground ml-auto">{filtered.length} серверов</span>
-            </div>
-
-            <div className="overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b border-border text-xs text-muted-foreground">
-                    <th className="text-left font-medium px-5 py-3">Имя / Хост</th>
-                    <th className="text-left font-medium px-4 py-3">Тип</th>
-                    <th className="text-left font-medium px-4 py-3">Модель</th>
-                    <th className="text-left font-medium px-4 py-3">RouterOS</th>
-                    <th className="text-left font-medium px-4 py-3">Площадка</th>
-                    <th className="text-left font-medium px-4 py-3">WAN / LAN</th>
-                    <th className="text-right font-medium px-4 py-3">Задержка</th>
-                    <th className="text-left font-medium px-4 py-3">Статус</th>
-                    <th className="w-10 px-3 py-3" />
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-border">
-                  {filtered.map(s => {
-                    const isExpanded = expandedId === s.id
-                    const ver = rosVer(s.os)
-                    return (
-                      <Fragment key={s.id}>
-                        <tr
-                          className={cn(
-                            "hover:bg-muted/40 transition-colors cursor-pointer",
-                            isExpanded && "bg-muted/30",
-                          )}
-                          onClick={() => setExpandedId(prev => prev === s.id ? null : s.id)}
-                        >
-                          {/* Expand chevron + name */}
-                          <td className="px-5 py-3">
-                            <div className="flex items-start gap-2">
-                              {isExpanded
-                                ? <ChevronDownIcon  className="size-3.5 mt-0.5 shrink-0 text-muted-foreground" />
-                                : <ChevronRightIcon className="size-3.5 mt-0.5 shrink-0 text-muted-foreground/40" />}
-                              <div className="min-w-0">
-                                <p className="font-medium truncate">{s.name}</p>
-                                <p className="text-xs font-mono text-muted-foreground">{s.host}</p>
-                                {s.ipv6Address && (
-                                  <p className="text-[10px] font-mono text-sky-500/70 truncate max-w-[150px]" title={s.ipv6Address}>
-                                    {s.ipv6Address}
-                                  </p>
-                                )}
-                              </div>
-                            </div>
-                          </td>
-                          <td className="px-4 py-3"><TypeBadge type={s.type} /></td>
-                          <td className="px-4 py-3 text-muted-foreground text-xs">{s.model}</td>
-                          <td className="px-4 py-3"><RosBadge os={s.os} /></td>
-                          <td className="px-4 py-3">
-                            <div className="flex items-center gap-1.5">
-                              <Flag code={s.country} />
-                              <span className="font-medium">{s.site}</span>
-                            </div>
-                          </td>
-                          {/* WAN / LAN column */}
-                          <td className="px-4 py-3">
-                            {s.type === "home-router" && s.wanUplinks?.length ? (
-                              <div className="flex flex-col gap-0.5">
-                                {s.wanUplinks.map(w => (
-                                  <div key={w.id} className="flex items-center gap-1.5 text-[11px] font-mono">
-                                    <WifiIcon className="size-3 text-sky-400 shrink-0" />
-                                    <span className="font-semibold text-sky-600 dark:text-sky-400">{w.name}</span>
-                                    <span className="text-muted-foreground">{w.isp}</span>
-                                    <span className="text-muted-foreground">↓{w.maxDl}↑{w.maxUl}</span>
-                                  </div>
-                                ))}
-                                {s.lanSubnet && (
-                                  <div className="text-[10px] font-mono text-muted-foreground mt-0.5">
-                                    LAN {s.lanSubnet}
-                                  </div>
-                                )}
-                              </div>
-                            ) : (
-                              <div className="flex flex-col gap-0.5">
-                                {s.wireGuardIfaces && s.wireGuardIfaces.length > 0 && (
-                                  <div className="text-[11px] font-mono text-violet-500 dark:text-violet-400 flex items-center gap-1">
-                                    <ShieldIcon className="size-3" />
-                                    WG: {s.wireGuardIfaces.length} iface · {s.wireGuardIfaces.reduce((n, i) => n + i.peers.length, 0)} peers
-                                  </div>
-                                )}
-                                {s.rpkiEnabled && (
-                                  <div className="text-[10px] font-mono text-emerald-600 dark:text-emerald-400">RPKI ✓</div>
-                                )}
-                                {!s.wireGuardIfaces?.length && !s.rpkiEnabled && (
-                                  <span className="text-xs text-muted-foreground">—</span>
-                                )}
-                              </div>
-                            )}
-                          </td>
-                          <td className={cn("px-4 py-3 font-mono text-right text-sm",
-                            s.latency == null ? "text-muted-foreground"
-                            : s.latency > 60  ? "text-[var(--status-degraded-fg)]" : "")}>
-                            {s.latency == null ? "—" : `${s.latency} мс`}
-                          </td>
-                          <td className="px-4 py-3"><StatusBadge status={s.status} /></td>
-                          <td className="px-3 py-3" onClick={e => e.stopPropagation()}>
-                            <DropdownMenu>
-                              <DropdownMenuTrigger render={
-                                <Button variant="ghost" size="icon" className="size-7">
-                                  <MoreHorizontalIcon className="size-4" />
-                                </Button>
-                              } />
-                              <DropdownMenuContent side="bottom" align="end">
-                                <DropdownMenuGroup>
-                                  <DropdownMenuLabel>{s.name}</DropdownMenuLabel>
-                                </DropdownMenuGroup>
-                                <DropdownMenuSeparator />
-                                <DropdownMenuItem onClick={() => window.open(`https://${s.host}`, "_blank")}>
-                                  <ExternalLinkIcon className="size-3.5" />Открыть WebFig
-                                </DropdownMenuItem>
-                                <DropdownMenuItem onClick={() => openEdit(s)}>
-                                  <PencilIcon className="size-3.5" />Редактировать
-                                </DropdownMenuItem>
-                                {isLive && (
-                                  <DropdownMenuItem onClick={() => handlePoll(s.id)} disabled={pollingIds.has(s.id)}>
-                                    <RefreshCwIcon className={cn("size-3.5", pollingIds.has(s.id) && "animate-spin")} />
-                                    {pollingIds.has(s.id) ? "Опрос…" : "Опросить"}
-                                  </DropdownMenuItem>
-                                )}
-                                <DropdownMenuItem onClick={() => handleToggleStatus(s.id)}>
-                                  <PowerIcon className="size-3.5" />
-                                  {s.status === "offline" ? "Включить" : "Отключить"}
-                                </DropdownMenuItem>
-                                <DropdownMenuSeparator />
-                                <DropdownMenuItem variant="destructive" onClick={() => handleDelete(s.id)}>
-                                  <Trash2Icon className="size-3.5" />Удалить
-                                </DropdownMenuItem>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
-                          </td>
-                        </tr>
-
-                        {/* ── Expandable detail row ── */}
-                        {isExpanded && (
-                          <tr className="bg-muted/20">
-                            <td colSpan={9} className="px-8 py-5 border-b border-border/50">
-                              <div className="flex flex-col gap-5">
-
-                                {/* Snapshot / live data */}
-                                <div className="flex items-start justify-between gap-4 flex-wrap">
-                                  <div className="flex flex-wrap gap-x-6 gap-y-2 text-xs">
-                                    {s.model && s.model !== "—" && (
-                                      <span className="text-muted-foreground">Модель: <span className="font-mono text-foreground">{s.model}</span></span>
-                                    )}
-                                    {s.uptime && (
-                                      <span className="text-muted-foreground">Uptime: <span className="font-mono text-foreground">{s.uptime}</span></span>
-                                    )}
-                                    {s.cpuLoad != null && (
-                                      <span className="text-muted-foreground">CPU: <span className={cn("font-mono font-semibold", s.cpuLoad > 80 ? "text-red-400" : s.cpuLoad > 50 ? "text-amber-400" : "text-emerald-400")}>{s.cpuLoad}%</span></span>
-                                    )}
-                                    {s.asn && (
-                                      <span className="text-muted-foreground">ASN: <span className="font-mono text-foreground">{s.asn}</span></span>
-                                    )}
-                                    {s.ipv6Address && (
-                                      <span className="text-muted-foreground">IPv6: <span className="font-mono text-sky-400">{s.ipv6Address}</span></span>
-                                    )}
-                                    {s.vrfNames?.map(v => (
-                                      <span key={v} className="text-muted-foreground">VRF: <span className="font-mono text-foreground">{v}</span></span>
-                                    ))}
-                                    {s.comment && (
-                                      <span className="text-muted-foreground italic">{s.comment}</span>
-                                    )}
-                                    {s.polledAt && (
-                                      <span className="text-muted-foreground/50 text-[11px]">
-                                        Опрошен: {new Date(s.polledAt).toLocaleString("ru")}
-                                      </span>
-                                    )}
-                                    {!s.polledAt && (
-                                      <span className="text-amber-500/70 text-[11px]">⚠ Ещё не опрашивался</span>
-                                    )}
-                                  </div>
-
-                                  {isLive && (
-                                    <Button
-                                      variant="outline" size="sm"
-                                      className="h-7 gap-1.5 text-xs shrink-0"
-                                      disabled={pollingIds.has(s.id)}
-                                      onClick={e => { e.stopPropagation(); handlePoll(s.id) }}
-                                    >
-                                      <RefreshCwIcon className={cn("size-3.5", pollingIds.has(s.id) && "animate-spin")} />
-                                      {pollingIds.has(s.id) ? "Опрос…" : "Опросить сейчас"}
-                                    </Button>
-                                  )}
-                                </div>
-
-                                {/* Feature matrix */}
-                                <div>
-                                  <div className="flex items-center gap-3 mb-3">
-                                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
-                                      Возможности RouterOS
-                                    </p>
-                                    <RosBadge os={s.os} />
-                                    <span className="text-[11px] text-muted-foreground">
-                                      {ver >= 715
-                                        ? "✓ Актуальная версия — все ключевые фичи доступны"
-                                        : ver >= 710
-                                          ? "⚠ Рекомендуется обновление до 7.15+"
-                                          : s.os !== "—"
-                                            ? "✗ Устаревшая версия — требуется обновление"
-                                            : "Нет данных — нажмите «Опросить сейчас»"}
-                                    </span>
-                                  </div>
-
-                                  <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-5 gap-2">
-                                    {ROS_FEATURES.map(f => {
-                                      const ok = ver >= f.minVer
-                                      return (
-                                        <div key={f.name} className={cn(
-                                          "flex items-start gap-2 rounded-md border px-3 py-2.5 transition-colors",
-                                          ok
-                                            ? "border-emerald-500/25 bg-emerald-500/5"
-                                            : "border-border/40 bg-background/40 opacity-60",
-                                        )}>
-                                          {ok
-                                            ? <CheckCircleIcon className="size-3.5 text-emerald-500 shrink-0 mt-0.5" />
-                                            : <XCircleIcon    className="size-3.5 text-muted-foreground/40 shrink-0 mt-0.5" />}
-                                          <div className="min-w-0">
-                                            <p className={cn(
-                                              "text-xs font-medium leading-tight truncate",
-                                              ok ? "text-foreground" : "text-muted-foreground",
-                                            )}>
-                                              {f.name}
-                                            </p>
-                                            <p className="text-[10px] text-muted-foreground leading-tight mt-0.5">
-                                              {f.label} · {f.desc}
-                                            </p>
-                                          </div>
-                                        </div>
-                                      )
-                                    })}
-                                  </div>
-                                </div>
-                              </div>
-                            </td>
-                          </tr>
-                        )}
-                      </Fragment>
-                    )
-                  })}
-                </tbody>
-              </table>
-            </div>
+          <Card className="overflow-hidden py-0 gap-0">
+            <DataPageToolbar
+              segmented={{
+                value: typeFilter,
+                onChange: setTypeFilter,
+                options: tabs.map((tab) => ({
+                  value: tab.value,
+                  label: tab.label,
+                  count: tab.value === "all" ? counts.all : counts[tab.value as ServerType],
+                })),
+              }}
+              filters={advancedFilters}
+              onFiltersChange={setAdvancedFilters}
+              filterFields={SERVER_FILTER_FIELDS}
+              search={search}
+              onSearchChange={setSearch}
+              searchPlaceholder="Поиск по имени, хосту…"
+              countLabel={`${filtered.length} серверов`}
+            />
+            <ServersDataGrid
+              servers={filtered}
+              isLive={isLive}
+              pollingIds={pollingIds}
+              onPoll={handlePoll}
+              onEdit={openEdit}
+              onDelete={handleDelete}
+              onToggleStatus={handleToggleStatus}
+            />
           </Card>
         </div>
       </div>
@@ -893,18 +550,45 @@ export default function ServersPage() {
             <SheetDescription>MikroTik RouterOS · Web API (REST)</SheetDescription>
           </SheetHeader>
 
-          <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
+          <Stepper value={sheetStep} onValueChange={setSheetStep} className="flex-1 flex flex-col min-h-0 px-6 py-5">
+            <StepperNav className="mb-5">
+              <StepperItem step={1}>
+                <StepperTrigger>
+                  <StepperIndicator>1</StepperIndicator>
+                  <StepperTitle className="sr-only">Основные</StepperTitle>
+                </StepperTrigger>
+                <StepperSeparator />
+              </StepperItem>
+              <StepperItem step={2}>
+                <StepperTrigger>
+                  <StepperIndicator>2</StepperIndicator>
+                  <StepperTitle className="sr-only">WAN</StepperTitle>
+                </StepperTrigger>
+                <StepperSeparator />
+              </StepperItem>
+              <StepperItem step={3}>
+                <StepperTrigger>
+                  <StepperIndicator>3</StepperIndicator>
+                  <StepperTitle className="sr-only">API</StepperTitle>
+                </StepperTrigger>
+                <StepperSeparator />
+              </StepperItem>
+              <StepperItem step={4}>
+                <StepperTrigger>
+                  <StepperIndicator>4</StepperIndicator>
+                  <StepperTitle className="sr-only">Дополнительно</StepperTitle>
+                </StepperTrigger>
+              </StepperItem>
+            </StepperNav>
+            <StepperPanel className="flex-1 overflow-y-auto">
+              <StepperContent value={1} className="flex flex-col gap-4">
 
-            {/* 1. Основные */}
-            <div className="flex flex-col gap-4">
-              <SectionTitle>Основные</SectionTitle>
-
-              <Field label="Имя сервера" required hint="Например home-msk-01">
+              <FormField label="Имя сервера" required hint="Например home-msk-01">
                 <Input className="font-mono" placeholder="home-msk-01"
                   value={form.name} onChange={e => set("name", e.target.value)} />
-              </Field>
+              </FormField>
 
-              <Field label="Тип узла" required>
+              <FormField label="Тип узла" required>
                 <SegmentedControl
                   value={form.type}
                   onChange={v => set("type", v)}
@@ -914,24 +598,24 @@ export default function ServersPage() {
                     { value: "exit-node",   label: "Exit Node"   },
                   ]}
                 />
-              </Field>
+              </FormField>
 
               <div className="grid grid-cols-2 gap-3">
-                <Field label="Площадка" required hint="MSK, SPB, FRA…">
+                <FormField label="Площадка" required hint="MSK, SPB, FRA…">
                   <Input className="font-mono uppercase" placeholder="MSK"
                     value={form.site} onChange={e => set("site", e.target.value.toUpperCase())} />
-                </Field>
+                </FormField>
                 {!isHomeRouter && (
-                  <Field label="ASN" hint="Например AS65001">
+                  <FormField label="ASN" hint="Например AS65001">
                     <Input className="font-mono" placeholder="AS65001"
                       value={form.asn} onChange={e => set("asn", e.target.value)} />
-                  </Field>
+                  </FormField>
                 )}
                 {isHomeRouter && (
-                  <Field label="LAN-подсеть" hint="Например 192.168.10.0/24">
+                  <FormField label="LAN-подсеть" hint="Например 192.168.10.0/24">
                     <Input className="font-mono" placeholder="192.168.10.0/24"
                       value={form.lanSubnet} onChange={e => set("lanSubnet", e.target.value)} />
-                  </Field>
+                  </FormField>
                 )}
               </div>
 
@@ -939,45 +623,43 @@ export default function ServersPage() {
 
               <div className="flex items-center justify-between">
                 <span className="text-sm font-medium">Включён</span>
-                <Toggle checked={form.enabled} onChange={v => set("enabled", v)} />
+                <FormToggle checked={form.enabled} onChange={v => set("enabled", v)} />
               </div>
-            </div>
-
-            {/* 2. WAN-аплинки (только для home-router) */}
-            {isHomeRouter && (
-              <div className="flex flex-col gap-4">
+              </StepperContent>
+              <StepperContent value={2} className="flex flex-col gap-4">
                 <SectionTitle>WAN-аплинки</SectionTitle>
+                {!isHomeRouter ? (
+                  <p className="text-sm text-muted-foreground">WAN-аплинки доступны только для типа Home Router.</p>
+                ) : (
                 <WanUplinkEditor
                   wans={form.wanUplinks}
                   onChange={wans => set("wanUplinks", wans)}
                 />
-              </div>
-            )}
-
-            {/* 3. Подключение (API) */}
-            <div className="flex flex-col gap-4">
+                )}
+              </StepperContent>
+              <StepperContent value={3} className="flex flex-col gap-4">
               <SectionTitle>Подключение (RouterOS REST API)</SectionTitle>
 
-              <Field label="Хост / IP-адрес" required
+              <FormField label="Хост / IP-адрес" required
                 hint={isHomeRouter
                   ? "Управляющий LAN-адрес роутера, например 192.168.10.1"
                   : "Внешний или управляющий IP-адрес роутера"}>
                 <Input className="font-mono" placeholder={isHomeRouter ? "192.168.10.1" : "203.0.113.1"}
                   value={form.host} onChange={e => set("host", e.target.value)} />
-              </Field>
+              </FormField>
 
               <div className="grid grid-cols-2 gap-3">
-                <Field label="Протокол">
+                <FormField label="Протокол">
                   <SegmentedControl
                     value={form.proto}
                     onChange={v => { set("proto", v); set("port", v === "https" ? "443" : "80") }}
                     options={[{ value: "https", label: "HTTPS" }, { value: "http", label: "HTTP" }]}
                   />
-                </Field>
-                <Field label="Порт" hint="443 / 80">
+                </FormField>
+                <FormField label="Порт" hint="443 / 80">
                   <Input className="font-mono" placeholder="443"
                     value={form.port} onChange={e => set("port", e.target.value)} />
-                </Field>
+                </FormField>
               </div>
 
               <div className="flex items-center justify-between">
@@ -988,13 +670,13 @@ export default function ServersPage() {
                   </p>
                   <p className="text-xs text-muted-foreground">Отключить для self-signed сертификатов</p>
                 </div>
-                <Toggle checked={form.verifySsl} onChange={v => set("verifySsl", v)} />
+                <FormToggle checked={form.verifySsl} onChange={v => set("verifySsl", v)} />
               </div>
 
-              <Field label="Путь API">
+              <FormField label="Путь API">
                 <Input className="font-mono" placeholder="/rest"
                   value={form.apiPath} onChange={e => set("apiPath", e.target.value)} />
-              </Field>
+              </FormField>
 
               <div className="rounded-lg border border-border bg-muted/20 px-4 py-3 text-xs text-muted-foreground">
                 <p className="font-medium text-foreground mb-1">RouterOS 7.1+ REST API</p>
@@ -1008,12 +690,12 @@ export default function ServersPage() {
                 )}
               </div>
 
-              <Field label="Имя пользователя" required hint="Пользователь RouterOS с доступом к API">
+              <FormField label="Имя пользователя" required hint="Пользователь RouterOS с доступом к API">
                 <Input className="font-mono" placeholder="api-user"
                   value={form.username} onChange={e => set("username", e.target.value)} />
-              </Field>
+              </FormField>
 
-              <Field label="Пароль" required>
+              <FormField label="Пароль" required>
                 <div className="relative">
                   <Input type={form.showPassword ? "text" : "password"}
                     className="font-mono pr-9" placeholder="Пароль пользователя RouterOS"
@@ -1024,7 +706,7 @@ export default function ServersPage() {
                     {form.showPassword ? <EyeOffIcon className="size-3.5" /> : <EyeIcon className="size-3.5" />}
                   </button>
                 </div>
-              </Field>
+              </FormField>
 
               <div className="flex flex-col gap-2">
                 <Button type="button" variant="outline" size="sm" className="w-fit gap-2"
@@ -1046,10 +728,8 @@ export default function ServersPage() {
                   </div>
                 )}
               </div>
-            </div>
-
-            {/* 4. Дополнительно */}
-            <div className="flex flex-col gap-4">
+              </StepperContent>
+              <StepperContent value={4} className="flex flex-col gap-4">
               <button type="button" onClick={() => set("showAdvanced", !form.showAdvanced)}
                 className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors">
                 {form.showAdvanced ? <ChevronDownIcon className="size-3.5" /> : <ChevronRightIcon className="size-3.5" />}
@@ -1059,34 +739,41 @@ export default function ServersPage() {
               {form.showAdvanced && (
                 <div className="flex flex-col gap-4">
                   <div className="grid grid-cols-2 gap-3">
-                    <Field label="SSH-порт">
+                    <FormField label="SSH-порт">
                       <Input type="number" className="font-mono" value={form.sshPort}
                         onChange={e => set("sshPort", Number(e.target.value))} />
-                    </Field>
-                    <Field label="Winbox-порт">
+                    </FormField>
+                    <FormField label="Winbox-порт">
                       <Input type="number" className="font-mono" value={form.winboxPort}
                         onChange={e => set("winboxPort", Number(e.target.value))} />
-                    </Field>
+                    </FormField>
                   </div>
-                  <Field label="Таймаут соединения, с">
+                  <FormField label="Таймаут соединения, с">
                     <Input type="number" className="font-mono" value={form.timeout}
                       onChange={e => set("timeout", Number(e.target.value))} />
-                  </Field>
-                  <Field label="Комментарий">
+                  </FormField>
+                  <FormField label="Комментарий">
                     <Input placeholder="Описание или заметка" value={form.comment}
                       onChange={e => set("comment", e.target.value)} />
-                  </Field>
+                  </FormField>
                 </div>
               )}
-            </div>
-
-          </div>
+              </StepperContent>
+            </StepperPanel>
+          </Stepper>
 
           <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
-            <SheetClose render={<Button variant="outline" className="flex-1" />}>Отмена</SheetClose>
-            <Button className="flex-1" onClick={handleSave}>
-              {sheetMode === "edit" ? "Сохранить" : "Добавить сервер"}
-            </Button>
+            <SheetClose render={<Button variant="outline" />}>Отмена</SheetClose>
+            {sheetStep > 1 && (
+              <Button variant="outline" onClick={() => setSheetStep((s) => s - 1)}>Назад</Button>
+            )}
+            {sheetStep < 4 ? (
+              <Button className="ml-auto" onClick={() => setSheetStep((s) => s + 1)}>Далее</Button>
+            ) : (
+              <Button className="ml-auto" onClick={handleSave}>
+                {sheetMode === "edit" ? "Сохранить" : "Добавить сервер"}
+              </Button>
+            )}
           </SheetFooter>
         </SheetContent>
       </Sheet>

app/(main)/settings/page.tsx

@@ -1,8 +1,10 @@
 "use client"
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import Link from "next/link"
 import { PageHeader } from "@/components/page-header"
+import { FormField, FormToggle } from "@/components/form-kit"
+import { FileImportDialog } from "@/components/file-import-dialog"
 import {
   Card, CardContent, CardHeader, CardTitle, CardDescription,
 } from "@/components/ui/card"
@@ -162,17 +164,6 @@ function makeApiFetch(backendUrl: string) {
 
 // ─── small components ─────────────────────────────────────────────────────────
 
-function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button type="button" onClick={() => onChange(!checked)}
-      className={cn("relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors cursor-pointer",
-        checked ? "bg-primary" : "bg-input")}>
-      <span className={cn("pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
-        checked ? "translate-x-4" : "translate-x-0")} />
-    </button>
-  )
-}
-
 function SettingRow({ label, description, children }: { label: string; description?: string; children: React.ReactNode }) {
   return (
     <div className="flex items-center justify-between gap-4 py-3.5">
@@ -413,24 +404,24 @@ function UserSheet({ open, user, onSave, onClose }: {
           {tab === "profile" && (
             <div className="px-5 py-5 flex flex-col gap-4">
 
-              <Field label="Полное имя" error={errors.name}>
+              <FormField label="Полное имя" error={errors.name}>
                 <Input value={form.name} onChange={e => setField("name", e.target.value)}
                   placeholder="Иван Иванов" className="h-9" />
-              </Field>
+              </FormField>
 
-              <Field label="Логин" error={errors.login}>
+              <FormField label="Логин" error={errors.login}>
                 <Input value={form.login} onChange={e => setField("login", e.target.value)}
                   placeholder="i.ivanov" className="h-9 font-mono" />
-              </Field>
+              </FormField>
 
-              <Field label="Email" error={errors.email}>
+              <FormField label="Email" error={errors.email}>
                 <Input value={form.email} onChange={e => setField("email", e.target.value)}
                   placeholder="[email protected]" type="email" className="h-9" />
-              </Field>
+              </FormField>
 
               <Separator />
 
-              <Field label="Роль">
+              <FormField label="Роль">
                 <div className="flex gap-2 flex-wrap">
                   {(["viewer", "operator", "admin"] as Role[]).map(r => (
                     <button key={r} type="button" onClick={() => setRole(r)}
@@ -453,18 +444,18 @@ function UserSheet({ open, user, onSave, onClose }: {
                     ? "Управление инфраструктурой согласно выданным правам"
                     : "Только просмотр согласно выданным правам"}
                 </p>
-              </Field>
+              </FormField>
 
               <Separator />
 
-              <Field label="Статус учётной записи">
+              <FormField label="Статус учётной записи">
                 <div className="flex items-center gap-3">
-                  <Toggle checked={form.active} onChange={v => setField("active", v)} />
+                  <FormToggle checked={form.active} onChange={v => setField("active", v)} />
                   <span className={cn("text-xs font-medium", form.active ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground")}>
                     {form.active ? "Активна" : "Заблокирована"}
                   </span>
                 </div>
-              </Field>
+              </FormField>
             </div>
           )}
 
@@ -660,7 +651,7 @@ function UserSheet({ open, user, onSave, onClose }: {
                       </span>
 
                       {/* active toggle */}
-                      <Toggle checked={su.active} onChange={() => toggleSubUser(su.id)} />
+                      <FormToggle checked={su.active} onChange={() => toggleSubUser(su.id)} />
 
                       {/* delete */}
                       <button onClick={() => removeSubUser(su.id)}
@@ -775,22 +766,6 @@ function UserSheet({ open, user, onSave, onClose }: {
   )
 }
 
-// ─── helper ───────────────────────────────────────────────────────────────────
-
-function Field({ label, error, children }: { label: string; error?: string; children: React.ReactNode }) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <label className="text-xs font-medium">{label}</label>
-      {children}
-      {error && (
-        <p className="text-xs text-destructive flex items-center gap-1">
-          <AlertCircleIcon className="size-3" />{error}
-        </p>
-      )}
-    </div>
-  )
-}
-
 // ─── delete confirm ───────────────────────────────────────────────────────────
 
 function DatabaseRestoreConfirm({
@@ -900,7 +875,7 @@ export default function SettingsPage() {
   const [dbBackupBusy, setDbBackupBusy] = useState(false)
   const [dbRestoreBusy, setDbRestoreBusy] = useState(false)
   const [dbRestoreFile, setDbRestoreFile] = useState<File | null>(null)
-  const dbRestoreInputRef = useRef<HTMLInputElement>(null)
+  const [dbRestoreDialogOpen, setDbRestoreDialogOpen] = useState(false)
 
   // notifications
   const [notifEmail,   setNotifEmail]   = useState(true)
@@ -1031,7 +1006,6 @@ export default function SettingsPage() {
       await restoreSystemDatabaseBackup(backendUrl, dbRestoreFile)
       toast.success("База приложения восстановлена")
       setDbRestoreFile(null)
-      if (dbRestoreInputRef.current) dbRestoreInputRef.current.value = ""
     } catch (e) {
       toast.error(e instanceof Error ? e.message : "Не удалось восстановить базу")
     } finally {
@@ -1230,30 +1204,16 @@ export default function SettingsPage() {
             description="Полностью заменяет текущую базу SQLite"
           >
             <div className="flex flex-col items-end gap-2">
-              <Input
-                ref={dbRestoreInputRef}
-                type="file"
-                accept=".db,.sqlite,.sqlite3,application/octet-stream"
-                className="hidden"
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8"
                 disabled={!systemDbAvailable || dbBackupBusy || dbRestoreBusy}
-                onChange={(e) => {
-                  const file = e.target.files?.[0] ?? null
-                  if (!file) return
-                  setDbRestoreFile(file)
-                }}
-              />
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="h-8"
-                  disabled={!systemDbAvailable || dbBackupBusy || dbRestoreBusy}
-                  onClick={() => dbRestoreInputRef.current?.click()}
-                >
-                  <UploadIcon className="size-4" />
-                  Выбрать файл
-                </Button>
-              </div>
+                onClick={() => setDbRestoreDialogOpen(true)}
+              >
+                <UploadIcon className="size-4" />
+                Выбрать файл
+              </Button>
               {dbRestoreFile && (
                 <p className="text-xs text-muted-foreground max-w-[220px] text-right break-all">{dbRestoreFile.name}</p>
               )}
@@ -1384,7 +1344,7 @@ export default function SettingsPage() {
               label="Подставлять данные EvoBGP"
               description="На страницах Домены, IP-диапазоны, ASN и Communities вместо моков из lib/data"
             >
-              <Toggle
+              <FormToggle
                 checked={evoEnabledDraft}
                 onChange={(v) => setEvoEnabledDraft(v)}
               />
@@ -1496,15 +1456,15 @@ export default function SettingsPage() {
           <CardHeader><CardTitle className="text-base">Каналы уведомлений</CardTitle></CardHeader>
           <CardContent className="divide-y px-5">
             <SettingRow label="Email" description="Отправка уведомлений на [email protected]">
-              <Toggle checked={notifEmail} onChange={setNotifEmail} />
+              <FormToggle checked={notifEmail} onChange={setNotifEmail} />
             </SettingRow>
             {notifEmail && <div className="py-3"><Input className="text-sm h-8" defaultValue="[email protected]" /></div>}
             <SettingRow label="Slack" description="Webhook-интеграция с каналом #alerts">
-              <Toggle checked={notifSlack} onChange={setNotifSlack} />
+              <FormToggle checked={notifSlack} onChange={setNotifSlack} />
             </SettingRow>
             {notifSlack && <div className="py-3"><Input className="text-sm h-8 font-mono" placeholder="https://hooks.slack.com/…" /></div>}
             <SettingRow label="Webhook" description="POST-запрос на произвольный endpoint">
-              <Toggle checked={notifWh} onChange={setNotifWh} />
+              <FormToggle checked={notifWh} onChange={setNotifWh} />
             </SettingRow>
             {notifWh && <div className="py-3"><Input className="text-sm h-8 font-mono" defaultValue="https://hooks.example.com/routerlists" /></div>}
           </CardContent>
@@ -1513,16 +1473,16 @@ export default function SettingsPage() {
           <CardHeader><CardTitle className="text-base">Триггеры</CardTitle></CardHeader>
           <CardContent className="divide-y px-5">
             <SettingRow label="Деградация узла" description="Потери пакетов > 5% или RTT > 100мс">
-              <Toggle checked={notifDegr} onChange={setNotifDegr} />
+              <FormToggle checked={notifDegr} onChange={setNotifDegr} />
             </SettingRow>
             <SettingRow label="Узел ушёл offline">
-              <Toggle checked={notifOffline} onChange={setNotifOffline} />
+              <FormToggle checked={notifOffline} onChange={setNotifOffline} />
             </SettingRow>
             <SettingRow label="Падение BGP-сессии">
-              <Toggle checked={notifBgp} onChange={setNotifBgp} />
+              <FormToggle checked={notifBgp} onChange={setNotifBgp} />
             </SettingRow>
             <SettingRow label="Просроченный бэкап" description="Если последний бэкап старше 2 дней">
-              <Toggle checked={notifBackup} onChange={setNotifBackup} />
+              <FormToggle checked={notifBackup} onChange={setNotifBackup} />
             </SettingRow>
           </CardContent>
         </Card>
@@ -1741,7 +1701,7 @@ export default function SettingsPage() {
           <CardContent className="divide-y px-5">
             <SettingRow label="Двухфакторная аутентификация (MFA)"
               description="TOTP / Authenticator app для всех администраторов">
-              <Toggle checked={mfa} onChange={setMfa} />
+              <FormToggle checked={mfa} onChange={setMfa} />
             </SettingRow>
             <SettingRow label="Тайм-аут сессии (мин)" description="Автоматический выход при бездействии">
               <Input className="w-20 h-8 text-sm" value={sessMin} onChange={e => setSessMin(e.target.value)} />
@@ -1763,7 +1723,7 @@ export default function SettingsPage() {
           <CardContent className="divide-y px-5">
             <SettingRow label="Расширенный журнал аудита"
               description="Записывать все изменения конфигурации с указанием пользователя и IP">
-              <Toggle checked={auditLog} onChange={setAuditLog} />
+              <FormToggle checked={auditLog} onChange={setAuditLog} />
             </SettingRow>
           </CardContent>
         </Card>
@@ -1853,7 +1813,6 @@ export default function SettingsPage() {
           onCancel={() => {
             if (dbRestoreBusy) return
             setDbRestoreFile(null)
-            if (dbRestoreInputRef.current) dbRestoreInputRef.current.value = ""
           }}
         />
       )}
@@ -1864,6 +1823,19 @@ export default function SettingsPage() {
           onCancel={() => setDeleteTarget(null)}
         />
       )}
+
+      <FileImportDialog
+        open={dbRestoreDialogOpen}
+        onOpenChange={setDbRestoreDialogOpen}
+        title="Восстановление базы данных"
+        description="Выберите файл SQLite (.db) — текущая база будет полностью заменена"
+        accept=".db,.sqlite,.sqlite3,application/octet-stream"
+        onImport={async (files) => {
+          const file = files[0]
+          if (!file) return
+          setDbRestoreFile(file)
+        }}
+      />
     </div>
   )
 }

app/(main)/uptime/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useMemo, useEffect, useRef, useCallback } from "react"
 import { PageHeader } from "@/components/page-header"
+import { FormField, FormToggle, SegmentedControl } from "@/components/form-kit"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -212,21 +213,6 @@ function probeGroupActionKey(srvId: string, group: { name: string; target: strin
 
 // ── shared components ──────────────────────────────────────────────────────────
 
-function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button type="button" onClick={() => onChange(!checked)}
-      className={cn(
-        "relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors cursor-pointer",
-        checked ? "bg-primary" : "bg-input",
-      )}>
-      <span className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
-        checked ? "translate-x-4" : "translate-x-0",
-      )} />
-    </button>
-  )
-}
-
 function TypeChip({ type }: { type: "jump-host" | "exit-node" | "home-router" }) {
   return (
     <span className={cn(
@@ -267,18 +253,6 @@ function StatChip({
   )
 }
 
-function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <label className="text-xs font-medium">
-        {label}
-        {hint && <span className="font-normal text-muted-foreground ml-1">{hint}</span>}
-      </label>
-      {children}
-    </div>
-  )
-}
-
 /** Активный интерфейс RouterOS: не disabled и running */
 function isActiveRouterOsInterface(i: { running?: boolean; disabled?: boolean }): boolean {
   return i.running === true && i.disabled !== true
@@ -323,36 +297,6 @@ function interfaceOptionMatchesSearch(iface: RouterInterfaceOption, raw: string)
   return false
 }
 
-function SegmentedControl<T extends string>({
-  value,
-  onChange,
-  options,
-}: {
-  value: T
-  onChange: (v: T) => void
-  options: Array<{ value: T; label: string }>
-}) {
-  return (
-    <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5 w-fit">
-      {options.map((option) => (
-        <button
-          key={option.value}
-          type="button"
-          onClick={() => onChange(option.value)}
-          className={cn(
-            "px-3 py-1 text-sm rounded transition-colors",
-            value === option.value
-              ? "bg-background text-foreground shadow-sm"
-              : "text-muted-foreground hover:text-foreground",
-          )}
-        >
-          {option.label}
-        </button>
-      ))}
-    </div>
-  )
-}
-
 function ServerPickerCards({
   options,
   selectedId,
@@ -2401,7 +2345,7 @@ export default function UptimePage() {
                               className={cn("px-4 py-3 hover:bg-muted/20 transition-colors", !probe.enabled && "opacity-50")}>
                               <div className="flex items-center gap-3 flex-wrap">
                                 {/* enable toggle */}
-                                <Toggle checked={probe.enabled} onChange={(v) => updateSpeedProbe(probe.id, { enabled: v })} />
+                                <FormToggle checked={probe.enabled} onChange={(v) => updateSpeedProbe(probe.id, { enabled: v })} />
 
                                 {/* route: src → dst */}
                                 <div className="flex items-center gap-1.5 min-w-0 flex-1">
@@ -2824,7 +2768,7 @@ export default function UptimePage() {
                                 !p.enabled && "opacity-40",
                               )}
                               style={{ gridTemplateColumns: "36px 16px 130px 120px 140px 70px 44px minmax(132px,1fr) 96px 36px 72px" }}>
-                              <Toggle checked={p.enabled} onChange={v => toggleProbe(p.id, v)} />
+                              <FormToggle checked={p.enabled} onChange={v => toggleProbe(p.id, v)} />
                               <StatusDot
                                 status={p.status === "up" ? "online" : p.status === "warn" ? "degraded" : "offline"}
                                 pulse={p.status === "up" && p.enabled}
@@ -3002,7 +2946,7 @@ export default function UptimePage() {
           </SheetHeader>
 
           <div className="flex-1 overflow-y-auto px-5 py-5 flex flex-col gap-5">
-            <Field label="Источник">
+            <FormField label="Источник">
               <ServerPickerCards
                 options={selectableSources}
                 selectedId={speedDraft.srcServerId}
@@ -3015,9 +2959,9 @@ export default function UptimePage() {
                   void loadSpeedInterfaces(nextSrc)
                 }}
               />
-            </Field>
+            </FormField>
 
-            <Field label="Назначение">
+            <FormField label="Назначение">
               <ServerPickerCards
                 options={selectableSources.filter((s) => s.id !== speedDraft.srcServerId)}
                 selectedId={speedDraft.dstServerId}
@@ -3026,28 +2970,28 @@ export default function UptimePage() {
                   void loadSpeedInterfaces(nextDst)
                 }}
               />
-            </Field>
+            </FormField>
 
-            <Field label="Интерфейс источника">
+            <FormField label="Интерфейс источника">
               <InterfacePickerCards
                 value={speedDraft.srcInterface}
                 onChange={(v) => setSpeedDraft((prev) => ({ ...prev, srcInterface: v }))}
                 options={filterActiveInterfaces(speedIfaces[speedDraft.srcServerId] ?? [])}
                 autoLabel="auto"
               />
-            </Field>
+            </FormField>
 
-            <Field label="Интерфейс назначения">
+            <FormField label="Интерфейс назначения">
               <InterfacePickerCards
                 value={speedDraft.dstInterface}
                 onChange={(v) => setSpeedDraft((prev) => ({ ...prev, dstInterface: v }))}
                 options={filterActiveInterfaces(speedIfaces[speedDraft.dstServerId] ?? [])}
                 autoLabel="auto"
               />
-            </Field>
+            </FormField>
 
             <div className="grid grid-cols-3 gap-3">
-              <Field label="Протокол">
+              <FormField label="Протокол">
                 <SegmentedControl
                   value={speedDraft.protocol}
                   onChange={(v) => setSpeedDraft((prev) => ({ ...prev, protocol: v }))}
@@ -3056,8 +3000,8 @@ export default function UptimePage() {
                     { value: "udp", label: "UDP" },
                   ]}
                 />
-              </Field>
-              <Field label="Direction">
+              </FormField>
+              <FormField label="Direction">
                 <SegmentedControl
                   value={speedDraft.direction}
                   onChange={(v) => setSpeedDraft((prev) => ({ ...prev, direction: v }))}
@@ -3067,10 +3011,10 @@ export default function UptimePage() {
                     { value: "receive", label: "rx" },
                   ]}
                 />
-              </Field>
-              <Field label="Сек">
+              </FormField>
+              <FormField label="Сек">
                 <Input className="h-9" value={speedDraft.durationSec} onChange={(e) => setSpeedDraft((prev) => ({ ...prev, durationSec: e.target.value }))} />
-              </Field>
+              </FormField>
             </div>
 
             {speedDraft.srcServerId &&
@@ -3169,7 +3113,7 @@ export default function UptimePage() {
               </div>
             </div>
 
-            <Field
+            <FormField
               label="Источник (кто пингует)"
               hint="— весь каталог, в т.ч. выключенные в инвентаре (Home Router часто «выкл.», но доступен по LAN для ping)"
             >
@@ -3178,9 +3122,9 @@ export default function UptimePage() {
                 selectedId={newSrcId}
                 onSelect={(id) => setNewSrcId(id)}
               />
-            </Field>
+            </FormField>
 
-            <Field label="Интерфейс источника" hint="(необязательно)">
+            <FormField label="Интерфейс источника" hint="(необязательно)">
               <InterfacePickerCards
                 value={newSrcInterface}
                 onChange={setNewSrcInterface}
@@ -3188,25 +3132,25 @@ export default function UptimePage() {
                 autoLabel="авто (по маршруту)"
                 busy={srcInterfacesBusy}
               />
-            </Field>
+            </FormField>
 
-            <Field label="Имя пробы">
+            <FormField label="Имя пробы">
               <Input className="h-9 text-sm" placeholder="youtube.com"
                 value={newName} onChange={e => setNewName(e.target.value)} />
-            </Field>
+            </FormField>
 
-            <Field label="Целевой IP / хост">
+            <FormField label="Целевой IP / хост">
               <Input className="h-9 text-sm font-mono" placeholder="142.250.74.110"
                 value={newTarget} onChange={e => setNewTarget(e.target.value)} />
-            </Field>
+            </FormField>
 
-            <Field label="Связанный фильтр" hint="(необязательно)">
+            <FormField label="Связанный фильтр" hint="(необязательно)">
               <LinkedFilterPickerCards
                 value={newFilter}
                 onChange={setNewFilter}
                 items={filters}
               />
-            </Field>
+            </FormField>
           </div>
 
           <SheetFooter className="px-5 py-4 border-t shrink-0 gap-2">

app/(main)/wireguard/page.tsx

@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
+import { EmptyState } from "@/components/empty-state"
 import { servers } from "@/lib/data"
 import type { WireGuardInterface, WireGuardPeer } from "@/lib/data"
 import { Flag } from "@/components/flag"
@@ -410,11 +411,12 @@ export default function WireGuardPage() {
             </div>
 
             {filtered.length === 0 ? (
-              <div className="flex flex-col items-center justify-center py-16 text-center text-muted-foreground">
-                <ShieldCheckIcon className="size-10 mb-3 opacity-20" />
-                <p className="text-sm font-medium">Нет WireGuard интерфейсов</p>
-                <p className="text-xs mt-1">Добавьте первый интерфейс или проверьте поиск</p>
-              </div>
+              <EmptyState
+                icon={<ShieldCheckIcon className="size-4" />}
+                title="Нет WireGuard интерфейсов"
+                description="Добавьте первый интерфейс или проверьте поиск"
+                className="border-0 py-16"
+              />
             ) : (
               filtered.map((iface) => (
                 <IfaceRow

app/globals.css

@@ -39,6 +39,15 @@
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-invert: var(--invert);
+  --color-invert-foreground: var(--invert-foreground);
   --radius-sm: calc(var(--radius) * 0.6);
   --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
@@ -74,6 +83,15 @@
   --accent-foreground:     oklch(0.205 0 0);
 
   --destructive:           oklch(0.577 0.245 27.325);
+  --destructive-foreground: var(--color-red-800);
+  --info:                  var(--color-violet-500);
+  --info-foreground:       var(--color-violet-900);
+  --success:               var(--color-emerald-500);
+  --success-foreground:    var(--color-emerald-900);
+  --warning:               var(--color-yellow-500);
+  --warning-foreground:    var(--color-yellow-900);
+  --invert:                var(--color-zinc-900);
+  --invert-foreground:     var(--color-zinc-50);
 
   /* Borders + inputs */
   --border:                oklch(0.904 0.006 264.0);
@@ -148,6 +166,15 @@
   --accent-foreground:     oklch(0.985 0 0);
 
   --destructive:           oklch(0.704 0.191 22.216);
+  --destructive-foreground: var(--color-red-600);
+  --info:                  var(--color-violet-500);
+  --info-foreground:       var(--color-violet-600);
+  --success:               var(--color-emerald-500);
+  --success-foreground:    var(--color-emerald-600);
+  --warning:               var(--color-yellow-500);
+  --warning-foreground:    var(--color-yellow-600);
+  --invert:                var(--color-zinc-700);
+  --invert-foreground:     var(--color-zinc-50);
 
   --border:                oklch(1 0 0 / 10%);
   --input:                 oklch(1 0 0 / 15%);