fix(ui): улучшить функциональность панели данных и заменить устаревшие компоненты

.ci/scripts/patch-servers-reui.py

@@ -0,0 +1,144 @@
+import re
+from pathlib import Path
+
+path = Path(__file__).resolve().parents[2] / "app" / "(main)" / "servers" / "page.tsx"
+text = path.read_text(encoding="utf-8")
+
+text = text.replace(
+    'import { Fragment, useEffect, useMemo, useState } from "react"\n'
+    'import { PageHeader } from "@/components/page-header"\n'
+    'import { StatusBadge } from "@/components/status-badge"',
+    'import { useEffect, useMemo, useState } from "react"\n'
+    'import { PageHeader } from "@/components/page-header"\n'
+    'import { FormField, FormToggle, SectionTitle, SegmentedControl } from "@/components/form-kit"\n'
+    'import { DataPageToolbar } from "@/components/data-page-toolbar"\n'
+    'import { ServersDataGrid } from "@/components/data-grids/servers-data-grid"',
+    1,
+)
+
+text = text.replace(
+    """import {
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
+  DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuGroup,
+} from "@/components/ui/dropdown-menu"
+""",
+    """import {
+  Stepper,
+  StepperContent,
+  StepperIndicator,
+  StepperItem,
+  StepperNav,
+  StepperPanel,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from "@/components/reui/stepper"
+""",
+    1,
+)
+
+text = text.replace(
+    """import {
+  SearchIcon, RefreshCwIcon, DownloadIcon, PlusIcon, TrashIcon,
+  MoreHorizontalIcon, EyeIcon, EyeOffIcon,
+  ChevronRightIcon, ChevronDownIcon,
+  CheckCircleIcon, XCircleIcon, LoaderCircleIcon,
+  ShieldIcon, WifiIcon, PencilIcon, PowerIcon, Trash2Icon, ExternalLinkIcon,
+  HomeIcon, ServerIcon, NetworkIcon,
+} from "lucide-react\"""",
+    """import {
+  RefreshCwIcon, DownloadIcon, PlusIcon, TrashIcon,
+  EyeIcon, EyeOffIcon,
+  ChevronRightIcon, ChevronDownIcon,
+  CheckCircleIcon, XCircleIcon, LoaderCircleIcon,
+  ShieldIcon, WifiIcon,
+  HomeIcon, ServerIcon, NetworkIcon,
+} from "lucide-react\"""",
+    1,
+)
+
+text = re.sub(
+    r"// ─── RouterOS version utilities.*?// ─── Countries ─",
+    "// ─── Countries ─",
+    text,
+    count=1,
+    flags=re.S,
+)
+
+text = re.sub(
+    r"// ─── Type config ─.*?// ─── Shared small components ─",
+    "// ─── Shared small components ─",
+    text,
+    count=1,
+    flags=re.S,
+)
+
+text = re.sub(
+    r"function Field\(\{ label, hint, required, children \}:.*?^}\n\n// ─── Country field",
+    "// ─── Country field",
+    text,
+    count=1,
+    flags=re.S | re.M,
+)
+
+text = text.replace(
+    "const [expandedId,   setExpandedId]   = useState<string | null>(null)",
+    "const [sheetStep,    setSheetStep]    = useState(1)",
+    1,
+)
+
+text = text.replace(
+    'setForm(defaultForm); setTestState("idle"); setTestMsg("")\n    setOpen(true)',
+    'setForm(defaultForm); setTestState("idle"); setTestMsg("")\n    setSheetStep(1)\n    setOpen(true)',
+    1,
+)
+
+text = text.replace(
+    'setTestState("idle"); setTestMsg(""); setOpen(true)',
+    'setTestState("idle"); setTestMsg(""); setSheetStep(1); setOpen(true)',
+    1,
+)
+
+text = re.sub(r"<Field\b", "<FormField", text)
+text = re.sub(r"</Field>", "</FormField>", text)
+text = re.sub(r"<Toggle\b", "<FormToggle", text)
+
+new_table = """          {/* Table */}
+          <Card>
+            <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],
+                })),
+              }}
+              search={search}
+              onSearchChange={setSearch}
+              searchPlaceholder="Поиск по имени, хосту…"
+              countLabel={`${filtered.length} серверов`}
+            />
+            <ServersDataGrid
+              servers={filtered}
+              isLive={isLive}
+              pollingIds={pollingIds}
+              onPoll={handlePoll}
+              onEdit={openEdit}
+              onDelete={handleDelete}
+              onToggleStatus={handleToggleStatus}
+            />
+          </Card>
+"""
+
+text = re.sub(
+    r"          \{/\* Table \*/\}\n          <Card>.*?</Card>\n",
+    new_table,
+    text,
+    count=1,
+    flags=re.S,
+)
+
+path.write_text(text, encoding="utf-8")
+print("patched", path)

.ci/scripts/patch-servers-stepper.py

@@ -0,0 +1,144 @@
+import re
+from pathlib import Path
+
+path = Path(__file__).resolve().parents[2] / "app" / "(main)" / "servers" / "page.tsx"
+text = path.read_text(encoding="utf-8")
+
+# Wrap sheet form in stepper
+text = text.replace(
+    """          <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
+
+            {/* 1. Основные */}
+            <div className="flex flex-col gap-4">
+              <SectionTitle>Основные</SectionTitle>""",
+    """          <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,
+)
+
+text = text.replace(
+    """            </div>
+
+            {/* 2. WAN-аплинки (только для home-router) */}
+            {isHomeRouter && (
+              <div className="flex flex-col gap-4">
+                <SectionTitle>WAN-аплинки</SectionTitle>""",
+    """              </StepperContent>
+              <StepperContent value={2} className="flex flex-col gap-4">
+                <SectionTitle>WAN-аплинки</SectionTitle>""",
+    1,
+)
+
+text = text.replace(
+    """              </div>
+            )}
+
+            {/* 3. Подключение (API) */}
+            <div className="flex flex-col gap-4">
+              <SectionTitle>Подключение (RouterOS REST API)</SectionTitle>""",
+    """              </StepperContent>
+              <StepperContent value={3} className="flex flex-col gap-4">
+              <SectionTitle>Подключение (RouterOS REST API)</SectionTitle>""",
+    1,
+)
+
+text = text.replace(
+    """            </div>
+
+            {/* 4. Дополнительно */}
+            <div className="flex flex-col gap-4">
+              <button type="button" onClick={() => set("showAdvanced", !form.showAdvanced)}""",
+    """              </StepperContent>
+              <StepperContent value={4} className="flex flex-col gap-4">
+              <button type="button" onClick={() => set("showAdvanced", !form.showAdvanced)}""",
+    1,
+)
+
+text = text.replace(
+    """            </div>
+
+          </div>
+
+          <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>
+          </SheetFooter>""",
+    """              </StepperContent>
+            </StepperPanel>
+          </Stepper>
+
+          <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
+            <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>""",
+    1,
+)
+
+# WAN step 2: show message when not home router
+text = text.replace(
+    """              <StepperContent value={2} className="flex flex-col gap-4">
+                <SectionTitle>WAN-аплинки</SectionTitle>
+                <WanUplinkEditor""",
+    """              <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""",
+    1,
+)
+
+text = text.replace(
+    """                />
+              </StepperContent>
+              <StepperContent value={3}""",
+    """                />
+                )}
+              </StepperContent>
+              <StepperContent value={3}""",
+    1,
+)
+
+path.write_text(text, encoding="utf-8")
+print("stepper patched")

.codegraph/.gitignore

@@ -0,0 +1,16 @@
+# CodeGraph data files
+# These are local to each machine and should not be committed
+
+# Database
+*.db
+*.db-wal
+*.db-shm
+
+# Cache
+cache/
+
+# Logs
+*.log
+
+# Hook markers
+.dirty

.cursor/rules/dev-run-command.mdc

@@ -5,15 +5,40 @@ alwaysApply: true
 
 # Локальный запуск проекта
 
-Для запуска всего проекта в dev-режиме поднимать два процесса:
+## Требования
+
+- **Node.js 22**, npm с workspaces.
+- Первый раз (или после смены зависимостей): `npm install` из корня репозитория.
+- Backend: скопировать `backend/.env.example` → `backend/.env` (по умолчанию `PORT=8000`, `CORS_ORIGIN=http://localhost:3000`).
+
+## Запуск (два процесса)
+
+Из корня репозитория поднять **два** long-running процесса в **отдельных** терминалах:
 
 ```powershell
 npm run dev
 npm --prefix backend run dev
 ```
 
-- Frontend: `http://localhost:3000`
-- Backend: `http://localhost:8000`
-- Health check backend: `http://localhost:8000/health`
+| Сервис | URL | Проверка |
+|--------|-----|----------|
+| Frontend (Next.js 16, Turbopack) | http://localhost:3000 | открыть в браузере |
+| Backend (Fastify) | http://localhost:8000 | `GET /health` |
 
-Если пользователь просит “запусти проект”, “запусти фронт и бэк” или похожую команду, сначала проверь уже запущенные терминалы, затем запускай эти две команды отдельными long-running процессами.
+Проверка backend в PowerShell:
+
+```powershell
+Invoke-WebRequest -Uri http://localhost:8000/health -UseBasicParsing | Select-Object -ExpandProperty Content
+```
+
+Ожидаемый ответ: `{"status":"ok",...}`.
+
+## Поведение агента
+
+Если пользователь просит «запусти проект», «запусти фронт и бэк» или похожее:
+
+1. Сначала проверить уже запущенные терминалы — не дублировать процессы.
+2. Запустить обе команды выше как фоновые long-running процессы.
+3. Дождаться готовности: frontend — `Ready`, backend — `Server listening` / успешный `/health`.
+
+Подробности архитектуры и env — `README.md`, раздел «Запуск».

AGENTS.md

@@ -10,3 +10,7 @@
 4. Локальный hook `.githooks/commit-msg` отклоняет subject без кириллицы; подключение — `npm install` / `npm run prepare`.
 
 Полные правила: `.cursor/rules/commit-messages-ru.mdc`, semver — `.cursor/rules/release-versioning.mdc`.
+
+## Локальный запуск
+
+Два процесса из корня: `npm run dev` (frontend :3000) и `npm --prefix backend run dev` (backend :8000). Перед первым запуском — `npm install`, для backend — `backend/.env` из `backend/.env.example`. Подробности — `.cursor/rules/dev-run-command.mdc` и `README.md`.

Dockerfile.frontend

@@ -40,6 +40,7 @@ ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV HOSTNAME=0.0.0.0
 ENV PORT=3000
+ENV BACKEND_INTERNAL_URL=http://backend:8000
 COPY --from=build /app/public ./public
 COPY --from=build /app/.next/standalone ./
 COPY --from=build /app/.next/static ./.next/static

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,24 @@
 "use client"
 
-import { useMemo } from "react"
+import { useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
-import { DataTable } from "@/components/data-table"
+import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import { AsnsDataGrid } from "@/components/data-grids/asns-data-grid"
+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 { UploadIcon, DownloadIcon, PlusIcon, 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 [search, setSearch] = useState("")
 
   const useEvoCatalog = mode === "live" && enabled
 
@@ -22,13 +28,26 @@ export default function AsnsPage() {
     return snapshot?.asns ?? []
   }, [useEvoCatalog, loading, snapshot])
 
+  const filtered = useMemo(() => {
+    if (!search) return rows
+    const q = search.toLowerCase()
+    return rows.filter(
+      (r) =>
+        r.asn.toLowerCase().includes(q) ||
+        r.org.toLowerCase().includes(q) ||
+        String(r.prefixes).includes(q),
+    )
+  }, [rows, search])
+
   return (
     <div className="flex flex-col h-full">
       <PageHeader
         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>
           </>
@@ -55,57 +74,31 @@ export default function AsnsPage() {
               </p>
             )}
           </div>
-          <DataTable
-            data={rows}
-            searchPlaceholder="Поиск по ASN, имени, префиксам…"
-            searchKeys={["asn", "org", "prefixes"]}
-            columns={[
-              {
-                key: "asn",
-                label: "ASN",
-                render: (d) => <span className="font-mono font-semibold">{d.asn}</span>,
-              },
-              {
-                key: "org",
-                label: "Имя / организация",
-                render: (d) => (
-                  <span className="font-medium max-w-[min(28rem,50vw)] truncate block" title={d.org}>
-                    {d.org}
-                  </span>
-                ),
-              },
-              {
-                key: "prefixes",
-                label: "Префиксов",
-                render: (d) => <span className="font-mono tabular-nums">{d.prefixes.toLocaleString("ru")}</span>,
-              },
-              {
-                key: "filter",
-                label: "Фильтр",
-                render: (d) => (
-                  <span className="inline-flex items-center gap-1 text-xs bg-muted rounded px-2 py-0.5">
-                    <FilterIcon className="size-3 text-muted-foreground" />{d.filter}
-                  </span>
-                ),
-              },
-              {
-                key: "updated",
-                label: "Обновлён",
-                render: (d) => <span className="text-xs text-muted-foreground">{d.updated}</span>,
-              },
-              {
-                key: "enabled",
-                label: "Статус",
-                render: (d) => (
-                  <span className={`text-xs font-medium ${d.enabled ? "text-emerald-600" : "text-muted-foreground"}`}>
-                    {d.enabled ? "Активен" : "Отключён"}
-                  </span>
-                ),
-              },
-            ]}
-          />
+          <DataPageCard>
+            <DataPageToolbar
+              search={search}
+              onSearchChange={setSearch}
+              searchPlaceholder="Поиск по ASN, имени, префиксам…"
+              countLabel={`${filtered.length} ASN`}
+            />
+            <AsnsDataGrid
+              asns={filtered}
+              isLoading={useEvoCatalog && loading && !snapshot}
+              pagination={useEvoCatalog}
+            />
+          </DataPageCard>
         </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,9 +2,14 @@
 
 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"
+import { DataPageCard } from "@/components/data-page-card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -20,54 +25,19 @@ import { cn } from "@/lib/utils"
 import { useDataSource } from "@/lib/data-source"
 import { listServers } from "@/shared/api/servers"
 import { toFrontendServer } from "@/entities/server/model/mappers"
-import { createBackupsAsync, deleteBackup, getBackupJob, listBackups, type BackupItem } from "@/shared/api/backups"
+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 ────────────────────────────────────────────────────────────────────
 
@@ -116,6 +86,7 @@ export default function BackupsPage() {
   const [opBusy, setOpBusy] = useState(false)
   const [opError, setOpError] = useState<string | null>(null)
   const [backupJobId, setBackupJobId] = useState<string | null>(null)
+  const [scheduleSaveBusy, setScheduleSaveBusy] = useState(false)
 
   // Schedule
   const [schedule, setSchedule] = useState(defaultSchedule)
@@ -140,13 +111,38 @@ export default function BackupsPage() {
   }
 
   function handleSave() {
-    toast.success("Настройки сохранены")
+    if (scheduleSaveBusy) return
+    setScheduleSaveBusy(true)
+    setOpError(null)
+    void (async () => {
+      try {
+        await putBackupScheduleSettings(backendUrl, {
+          enabled: schedule.enabled,
+          frequency: schedule.frequency,
+          hour: schedule.hour,
+          minute: schedule.minute,
+          weekDay: schedule.weekDay,
+          monthDay: schedule.monthDay,
+          keepCount: schedule.keepCount,
+          format: schedule.format,
+          serverIds: [...selectedServers],
+        })
+        toast.success("Настройки сохранены")
+      } catch (e) {
+        setOpError(e instanceof Error ? e.message : "Ошибка сохранения расписания")
+      } finally {
+        setScheduleSaveBusy(false)
+      }
+    })()
   }
 
   // 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)
@@ -171,14 +167,28 @@ export default function BackupsPage() {
     setLoading(true)
     setOpError(null)
     try {
-      const [serversRows, backupsRows] = await Promise.all([
+      const [serversRows, backupsRows, scheduleRow] = await Promise.all([
         listServers(backendUrl),
         listBackups(backendUrl),
+        getBackupScheduleSettings(backendUrl),
       ])
       const mappedServers = serversRows.map((s) => toFrontendServer(s))
       setLiveServers(mappedServers)
       setBackupList(backupsRows.map(mapApiBackupToUi))
-      setSelectedServers(new Set(mappedServers.map((s) => s.id)))
+      setSchedule({
+        enabled: scheduleRow.enabled,
+        frequency: scheduleRow.frequency,
+        hour: scheduleRow.hour,
+        minute: scheduleRow.minute,
+        weekDay: scheduleRow.weekDay,
+        monthDay: scheduleRow.monthDay,
+        keepCount: scheduleRow.keepCount,
+        format: scheduleRow.format,
+      })
+      const serverIds = scheduleRow.serverIds.length > 0
+        ? scheduleRow.serverIds
+        : mappedServers.map((s) => s.id)
+      setSelectedServers(new Set(serverIds.filter((id) => mappedServers.some((s) => s.id === id))))
     } catch (e) {
       setOpError(e instanceof Error ? e.message : "Ошибка загрузки данных")
     } finally {
@@ -319,7 +329,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" />Новый бэкап
@@ -387,83 +397,29 @@ 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>
-            </Card>
+            <DataPageCard>
+              <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}
+              />
+            </DataPageCard>
           )}
 
           {/* ── Настройки ────────────────────────────────────────────────── */}
@@ -480,11 +436,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)}
@@ -494,10 +450,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)}
@@ -511,18 +467,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"
@@ -544,15 +500,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)}
@@ -561,7 +517,7 @@ export default function BackupsPage() {
                             { value: "backup", label: ".backup" },
                           ]}
                         />
-                      </Field>
+                      </FormField>
                     </div>
                   </div>
                 </CardContent>
@@ -572,7 +528,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)}
@@ -583,45 +539,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"}
@@ -636,13 +592,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>
                     </>
                   )}
 
@@ -711,7 +667,7 @@ export default function BackupsPage() {
 
               {/* Save button */}
               <div className="lg:col-span-2 flex items-center gap-3">
-                <Button onClick={handleSave} className="gap-2">
+                <Button onClick={handleSave} className="gap-2" disabled={scheduleSaveBusy}>
                   Сохранить настройки
                 </Button>
               </div>
@@ -722,71 +678,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,7 +2,15 @@
 
 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 { DataPageCard } from "@/components/data-page-card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
@@ -17,49 +25,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 +211,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 +218,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,159 +259,82 @@ 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>
-      </Card>
+      <DataPageCard>
+        <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} />
+      </DataPageCard>
     </div>
   )
 }

app/(main)/certificates/page.tsx

@@ -1,12 +1,16 @@
 "use client"
 
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react"
+import { useCallback, useEffect, useMemo, useState } 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"
-import { Flag } from "@/components/flag"
 import { Card, CardContent } from "@/components/ui/card"
+import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import { CertificatesDataGrid } from "@/components/data-grids/certificates-data-grid"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -33,119 +37,25 @@ import {
 } from "@/shared/api/certificates"
 import { toast } from "sonner"
 import {
-  SearchIcon,
   ShieldCheckIcon,
-  ShieldAlertIcon,
-  ShieldOffIcon,
   BadgeCheckIcon,
   AlertTriangleIcon,
   AlertCircleIcon,
-  CalendarIcon,
-  KeyRoundIcon,
-  ServerIcon,
   PlusIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
   RefreshCwIcon,
+  UploadIcon,
 } from "lucide-react"
-
-const STATUS_CONFIG: Record<
-  CertStatus,
-  {
-    label: string
-    icon: ReactNode
-    badge: string
-    row: string
-  }
-> = {
-  valid: {
-    label: "Действителен",
-    icon: <BadgeCheckIcon className="size-4 text-emerald-500" />,
-    badge: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
-    row: "",
-  },
-  expired: {
-    label: "Истёк",
-    icon: <ShieldOffIcon className="size-4 text-red-500" />,
-    badge: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
-    row: "bg-red-500/5",
-  },
-  revoked: {
-    label: "Отозван",
-    icon: <ShieldAlertIcon className="size-4 text-amber-500" />,
-    badge: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
-    row: "bg-amber-500/5",
-  },
-}
-
-const CERT_TABLE_GRID_CLASS =
-  "grid grid-cols-[1.25rem_minmax(0,1.35fr)_minmax(0,0.85fr)_minmax(0,1fr)_9.5rem_minmax(0,8.5rem)_6rem] gap-3"
-
-function daysLeftColor(days: number): string {
-  if (days < 0) return "text-red-500"
-  if (days <= 7) return "text-red-500"
-  if (days <= 30) return "text-amber-500"
-  return "text-emerald-600 dark:text-emerald-400"
-}
-
-function daysLeftBar(days: number, total = 365): number {
-  if (days <= 0) return 0
-  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>
-  )
-}
+import {
+  Stepper,
+  StepperContent,
+  StepperIndicator,
+  StepperItem,
+  StepperNav,
+  StepperPanel,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from "@/components/reui/stepper"
 
 function mockToDto(cert: (typeof routerCertificates)[number]): CertificateDto {
   return {
@@ -165,203 +75,6 @@ function mockToDto(cert: (typeof routerCertificates)[number]): CertificateDto {
   }
 }
 
-function CertPartDaysBar({ cert, pct }: { cert: CertificateDto; pct: number }) {
-  return (
-    <div
-      className={cn(
-        "h-full rounded-full transition-all",
-        cert.daysLeft < 0
-          ? "bg-red-500"
-          : cert.daysLeft <= 7
-            ? "bg-red-500"
-            : cert.daysLeft <= 30
-              ? "bg-amber-500"
-              : "bg-emerald-500",
-      )}
-      style={{ width: `${pct}%` }}
-    />
-  )
-}
-
-function CertPartDays({ cert, pct }: { cert: CertificateDto; pct: number }) {
-  return (
-    <>
-      <div className="flex items-center justify-between text-xs mb-1">
-        <span className={cn("font-mono font-medium", daysLeftColor(cert.daysLeft))}>
-          {cert.daysLeft < 0 ? `Истёк ${-cert.daysLeft}д назад` : `${cert.daysLeft}д осталось`}
-        </span>
-        <span className="text-muted-foreground text-[10px]">{cert.validUntil}</span>
-      </div>
-      <div className="h-1.5 bg-muted rounded-full overflow-hidden">
-        <CertPartDaysBar cert={cert} pct={pct} />
-      </div>
-    </>
-  )
-}
-
-function CertPartDetailDates({ cert }: { cert: CertificateDto }) {
-  return (
-    <div>
-      <p className="text-muted-foreground mb-1">Действителен с</p>
-      <p className="font-mono">{cert.validFrom}</p>
-    </div>
-  )
-}
-
-function CertPartDetailSans({ cert }: { cert: CertificateDto }) {
-  return (
-    <div>
-      <p className="text-muted-foreground mb-1">SAN / Alt Names</p>
-      <div className="flex flex-wrap gap-1">
-        {cert.sans.length > 0
-          ? cert.sans.map((s) => (
-              <span key={s} className="font-mono bg-muted px-1.5 py-0.5 rounded">
-                {s}
-              </span>
-            ))
-          : <span className="text-muted-foreground">—</span>}
-      </div>
-    </div>
-  )
-}
-
-function CertPartDetailTrusted({ cert }: { cert: CertificateDto }) {
-  return (
-    <div>
-      <p className="text-muted-foreground mb-1">Trusted</p>
-      <p className={cert.trusted ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}>
-        {cert.trusted ? "Да (доверенный)" : "Нет (не доверенный)"}
-      </p>
-    </div>
-  )
-}
-
-function CertListRow({
-  cert,
-  cfg,
-  pct,
-  server,
-  expanded,
-  onToggle,
-}: {
-  cert: CertificateDto
-  cfg: (typeof STATUS_CONFIG)[CertStatus]
-  pct: number
-  server?: Server
-  expanded: boolean
-  onToggle: () => void
-}) {
-  return (
-    <div className={cn("border-b last:border-b-0", cfg.row)}>
-      <div
-        className={cn(
-          CERT_TABLE_GRID_CLASS,
-          "px-4 py-3 items-center hover:bg-muted/30 transition-colors cursor-pointer",
-        )}
-        onClick={onToggle}
-      >
-        <button
-          type="button"
-          className="text-muted-foreground"
-          onClick={(e) => {
-            e.stopPropagation()
-            onToggle()
-          }}
-        >
-          {expanded ? <ChevronDownIcon className="size-3.5" /> : <ChevronRightIcon className="size-3.5" />}
-        </button>
-        <div className="min-w-0">
-          <div className="flex items-center gap-2 min-w-0">
-            <span className="shrink-0">{cfg.icon}</span>
-            <span className="font-medium text-sm truncate" title={cert.name}>
-              {cert.name}
-            </span>
-          </div>
-          <p className="text-xs text-muted-foreground font-mono mt-0.5 truncate" title={cert.commonName}>
-            {cert.commonName}
-          </p>
-        </div>
-        <div className="flex items-center gap-1.5 text-xs text-muted-foreground min-w-0">
-          {server
-            ? (
-                <>
-                  <Flag code={server.country} size={12} />
-                  <span className="font-mono truncate">{server.name}</span>
-                </>
-              )
-            : (
-                <>
-                  <ServerIcon className="size-3.5" />
-                  <span className="font-mono truncate">{cert.serverName ?? cert.serverId}</span>
-                </>
-              )}
-        </div>
-        <p className="text-xs text-muted-foreground truncate min-w-0" title={cert.issuedBy}>
-          {cert.issuedBy}
-        </p>
-        <div className="min-w-0">
-          <CertPartDays cert={cert} pct={pct} />
-        </div>
-        <div className="flex flex-wrap gap-1 min-w-0 overflow-hidden">
-          {cert.usage.map((u) => (
-            <span
-              key={u}
-              className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-muted text-muted-foreground border"
-            >
-              {u}
-            </span>
-          ))}
-        </div>
-        <span
-          className={cn(
-            "text-[11px] font-mono px-2 py-0.5 rounded border whitespace-nowrap shrink-0 justify-self-end",
-            cfg.badge,
-          )}
-        >
-          {cfg.label}
-        </span>
-      </div>
-      {expanded && (
-        <div className="px-10 pb-4 grid grid-cols-2 sm:grid-cols-4 gap-4 text-xs border-t border-border/50 pt-3">
-          <div>
-            <p className="text-muted-foreground mb-1">Key size</p>
-            <p className="font-mono font-medium">{cert.keySize} bit</p>
-          </div>
-          <CertPartDetailDates cert={cert} />
-          <CertPartDetailSans cert={cert} />
-          <CertPartDetailTrusted cert={cert} />
-        </div>
-      )}
-    </div>
-  )
-}
-
-function CertRow({
-  cert,
-  server,
-  expanded,
-  onToggle,
-}: {
-  cert: CertificateDto
-  server?: Server
-  expanded: boolean
-  onToggle: () => void
-}) {
-  const cfg = STATUS_CONFIG[cert.status]
-  const pct = daysLeftBar(cert.daysLeft)
-
-  return (
-    <CertListRow
-      cert={cert}
-      cfg={cfg}
-      pct={pct}
-      server={server}
-      expanded={expanded}
-      onToggle={onToggle}
-    />
-  )
-}
-
 function CertPartAlertExpired({ expired }: { expired: CertificateDto[] }) {
   return (
     <div className="flex items-start gap-3 rounded-lg bg-red-500/5 border border-red-500/20 px-4 py-3 text-sm">
@@ -524,95 +237,6 @@ function CertPartAcmeSettings({
   )
 }
 
-function CertPartTableToolbar({
-  search,
-  setSearch,
-  statusFilter,
-  setStatusFilter,
-  filteredCount,
-}: {
-  search: string
-  setSearch: (v: string) => void
-  statusFilter: CertStatus | "all"
-  setStatusFilter: (v: CertStatus | "all") => void
-  filteredCount: number
-}) {
-  return (
-    <div className="flex items-center gap-3 px-4 py-3 border-b flex-wrap">
-      <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[240px]">
-        <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="Поиск по имени, CN, эмитенту…"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-      </div>
-      <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5">
-        {(["all", "valid", "expired", "revoked"] as const).map((s) => (
-          <button
-            key={s}
-            type="button"
-            onClick={() => setStatusFilter(s)}
-            className={cn(
-              "px-3 py-1 text-xs rounded whitespace-nowrap transition-colors",
-              statusFilter === s
-                ? "bg-background text-foreground shadow-sm"
-                : "text-muted-foreground hover:text-foreground",
-            )}
-          >
-            {s === "all"
-              ? "Все"
-              : s === "valid"
-                ? "Действующие"
-                : s === "expired"
-                  ? "Истёкшие"
-                  : "Отозванные"}
-          </button>
-        ))}
-      </div>
-      <span className="text-sm text-muted-foreground ml-auto">{filteredCount} сертификатов</span>
-    </div>
-  )
-}
-
-function CertPartTableHeaderDates() {
-  return (
-    <div className="flex items-center gap-1">
-      <CalendarIcon className="size-3" />
-      Срок
-    </div>
-  )
-}
-
-function CertPartTableHeaderUsage() {
-  return (
-    <div className="flex items-center gap-1">
-      <KeyRoundIcon className="size-3" />
-      Использование
-    </div>
-  )
-}
-
-function CertPartTableHeader() {
-  return (
-    <div
-      className={cn(
-        CERT_TABLE_GRID_CLASS,
-        "px-4 py-2 border-b text-[10px] font-semibold uppercase tracking-widest text-muted-foreground bg-muted/20",
-      )}
-    >
-      <span />
-      <span>Имя / CN</span>
-      <span>Сервер</span>
-      <span>Выпущен</span>
-      <CertPartTableHeaderDates />
-      <CertPartTableHeaderUsage />
-      <span>Статус</span>
-    </div>
-  )
-}
-
 function CertPartReference() {
   return (
     <Card>
@@ -679,6 +303,7 @@ function CertPartIssueForm({
   setIssueTrustWww,
   issueTrustApi,
   setIssueTrustApi,
+  step,
 }: {
   serverList: Server[]
   issueServerId: string
@@ -693,12 +318,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 +341,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 +387,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>
   )
 }
@@ -776,13 +421,14 @@ export default function CertificatesPage() {
 
   const [search, setSearch] = useState("")
   const [statusFilter, setStatusFilter] = useState<CertStatus | "all">("all")
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
   const [certificates, setCertificates] = useState<CertificateDto[]>([])
   const [loadState, setLoadState] = useState<"idle" | "loading" | "error">("idle")
   const [loadError, setLoadError] = useState<string | null>(null)
   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("")
@@ -888,15 +534,6 @@ export default function CertificatesPage() {
     })
   }, [displayCerts, search, statusFilter])
 
-  function toggleExpand(id: string) {
-    setExpandedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }
-
   async function handleRefresh() {
     if (!liveReady) return
     try {
@@ -1004,7 +641,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>
@@ -1053,44 +694,35 @@ export default function CertificatesPage() {
             />
           )}
 
-          <Card>
-            <CertPartTableToolbar
+          <DataPageCard>
+            <DataPageToolbar
               search={search}
-              setSearch={setSearch}
-              statusFilter={statusFilter}
-              setStatusFilter={setStatusFilter}
-              filteredCount={filtered.length}
+              onSearchChange={setSearch}
+              searchPlaceholder="Поиск по имени, CN, эмитенту…"
+              segmented={{
+                value: statusFilter,
+                onChange: setStatusFilter,
+                options: [
+                  { value: "all", label: "Все" },
+                  { value: "valid", label: "Действующие" },
+                  { value: "expired", label: "Истёкшие" },
+                  { value: "revoked", label: "Отозванные" },
+                ],
+              }}
+              countLabel={`${filtered.length} сертификатов`}
             />
-            <div className="overflow-x-auto">
-              <div className="min-w-[48rem]">
-                <CertPartTableHeader />
-                {prefsHydrated && isLive && loadState === "loading" && displayCerts.length === 0 ? (
-                  <div className="py-16 text-center text-sm text-muted-foreground">Загрузка сертификатов…</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">Сертификаты не найдены</p>
-                  </div>
-                ) : (
-                  filtered.map((cert) => (
-                    <CertRow
-                      key={cert.id}
-                      cert={cert}
-                      server={serverById.get(cert.serverId)}
-                      expanded={expandedIds.has(cert.id)}
-                      onToggle={() => toggleExpand(cert.id)}
-                    />
-                  ))
-                )}
-              </div>
-            </div>
-          </Card>
+            <CertificatesDataGrid
+              certificates={filtered}
+              serverMap={serverById}
+              isLoading={prefsHydrated && isLive && loadState === "loading" && displayCerts.length === 0}
+            />
+          </DataPageCard>
 
           <CertPartReference />
         </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 +731,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)/communities/page.tsx

@@ -2,14 +2,22 @@
 
 import { useState, useMemo, useEffect } from "react"
 import { PageHeader } from "@/components/page-header"
+import { DataPageCard } from "@/components/data-page-card"
+import {
+  CommunitiesDataGrid,
+  type CommunityRow,
+  TYPE_LABELS,
+  ACTION_LABELS,
+  ACTION_COLOR,
+} from "@/components/data-grids/communities-data-grid"
 import {
   Card, CardContent, CardHeader, CardTitle, CardDescription,
 } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
-  PlusIcon, SearchIcon, TagIcon, ServerIcon, FilterIcon,
-  ChevronRightIcon, CopyIcon, CheckIcon, TrashIcon, PencilIcon,
+  PlusIcon, SearchIcon, TagIcon, FilterIcon,
+  CopyIcon, CheckIcon, TrashIcon, PencilIcon,
   LoaderCircleIcon,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
@@ -19,21 +27,8 @@ import { useEvoBGP } from "@/lib/evobgp-context"
 
 // ─── types ────────────────────────────────────────────────────────────────────
 
-type CommType = "standard" | "no-export" | "no-advertise" | "local-as" | "custom"
-
-interface Community {
-  id: string
-  value: string          // e.g. "65001:100"
-  name: string
-  description: string
-  type: CommType
-  filterIds: string[]    // which filters use this community
-  serverCount: number
-  prefixCount: number
-  action: "permit" | "deny" | "local-pref" | "metric"
-  actionValue?: number   // e.g. local-pref value
-  enabled: boolean
-}
+type Community = CommunityRow
+type CommType = CommunityRow["type"]
 
 // ─── mock data ────────────────────────────────────────────────────────────────
 
@@ -100,28 +95,6 @@ const COMMUNITIES: Community[] = [
   },
 ]
 
-const TYPE_LABELS: Record<CommType, string> = {
-  "standard":    "Стандартный",
-  "no-export":   "No-export",
-  "no-advertise":"No-advertise",
-  "local-as":    "Local-AS",
-  "custom":      "Кастомный",
-}
-
-const ACTION_LABELS: Record<Community["action"], string> = {
-  "permit":     "Permit",
-  "deny":       "Deny",
-  "local-pref": "Local-pref",
-  "metric":     "MED/Metric",
-}
-
-const ACTION_COLOR: Record<Community["action"], string> = {
-  "permit":     "text-emerald-500",
-  "deny":       "text-red-500",
-  "local-pref": "text-blue-500",
-  "metric":     "text-amber-500",
-}
-
 // ─── page ─────────────────────────────────────────────────────────────────────
 
 export default function CommunitiesPage() {
@@ -225,84 +198,15 @@ export default function CommunitiesPage() {
               </div>
 
               {/* list */}
-              <Card className="overflow-hidden">
-                <div className="overflow-x-auto">
-                  <table className="w-full text-sm">
-                    <thead>
-                      <tr className="border-b text-xs text-muted-foreground">
-                        <th className="text-left font-medium px-4 py-2.5">Community</th>
-                        <th className="text-left font-medium px-4 py-2.5">Имя / описание</th>
-                        <th className="text-left font-medium px-4 py-2.5">Тип</th>
-                        <th className="text-left font-medium px-4 py-2.5">Действие</th>
-                        <th className="text-right font-medium px-4 py-2.5">Маршрутов</th>
-                        <th className="text-right font-medium px-4 py-2.5">Серверов</th>
-                        <th className="px-4 py-2.5" />
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {filtered.map(c => (
-                        <tr
-                          key={c.id}
-                          onClick={() => setSelected(c)}
-                          className={cn(
-                            "border-b last:border-0 cursor-pointer hover:bg-muted/40 transition-colors",
-                            selected?.id === c.id && "bg-primary/5",
-                            !c.enabled && "opacity-50",
-                          )}
-                        >
-                          <td className="px-4 py-2.5">
-                            <div className="flex items-center gap-2">
-                              <TagIcon className="size-3.5 text-muted-foreground shrink-0" />
-                              <span className="font-mono text-xs font-medium bg-muted px-1.5 py-0.5 rounded">
-                                {c.value}
-                              </span>
-                              <button
-                                onClick={e => { e.stopPropagation(); handleCopy(c.value) }}
-                                className="text-muted-foreground/40 hover:text-muted-foreground transition-colors"
-                              >
-                                {copied === c.value
-                                  ? <CheckIcon className="size-3" />
-                                  : <CopyIcon className="size-3" />
-                                }
-                              </button>
-                            </div>
-                          </td>
-                          <td className="px-4 py-2.5">
-                            <p className="font-medium text-xs">{c.name}</p>
-                            <p className="text-xs text-muted-foreground line-clamp-1">{c.description}</p>
-                          </td>
-                          <td className="px-4 py-2.5">
-                            <span className="text-xs text-muted-foreground">{TYPE_LABELS[c.type]}</span>
-                          </td>
-                          <td className="px-4 py-2.5">
-                            <span className={cn("text-xs font-medium", ACTION_COLOR[c.action])}>
-                              {ACTION_LABELS[c.action]}{c.actionValue !== undefined ? ` ${c.actionValue}` : ""}
-                            </span>
-                          </td>
-                          <td className="px-4 py-2.5 text-right font-mono text-xs tabular-nums">
-                            {c.prefixCount.toLocaleString("ru-RU")}
-                          </td>
-                          <td className="px-4 py-2.5 text-right tabular-nums">
-                            <div className="flex items-center justify-end gap-1">
-                              <ServerIcon className="size-3 text-muted-foreground" />
-                              <span className="font-mono text-xs">{c.serverCount.toLocaleString("ru-RU")}</span>
-                            </div>
-                          </td>
-                          <td className="px-4 py-2.5">
-                            <ChevronRightIcon className="size-4 text-muted-foreground/40" />
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                  {filtered.length === 0 && (
-                    <div className="flex flex-col items-center justify-center py-16 gap-2 text-muted-foreground">
-                      <TagIcon className="size-8 opacity-30" />
-                      <p className="text-sm">Ничего не найдено</p>
-                    </div>
-                  )}
-                </div>
-              </Card>
+              <DataPageCard>
+                <CommunitiesDataGrid
+                  communities={filtered}
+                  selectedId={selected?.id}
+                  copiedValue={copied}
+                  onSelect={setSelected}
+                  onCopy={handleCopy}
+                />
+              </DataPageCard>
             </div>
 
             {/* ── detail panel ── */}

app/(main)/dashboard/page.tsx

@@ -22,8 +22,10 @@ import type { PingProbe, Server, ServerStatus, ServerType } from "@/lib/data"
 import type { GreTunnel } from "@/lib/data"
 import { useDataSource } from "@/lib/data-source"
 import { Flag } from "@/components/flag"
-import { AlertCircleIcon, AlertTriangleIcon, InfoIcon, FilterIcon, DownloadIcon } from "lucide-react"
+import { AlertCircleIcon, AlertTriangleIcon, InfoIcon, DownloadIcon } from "lucide-react"
 import { Button, buttonVariants } from "@/components/ui/button"
+import { DataPageCard } from "@/components/data-page-card"
+import { DashboardActiveProbesDataGrid } from "@/components/data-grids/dashboard-active-probes-data-grid"
 import { cn } from "@/lib/utils"
 import { requestJson } from "@/shared/api/http-client"
 import { buildLatencySeriesByProbeSource } from "@/lib/dashboard-latency"
@@ -72,11 +74,6 @@ function StatCard({
   )
 }
 
-function formatLossPct(loss: number): string {
-  if (!Number.isFinite(loss)) return "—"
-  return Number.isInteger(loss) ? `${loss}%` : `${loss.toFixed(1)}%`
-}
-
 function fmtIntRu(n: number): string {
   return n.toLocaleString("ru-RU")
 }
@@ -114,22 +111,6 @@ function readMockDashboardStarIds(): Set<string> {
   }
 }
 
-/** Совпадает с эталоном uptime / servers */
-function TypeChip({ type }: { type: ServerType }) {
-  return (
-    <span className={cn(
-      "inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold border shrink-0",
-      type === "home-router"
-        ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
-        : type === "jump-host"
-          ? "bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20"
-          : "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20",
-    )}>
-      {type === "jump-host" ? "JH" : type === "home-router" ? "HR" : "EN"}
-    </span>
-  )
-}
-
 interface BackendServerRow {
   id: number
   name: string
@@ -241,52 +222,6 @@ function mapBackendToServer(s: BackendServerRow): Server {
   }
 }
 
-function ProbeSourceCell({ probe, catalog }: { probe: PingProbe; catalog: Server[] }) {
-  const srv = catalog.find(s => s.id === probe.srcServerId)
-  const iface = (probe.srcInterface ?? "").trim() || "auto"
-
-  if (!srv) {
-    return (
-      <div className="flex items-start gap-2 min-w-0 max-w-[280px]">
-        <span className="mt-1 shrink-0 inline-flex">
-          <StatusDot status="offline" />
-        </span>
-        <div className="min-w-0">
-          <p className="text-[13px] font-medium text-muted-foreground truncate">
-            Сервер <span className="font-mono tabular-nums">{probe.srcServerId}</span>
-          </p>
-          <p className="text-[11px] font-mono text-muted-foreground truncate mt-0.5" title={iface}>
-            {iface}
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex items-start gap-2 min-w-0 max-w-[280px]">
-      <span className="mt-1 shrink-0 inline-flex">
-        <StatusDot status={srv.status} pulse={srv.status === "online"} />
-      </span>
-      <div className="flex gap-2 min-w-0 flex-1">
-        <Flag code={srv.country} size={16} className="shrink-0 mt-0.5" />
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-1.5 flex-wrap">
-            <span className="text-[13px] font-medium leading-tight truncate">{srv.name}</span>
-            <TypeChip type={srv.type} />
-          </div>
-          <p className="text-[11px] text-muted-foreground mt-0.5 truncate" title={`Интерфейс: ${iface}`}>
-            <span className="font-mono tabular-nums">{iface}</span>
-            {srv.site && srv.site !== "—" && (
-              <span className="text-muted-foreground/90"> · {srv.site}</span>
-            )}
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}
-
 export default function DashboardPage() {
   const pathname = usePathname()
   const { mode, backendUrl, prefsHydrated } = useDataSource()
@@ -691,7 +626,8 @@ export default function DashboardPage() {
       }
     }
 
-    const loadingBlock = probesLoading && liveProbes === null
+    const liveDataPending = liveServersResolved === null || liveProbes === null
+    const loadingBlock = liveDataPending || (probesLoading && liveProbes === null)
     const srvList = liveServersResolved ?? []
     const totalSrv = srvList.length
     const onlineSrv = srvList.filter((s) => s.status === "online").length
@@ -1019,67 +955,18 @@ export default function DashboardPage() {
               </div>
             </CardHeader>
             <CardContent className="pt-0 px-0">
-              <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-2.5 w-[min(280px,32vw)]">Источник</th>
-                      <th className="text-left font-medium px-4 py-2.5">Проба</th>
-                      <th className="text-left font-medium px-4 py-2.5">Цель</th>
-                      <th className="text-left font-medium px-4 py-2.5">Фильтр</th>
-                      <th className="text-right font-medium px-4 py-2.5">RTT</th>
-                      <th className="text-right font-medium px-4 py-2.5">Потери</th>
-                      <th className="text-left font-medium px-4 py-2.5 w-36">60с</th>
-                      <th className="text-left font-medium px-4 py-2.5">Статус</th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-border">
-                    {isLive && probesLoading && liveProbes === null && (
-                      <tr>
-                        <td colSpan={8} className="px-5 py-6">
-                          <div className="h-10 rounded-md bg-muted/50 animate-pulse max-w-md mx-auto" />
-                        </td>
-                      </tr>
-                    )}
-                    {!(isLive && probesLoading && liveProbes === null) && activeProbesTable.map((p) => {
-                      const sparkColor = p.status === "down" ? "hsl(0 84% 60%)" : p.status === "warn" ? "hsl(32 94% 44%)" : "hsl(142 76% 36%)"
-                      return (
-                        <tr key={p.id} className="hover:bg-muted/40 transition-colors">
-                          <td className="px-5 py-2.5 align-top">
-                            <ProbeSourceCell probe={p} catalog={probeServerCatalog} />
-                          </td>
-                          <td className="px-4 py-2.5 font-medium">{p.name}</td>
-                          <td className="px-4 py-2.5 font-mono text-xs text-muted-foreground">{p.target}</td>
-                          <td className="px-4 py-2.5">
-                            <span className="inline-flex items-center gap-1 text-xs border border-border rounded px-2 py-0.5">
-                              <FilterIcon className="size-3 text-muted-foreground" />{p.filter}
-                            </span>
-                          </td>
-                          <td className="px-4 py-2.5 font-mono text-right">{p.rtt == null ? "—" : `${p.rtt} мс`}</td>
-                          <td className={`px-4 py-2.5 font-mono text-right ${p.loss > 5 ? "text-red-500" : p.loss > 0 ? "text-amber-500" : "text-muted-foreground"}`}>
-                            {formatLossPct(p.loss)}
-                          </td>
-                          <td className="px-4 py-2.5">
-                            <Sparkline data={p.series} width={120} height={24} color={sparkColor} />
-                          </td>
-                          <td className="px-4 py-2.5">
-                            <StatusBadge status={p.status === "up" ? "online" : p.status === "warn" ? "degraded" : "offline"} />
-                          </td>
-                        </tr>
-                      )
-                    })}
-                    {!(isLive && probesLoading && liveProbes === null) && activeProbesTable.length === 0 && (
-                      <tr>
-                        <td colSpan={8} className="px-5 py-8 text-center text-sm text-muted-foreground">
-                          {isLive && probesError
-                            ? "Нет данных о пробах. Проверьте сборщик uptime и настройки проб на странице мониторинга."
-                            : "Нет проб с звездой на дашборде. Включите пробу и отметьте ★ в разделе «Мониторинг»."}
-                        </td>
-                      </tr>
-                    )}
-                  </tbody>
-                </table>
-              </div>
+              <DataPageCard className="rounded-none border-0 shadow-none">
+                <DashboardActiveProbesDataGrid
+                  probes={activeProbesTable}
+                  catalog={probeServerCatalog}
+                  isLoading={isLive && probesLoading && liveProbes === null}
+                  emptyDescription={
+                    isLive && probesError
+                      ? "Нет данных о пробах. Проверьте сборщик uptime и настройки проб на странице мониторинга."
+                      : "Нет проб с звездой на дашборде. Включите пробу и отметьте ★ в разделе «Мониторинг»."
+                  }
+                />
+              </DataPageCard>
             </CardContent>
           </Card>
 

app/(main)/domains/page.tsx

@@ -1,18 +1,24 @@
 "use client"
 
-import { useMemo } from "react"
+import { useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
-import { DataTable } from "@/components/data-table"
+import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import { DomainsDataGrid } from "@/components/data-grids/domains-data-grid"
+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 { UploadIcon, DownloadIcon, PlusIcon, 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 [search, setSearch] = useState("")
 
   const useEvoCatalog = mode === "live" && enabled
 
@@ -22,13 +28,26 @@ export default function DomainsPage() {
     return snapshot?.domains ?? []
   }, [useEvoCatalog, loading, snapshot])
 
+  const filtered = useMemo(() => {
+    if (!search) return rows
+    const q = search.toLowerCase()
+    return rows.filter(
+      (r) =>
+        r.domain.toLowerCase().includes(q) ||
+        r.asn.toLowerCase().includes(q) ||
+        r.filter.toLowerCase().includes(q),
+    )
+  }, [rows, search])
+
   return (
     <div className="flex flex-col h-full">
       <PageHeader
         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>
           </>
@@ -55,60 +74,31 @@ export default function DomainsPage() {
               </p>
             )}
           </div>
-          <DataTable
-            data={rows}
-            searchPlaceholder="Поиск по домену…"
-            searchKeys={["domain", "asn", "filter"]}
-            columns={[
-              {
-                key: "domain",
-                label: "Домен",
-                render: (d) => <span className="font-medium">{d.domain}</span>,
-              },
-              {
-                key: "resolvedIp",
-                label: "Resolved IP",
-                render: (d) => <span className="font-mono text-xs text-muted-foreground">{d.resolvedIp}</span>,
-              },
-              {
-                key: "asn",
-                label: "ASN",
-                render: (d) => <span className="font-mono text-xs">{d.asn}</span>,
-              },
-              {
-                key: "purpose",
-                label: "Назначение",
-                render: (d) => (
-                  <span className="text-xs border border-border rounded px-2 py-0.5">{d.purpose}</span>
-                ),
-              },
-              {
-                key: "filter",
-                label: "Фильтр",
-                render: (d) => (
-                  <span className="inline-flex items-center gap-1 text-xs bg-muted rounded px-2 py-0.5">
-                    <FilterIcon className="size-3 text-muted-foreground" />{d.filter}
-                  </span>
-                ),
-              },
-              {
-                key: "updated",
-                label: "Обновлён",
-                render: (d) => <span className="text-xs text-muted-foreground">{d.updated}</span>,
-              },
-              {
-                key: "enabled",
-                label: "Статус",
-                render: (d) => (
-                  <span className={`text-xs font-medium ${d.enabled ? "text-emerald-600" : "text-muted-foreground"}`}>
-                    {d.enabled ? "Активен" : "Отключён"}
-                  </span>
-                ),
-              },
-            ]}
-          />
+          <DataPageCard>
+            <DataPageToolbar
+              search={search}
+              onSearchChange={setSearch}
+              searchPlaceholder="Поиск по домену…"
+              countLabel={`${filtered.length} доменов`}
+            />
+            <DomainsDataGrid
+              domains={filtered}
+              isLoading={useEvoCatalog && loading && !snapshot}
+              pagination={useEvoCatalog}
+            />
+          </DataPageCard>
         </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,8 +2,14 @@
 
 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 {
+  FiltersDataGrid,
+  type RecursiveRouteLite,
+} from "@/components/data-grids/filters-data-grid"
+import { DataPageCard } from "@/components/data-page-card"
 import { Card } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -35,42 +41,6 @@ import { toast } from "sonner"
 
 type FilterRouterSyncStatus = "synced" | "drift" | "missing"
 
-function RouterSyncMarker({
-  status,
-}: {
-  status: FilterRouterSyncStatus | null | "skip"
-}) {
-  if (status === "skip") {
-    return <span className="size-3.5 shrink-0 block" aria-hidden />
-  }
-  const icon =
-    status === "synced"
-      ? <CheckCircle2Icon className="size-3.5 text-emerald-600 dark:text-emerald-500 shrink-0" />
-      : status === "drift"
-        ? <AlertTriangleIcon className="size-3.5 text-amber-500 shrink-0" />
-        : status === "missing"
-          ? <XCircleIcon className="size-3.5 text-destructive shrink-0" />
-          : <CircleDashedIcon className="size-3.5 text-muted-foreground/35 shrink-0" />
-  const title =
-    status === "synced"
-      ? "Совпадает с цепочкой bgp-in на MikroTik"
-      : status === "drift"
-        ? "В БД и на роутере разное действие (gateway, blackhole или out-interface)"
-        : status === "missing"
-          ? "Эта community не найдена в правиле bgp-in на роутере"
-          : "Не проверено — нажмите «Сверить с роутером»"
-  return (
-    <Tooltip>
-      <TooltipTrigger className="inline-flex cursor-default border-0 bg-transparent p-0">
-        {icon}
-      </TooltipTrigger>
-      <TooltipContent side="top" className="max-w-xs">
-        {title}
-      </TooltipContent>
-    </Tooltip>
-  )
-}
-
 function newId() { return `r${Date.now()}-${Math.random().toString(36).slice(2, 6)}` }
 function innerIpToGateway(ip: string) { return ip.split("/")[0] }
 
@@ -137,16 +107,6 @@ function dedupeRecursiveRoutesByDstAddress(routes: RecursiveRouteLite[]): Recurs
   })
 }
 
-interface RecursiveRouteLite {
-  id: string
-  dstAddress: string
-  gateway: string
-  distance: number
-  routingTable: string
-  comment: string
-  disabled: boolean
-}
-
 const COMMUNITY_NAMES: Record<string, string> = {
   "65001:100": "youtube-bypass",
   "65001:200": "streaming-eu",
@@ -478,171 +438,6 @@ function CommunityInput({
   )
 }
 
-// ── filter rule row ────────────────────────────────────────────────────────────
-
-function FilterRow({
-  rule, index, isLast, onEdit, onDelete, onMoveUp, onMoveDown, tunnelsList, serversList,
-  communityNameMap,
-  recursiveRoutes,
-  routerSyncStatus,
-}: {
-  rule: FilterRule; index: number; isLast: boolean
-  onEdit: () => void; onDelete: () => void; onMoveUp: () => void; onMoveDown: () => void
-  tunnelsList: GreTunnel[]
-  serversList: Server[]
-  communityNameMap: Record<string, string>
-  recursiveRoutes: RecursiveRouteLite[]
-  routerSyncStatus?: FilterRouterSyncStatus | null | "skip"
-}) {
-  const [confirmDel, setConfirmDel] = useState(false)
-  const isBlackhole   = rule.action === "blackhole"
-  const isRecRef      = !isBlackhole && isRecursiveGatewayRef(rule.gatewayTunnelId)
-  const recRowByRef   = isRecRef ? recursiveRoutes.find(r => r.id === rule.gatewayTunnelId.slice(4)) : undefined
-  const recRowByHop   =
-    !isBlackhole && !(rule.gatewayTunnelId ?? "").trim() && rule.gateway.trim()
-      ? pickRecursiveRouteByGatewayHop(recursiveRoutes, rule.gateway)
-      : undefined
-  const recRow        = recRowByRef ?? recRowByHop
-  const treatAsRecursive =
-    !isBlackhole && (isRecRef || !!recRowByHop)
-  const tunnel        = !isBlackhole && !treatAsRecursive
-    ? tunnelsList.find(t => t.id === rule.gatewayTunnelId)
-    : undefined
-  const remoteSrv     = tunnel ? serversList.find(s => s.host === tunnel.remoteAddress) : undefined
-  const communityName = communityNameMap[rule.community] ?? rule.communityName
-
-  return (
-    <div className={cn(
-      "group grid items-center gap-3 px-4 py-2.5 hover:bg-muted/20 transition-colors",
-      "grid-cols-[20px_20px_22px_1fr_1fr_1fr_64px]",
-      isBlackhole && "bg-red-500/[0.03]",
-    )}>
-      {/* priority */}
-      <div className="flex items-center justify-center text-[11px] font-mono text-muted-foreground/40 select-none">
-        {isLast
-          ? <StarIcon className="size-3 text-amber-400 fill-amber-400" aria-label="Наивысший приоритет" />
-          : <span>{index + 1}</span>
-        }
-      </div>
-
-      {/* reorder */}
-      <div className="flex flex-col gap-px opacity-0 group-hover:opacity-100 transition-opacity">
-        <button onClick={onMoveUp} disabled={index === 0}
-          className="text-muted-foreground/50 hover:text-foreground disabled:opacity-20 transition-colors">
-          <ChevronUpIcon className="size-3" />
-        </button>
-        <button onClick={onMoveDown} disabled={isLast}
-          className="text-muted-foreground/50 hover:text-foreground disabled:opacity-20 transition-colors">
-          <ChevronDownIcon className="size-3" />
-        </button>
-      </div>
-
-      {/* MikroTik sync marker */}
-      <div className="flex items-center justify-center">
-        <RouterSyncMarker
-          status={routerSyncStatus === undefined ? "skip" : routerSyncStatus}
-        />
-      </div>
-
-      {/* community */}
-      <div className="min-w-0">
-        <div className="flex items-center gap-1.5">
-          <span className={cn(
-            "inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium border font-mono",
-            isBlackhole
-              ? "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/25"
-              : "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20",
-          )}>
-            {rule.community}
-          </span>
-          {isBlackhole && (
-            <span className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-semibold border
-              bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20 uppercase tracking-wide">
-              ⊘ blackhole
-            </span>
-          )}
-        </div>
-        {communityName && (
-          <p className="text-[11px] text-muted-foreground mt-0.5 truncate">{communityName}</p>
-        )}
-      </div>
-
-      {/* gateway / tunnel — or blackhole target */}
-      <div className="min-w-0 flex flex-col gap-0.5">
-        {isBlackhole ? (
-          <div className="flex items-center gap-1.5">
-            <span className="size-1.5 rounded-full shrink-0 bg-red-500 animate-pulse" />
-            <span className="font-mono text-xs font-medium text-red-600 dark:text-red-400">type=blackhole</span>
-          </div>
-        ) : (
-          <>
-            <div className="flex items-center gap-1.5 flex-wrap">
-              <span className={cn(
-                "size-1.5 rounded-full shrink-0",
-                treatAsRecursive
-                  ? "bg-sky-500"
-                  : tunnel?.status === "up"
-                    ? "bg-[var(--status-online)]"
-                    : tunnel?.status === "degraded"
-                      ? "bg-[var(--status-degraded)]"
-                      : "bg-[var(--status-offline)]",
-              )} />
-              {treatAsRecursive ? (
-                <>
-                  <RouteIcon className="size-3 text-muted-foreground shrink-0" />
-                  <span className="font-mono text-xs font-medium">
-                    {recRow ? gatewayFromRecursiveDst(recRow.dstAddress) : rule.gateway}
-                  </span>
-                  <span className="text-[10px] font-medium text-muted-foreground border border-border rounded px-1 uppercase tracking-wide">
-                    recursive
-                  </span>
-                </>
-              ) : (
-                <>
-                  {remoteSrv && <Flag code={remoteSrv.country} />}
-                  <span className="font-mono text-xs font-medium">{rule.gateway}</span>
-                </>
-              )}
-            </div>
-            {treatAsRecursive ? (
-              recRow ? (
-                <p className="text-[11px] text-muted-foreground truncate pl-3">{recRow.dstAddress}</p>
-              ) : isRecRef ? (
-                <p className="text-[11px] text-amber-600 dark:text-amber-400 truncate pl-3">
-                  рекурсивный маршрут (нет строки в списке — синхронизируйте «Рекурсивные маршруты»)
-                </p>
-              ) : null
-            ) : tunnel ? (
-              <p className="text-[11px] text-muted-foreground truncate pl-3">{tunnel.name}</p>
-            ) : null}
-          </>
-        )}
-      </div>
-
-      {/* description */}
-      <p className="text-xs text-muted-foreground truncate">{rule.description || "—"}</p>
-
-      {/* actions */}
-      <div className="flex items-center gap-0.5 justify-end opacity-0 group-hover:opacity-100 transition-opacity">
-        <Button size="sm" variant="ghost" className="size-7 p-0 text-muted-foreground hover:text-foreground"
-          onClick={onEdit}>
-          <PencilIcon className="size-3.5" />
-        </Button>
-        <Button size="sm" variant="ghost"
-          className={cn("size-7 p-0 transition-colors",
-            confirmDel
-              ? "text-destructive bg-destructive/10 hover:bg-destructive/20"
-              : "text-muted-foreground hover:text-destructive",
-          )}
-          onClick={() => { if (!confirmDel) setConfirmDel(true); else onDelete() }}
-          onBlur={() => setConfirmDel(false)}>
-          {confirmDel ? <AlertCircleIcon className="size-3.5" /> : <TrashIcon className="size-3.5" />}
-        </Button>
-      </div>
-    </div>
-  )
-}
-
 // ── rule sheet ─────────────────────────────────────────────────────────────────
 
 interface RuleForm {
@@ -1496,8 +1291,6 @@ function CopyRulesSheet({
 
 // ── page ───────────────────────────────────────────────────────────────────────
 
-type SortKey = "community" | "gateway" | "description"
-
 interface BackendServer {
   id: number
   name: string
@@ -1529,11 +1322,6 @@ function makeApiFetch(backendUrl: string) {
   }
 }
 
-function SortIndicator({ k, sortKey, sortAsc }: { k: SortKey; sortKey: SortKey; sortAsc: boolean }) {
-  if (sortKey !== k) return <ArrowUpDownIcon className="size-3 opacity-30" />
-  return sortAsc ? <ArrowUpIcon className="size-3" /> : <ArrowDownIcon className="size-3" />
-}
-
 export default function FiltersPage() {
   const { mode, backendUrl } = useDataSource()
   const evo = useEvoBGP()
@@ -1601,8 +1389,6 @@ export default function FiltersPage() {
   }, [isLive, apiFetch])
   const [selectedServerId, setSelectedServerId] = useState("srv1")
   const [search,       setSearch]      = useState("")
-  const [sortKey,      setSortKey]     = useState<SortKey>("community")
-  const [sortAsc,      setSortAsc]     = useState(true)
   const [sheetOpen,    setSheetOpen]   = useState(false)
   const [sheetMode,    setSheetMode]   = useState<"create" | "edit">("create")
   const [sheetInitial, setSheetInitial]= useState<RuleForm>(emptyForm())
@@ -1707,24 +1493,14 @@ export default function FiltersPage() {
 
   const filteredRules = useMemo(() => {
     const q = search.toLowerCase()
-    const list = q
-      ? currentRules.filter(r =>
-          r.community.includes(q) ||
-          (communityNameMap[r.community] ?? "").toLowerCase().includes(q) ||
-          r.gateway.includes(q) ||
-          r.description.toLowerCase().includes(q)
-        )
-      : [...currentRules]
-    if (search) {
-      const mult = sortAsc ? 1 : -1
-      list.sort((a, b) => {
-        if (sortKey === "community") return mult * a.community.localeCompare(b.community)
-        if (sortKey === "gateway")   return mult * a.gateway.localeCompare(b.gateway)
-        return mult * a.description.localeCompare(b.description)
-      })
-    }
-    return list
-  }, [currentRules, search, sortKey, sortAsc, communityNameMap])
+    if (!q) return currentRules
+    return currentRules.filter((r) =>
+      r.community.includes(q) ||
+      (communityNameMap[r.community] ?? "").toLowerCase().includes(q) ||
+      r.gateway.includes(q) ||
+      r.description.toLowerCase().includes(q),
+    )
+  }, [currentRules, search, communityNameMap])
 
   const updateRules = useCallback((serverId: string, updater: (rules: FilterRule[]) => FilterRule[]) => {
     setRouterCompare(rc => (rc && rc.serverId === serverId ? null : rc))
@@ -1842,10 +1618,6 @@ export default function FiltersPage() {
     })
   }
 
-  const toggleSort = (k: SortKey) => {
-    if (sortKey === k) setSortAsc(v => !v); else { setSortKey(k); setSortAsc(true) }
-  }
-
   if (!selectedServer) {
     return (
       <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
@@ -2030,10 +1802,10 @@ export default function FiltersPage() {
             )
           })()}
 
-          <Card className="overflow-hidden py-0 gap-0">
+          <DataPageCard>
 
             {/* selected server header */}
-            <div className="flex items-center gap-2.5 px-4 py-3 border-b bg-muted/10">
+            <div className="flex items-center gap-2.5 px-5 py-3 border-b bg-muted/10">
               <StatusDot status={selectedServer.status} pulse={selectedServer.status === "online"} />
               <Flag code={selectedServer.country} size={16} />
               <span className="font-mono text-sm font-semibold">{selectedServer.name}</span>
@@ -2062,22 +1834,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">
@@ -2085,80 +1858,33 @@ export default function FiltersPage() {
                 <p className="text-sm">Ничего не найдено</p>
               </div>
             ) : (
-              <>
-                {/* table header with sort */}
-                <div className={cn(
-                  "grid items-center gap-3 px-4 py-1.5 border-b bg-muted/30",
-                  "grid-cols-[20px_20px_22px_1fr_1fr_1fr_64px]",
-                  "text-[10px] font-semibold uppercase tracking-widest text-muted-foreground",
-                )}>
-                  <span>#</span>
-                  <span />
-                  <Tooltip>
-                    <TooltipTrigger className="cursor-help text-center font-mono normal-case tracking-normal border-0 bg-transparent p-0 w-full">
-                      MT
-                    </TooltipTrigger>
-                    <TooltipContent side="top" className="max-w-xs">
-                      Совпадение с MikroTik (bgp-in): нажмите «Сверить с роутером»
-                    </TooltipContent>
-                  </Tooltip>
-                  <button onClick={() => toggleSort("community")}
-                    className="flex items-center gap-1 hover:text-foreground text-left transition-colors">
-                    Community <SortIndicator k="community" sortKey={sortKey} sortAsc={sortAsc} />
-                  </button>
-                  <button onClick={() => toggleSort("gateway")}
-                    className="flex items-center gap-1 hover:text-foreground text-left transition-colors">
-                    Gateway <SortIndicator k="gateway" sortKey={sortKey} sortAsc={sortAsc} />
-                  </button>
-                  <button onClick={() => toggleSort("description")}
-                    className="flex items-center gap-1 hover:text-foreground text-left transition-colors">
-                    Описание <SortIndicator k="description" sortKey={sortKey} sortAsc={sortAsc} />
-                  </button>
-                  <span />
-                </div>
-
-                {/* rows */}
-                <div className="divide-y divide-border/60">
-                  {(search ? filteredRules : currentRules).map((rule, i, arr) => (
-                    <FilterRow
-                      key={rule.id}
-                      rule={rule}
-                      index={i}
-                      isLast={i === arr.length - 1}
-                      tunnelsList={allTunnels}
-                      serversList={allServers}
-                      communityNameMap={communityNameMap}
-                      recursiveRoutes={recRoutesByServer[selectedServerId] ?? []}
-                      routerSyncStatus={
-                        !isLive
-                          ? undefined
-                          : !routerCompare || routerCompare.serverId !== selectedServerId
-                            ? null
-                            : routerCompare.byCommunity[rule.community.trim()] ?? null
-                      }
-                      onEdit={() => openEdit(rule)}
-                      onDelete={() => handleDelete(rule.id)}
-                      onMoveUp={() => handleMoveUp(currentRules.findIndex(r => r.id === rule.id))}
-                      onMoveDown={() => handleMoveDown(currentRules.findIndex(r => r.id === rule.id))}
-                    />
-                  ))}
-                </div>
-
-                {/* footer hint */}
-                <div className="px-4 py-2 text-[11px] text-muted-foreground/40 flex items-center gap-1.5 border-t">
-                  <StarIcon className="size-3 text-amber-400 fill-amber-400 shrink-0" />
-                  Последнее правило имеет наивысший приоритет в RouterOS
-                </div>
-              </>
+              <FiltersDataGrid
+                rules={search ? filteredRules : currentRules}
+                tunnelsList={allTunnels}
+                serversList={allServers}
+                communityNameMap={communityNameMap}
+                recursiveRoutes={recRoutesByServer[selectedServerId] ?? []}
+                routerSyncByCommunity={
+                  !isLive || !routerCompare || routerCompare.serverId !== selectedServerId
+                    ? null
+                    : routerCompare.byCommunity
+                }
+                isLive={isLive}
+                enableSorting={!!search}
+                onEdit={openEdit}
+                onDelete={handleDelete}
+                onMoveUp={(id) => handleMoveUp(currentRules.findIndex((r) => r.id === id))}
+                onMoveDown={(id) => handleMoveDown(currentRules.findIndex((r) => r.id === id))}
+              />
             )}
 
             {/* add rule shortcut */}
             <button onClick={openCreate}
-              className="w-full flex items-center gap-2 px-4 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/20 transition-colors border-t">
+              className="w-full flex items-center gap-2 px-5 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/20 transition-colors border-t">
               <PlusIcon className="size-3.5" />
               Добавить правило для {selectedServer.name}
             </button>
-          </Card>
+          </DataPageCard>
 
         </div>
       </div>

app/(main)/firewall/page.tsx

@@ -2,10 +2,24 @@
 
 import { useEffect, useMemo, useRef, useState } from "react"
 import { PageHeader } from "@/components/page-header"
+import {
+  FirewallRulesDataGrid,
+  ActionBadge,
+  ChainBadge,
+} from "@/components/data-grids/firewall-rules-data-grid"
+import { FirewallScenarioRulesDataGrid } from "@/components/data-grids/firewall-scenario-rules-data-grid"
+import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbarFrame } from "@/components/data-page-toolbar"
+import { FormField, FormToggle, SectionTitle, SegmentedControl } from "@/components/form-kit"
 import { firewallRules, type FirewallRule } from "@/lib/data"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group"
 import {
   Sheet, SheetContent, SheetHeader, SheetTitle,
   SheetDescription, SheetFooter, SheetClose,
@@ -341,62 +355,7 @@ 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 (
-    <span className={cn("text-[11px] font-mono font-medium px-2 py-0.5 rounded border whitespace-nowrap", cls)}>
-      {action}
-    </span>
-  )
-}
-
-function ChainBadge({ chain }: { chain: string }) {
-  const cls = CHAIN_STYLES[chain] ?? "bg-muted text-muted-foreground"
-  return (
-    <span className={cn("text-[11px] font-mono px-2 py-0.5 rounded", cls)}>
-      {chain}
-    </span>
-  )
-}
-
-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>
-  )
-}
+// ActionBadge, ChainBadge — из firewall-rules-data-grid
 
 function NativeSelect({ value, onChange, children, className }: {
   value: string; onChange: (v: string) => void; children: React.ReactNode; className?: string
@@ -507,67 +466,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 +537,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 +557,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 +998,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 +1013,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 +1026,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 +1129,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>
@@ -1180,57 +1139,13 @@ function ScenarioSheet({ open, onClose, initial, onSave }: {
 
             {/* Rules table */}
             {rules.length > 0 ? (
-              <div className="rounded-lg border overflow-hidden">
-                <table className="w-full text-xs">
-                  <thead>
-                    <tr className="border-b bg-muted/30 text-muted-foreground">
-                      <th className="text-left px-3 py-2 w-6">#</th>
-                      <th className="text-left px-3 py-2">Цепочка</th>
-                      <th className="text-left px-3 py-2">Действие</th>
-                      <th className="text-left px-3 py-2">Src</th>
-                      <th className="text-left px-3 py-2">Dst</th>
-                      <th className="text-left px-3 py-2">Порт</th>
-                      <th className="text-left px-3 py-2">Iface</th>
-                      <th className="text-left px-3 py-2">Комментарий</th>
-                      <th className="w-24 px-2 py-2" />
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-border">
-                    {rules.map((r, i) => (
-                      <tr key={r.id} className={cn(
-                        "hover:bg-muted/20 transition-colors",
-                        !r.enabled && "opacity-40",
-                      )}>
-                        <td className="px-3 py-1.5 text-muted-foreground tabular-nums">{i + 1}</td>
-                        <td className="px-3 py-1.5"><ChainBadge chain={r.chain} /></td>
-                        <td className="px-3 py-1.5"><ActionBadge action={r.action} /></td>
-                        <td className="px-3 py-1.5 font-mono text-muted-foreground max-w-[90px] truncate">{r.src || "any"}</td>
-                        <td className="px-3 py-1.5 font-mono text-muted-foreground max-w-[90px] truncate">{r.dst || "any"}</td>
-                        <td className="px-3 py-1.5 font-mono text-muted-foreground">{r.port || "—"}</td>
-                        <td className="px-3 py-1.5 font-mono text-muted-foreground">{r.iface || "—"}</td>
-                        <td className="px-3 py-1.5 text-muted-foreground/70 max-w-[110px] truncate">{r.comment || "—"}</td>
-                        <td className="px-2 py-1.5">
-                          <div className="flex items-center gap-0.5 justify-end">
-                            <button type="button" onClick={() => toggleEnabled(r.id)}
-                              title={r.enabled ? "Отключить" : "Включить"}
-                              className="p-0.5 text-muted-foreground/40 hover:text-foreground transition-colors">
-                              <PowerIcon className="size-3.5" />
-                            </button>
-                            <button type="button" onClick={() => moveRule(r.id, -1)} disabled={i === 0}
-                              className="p-0.5 text-muted-foreground/40 hover:text-foreground disabled:opacity-20 transition-colors">▲</button>
-                            <button type="button" onClick={() => moveRule(r.id, 1)} disabled={i === rules.length - 1}
-                              className="p-0.5 text-muted-foreground/40 hover:text-foreground disabled:opacity-20 transition-colors">▼</button>
-                            <button type="button" onClick={() => removeRule(r.id)}
-                              className="p-0.5 ml-0.5 text-muted-foreground/40 hover:text-red-500 transition-colors">
-                              <Trash2Icon className="size-3.5" />
-                            </button>
-                          </div>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
+              <FirewallScenarioRulesDataGrid
+                rules={rules}
+                onToggleEnabled={toggleEnabled}
+                onMoveUp={(id) => moveRule(id, -1)}
+                onMoveDown={(id) => moveRule(id, 1)}
+                onRemove={removeRule}
+              />
             ) : (
               !addOpen && (
                 <div className="text-center py-6 text-sm text-muted-foreground border rounded-lg border-dashed">
@@ -1721,104 +1636,6 @@ function SimulatorTab({ rules: allRules }: { rules: FirewallRule[] }) {
   )
 }
 
-// ─── Rules Table ──────────────────────────────────────────────────────────────
-
-function RulesTable({ rules, onToggle, onEdit }: {
-  rules: FirewallRule[]
-  onToggle: (id: string) => void
-  onEdit: (r: FirewallRule) => void
-}) {
-  if (rules.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center py-16 text-center text-muted-foreground">
-        <ShieldOffIcon className="size-10 mb-3 opacity-30" />
-        <p className="text-sm font-medium">Правила не найдены</p>
-        <p className="text-xs mt-1">Попробуйте изменить фильтр или добавьте новое правило</p>
-      </div>
-    )
-  }
-
-  return (
-    <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 w-8">#</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="text-left font-medium px-4 py-3">Порт</th>
-            <th className="text-left font-medium px-4 py-3">Интерфейс</th>
-            <th className="text-right font-medium px-4 py-3">Пакетов</th>
-            <th className="text-left font-medium px-4 py-3 w-12">Вкл</th>
-            <th className="w-10 px-3 py-3" />
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-border">
-          {rules.map((r, i) => (
-            <tr key={r.id}
-              className={cn("hover:bg-muted/40 transition-colors", !r.enabled && "opacity-40")}>
-              <td className="px-5 py-2.5 font-mono text-xs text-muted-foreground">{i + 1}</td>
-              <td className="px-4 py-2.5"><ChainBadge chain={r.chain} /></td>
-              <td className="px-4 py-2.5"><ActionBadge action={r.action} /></td>
-              <td className="px-4 py-2.5 font-mono text-xs text-muted-foreground max-w-[140px] truncate">
-                {r.src || "any"}
-              </td>
-              <td className="px-4 py-2.5 font-mono text-xs text-muted-foreground max-w-[140px] truncate">
-                {r.dst || "any"}
-              </td>
-              <td className="px-4 py-2.5 text-xs font-mono">{r.proto}</td>
-              <td className="px-4 py-2.5 font-mono text-xs text-muted-foreground">{r.port || "—"}</td>
-              <td className="px-4 py-2.5 font-mono text-xs text-muted-foreground">{r.iface || "—"}</td>
-              <td className="px-4 py-2.5 text-right">
-                <span className={cn(
-                  "text-xs font-mono tabular-nums",
-                  r.hits > 1_000_000 ? "text-emerald-600 dark:text-emerald-400 font-semibold"
-                  : r.hits > 10_000 ? "text-foreground"
-                  : "text-muted-foreground",
-                )}>
-                  {fmtHits(r.hits)}
-                </span>
-              </td>
-              <td className="px-4 py-2.5">
-                <Toggle checked={r.enabled} onChange={() => onToggle(r.id)} />
-              </td>
-              <td className="px-3 py-2.5">
-                <DropdownMenu>
-                  <DropdownMenuTrigger render={
-                    <Button variant="ghost" size="icon" className="size-7">
-                      <MoreHorizontalIcon className="size-4" />
-                    </Button>
-                  } />
-                  <DropdownMenuContent side="bottom" align="end">
-                    <DropdownMenuItem onClick={() => onEdit(r)}>
-                      <PencilIcon className="size-4" />Редактировать
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <CopyIcon className="size-4" />Дублировать
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem onClick={() => onToggle(r.id)}>
-                      <PowerIcon className="size-4" />
-                      {r.enabled ? "Отключить" : "Включить"}
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem variant="destructive">
-                      <Trash2Icon className="size-4" />Удалить правило
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
 // ════════════════════════════════════════════════════════════════════════════
 export default function FirewallPage() {
   const [rules, setRules] = useState<FirewallRule[]>(firewallRules)
@@ -1970,56 +1787,45 @@ export default function FirewallPage() {
           ) : chainGroup === "simulator" ? (
             <SimulatorTab rules={rules} />
           ) : (
-            <Card>
-              {/* toolbar */}
-              <div className="flex items-center gap-3 px-5 py-3 border-b flex-wrap">
-                {/* IP family selector */}
-                <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5">
-                  {(["all", "ip", "ip6"] as IpFamily[]).map((f) => (
-                    <button key={f} onClick={() => setIpFamily(f)}
-                      className={cn(
-                        "flex items-center gap-1.5 rounded px-3 py-1 text-xs transition-colors whitespace-nowrap",
-                        ipFamily === f
-                          ? "bg-background text-foreground shadow-sm"
-                          : "text-muted-foreground hover:text-foreground",
-                      )}>
-                      {IP_FAMILY_LABELS[f]}
-                    </button>
-                  ))}
-                </div>
-
-                {/* chain sub-tabs */}
-                <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5">
-                  {[{ value: "all", label: "Все" }, ...chainsInGroup.map((c) => ({ value: c, label: c }))].map((t) => (
-                    <button key={t.value} onClick={() => setChainFilter(t.value)}
-                      className={cn(
-                        "flex items-center gap-1.5 rounded px-3 py-1 text-xs transition-colors",
-                        chainFilter === t.value
-                          ? "bg-background text-foreground shadow-sm"
-                          : "text-muted-foreground hover:text-foreground",
-                      )}>
-                      {t.label}
-                      <span className="opacity-50">{chainCounts[t.value] ?? 0}</span>
-                    </button>
-                  ))}
-                </div>
-
-                {/* search */}
-                <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"
+            <DataPageCard>
+              <DataPageToolbarFrame>
+                <SegmentedControl
+                  value={ipFamily}
+                  onChange={setIpFamily}
+                  options={(["all", "ip", "ip6"] as IpFamily[]).map((f) => ({
+                    value: f,
+                    label: IP_FAMILY_LABELS[f],
+                  }))}
+                />
+                <SegmentedControl
+                  value={chainFilter}
+                  onChange={setChainFilter}
+                  options={[
+                    { value: "all", label: "Все", count: chainCounts.all ?? 0 },
+                    ...chainsInGroup.map((c) => ({
+                      value: c,
+                      label: c,
+                      count: chainCounts[c] ?? 0,
+                    })),
+                  ]}
+                />
+                <InputGroup className="min-w-[220px] max-w-sm">
+                  <InputGroupAddon>
+                    <SearchIcon className="size-3.5" />
+                  </InputGroupAddon>
+                  <InputGroupInput
                     placeholder="Поиск по адресу, действию…"
                     value={search}
                     onChange={(e) => setSearch(e.target.value)}
                   />
-                </div>
+                </InputGroup>
+                <span className="text-sm text-muted-foreground ml-auto">
+                  {filteredRules.length} правил
+                </span>
+              </DataPageToolbarFrame>
 
-                <span className="text-sm text-muted-foreground ml-auto">{filteredRules.length} правил</span>
-              </div>
-
-              <RulesTable rules={filteredRules} onToggle={toggleRule} onEdit={openEdit} />
-            </Card>
+              <FirewallRulesDataGrid rules={filteredRules} onToggle={toggleRule} onEdit={openEdit} />
+            </DataPageCard>
           )}
 
           {/* RouterOS reference */}

app/(main)/gre/page.tsx

@@ -2,6 +2,11 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
+import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbar, DataPageToolbarFrame } from "@/components/data-page-toolbar"
+import { GreTunnelsDataGrid } from "@/components/data-grids/gre-tunnels-data-grid"
+import { GrePoolsDataGrid } from "@/components/data-grids/gre-pools-data-grid"
+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"
@@ -21,7 +26,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Flag } from "@/components/flag"
 import {
-  PlusIcon, SearchIcon, RefreshCwIcon, MoreHorizontalIcon,
+  PlusIcon, RefreshCwIcon, MoreHorizontalIcon,
   LockIcon, LockOpenIcon, ShieldCheckIcon, NetworkIcon,
   EyeIcon, EyeOffIcon, ChevronDownIcon, ChevronRightIcon,
   CodeXmlIcon, PencilIcon, PowerIcon, Trash2Icon, CopyIcon, CheckIcon,
@@ -138,58 +143,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 {
@@ -501,196 +454,43 @@ export default function GrePage() {
 
           {/* ── Tunnels ── */}
           {pageTab === "tunnels" && (
-            <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">
-                  {tunnelTabs.map((t) => (
-                    <button key={t.value} onClick={() => setTabFilter(t.value)}
-                      className={`flex items-center gap-1.5 rounded px-3 py-1 text-sm transition-colors ${tabFilter === 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>
-                <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="Поиск по имени, IP…" value={search} onChange={(e) => setSearch(e.target.value)} />
-                </div>
-                <span className="text-sm text-muted-foreground ml-auto">{filtered.length} туннелей</span>
-              </div>
+            <DataPageCard>
+              <DataPageToolbar
+                segmented={{
+                  value: tabFilter,
+                  onChange: setTabFilter,
+                  options: tunnelTabs.map((t) => ({
+                    value: t.value,
+                    label: t.label,
+                    count: t.count,
+                  })),
+                }}
+                search={search}
+                onSearchChange={setSearch}
+                searchPlaceholder="Поиск по имени, IP…"
+                countLabel={`${filtered.length} туннелей`}
+              />
 
-              <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">Внутренний IP</th>
-                      <th className="text-left font-medium px-4 py-3">Пул</th>
-                      <th className="text-left font-medium px-4 py-3">IPsec</th>
-                      <th className="text-left font-medium px-4 py-3">Шифрование</th>
-                      <th className="text-center font-medium px-4 py-3">MTU</th>
-                      <th className="text-left font-medium px-4 py-3">Keepalive</th>
-                      <th className="text-left font-medium px-4 py-3">Статус</th>
-                      <th className="w-20 px-3 py-3" />
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-border">
-                    {filtered.map((t, index) => {
-                      const srv  = serverById[t.serverId]
-                      const pool = poolById[t.poolId]
-                      return (
-                        <tr key={`${t.id}:${t.serverId}:${t.name}:${index}`} className="hover:bg-muted/40 transition-colors">
-                          <td className="px-5 py-3">
-                            <p className="font-medium font-mono text-[13px]">{t.name}</p>
-                            <p className="text-xs text-muted-foreground mt-0.5 flex items-center gap-1">
-                              {srv && <Flag code={srv.country} />}
-                              {srv?.name ?? t.serverId}
-                            </p>
-                          </td>
-                          <td className="px-4 py-3">
-                            <p className="font-mono text-xs">
-                              {t.localAddress === "0.0.0.0" ? <span className="text-muted-foreground">авто</span> : t.localAddress}
-                            </p>
-                            <p className="font-mono text-xs text-muted-foreground">→ {t.remoteAddress}</p>
-                          </td>
-                          <td className="px-4 py-3">
-                            <p className="font-mono text-xs">{t.localInnerIp}</p>
-                            <p className="font-mono text-xs text-muted-foreground">{t.remoteInnerIp}</p>
-                          </td>
-                          <td className="px-4 py-3">
-                            <span className="text-xs text-muted-foreground font-mono">{pool?.name ?? "—"}</span>
-                          </td>
-                          <td className="px-4 py-3"><IpsecBadge secured={!!t.ipsec} /></td>
-                          <td className="px-4 py-3">
-                            {t.ipsec ? (
-                              <div className="flex flex-col gap-0.5">
-                                <span className="text-xs font-mono">{ENC_LABELS[t.ipsec.encAlg]} / {AUTH_LABELS[t.ipsec.authAlg]}</span>
-                                <span className="text-xs text-muted-foreground font-mono">
-                                  {DH_LABELS[t.ipsec.dhGroup].split(" ")[0]} · {IKE_LABELS[t.ipsec.ikeVersion]}{t.ipsec.pfs && " · PFS"}
-                                </span>
-                              </div>
-                            ) : <span className="text-xs text-muted-foreground">—</span>}
-                          </td>
-                          <td className="px-4 py-3 text-center font-mono text-xs">{t.mtu}</td>
-                          <td className="px-4 py-3 font-mono text-xs text-muted-foreground">
-                            {t.keepaliveInterval === 0 ? "откл." : `${t.keepaliveInterval}с / ${t.keepaliveRetries}`}
-                          </td>
-                          <td className="px-4 py-3"><TunnelStatus status={t.status} /></td>
-
-                          {/* actions */}
-                          <td className="px-3 py-3">
-                            <div className="flex items-center gap-1 justify-end">
-                              {/* Code preview button */}
-                              <Button
-                                variant="ghost" size="icon" className="size-7"
-                                title="Предпросмотр кода RouterOS"
-                                onClick={() => setCodePreviewTunnel(t)}
-                              >
-                                <CodeXmlIcon className="size-3.5" />
-                              </Button>
-
-                              {/* Actions dropdown */}
-                              <DropdownMenu>
-                                <DropdownMenuTrigger render={
-                                  <Button variant="ghost" size="icon" className="size-7">
-                                    <MoreHorizontalIcon className="size-4" />
-                                  </Button>
-                                } />
-                                <DropdownMenuContent side="bottom" align="end">
-                                  <DropdownMenuGroup>
-                                    <DropdownMenuLabel>{t.name}</DropdownMenuLabel>
-                                  </DropdownMenuGroup>
-                                  <DropdownMenuSeparator />
-                                  <DropdownMenuItem onClick={() => setCodePreviewTunnel(t)}>
-                                    <CodeXmlIcon className="size-4" /> Просмотр кода
-                                  </DropdownMenuItem>
-                                  <DropdownMenuItem>
-                                    <PencilIcon className="size-4" /> Редактировать
-                                  </DropdownMenuItem>
-                                  <DropdownMenuSeparator />
-                                  <DropdownMenuItem>
-                                    <PowerIcon className="size-4" />
-                                    {t.enabled ? "Выключить" : "Включить"}
-                                  </DropdownMenuItem>
-                                  <DropdownMenuSeparator />
-                                  <DropdownMenuItem variant="destructive">
-                                    <Trash2Icon className="size-4" /> Удалить туннель
-                                  </DropdownMenuItem>
-                                </DropdownMenuContent>
-                              </DropdownMenu>
-                            </div>
-                          </td>
-                        </tr>
-                      )
-                    })}
-                  </tbody>
-                </table>
-              </div>
-            </Card>
+              <GreTunnelsDataGrid
+                tunnels={filtered}
+                servers={displayServers}
+                pools={displayPools}
+                onCodePreview={setCodePreviewTunnel}
+              />
+            </DataPageCard>
           )}
 
           {/* ── IP Pools ── */}
           {pageTab === "pools" && (
-            <Card>
-              <div className="flex items-center justify-between px-5 py-3 border-b">
+            <DataPageCard>
+              <DataPageToolbarFrame className="justify-between">
                 <span className="text-sm text-muted-foreground">{displayPools.length} пула</span>
                 <Button size="sm" variant="outline" onClick={() => { setPForm(defaultPoolForm); setPoolOpen(true) }}>
-                  <PlusIcon className="size-4" />Добавить пул
+                  <PlusIcon className="size-4" />
+                  Добавить пул
                 </Button>
-              </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">Диапазон CIDR</th>
-                      <th className="text-right font-medium px-4 py-3">Назначено /30</th>
-                      <th className="text-right font-medium px-4 py-3">Доступно /30</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-10 px-3 py-3" />
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-border">
-                    {displayPools.map((pool) => {
-                      const pct = pool.total > 0 ? Math.round((pool.allocated / pool.total) * 100) : 0
-                      return (
-                        <tr key={pool.id} className="hover:bg-muted/40 transition-colors">
-                          <td className="px-5 py-3 font-mono text-[13px] font-medium">{pool.name}</td>
-                          <td className="px-4 py-3 font-mono text-xs">{pool.cidr}</td>
-                          <td className="px-4 py-3 text-right tabular-nums">{pool.allocated}</td>
-                          <td className="px-4 py-3 text-right tabular-nums text-muted-foreground">{pool.total - pool.allocated}</td>
-                          <td className="px-4 py-3 min-w-[140px]">
-                            <div className="flex items-center gap-2">
-                              <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
-                                <div className={`h-full rounded-full ${pct > 80 ? "bg-amber-500" : "bg-emerald-500"}`} style={{ width: `${pct}%` }} />
-                              </div>
-                              <span className="text-xs text-muted-foreground tabular-nums w-8 text-right">{pct}%</span>
-                            </div>
-                          </td>
-                          <td className="px-4 py-3 text-muted-foreground text-xs">{pool.comment}</td>
-                          <td className="px-3 py-3">
-                            <DropdownMenu>
-                              <DropdownMenuTrigger render={
-                                <Button variant="ghost" size="icon" className="size-7">
-                                  <MoreHorizontalIcon className="size-4" />
-                                </Button>
-                              } />
-                              <DropdownMenuContent side="bottom" align="end">
-                                <DropdownMenuItem><PencilIcon className="size-4" /> Редактировать</DropdownMenuItem>
-                                <DropdownMenuSeparator />
-                                <DropdownMenuItem variant="destructive"><Trash2Icon className="size-4" /> Удалить пул</DropdownMenuItem>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
-                          </td>
-                        </tr>
-                      )
-                    })}
-                  </tbody>
-                </table>
-              </div>
+              </DataPageToolbarFrame>
+              <GrePoolsDataGrid pools={displayPools} />
 
               <div className="border-t px-5 py-4">
                 <p className="text-xs font-medium text-muted-foreground mb-3">Назначения по пулам</p>
@@ -715,7 +515,7 @@ export default function GrePage() {
                   })}
                 </div>
               </div>
-            </Card>
+            </DataPageCard>
           )}
 
           {/* RouterOS reference */}
@@ -838,51 +638,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 +693,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 +707,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 +755,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 +781,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 +806,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,25 @@
 "use client"
 
-import { useMemo } from "react"
+import { useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
-import { DataTable } from "@/components/data-table"
+import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import { IpRangesDataGrid } from "@/components/data-grids/ip-ranges-data-grid"
+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 { UploadIcon, DownloadIcon, PlusIcon, 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)
+  const [search, setSearch] = useState("")
 
-  /** При включённом EvoBGP в live локальные моки не показываем — только каталог API (или пусто при загрузке/ошибке). */
   const useEvoCatalog = mode === "live" && enabled
 
   const rows = useMemo(() => {
@@ -23,13 +28,27 @@ export default function IpRangesPage() {
     return snapshot?.ipRanges ?? []
   }, [useEvoCatalog, loading, snapshot])
 
+  const filtered = useMemo(() => {
+    if (!search) return rows
+    const q = search.toLowerCase()
+    return rows.filter(
+      (r) =>
+        r.cidr.toLowerCase().includes(q) ||
+        r.asn.toLowerCase().includes(q) ||
+        r.country.toLowerCase().includes(q) ||
+        r.filter.toLowerCase().includes(q),
+    )
+  }, [rows, search])
+
   return (
     <div className="flex flex-col h-full">
       <PageHeader
         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>
           </>
@@ -56,58 +75,31 @@ export default function IpRangesPage() {
               </p>
             )}
           </div>
-          <DataTable
-            data={rows}
-            searchPlaceholder="Поиск по CIDR, ASN…"
-            searchKeys={["cidr", "asn", "country", "filter"]}
-            columns={[
-              {
-                key: "cidr",
-                label: "CIDR",
-                render: (d) => <span className="font-mono font-medium">{d.cidr}</span>,
-              },
-              {
-                key: "asn",
-                label: "ASN",
-                render: (d) => <span className="font-mono text-xs text-muted-foreground">{d.asn}</span>,
-              },
-              {
-                key: "country",
-                label: "Страна",
-                render: (d) => <span className="text-xs border border-border rounded px-2 py-0.5">{d.country}</span>,
-              },
-              {
-                key: "purpose",
-                label: "Назначение",
-                render: (d) => <span className="text-xs border border-border rounded px-2 py-0.5">{d.purpose}</span>,
-              },
-              {
-                key: "filter",
-                label: "Фильтр",
-                render: (d) => (
-                  <span className="inline-flex items-center gap-1 text-xs bg-muted rounded px-2 py-0.5">
-                    <FilterIcon className="size-3 text-muted-foreground" />{d.filter}
-                  </span>
-                ),
-              },
-              {
-                key: "updated",
-                label: "Обновлён",
-                render: (d) => <span className="text-xs text-muted-foreground">{d.updated}</span>,
-              },
-              {
-                key: "enabled",
-                label: "Статус",
-                render: (d) => (
-                  <span className={`text-xs font-medium ${d.enabled ? "text-emerald-600" : "text-muted-foreground"}`}>
-                    {d.enabled ? "Активен" : "Отключён"}
-                  </span>
-                ),
-              },
-            ]}
-          />
+          <DataPageCard>
+            <DataPageToolbar
+              search={search}
+              onSearchChange={setSearch}
+              searchPlaceholder="Поиск по CIDR, ASN…"
+              countLabel={`${filtered.length} диапазонов`}
+            />
+            <IpRangesDataGrid
+              ipRanges={filtered}
+              isLoading={useEvoCatalog && loading && !snapshot}
+              pagination={useEvoCatalog}
+            />
+          </DataPageCard>
         </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)/ospf/page.tsx

@@ -2,6 +2,10 @@
 
 import { useMemo, useState, useEffect } from "react"
 import { PageHeader } from "@/components/page-header"
+import { DataPageCard } from "@/components/data-page-card"
+import { OspfNeighborsDataGrid } from "@/components/data-grids/ospf-neighbors-data-grid"
+import { OspfRoutesDataGrid, routeTypeClass } from "@/components/data-grids/ospf-routes-data-grid"
+import { OspfBfdDataGrid } from "@/components/data-grids/ospf-bfd-data-grid"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
@@ -375,13 +379,6 @@ function stateClass(state: OspfNeighbor["state"] | BfdSession["state"]) {
   return "bg-[var(--status-offline-bg)] text-[var(--status-offline-fg)] border-current/25"
 }
 
-function routeTypeClass(type: OspfRoute["type"]) {
-  if (type === "O")    return "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25"
-  if (type === "O IA") return "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/25"
-  if (type === "O E1") return "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/25"
-  return "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/25"
-}
-
 function Chip({ children, color }: { children: React.ReactNode; color?: string }) {
   return (
     <span className={cn(
@@ -978,60 +975,14 @@ function NeighborsTab({
         </div>
       )}
 
-      <Card className="overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="w-full text-xs">
-            <thead>
-              <tr className="border-b bg-muted/40">
-                {["Роутер", "Интерфейс", "Сосед (Router ID)", "Область", "Состояние", "Cost", "Uptime", "Prio"].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">
-              {neighbors.length === 0 ? (
-                <tr>
-                  <td colSpan={8} className="px-4 py-8 text-center text-sm text-muted-foreground">
-                    Нет OSPF-соседей
-                  </td>
-                </tr>
-              ) : neighbors.map(n => {
-                const isHighlighted = selectedId === n.localRouter || selectedId === n.remoteRouter
-                return (
-                  <tr key={n.id}
-                    onMouseEnter={() => setHighlightId(n.localRouter)}
-                    onMouseLeave={() => setHighlightId(null)}
-                    onClick={() => setSelectedId(prev => prev === n.localRouter ? null : n.localRouter)}
-                    className={cn(
-                      "transition-colors cursor-pointer",
-                      isHighlighted ? "bg-primary/5 hover:bg-primary/8" : "hover:bg-muted/30",
-                    )}>
-                    <td className="px-3 py-2.5 font-mono whitespace-nowrap">{n.localLabel}</td>
-                    <td className="px-3 py-2.5 font-mono text-muted-foreground whitespace-nowrap">{n.localIface}</td>
-                    <td className="px-3 py-2.5">
-                      <div className="flex flex-col">
-                        <span className="font-mono">{n.remoteLabel !== n.remoteRouterId ? n.remoteLabel : n.remoteRouterId}</span>
-                        {n.remoteLabel !== n.remoteRouterId && (
-                          <span className="text-[10px] font-mono text-muted-foreground">{n.remoteRouterId}</span>
-                        )}
-                      </div>
-                    </td>
-                    <td className="px-3 py-2.5 font-mono text-muted-foreground">{n.area}</td>
-                    <td className="px-3 py-2.5">
-                      <span className={cn("inline-flex items-center rounded border px-1.5 py-0.5 text-[11px] font-medium", stateClass(n.state))}>
-                        {n.state}
-                      </span>
-                    </td>
-                    <td className="px-3 py-2.5 font-mono tabular-nums text-center">{n.cost}</td>
-                    <td className="px-3 py-2.5 text-muted-foreground whitespace-nowrap tabular-nums">{n.uptime}</td>
-                    <td className="px-3 py-2.5 text-center font-mono">{n.priority}</td>
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
-        </div>
-      </Card>
+      <DataPageCard>
+        <OspfNeighborsDataGrid
+          neighbors={neighbors}
+          selectedRouterId={selectedId}
+          onSelect={setSelectedId}
+          onHighlight={setHighlightId}
+        />
+      </DataPageCard>
     </div>
   )
 }
@@ -1052,36 +1003,9 @@ function RoutesTab({ routes }: { routes: OspfRoute[] }) {
           </span>
         ))}
       </div>
-      <Card className="overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="w-full text-xs">
-            <thead>
-              <tr className="border-b bg-muted/40">
-                {["Назначение", "Тип", "Cost", "Следующий хоп", "Интерфейс", "Роутер", "Область"].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">
-              {routes.map(r => (
-                <tr key={r.id} className="hover:bg-muted/30 transition-colors">
-                  <td className="px-3 py-2.5 font-mono">{r.destination}</td>
-                  <td className="px-3 py-2.5">
-                    <span className={cn("inline-flex items-center rounded border px-1.5 py-0.5 text-[11px] font-medium", routeTypeClass(r.type))}>
-                      {r.type}
-                    </span>
-                  </td>
-                  <td className="px-3 py-2.5 font-mono tabular-nums text-center">{r.cost}</td>
-                  <td className="px-3 py-2.5 font-mono text-muted-foreground">{r.nextHop}</td>
-                  <td className="px-3 py-2.5 font-mono text-muted-foreground">{r.via}</td>
-                  <td className="px-3 py-2.5 font-mono">{r.serverLabel}</td>
-                  <td className="px-3 py-2.5 font-mono text-muted-foreground">{r.area}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </Card>
+      <DataPageCard>
+        <OspfRoutesDataGrid routes={routes} />
+      </DataPageCard>
       <div className="flex items-center gap-5 flex-wrap px-1">
         <span className="text-xs text-muted-foreground">Типы:</span>
         {([
@@ -1139,66 +1063,9 @@ function BfdTab({ sessions }: { sessions: BfdSession[] }) {
       )}
 
       {sessions.length > 0 && (
-        <Card className="overflow-hidden">
-          <div className="overflow-x-auto">
-            <table className="w-full text-xs">
-              <thead>
-                <tr className="border-b bg-muted/40">
-                  {[
-                    "Роутер", "Интерфейс", "Локальный", "Удалённый",
-                    "Состояние", "Uptime", "Tx / Rx", "Hold", "Mult",
-                    "Пакеты Rx", "Пакеты Tx", "Переходы",
-                  ].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">
-                {sessions.map(b => (
-                  <tr key={b.id} className="hover:bg-muted/30 transition-colors">
-                    <td className="px-3 py-2.5 font-mono whitespace-nowrap">
-                      <div className="flex flex-col gap-0.5">
-                        <span>{b.serverLabel}</span>
-                        {b.multihop && (
-                          <Chip color="bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20">multihop</Chip>
-                        )}
-                      </div>
-                    </td>
-                    <td className="px-3 py-2.5 font-mono text-muted-foreground whitespace-nowrap">{b.iface || "—"}</td>
-                    <td className="px-3 py-2.5 font-mono whitespace-nowrap">{b.localAddr}</td>
-                    <td className="px-3 py-2.5 font-mono whitespace-nowrap">{b.remoteAddr}</td>
-                    <td className="px-3 py-2.5">
-                      <span className={cn("inline-flex items-center rounded border px-1.5 py-0.5 text-[11px] font-medium", stateClass(b.state))}>
-                        {b.state}
-                      </span>
-                    </td>
-                    <td className="px-3 py-2.5 text-muted-foreground whitespace-nowrap tabular-nums">
-                      {b.uptime ?? "—"}
-                    </td>
-                    <td className="px-3 py-2.5 font-mono tabular-nums text-muted-foreground whitespace-nowrap">
-                      {fmtMs(b.interval)} / {fmtMs(b.rxInterval)}
-                    </td>
-                    <td className="px-3 py-2.5 font-mono tabular-nums text-muted-foreground whitespace-nowrap">
-                      {fmtMs(b.holdTime)}
-                    </td>
-                    <td className="px-3 py-2.5 font-mono tabular-nums text-center">{b.multiplier}</td>
-                    <td className="px-3 py-2.5 font-mono tabular-nums text-right text-muted-foreground">
-                      {b.packetsRx.toLocaleString()}
-                    </td>
-                    <td className="px-3 py-2.5 font-mono tabular-nums text-right text-muted-foreground">
-                      {b.packetsTx.toLocaleString()}
-                    </td>
-                    <td className="px-3 py-2.5 font-mono tabular-nums text-center">
-                      <span className={cn(b.stateChanges > 3 ? "text-[var(--status-degraded-fg)]" : "text-muted-foreground")}>
-                        {b.stateChanges}
-                      </span>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </Card>
+        <DataPageCard>
+          <OspfBfdDataGrid sessions={sessions} />
+        </DataPageCard>
       )}
 
       {sessions.length > 0 && (

app/(main)/probes/page.tsx

@@ -2,7 +2,18 @@
 
 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 { DataPageCard } from "@/components/data-page-card"
+import {
+  ProbesScheduleDataGrid,
+  type SchedRule,
+  type SchedType,
+} from "@/components/data-grids/probes-schedule-data-grid"
+import {
+  ProbesSpeedProbesDataGrid,
+  type SpeedProbeApiRow,
+} from "@/components/data-grids/probes-speed-probes-data-grid"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { servers, greTunnels, type GreTunnel, type Server } from "@/lib/data"
@@ -40,13 +51,8 @@ interface DiagTest {
   source?: "demo" | "live"
 }
 
-type SchedType = "ping" | "bandwidth" | "both"
+// SchedRule imported from probes-schedule-data-grid
 
-interface SchedRule {
-  id: string; srcId: string; tunnelId: string; type: SchedType
-  intervalMin: number; enabled: boolean
-  lastRun: string | null; nextRunMin: number | null
-}
 
 // ─── tool metadata ────────────────────────────────────────────────────────────
 
@@ -97,22 +103,7 @@ interface BackendServerRow {
   latency?: number | null
 }
 
-interface SpeedProbeApiRow {
-  id: string
-  srcServerId: string
-  dstServerId: string
-  srcInterface: string
-  dstInterface: string
-  protocol: string
-  direction: string
-  durationSec: string
-  enabled: boolean
-  lastRunAt: string | null
-  lastTxAvgMbps: number | null
-  lastRxAvgMbps: number | null
-  lastStatus: string | null
-  lastError: string | null
-}
+// SpeedProbeApiRow imported from probes-speed-probes-data-grid
 
 // ─── helpers ──────────────────────────────────────────────────────────────────
 
@@ -353,17 +344,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>
 }
@@ -476,53 +456,9 @@ function ScheduleSpeedProbesLive({
 
   return (
     <div className="flex flex-col gap-3">
-      <Card className="overflow-hidden">
-        {rows.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-10 gap-2 text-muted-foreground">
-            <ClockIcon className="size-7 opacity-20" />
-            <p className="text-sm">Нет записей speed-test в мониторинге</p>
-            <p className="text-xs text-muted-foreground/70 max-w-md text-center">
-              Настраиваются через API <code className="text-[11px]">PUT /api/uptime/speed-probes</code> или связанный UI.
-            </p>
-          </div>
-        ) : (
-          <>
-            <div className="grid grid-cols-[1fr_1fr_80px_90px_80px_1fr] gap-2 items-center px-4 py-2 bg-muted/30 border-b text-[10px] font-semibold text-muted-foreground uppercase tracking-wide">
-              <span>Источник</span>
-              <span>Назначение</span>
-              <span>Протокол</span>
-              <span>Сек</span>
-              <span>Вкл</span>
-              <span>Последний запуск</span>
-            </div>
-            <div className="divide-y divide-border/60">
-              {rows.map(r => (
-                <div key={r.id} className={cn(
-                  "grid grid-cols-[1fr_1fr_80px_90px_80px_1fr] gap-2 items-center px-4 py-2.5 text-xs",
-                  !r.enabled && "opacity-50",
-                )}>
-                  <span className="truncate font-mono">{name(r.srcServerId)}{r.srcInterface ? ` · ${r.srcInterface}` : ""}</span>
-                  <span className="truncate font-mono">{name(r.dstServerId)}{r.dstInterface ? ` · ${r.dstInterface}` : ""}</span>
-                  <span>{r.protocol.toUpperCase()}</span>
-                  <span className="font-mono">{r.durationSec}s</span>
-                  <span>{r.enabled ? "да" : "нет"}</span>
-                  <span className="text-muted-foreground truncate">
-                    {r.lastRunAt ?? "—"}
-                    {r.lastStatus === "done" && r.lastTxAvgMbps != null && (
-                      <span className="text-emerald-600 dark:text-emerald-400 ml-1">
-                        TX≈{r.lastTxAvgMbps.toFixed(1)} RX≈{(r.lastRxAvgMbps ?? 0).toFixed(1)} Mb/s
-                      </span>
-                    )}
-                    {r.lastStatus === "error" && r.lastError && (
-                      <span className="text-destructive ml-1 truncate">{r.lastError}</span>
-                    )}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </>
-        )}
-      </Card>
+      <DataPageCard>
+        <ProbesSpeedProbesDataGrid rows={rows} serverName={name} />
+      </DataPageCard>
       <p className="text-[11px] text-muted-foreground">
         Данные из коллектора uptime (та же БД, что и дашборд). Редактирование — через настройки мониторинга / API.
       </p>
@@ -563,63 +499,22 @@ function ScheduleTab({
     }
   }, [addSrc, addTun, tunnelsForServer])
 
-  const typeLabel: Record<SchedType, string> = { ping: "Ping", bandwidth: "BW-тест", both: "Ping + BW" }
+  const tunnelName = (srcId: string, tunnelId: string) =>
+    tunnelsForServer(srcId).find((t) => t.id === tunnelId)?.name
 
   return (
     <div className="flex flex-col gap-3">
-      <Card className="overflow-hidden">
-        {rules.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-10 gap-2 text-muted-foreground">
-            <ClockIcon className="size-7 opacity-20" />
-            <p className="text-sm">Нет правил расписания</p>
-          </div>
-        ) : (
-          <>
-            <div className="grid grid-cols-[40px_1fr_140px_80px_100px_1fr_auto] gap-2 items-center px-4 py-2 bg-muted/30 border-b text-[10px] font-semibold text-muted-foreground uppercase tracking-wide">
-              <span />
-              <span>Туннель</span>
-              <span>Сервер</span>
-              <span>Тип</span>
-              <span>Интервал</span>
-              <span>Последний / следующий</span>
-              <span />
-            </div>
-            <div className="divide-y divide-border/60">
-              {rules.map(rule => {
-                const src = serverOptions.find(s => s.id === rule.srcId)
-                const tun = tunnelsForServer(rule.srcId).find(t => t.id === rule.tunnelId)
-                return (
-                  <div key={rule.id} className={cn(
-                    "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}
-                      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>
-                    <span className={cn("text-[10px] px-1.5 py-0.5 rounded border font-medium w-fit",
-                      rule.type === "ping"      ? "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20"
-                      : rule.type === "bandwidth" ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
-                      : "bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20",
-                    )}>{typeLabel[rule.type]}</span>
-                    <span className="text-xs text-muted-foreground">каждые {rule.intervalMin} мин</span>
-                    <div className="text-xs text-muted-foreground flex items-center gap-2 min-w-0">
-                      {rule.lastRun && <span className="truncate">{rule.lastRun}</span>}
-                      {rule.nextRunMin != null && rule.enabled && (
-                        <span className="text-sky-600 dark:text-sky-400 shrink-0">· через {rule.nextRunMin} мин</span>
-                      )}
-                    </div>
-                    <button onClick={() => setRules(p => p.filter(r => r.id !== rule.id))}
-                      className="size-6 flex items-center justify-center rounded text-muted-foreground/40 hover:text-red-500 hover:bg-red-500/10 transition-colors">
-                      <Trash2Icon className="size-3.5" />
-                    </button>
-                  </div>
-                )
-              })}
-            </div>
-          </>
-        )}
-      </Card>
+      <DataPageCard>
+        <ProbesScheduleDataGrid
+          rules={rules}
+          serverOptions={serverOptions}
+          tunnelName={tunnelName}
+          onToggleEnabled={(id, enabled) =>
+            setRules((p) => p.map((r) => (r.id === id ? { ...r, enabled } : r)))
+          }
+          onDelete={(id) => setRules((p) => p.filter((r) => r.id !== id))}
+        />
+      </DataPageCard>
       {showAdd ? (
         <Card className="overflow-hidden">
           <div className="px-4 py-3 border-b flex items-center gap-2 text-sm font-medium">
@@ -1115,7 +1010,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,13 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
+import {
+  RecursiveRoutesDataGrid,
+  type RecursiveRouteGroup,
+  inferCountry,
+} from "@/components/data-grids/recursive-routes-data-grid"
+import { FormField, SectionTitle } from "@/components/form-kit"
+import { DataPageCard } from "@/components/data-page-card"
 import { Card } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -11,7 +18,7 @@ import { Flag } from "@/components/flag"
 import { useDataSource } from "@/lib/data-source"
 import { cn } from "@/lib/utils"
 import { servers as mockServers, type Server } from "@/lib/data"
-import { PlusIcon, SaveIcon, TrashIcon, SearchIcon, XIcon, PencilIcon, ChevronDownIcon, ChevronRightIcon, AlertCircleIcon, CheckIcon } from "lucide-react"
+import { PlusIcon, SaveIcon, TrashIcon, SearchIcon, XIcon, PencilIcon, CheckIcon, AlertCircleIcon } from "lucide-react"
 import { requestJson } from "@/shared/api/http-client"
 
 interface BackendServer {
@@ -34,25 +41,6 @@ interface GatewayOption {
   status: "up" | "down"
 }
 
-const INFER_COUNTRIES = [
-  { code: "RU", keys: ["MSK", "SPB", "RTK", "MTS", "VPSVILLE", "IHOR"] },
-  { code: "SE", keys: ["SWE", "STO"] },
-  { code: "FI", keys: ["HEL", "FIN"] },
-  { code: "DE", keys: ["FRA", "GER", "DE"] },
-  { code: "NL", keys: ["AMS", "NLD", "NL"] },
-  { code: "SG", keys: ["SGP", "SIN", "SG"] },
-  { code: "TR", keys: ["TUR", "TR"] },
-  { code: "US", keys: ["USA", "US", "NYC", "LAX"] },
-]
-
-function inferCountry(name: string): string | null {
-  const upper = name.toUpperCase()
-  for (const c of INFER_COUNTRIES) {
-    if (c.keys.some(k => upper.includes(k))) return c.code
-  }
-  return null
-}
-
 const COUNTRY_OPTIONS = [
   { code: "RU", label: "Россия" }, { code: "DE", label: "Германия" },
   { code: "NL", label: "Нидерланды" }, { code: "SG", label: "Сингапур" },
@@ -82,13 +70,7 @@ interface RecursiveRouteRow {
   country: string
 }
 
-interface RouteGroup {
-  key: string
-  dstAddress: string
-  routingTable: string
-  comment: string
-  endpoints: RecursiveRouteRow[]
-}
+interface RouteGroup extends RecursiveRouteGroup {}
 
 function makeApiFetch(backendUrl: string) {
   return async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
@@ -148,131 +130,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,
-}: {
-  group: RouteGroup
-  expanded: boolean
-  onToggle: () => void
-  onEdit: () => void
-  onDelete: () => void
-}) {
-  const [confirmDel, setConfirmDel] = useState(false)
-  const bestDistance = Math.min(...group.endpoints.map(ep => ep.distance))
-  const sorted = [...group.endpoints].sort((a, b) => a.distance - b.distance)
-  return (
-    <>
-      <tr
-        className={cn(
-          "hover:bg-muted/40 transition-colors cursor-pointer group",
-          expanded && "bg-muted/30",
-        )}
-        onClick={onToggle}
-      >
-        <td className="px-5 py-3">
-          <div className="flex items-start gap-2">
-            {expanded
-              ? <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">{group.dstAddress}</p>
-              <p className="text-xs font-mono text-muted-foreground">{group.comment || "—"}</p>
-            </div>
-          </div>
-        </td>
-        <td className="px-4 py-3">
-          <div className="flex flex-col gap-0.5">
-            {sorted.map((ep, idx) => {
-              const code = ep.country || inferCountry(ep.gateway)
-              return (
-                <div key={ep.id} className="flex items-center gap-1.5 text-[11px] font-mono">
-                  <span className={cn(
-                    "size-1.5 rounded-full shrink-0",
-                    idx === 0 ? "bg-emerald-500" : "bg-sky-500",
-                  )} />
-                  {code ? <Flag code={code} size={14} className="shrink-0" /> : <span className="text-[10px] text-muted-foreground w-3.5 text-center shrink-0">?</span>}
-                  <span className="font-semibold text-sky-600 dark:text-sky-400 truncate min-w-0">{ep.gateway}</span>
-                </div>
-              )
-            })}
-          </div>
-        </td>
-        <td className="px-4 py-3 text-xs tabular-nums">{group.endpoints.length}</td>
-        <td className="px-4 py-3 font-mono text-xs">d{bestDistance}</td>
-        <td className="px-4 py-3 font-mono text-xs text-muted-foreground">{group.routingTable || "main"}</td>
-        <td className="px-3 py-3" onClick={e => e.stopPropagation()}>
-          <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-            <Button size="sm" variant="ghost" className="size-7 p-0 text-muted-foreground hover:text-foreground" onClick={onEdit}><PencilIcon className="size-3.5" /></Button>
-            <Button size="sm" variant="ghost" className={cn("size-7 p-0 transition-colors", confirmDel ? "text-destructive bg-destructive/10 hover:bg-destructive/20" : "text-muted-foreground hover:text-destructive")} onClick={() => { if (!confirmDel) setConfirmDel(true); else onDelete() }} onBlur={() => setConfirmDel(false)}>
-              {confirmDel ? <AlertCircleIcon className="size-3.5" /> : <TrashIcon className="size-3.5" />}
-            </Button>
-          </div>
-        </td>
-      </tr>
-      {expanded && (
-        <tr className="bg-muted/20">
-          <td colSpan={6} className="px-8 py-5 border-b border-border/50">
-            <div className="flex flex-col gap-4">
-              <div className="flex flex-wrap gap-x-6 gap-y-2 text-xs">
-                <span className="text-muted-foreground">Route: <span className="font-mono text-foreground">{group.dstAddress}</span></span>
-                <span className="text-muted-foreground">Table: <span className="font-mono text-foreground">{group.routingTable || "main"}</span></span>
-                {group.comment && <span className="text-muted-foreground italic">{group.comment}</span>}
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
-                {sorted.map((ep, idx) => (
-                  <div key={ep.id} className="rounded-lg border border-border bg-background px-4 py-3">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-1.5">
-                        {(ep.country || inferCountry(ep.gateway)) && (
-                          <Flag code={ep.country || inferCountry(ep.gateway) || ""} size={16} />
-                        )}
-                        <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide">Endpoint {idx + 1}</span>
-                      </div>
-                      <span className="text-[11px] font-mono">distance: {ep.distance}</span>
-                    </div>
-                    <p className="mt-1.5 font-mono text-sm break-all leading-tight">{ep.gateway}</p>
-                    <div className="mt-1.5 text-[11px] text-muted-foreground flex items-center gap-3">
-                      <span>scope: {ep.scope ?? "—"}</span>
-                      <span>t.scope: {ep.targetScope ?? "—"}</span>
-                      <span>check: {ep.checkGateway || "—"}</span>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </td>
-        </tr>
-      )}
-    </>
-  )
-}
-
 function EndpointCountryField({ value, onChange }: { value: string; onChange: (v: string) => void }) {
   const [query, setQuery] = useState("")
   const q = query.trim().toUpperCase()
@@ -370,9 +227,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 +253,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 +324,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>
@@ -798,9 +655,9 @@ export default function RecursiveRoutesPage() {
             Раздел работает в режиме &quot;Живые данные&quot;. Переключи источник данных в настройках.
           </Card>
         ) : (
-          <Card className="overflow-hidden py-0 gap-0">
+          <DataPageCard>
             {currentServer && (
-              <div className="flex items-center gap-2.5 px-4 py-3 border-b bg-muted/10">
+              <div className="flex items-center gap-2.5 px-5 py-3 border-b bg-muted/10">
                 <StatusDot status={currentServer.status} pulse={currentServer.status === "online"} />
                 <Flag code={currentServer.country} size={16} />
                 <span className="font-mono text-sm font-semibold">{currentServer.name}</span>
@@ -819,43 +676,19 @@ export default function RecursiveRoutesPage() {
               </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">Route / Comment</th>
-                    <th className="text-left font-medium px-4 py-3">Gateways</th>
-                    <th className="text-left font-medium px-4 py-3">EP</th>
-                    <th className="text-left font-medium px-4 py-3">Priority</th>
-                    <th className="text-left font-medium px-4 py-3">Table</th>
-                    <th className="w-10 px-3 py-3" />
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-border">
-                  {groupedRoutes.map((g) => (
-                    <RouteGroupRows
-                      key={g.key}
-                      group={g}
-                      expanded={expandedGroupKey === g.key}
-                      onToggle={() => setExpandedGroupKey(prev => prev === g.key ? null : g.key)}
-                      onEdit={() => openEdit(g)}
-                      onDelete={() => setRows(prev => prev.filter(r => groupKeyOf(r) !== g.key))}
-                    />
-                  ))}
-                </tbody>
-              </table>
-              {groupedRoutes.length === 0 && (
-                <div className="p-8 text-center text-sm text-muted-foreground">
-                  Нет маршрутов в БД для этого сервера. Нажми &quot;Router =&gt; DB&quot; для загрузки.
-                </div>
-              )}
-            </div>
+            <RecursiveRoutesDataGrid
+              groups={groupedRoutes.map((g) => ({ ...g, id: g.key }))}
+              expandedKey={expandedGroupKey}
+              onExpandedChange={setExpandedGroupKey}
+              onEdit={openEdit}
+              onDelete={(g) => setRows((prev) => prev.filter((r) => groupKeyOf(r) !== g.key))}
+            />
             <button onClick={openCreate}
-              className="w-full flex items-center gap-2 px-4 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/20 transition-colors border-t">
+              className="w-full flex items-center gap-2 px-5 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/20 transition-colors border-t">
               <PlusIcon className="size-3.5" />
               Добавить маршрут
             </button>
-          </Card>
+          </DataPageCard>
         )}
       </div>
 

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

@@ -3,6 +3,12 @@
 import { useCallback, useEffect, useState, useMemo, useRef } from "react"
 import Link from "next/link"
 import { PageHeader } from "@/components/page-header"
+import { DataPageCard } from "@/components/data-page-card"
+import { RouteOptimizerWanMatrixDataGrid } from "@/components/data-grids/route-optimizer-wan-matrix-data-grid"
+import { RouteOptimizerFullRoutesDataGrid } from "@/components/data-grids/route-optimizer-full-routes-data-grid"
+import { RouteOptimizerCommRecsDataGrid } from "@/components/data-grids/route-optimizer-comm-recs-data-grid"
+import { RouteOptimizerOspfPreviewDataGrid } from "@/components/data-grids/route-optimizer-ospf-preview-data-grid"
+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 +251,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}
@@ -276,327 +271,6 @@ function SettingRow({ label, unit, children }: { label: string; unit?: string; c
   )
 }
 
-// ─── WAN Matrix table ─────────────────────────────────────────────────────────
-// Rows = WANs, Columns = JHs, cells show ping / bw / score
-
-function WanMatrix({ home, legs, jumpHosts, pw: _pw }: {
-  home: HomeRouter
-  legs: WanJhLeg[]
-  jumpHosts: JumpHost[]
-  pw: number
-}) {
-  // find best leg overall
-  const bestScore = legs.length ? Math.max(...legs.map(l => l.score)) : 0
-
-  return (
-    <div className="overflow-x-auto">
-      <table className="w-full text-sm">
-        <thead>
-          <tr className="border-b text-[11px] text-muted-foreground bg-muted/20">
-            <th className="text-left font-medium px-4 py-2 w-[160px]">WAN-аплинк</th>
-            <th className="text-left font-medium px-3 py-2">ISP / IP</th>
-            <th className="text-right font-medium px-3 py-2">Макс. полоса</th>
-            {jumpHosts.map(jh => (
-              <th key={jh.id} className="text-center font-medium px-3 py-2 min-w-[130px]">
-                <div>{jh.label}</div>
-                <div className="font-mono font-normal text-[10px] opacity-60 flex items-center justify-center gap-1">
-                  <Flag code={jh.country} />
-                  {jh.site} · {jh.ip}
-                </div>
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-border">
-          {home.wans.map(wan => (
-            <tr key={wan.id} className="hover:bg-muted/30 transition-colors">
-              {/* WAN name */}
-              <td className="px-4 py-3">
-                <div className="flex items-center gap-2">
-                  <WifiIcon className="size-3.5 text-muted-foreground shrink-0" />
-                  <div>
-                    <p className="font-mono text-xs font-semibold">{wan.name}</p>
-                    <p className="text-[10px] text-muted-foreground">{wan.iface}</p>
-                  </div>
-                </div>
-              </td>
-              {/* ISP */}
-              <td className="px-3 py-3">
-                <p className="text-xs font-medium">{wan.isp}</p>
-                <p className="font-mono text-[10px] text-muted-foreground">{wan.ip}</p>
-              </td>
-              {/* Max bandwidth */}
-              <td className="px-3 py-3 text-right">
-                <p className="font-mono text-xs">↓{wan.maxDl}</p>
-                <p className="font-mono text-[10px] text-muted-foreground">↑{wan.maxUl} Мбит</p>
-              </td>
-              {/* Per-JH cells */}
-              {jumpHosts.map(jh => {
-                const leg = legs.find(l => l.wanId === wan.id && l.jhId === jh.id)
-                if (!leg) return <td key={jh.id} className="px-3 py-3 text-center text-muted-foreground text-xs">—</td>
-                const isBest = leg.score === bestScore
-                return (
-                  <td key={jh.id} className={cn(
-                    "px-3 py-3 text-center",
-                    isBest && "bg-emerald-500/5",
-                  )}>
-                    <div className={cn(
-                      "flex flex-col items-center gap-0.5 rounded-md px-2 py-1.5 transition-colors",
-                      isBest
-                        ? "border border-emerald-500/20 bg-emerald-500/8"
-                        : "border border-transparent",
-                    )}>
-                      {isBest && (
-                        <span className="text-[9px] font-bold uppercase tracking-wide text-emerald-600 dark:text-emerald-400 mb-0.5">
-                          ★ ЛУЧШИЙ
-                        </span>
-                      )}
-                      <span className={cn("font-mono text-xs font-semibold",
-                        leg.pingMs < 10 ? "text-emerald-600 dark:text-emerald-400"
-                        : leg.pingMs < 25 ? "text-foreground"
-                        : "text-amber-600 dark:text-amber-400"
-                      )}>
-                        {leg.pingMs} мс
-                      </span>
-                      <span className="text-[10px] text-muted-foreground font-mono">
-                        ↓{leg.dlMbps} ↑{leg.ulMbps}
-                      </span>
-                      <div className="flex items-center gap-1.5 mt-0.5">
-                        <span className="text-[10px] font-mono text-foreground/70">
-                          score {leg.score}
-                        </span>
-                        {leg.loss > 0 && <LossChip loss={leg.loss} />}
-                      </div>
-                    </div>
-                  </td>
-                )
-              })}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
-// ─── Full routes table ────────────────────────────────────────────────────────
-
-function FullRoutesTable({ routes, bestId }: { routes: FullRoute[]; bestId?: string }) {
-  const [expanded, setExpanded] = useState(false)
-  const visible = expanded ? routes : routes.slice(0, 5)
-
-  return (
-    <div>
-      <div className="overflow-x-auto">
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="border-b text-[11px] text-muted-foreground bg-muted/20">
-              <th className="text-left font-medium px-4 py-2"># Маршрут</th>
-              <th className="text-left font-medium px-3 py-2">WAN → JH</th>
-              <th className="text-left font-medium px-3 py-2">JH → Exit</th>
-              <th className="text-center font-medium px-3 py-2">Ping (итого)</th>
-              <th className="text-center font-medium px-3 py-2">BW (мин)</th>
-              <th className="text-center font-medium px-3 py-2">Score</th>
-              <th className="text-center font-medium px-3 py-2">P(opt)</th>
-              <th className="text-center font-medium px-3 py-2">Conf.</th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-border/60">
-            {visible.map((r, i) => {
-              const isBest = r.id === bestId || i === 0
-              const totalPing = r.hw.pingMs + r.je.pingMs
-              const minDl = Math.min(r.hw.dlMbps, r.je.dlMbps)
-              const minUl = Math.min(r.hw.ulMbps, r.je.ulMbps)
-              return (
-                <tr key={r.id} className={cn(
-                  "hover:bg-muted/30 transition-colors",
-                  isBest && "bg-emerald-500/5",
-                )}>
-                  <td className="px-4 py-2.5">
-                    <div className="flex items-center gap-2">
-                      <span className="text-[10px] font-mono text-muted-foreground w-4">{i + 1}</span>
-                      {isBest && (
-                        <span className="text-[9px] font-bold uppercase tracking-wide text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-1.5 py-0.5 rounded">
-                          Лучший
-                        </span>
-                      )}
-                    </div>
-                  </td>
-                  <td className="px-3 py-2.5">
-                    <div className="flex items-center gap-1.5 text-xs">
-                      <span className="font-mono font-semibold text-sky-600 dark:text-sky-400">{r.wan.name}</span>
-                      <ArrowRightIcon className="size-3 text-muted-foreground shrink-0" />
-                      <div>
-                        <div className="font-medium">{r.jh.label}</div>
-                        <div className="font-mono text-[10px] text-muted-foreground">{r.hw.pingMs} мс · ↓{r.hw.dlMbps} ↑{r.hw.ulMbps}</div>
-                      </div>
-                    </div>
-                  </td>
-                  <td className="px-3 py-2.5">
-                    <div className="flex items-center gap-1.5 text-xs">
-                      <div>
-                        <div className="flex items-center gap-1 font-medium">
-                          <Flag code={r.exit.country} />
-                          {r.exit.label}
-                          <span className="text-[10px] text-muted-foreground">({r.exit.site})</span>
-                        </div>
-                        <div className="font-mono text-[10px] text-muted-foreground">{r.je.pingMs} мс · ↓{r.je.dlMbps} ↑{r.je.ulMbps}</div>
-                      </div>
-                    </div>
-                  </td>
-                  <td className={cn("px-3 py-2.5 text-center font-mono text-xs",
-                    totalPing < 40 ? "text-emerald-600 dark:text-emerald-400"
-                    : totalPing < 80 ? "text-amber-600 dark:text-amber-400"
-                    : "text-red-500"
-                  )}>
-                    {totalPing} мс
-                  </td>
-                  <td className="px-3 py-2.5 text-center font-mono text-xs text-muted-foreground">
-                    <div>↓{minDl}</div>
-                    <div>↑{minUl}</div>
-                  </td>
-                  <td className="px-3 py-2.5 text-center font-mono text-xs font-semibold">{r.score}</td>
-                  <td className="px-3 py-2.5 text-center"><ProbChip prob={r.probabilityOptimal} best={isBest} /></td>
-                  <td className="px-3 py-2.5 text-center"><ConfChip conf={r.confidence} /></td>
-                </tr>
-              )
-            })}
-          </tbody>
-        </table>
-      </div>
-      {routes.length > 5 && (
-        <button onClick={() => setExpanded(v => !v)}
-          className="w-full py-2 text-xs text-muted-foreground hover:text-foreground transition-colors border-t flex items-center justify-center gap-1">
-          {expanded
-            ? <><ChevronUpIcon className="size-3" />Свернуть</>
-            : <><ChevronDownIcon className="size-3" />Показать все {routes.length} комбинаций</>}
-        </button>
-      )}
-    </div>
-  )
-}
-
-// ─── Community recs table ─────────────────────────────────────────────────────
-
-function CommRecsTable({ recs, homeId, pinned, applied, applying, onPin, onApply, threshold: _threshold }: {
-  recs: CommRec[]
-  homeId: string
-  pinned: Set<string>
-  applied: Set<string>
-  applying: Set<string>
-  onPin: (k: string) => void
-  onApply: (comm: string, homeId: string) => void
-  threshold: number
-}) {
-  return (
-    <div className="overflow-x-auto">
-      <table className="w-full text-sm">
-        <thead>
-          <tr className="border-b text-[11px] text-muted-foreground bg-muted/20">
-            <th className="text-left font-medium px-4 py-2">Community</th>
-            <th className="text-left font-medium px-3 py-2">Текущий (WAN → JH → Exit)</th>
-            <th className="text-left font-medium px-3 py-2">Рекомендуемый</th>
-            <th className="text-center font-medium px-3 py-2">P(тек / рек)</th>
-            <th className="text-right font-medium px-3 py-2">Действие</th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-border">
-          {recs.map((r, idx) => {
-            const pinKey   = `${homeId}::${r.community}`
-            const isPinned = pinned.has(pinKey)
-            const isApplied  = applied.has(pinKey)
-            const isApplying = applying.has(pinKey)
-            const canApply   = r.shouldSwitch && !isPinned && !isApplied
-
-            return (
-              <tr key={`${homeId}::${r.community}::${idx}`} className={cn(
-                "hover:bg-muted/30 transition-colors",
-                r.shouldSwitch && !isPinned && !isApplied && "bg-amber-500/5",
-                isApplied && "bg-emerald-500/5",
-              )}>
-                {/* community */}
-                <td className="px-4 py-2.5">
-                  <div className="font-mono text-xs font-medium">{r.community}</div>
-                  <div className="text-[11px] text-muted-foreground">{r.communityName}</div>
-                </td>
-
-                {/* current route */}
-                <td className="px-3 py-2.5">
-                  {r.current ? (
-                    <div className="text-xs flex items-center gap-1 flex-wrap">
-                      <span className="font-mono font-medium text-sky-600 dark:text-sky-400">{r.current.wan}</span>
-                      <ArrowRightIcon className="size-3 text-muted-foreground shrink-0" />
-                      <span>{r.current.jh}</span>
-                      <ArrowRightIcon className="size-3 text-muted-foreground shrink-0" />
-                      <span className="text-muted-foreground">{r.current.exit}</span>
-                      <span className="font-mono text-[10px] text-muted-foreground">({r.current.gateway})</span>
-                    </div>
-                  ) : <span className="text-muted-foreground text-xs">—</span>}
-                </td>
-
-                {/* recommended */}
-                <td className="px-3 py-2.5">
-                  {r.recommended ? (
-                    <div className={cn("text-xs flex items-center gap-1 flex-wrap",
-                      r.shouldSwitch && !isPinned && "text-amber-600 dark:text-amber-400")}>
-                      <span className="font-mono font-medium">{r.recommended.wan}</span>
-                      <ArrowRightIcon className="size-3 shrink-0 opacity-60" />
-                      <span>{r.recommended.jh}</span>
-                      <ArrowRightIcon className="size-3 shrink-0 opacity-60" />
-                      <span>{r.recommended.exit}</span>
-                      {r.shouldSwitch && !isPinned && (
-                        <span className="ml-1 text-[10px] font-bold bg-amber-500/10 border border-amber-500/20 px-1.5 py-0.5 rounded">
-                          +{(r.recommended.prob ?? 0) - (r.current?.prob ?? 0)}%
-                        </span>
-                      )}
-                    </div>
-                  ) : <span className="text-muted-foreground text-xs">—</span>}
-                </td>
-
-                {/* probability */}
-                <td className="px-3 py-2.5 text-center">
-                  <div className="flex items-center justify-center gap-1">
-                    <ProbChip prob={r.current?.prob ?? 0} />
-                    <span className="text-muted-foreground text-[10px]">/</span>
-                    <ProbChip prob={r.recommended?.prob ?? 0} best={r.shouldSwitch && !isPinned} />
-                  </div>
-                </td>
-
-                {/* actions */}
-                <td className="px-3 py-2.5">
-                  <div className="flex items-center justify-end gap-1.5">
-                    {isPinned && <PinIcon className="size-3 text-sky-500 fill-sky-500" />}
-                    <Button variant="outline" size="sm"
-                      className={cn("h-7 text-xs", isPinned && "text-sky-600 dark:text-sky-400 border-sky-500/30")}
-                      onClick={() => onPin(pinKey)}>
-                      <PinIcon className={cn("size-3", isPinned && "fill-current")} />
-                      {isPinned ? "Открепить" : "Закрепить"}
-                    </Button>
-                    {canApply && (
-                      <Button size="sm" className="h-7 text-xs" disabled={isApplying}
-                        onClick={() => onApply(r.community, homeId)}>
-                        {isApplying
-                          ? <RefreshCwIcon className="size-3 animate-spin" />
-                          : <PlayIcon className="size-3" />}
-                        Применить
-                      </Button>
-                    )}
-                    {isApplied && (
-                      <span className="text-xs text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
-                        <CheckCircleIcon className="size-3" />Применено
-                      </span>
-                    )}
-                  </div>
-                </td>
-              </tr>
-            )
-          })}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
 // ─── Home Router card ─────────────────────────────────────────────────────────
 
 type HomeTab = "wan-matrix" | "full-routes" | "bgp-community"
@@ -679,18 +353,17 @@ function HomeRouterCard({ entry, jumpHosts, settings, pinned, applied, applying,
 
       {/* Tab content */}
       {tab === "wan-matrix" && (
-        <WanMatrix home={home} legs={wanJhLegs} jumpHosts={jumpHosts} pw={settings.pingWeight} />
+        <RouteOptimizerWanMatrixDataGrid home={home} legs={wanJhLegs} jumpHosts={jumpHosts} />
       )}
       {tab === "full-routes" && (
-        <FullRoutesTable routes={fullRoutes} bestId={bestRoute?.id} />
+        <RouteOptimizerFullRoutesDataGrid routes={fullRoutes} bestId={bestRoute?.id} />
       )}
       {tab === "bgp-community" && (
-        <CommRecsTable
+        <RouteOptimizerCommRecsDataGrid
           recs={commRecs}
           homeId={home.id}
           pinned={pinned} applied={applied} applying={applying}
           onPin={onPin} onApply={onApply}
-          threshold={settings.switchThreshold}
         />
       )}
     </Card>
@@ -1167,7 +840,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 && (
                       <>
@@ -1264,51 +937,14 @@ export default function RouteOptimizerPage() {
                             : "нет данных"}
                       </span>
                     </div>
-                    <div className="overflow-x-auto">
-                      <table className="w-full text-xs">
-                        <thead>
-                          <tr className="border-b bg-muted/30">
-                            {["Интерфейс", "Cost", "Score", "Ping", "Speed (dl/ul)"].map((h) => (
-                              <th key={h} className="text-left px-3 py-1.5 font-medium text-muted-foreground">{h}</th>
-                            ))}
-                          </tr>
-                        </thead>
-                        <tbody className="divide-y divide-border/60">
-                          {ospfPreviewError && (
-                            <tr>
-                              <td colSpan={5} className="px-3 py-2 text-destructive">
-                                Ошибка preview: {ospfPreviewError}
-                              </td>
-                            </tr>
-                          )}
-                          {!ospfPreviewLoading && !ospfPreviewError && (ospfPreview?.interfaces.length ?? 0) === 0 && (
-                            <tr>
-                              <td colSpan={5} className="px-3 py-2 text-muted-foreground">
-                                Интерфейсы OSPF не найдены для выбранного сервера.
-                              </td>
-                            </tr>
-                          )}
-                          {(ospfPreview?.interfaces ?? []).map((row) => (
-                            <tr key={`${row.interface}-${row.currentCost}-${row.optimalCost}`}>
-                              <td className="px-3 py-1.5 font-mono">{row.interface}</td>
-                              <td className="px-3 py-1.5 font-mono">
-                                <span className="text-sky-600 dark:text-sky-400">{row.currentCost}</span>
-                                {" → "}
-                                <span className={row.currentCost === row.optimalCost
-                                  ? "text-emerald-600 dark:text-emerald-400"
-                                  : "text-amber-600 dark:text-amber-400"}
-                                >
-                                  {row.optimalCost}
-                                </span>
-                              </td>
-                              <td className="px-3 py-1.5 font-mono">{row.score}</td>
-                              <td className="px-3 py-1.5 font-mono">{row.pingMs}ms</td>
-                              <td className="px-3 py-1.5 font-mono">↓{row.dlMbps} / ↑{row.ulMbps}</td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
+                    <RouteOptimizerOspfPreviewDataGrid
+                      rows={(ospfPreview?.interfaces ?? []).map((row) => ({
+                        id: `${row.interface}-${row.currentCost}-${row.optimalCost}`,
+                        ...row,
+                      }))}
+                      error={ospfPreviewError || null}
+                      loading={ospfPreviewLoading}
+                    />
                   </div>
 
                   {ospfApplyResult && (

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"
@@ -23,6 +28,7 @@ import { useDataSource } from "@/lib/data-source"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
 import { Card, CardContent } from "@/components/ui/card"
+import { DataPageCard } from "@/components/data-page-card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -30,56 +36,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 +72,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 +160,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 +221,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 +262,7 @@ export default function ServersPage() {
   function openAdd() {
     setSheetMode("add"); setEditingId(null)
     setForm(defaultForm); setTestState("idle"); setTestMsg("")
+    setSheetStep(1)
     setOpen(true)
   }
 
@@ -381,7 +276,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 +444,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,273 +511,35 @@ 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>
+          <DataPageCard>
+            <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}
+            />
+          </DataPageCard>
         </div>
       </div>
 
@@ -893,18 +551,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 +599,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 +624,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 +671,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 +691,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 +707,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 +729,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 +740,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"
@@ -24,6 +26,9 @@ import {
   ServerIcon, LayoutDashboardIcon, RefreshCwIcon, CableIcon, LoaderCircleIcon,
   DownloadIcon, UploadIcon,
 } from "lucide-react"
+import { SubusersDataGrid } from "@/components/data-grids/subusers-data-grid"
+import { SettingsAccessSummaryDataGrid } from "@/components/data-grids/settings-access-summary-data-grid"
+import { DataPageCard } from "@/components/data-page-card"
 import { cn } from "@/lib/utils"
 import { requestJson } from "@/shared/api/http-client"
 import { downloadSystemDatabaseBackup, restoreSystemDatabaseBackup } from "@/shared/api/system-database"
@@ -162,17 +167,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 +407,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="i.ivanov@company.io" 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 +447,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>
           )}
 
@@ -577,100 +571,14 @@ function UserSheet({ open, user, onSave, onClose }: {
                 </p>
               </div>
 
-              {/* table header */}
-              {form.subUsers.length > 0 && (
-                <div className="grid items-center gap-2 px-4 py-1.5 bg-muted/20 border-b text-[10px] font-semibold uppercase tracking-widest text-muted-foreground"
-                  style={{ gridTemplateColumns: "1fr 130px 120px 90px 36px 32px" }}>
-                  <span>Логин / описание</span>
-                  <span>Пароль</span>
-                  <span>JH-серверы</span>
-                  <span>IP-клиента</span>
-                  <span />
-                  <span />
-                </div>
-              )}
-
-              {/* rows */}
-              <div className="divide-y divide-border/60">
-                {form.subUsers.length === 0 && !addSubOpen && (
-                  <div className="flex flex-col items-center justify-center py-12 gap-2 text-muted-foreground">
-                    <CableIcon className="size-6 opacity-20" />
-                    <p className="text-sm">Нет GRE-клиентов</p>
-                    <p className="text-xs opacity-60">Добавьте учётки для подключения устройств</p>
-                  </div>
-                )}
-
-                {form.subUsers.map(su => {
-                  const jhs     = servers.filter(s => su.jhServerIds.includes(s.id))
-                  const revealed = revealedIds.has(su.id)
-                  return (
-                    <div key={su.id}
-                      className={cn(
-                        "grid items-center gap-2 px-4 py-2.5 hover:bg-muted/20 transition-colors",
-                        !su.active && "opacity-50",
-                      )}
-                      style={{ gridTemplateColumns: "1fr 130px 120px 90px 36px 32px" }}>
-
-                      {/* login + description */}
-                      <div className="min-w-0">
-                        <p className="text-xs font-mono font-medium truncate">{su.login}</p>
-                        {su.description && (
-                          <p className="text-[11px] text-muted-foreground truncate">{su.description}</p>
-                        )}
-                        {su.lastSeen && (
-                          <p className="text-[10px] text-muted-foreground/50">{su.lastSeen}</p>
-                        )}
-                      </div>
-
-                      {/* password */}
-                      <div className="flex items-center gap-1 min-w-0">
-                        <span className="font-mono text-[11px] truncate flex-1">
-                          {revealed ? su.password : "••••••••••••"}
-                        </span>
-                        <button onClick={() => toggleReveal(su.id)}
-                          className="text-muted-foreground/50 hover:text-muted-foreground shrink-0 transition-colors">
-                          {revealed
-                            ? <EyeOffIcon className="size-3" />
-                            : <EyeIcon    className="size-3" />}
-                        </button>
-                        <button onClick={() => navigator.clipboard.writeText(su.password).catch(() => {})}
-                          className="text-muted-foreground/50 hover:text-muted-foreground shrink-0 transition-colors">
-                          <CopyIcon className="size-3" />
-                        </button>
-                      </div>
-
-                      {/* JH servers */}
-                      <div className="flex flex-wrap gap-1 min-w-0">
-                        {jhs.length === 0
-                          ? <span className="text-[11px] text-muted-foreground/40">—</span>
-                          : jhs.map(jh => (
-                            <span key={jh.id} className="inline-flex items-center gap-1 text-[10px] font-medium
-                              bg-violet-500/10 text-violet-600 dark:text-violet-400 border border-violet-500/20
-                              rounded px-1 py-0.5">
-                              <Flag code={jh.country} size={10} />
-                              {jh.name.split("-").slice(-1)[0]}
-                            </span>
-                          ))
-                        }
-                      </div>
-
-                      {/* client IP */}
-                      <span className="font-mono text-[11px] text-muted-foreground truncate">
-                        {su.clientIp || "—"}
-                      </span>
-
-                      {/* active toggle */}
-                      <Toggle checked={su.active} onChange={() => toggleSubUser(su.id)} />
-
-                      {/* delete */}
-                      <button onClick={() => removeSubUser(su.id)}
-                        className="text-muted-foreground/40 hover:text-destructive transition-colors flex justify-end">
-                        <TrashIcon className="size-3.5" />
-                      </button>
-                    </div>
-                  )
-                })}
-              </div>
+              <SubusersDataGrid
+                subUsers={form.subUsers}
+                servers={servers}
+                revealedIds={revealedIds}
+                onToggleReveal={toggleReveal}
+                onToggleActive={toggleSubUser}
+                onRemove={removeSubUser}
+              />
 
               {/* inline add form */}
               {addSubOpen ? (
@@ -775,22 +683,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 +792,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 +923,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 +1121,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 +1261,7 @@ export default function SettingsPage() {
               label="Подставлять данные EvoBGP"
               description="На страницах Домены, IP-диапазоны, ASN и Communities вместо моков из lib/data"
             >
-              <Toggle
+              <FormToggle
                 checked={evoEnabledDraft}
                 onChange={(v) => setEvoEnabledDraft(v)}
               />
@@ -1496,15 +1373,15 @@ export default function SettingsPage() {
           <CardHeader><CardTitle className="text-base">Каналы уведомлений</CardTitle></CardHeader>
           <CardContent className="divide-y px-5">
             <SettingRow label="Email" description="Отправка уведомлений на admin@routerlists.io">
-              <Toggle checked={notifEmail} onChange={setNotifEmail} />
+              <FormToggle checked={notifEmail} onChange={setNotifEmail} />
             </SettingRow>
             {notifEmail && <div className="py-3"><Input className="text-sm h-8" defaultValue="admin@routerlists.io" /></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 +1390,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>
@@ -1601,66 +1478,17 @@ export default function SettingsPage() {
         </Card>
 
         {/* access summary */}
-        <Card className="overflow-hidden gap-0 py-0">
+        <DataPageCard>
           <div className="flex items-center gap-3 px-4 py-3 border-b">
             <UserIcon className="size-4 text-muted-foreground shrink-0" />
             <span className="text-sm font-medium">Сводка прав доступа</span>
           </div>
-          <div className="overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b text-[11px] text-muted-foreground bg-muted/30">
-                  <th className="text-left font-medium px-4 py-2">Пользователь</th>
-                  <th className="text-left font-medium px-4 py-2">Разделы</th>
-                  <th className="text-left font-medium px-4 py-2">Серверы</th>
-                  <th className="text-left font-medium px-4 py-2">Права записи</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-border/60">
-                {users.map(u => {
-                  const writeSections = u.role === "admin" ? ALL_SECTIONS : u.sections.filter(s => s.level === "write").map(s => s.section)
-                  const readSections  = u.role === "admin" ? [] : u.sections.filter(s => s.level === "read").map(s => s.section)
-                  const accessServers = u.role === "admin" ? servers : servers.filter(s => u.servers.find(p => p.serverId === s.id && p.level !== "none"))
-                  return (
-                    <tr key={u.id} className="hover:bg-muted/20 transition-colors">
-                      <td className="px-4 py-2.5">
-                        <div className="flex items-center gap-2">
-                          <AvatarCircle avatar={u.avatar} active={u.active} />
-                          <span className="text-sm font-medium">{u.name}</span>
-                        </div>
-                      </td>
-                      <td className="px-4 py-2.5 text-xs text-muted-foreground">
-                        {u.role === "admin"
-                          ? <span className="text-violet-600 dark:text-violet-400 font-medium">Все ({ALL_SECTIONS.length})</span>
-                          : <span>{(readSections.length + writeSections.length)} из {ALL_SECTIONS.length}</span>}
-                      </td>
-                      <td className="px-4 py-2.5 text-xs text-muted-foreground">
-                        {u.role === "admin"
-                          ? <span className="text-violet-600 dark:text-violet-400 font-medium">Все ({servers.length})</span>
-                          : <span>{accessServers.length} из {servers.length}</span>}
-                      </td>
-                      <td className="px-4 py-2.5">
-                        <div className="flex flex-wrap gap-1">
-                          {u.role === "admin"
-                            ? <span className="text-[10px] px-1.5 py-0.5 rounded bg-violet-500/10 text-violet-600 dark:text-violet-400 border border-violet-500/20">Полный доступ</span>
-                            : writeSections.length === 0
-                              ? <span className="text-[10px] text-muted-foreground">Только просмотр</span>
-                              : writeSections.slice(0, 3).map(s => (
-                                  <span key={s} className="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20">{s}</span>
-                                ))
-                          }
-                          {u.role !== "admin" && writeSections.length > 3 && (
-                            <span className="text-[10px] text-muted-foreground">+{writeSections.length - 3}</span>
-                          )}
-                        </div>
-                      </td>
-                    </tr>
-                  )
-                })}
-              </tbody>
-            </table>
-          </div>
-        </Card>
+          <SettingsAccessSummaryDataGrid
+            users={users}
+            servers={servers}
+            allSectionsCount={ALL_SECTIONS.length}
+          />
+        </DataPageCard>
       </div>
     )
 
@@ -1741,7 +1569,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 +1591,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 +1681,6 @@ export default function SettingsPage() {
           onCancel={() => {
             if (dbRestoreBusy) return
             setDbRestoreFile(null)
-            if (dbRestoreInputRef.current) dbRestoreInputRef.current.value = ""
           }}
         />
       )}
@@ -1864,6 +1691,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"
@@ -9,6 +10,13 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Flag } from "@/components/flag"
 import { StatusDot } from "@/components/status-dot"
 import { Sparkline } from "@/components/sparkline"
+import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import {
+  UptimeResourcesDataGrid,
+  type UptimeResourceRow,
+} from "@/components/data-grids/uptime-resources-data-grid"
+import { UptimeSpeedHistoryDataGrid } from "@/components/data-grids/uptime-speed-history-data-grid"
 import { PING_PROBE_WARN_RTT_MS } from "@/lib/ping-probe"
 import { cn } from "@/lib/utils"
 import { servers as mockServers, pingProbes as INIT_PROBES, filters, type Server, type Filter } from "@/lib/data"
@@ -212,21 +220,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 +260,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 +304,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,
@@ -910,74 +861,55 @@ function SortIcon({ k, sortKey, sortAsc }: { k: ResSortKey; sortKey: ResSortKey;
 type ResTypeFilter = "all" | "jump-host" | "exit-node" | "home-router"
 
 function ResourcesTab({ resources, serversList, liveApi }: { resources: ServerResource[]; serversList: Server[]; liveApi?: boolean }) {
-  const [sortKey,    setSortKey]    = useState<ResSortKey>("name")
-  const [sortAsc,    setSortAsc]    = useState(true)
   const [resSearch,  setResSearch]  = useState("")
   const [typeFilter, setTypeFilter] = useState<ResTypeFilter>("all")
 
-  const rows = useMemo(() => resources.map((r) => {
+  const rows = useMemo((): UptimeResourceRow[] => resources.map((r) => {
     const hasData = r.hasData !== false
     const ramPct = hasData && r.ramTotal > 0 ? Math.round(r.ramUsed / r.ramTotal * 100) : 0
     const hddPct = hasData && r.hddTotal > 0 ? Math.round(r.hddUsed / r.hddTotal * 100) : 0
     return {
       ...r,
       hasData,
-      server: serversList.find(s => s.id === r.serverId),
+      server: serversList.find(s => s.id === r.serverId)!,
       ramPct,
       hddPct,
     }
-  }).filter(r => r.server !== undefined), [resources, serversList])
+  }).filter(r => serversList.some(s => s.id === r.serverId)), [resources, serversList])
 
   // KPI aggregates (только серверы с реальными сэмплами за окно)
-  const onlineWithSamples = rows.filter(r => r.server!.status === "online" && r.hasData)
+  const onlineWithSamples = rows.filter(r => r.server.status === "online" && r.hasData)
   const avgCpu  = onlineWithSamples.length ? Math.round(onlineWithSamples.reduce((s, r) => s + r.cpu, 0) / onlineWithSamples.length) : 0
   const avgRam  = onlineWithSamples.length ? Math.round(onlineWithSamples.reduce((s, r) => s + r.ramPct, 0) / onlineWithSamples.length) : 0
-  const highCpu = rows.filter(r => r.server!.status === "online" && r.hasData && r.cpu >= 85).length
-  const highRam = rows.filter(r => r.server!.status === "online" && r.hasData && r.ramPct >= 85).length
-  const highHdd = rows.filter(r => r.server!.status === "online" && r.hasData && r.hddPct >= 85).length
+  const highCpu = rows.filter(r => r.server.status === "online" && r.hasData && r.cpu >= 85).length
+  const highRam = rows.filter(r => r.server.status === "online" && r.hasData && r.ramPct >= 85).length
+  const highHdd = rows.filter(r => r.server.status === "online" && r.hasData && r.hddPct >= 85).length
 
   // Alerts
   const alerts = useMemo(() =>
-    rows.filter(r => r.server!.status === "online" && r.hasData && (r.cpu >= 85 || r.ramPct >= 85 || r.hddPct >= 85 || (r.temp ?? 0) >= 70)),
+    rows.filter(r => r.server.status === "online" && r.hasData && (r.cpu >= 85 || r.ramPct >= 85 || r.hddPct >= 85 || (r.temp ?? 0) >= 70)),
     [rows],
   )
 
   // Filtered + sorted
   const visible = useMemo(() => {
     let list = rows
-    if (typeFilter !== "all") list = list.filter(r => r.server!.type === typeFilter)
+    if (typeFilter !== "all") list = list.filter(r => r.server.type === typeFilter)
     if (resSearch.trim()) {
       const q = resSearch.toLowerCase()
       list = list.filter(r =>
-        r.server!.name.toLowerCase().includes(q) ||
-        r.server!.site.toLowerCase().includes(q) ||
+        r.server.name.toLowerCase().includes(q) ||
+        r.server.site.toLowerCase().includes(q) ||
         r.boardName.toLowerCase().includes(q)
       )
     }
-    list = [...list].sort((a, b) => {
-      let diff = 0
-      switch (sortKey) {
-        case "name":   diff = a.server!.name.localeCompare(b.server!.name); break
-        case "cpu":    diff = a.cpu    - b.cpu;    break
-        case "ram":    diff = a.ramPct - b.ramPct; break
-        case "hdd":    diff = a.hddPct - b.hddPct; break
-        case "uptime": diff = a.uptimeSeconds - b.uptimeSeconds; break
-        case "temp":   diff = (a.temp ?? -1) - (b.temp ?? -1); break
-      }
-      return sortAsc ? diff : -diff
-    })
     return list
-  }, [rows, typeFilter, resSearch, sortKey, sortAsc])
-
-  function toggleSort(k: ResSortKey) {
-    if (sortKey === k) setSortAsc(v => !v)
-    else { setSortKey(k); setSortAsc(false) } // default desc for metrics
-  }
+  }, [rows, typeFilter, resSearch])
 
   function exportCsv() {
     const header = ["Сервер", "Тип", "Площадка", "CPU %", "RAM %", "RAM использ.", "RAM всего", "HDD %", "HDD использ.", "HDD всего", "Uptime", "Температура °C", "RouterOS"]
     const rowsCsv = visible.map(r => {
-      const s = r.server!
+      const s = r.server
       return [s.name, s.type, s.site, r.cpu, r.ramPct, fmtMB(r.ramUsed), fmtMB(r.ramTotal),
               r.hddPct, fmtMB(r.hddUsed), fmtMB(r.hddTotal), fmtUptime(r.uptimeSeconds),
               r.temp ?? "", s.os].join(",")
@@ -1010,7 +942,7 @@ function ResourcesTab({ resources, serversList, liveApi }: { resources: ServerRe
           <AlertDescription>
             <div className="flex flex-wrap gap-1.5">
               {alerts.map(r => {
-                const s = r.server!
+                const s = r.server
                 const issues: string[] = []
                 if (r.cpu >= 85)    issues.push(`CPU ${r.cpu}%`)
                 if (r.ramPct >= 85) issues.push(`RAM ${r.ramPct}%`)
@@ -1050,236 +982,27 @@ function ResourcesTab({ resources, serversList, liveApi }: { resources: ServerRe
         ))}
       </div>
 
-      {/* ── Toolbar ───────────────────────────────────────────────────────── */}
-      <div className="flex items-center gap-3 flex-wrap">
-        {/* Type filter */}
-        <div className="flex items-center gap-0.5 rounded-md border border-border bg-muted/40 p-0.5 shrink-0">
-          {typeOpts.map(o => (
-            <button key={o.value} onClick={() => setTypeFilter(o.value)}
-              className={cn(
-                "px-2.5 py-1 text-xs rounded transition-colors whitespace-nowrap",
-                typeFilter === o.value
-                  ? "bg-background text-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground",
-              )}>
-              {o.label}
-            </button>
-          ))}
-        </div>
-
-        {/* Search */}
-        <div className="relative min-w-[180px] flex-1 max-w-xs">
-          <SearchIcon className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground pointer-events-none" />
-          <Input className="pl-8 h-8 text-sm" placeholder="Поиск по имени, площадке…"
-            value={resSearch} onChange={e => setResSearch(e.target.value)} />
-          {resSearch && (
-            <button onClick={() => setResSearch("")}
-              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
-              <XIcon className="size-3.5" />
-            </button>
-          )}
-        </div>
-
-        <span className="text-xs text-muted-foreground ml-auto shrink-0">
-          {visible.length} из {rows.length} серверов
-        </span>
-
-        {/* Export CSV */}
-        <Button variant="outline" size="sm" className="h-8 gap-1.5 shrink-0" onClick={exportCsv}>
-          <DownloadIcon className="size-3.5" />CSV
-        </Button>
-      </div>
-
       {/* ── Table ─────────────────────────────────────────────────────────── */}
-      <Card className="overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b bg-muted/30 text-xs text-muted-foreground font-medium">
-
-                {/* Sortable: name */}
-                <th className="text-left px-5 py-3 cursor-pointer hover:text-foreground transition-colors select-none"
-                  onClick={() => toggleSort("name")}>
-                  <span className="flex items-center gap-0.5">
-                    Сервер <SortIcon k="name" sortKey={sortKey} sortAsc={sortAsc} />
-                  </span>
-                </th>
-
-                <th className="text-left px-4 py-3 hidden md:table-cell whitespace-nowrap">Модель · ROS</th>
-
-                {/* Sortable: cpu */}
-                <th className="text-left px-4 py-3 min-w-[160px] cursor-pointer hover:text-foreground transition-colors select-none"
-                  onClick={() => toggleSort("cpu")}>
-                  <span className="flex items-center gap-1.5">
-                    <CpuIcon className="size-3.5" />CPU
-                    <SortIcon k="cpu" sortKey={sortKey} sortAsc={sortAsc} />
-                  </span>
-                </th>
-
-                {/* Sortable: ram */}
-                <th className="text-left px-4 py-3 min-w-[175px] cursor-pointer hover:text-foreground transition-colors select-none"
-                  onClick={() => toggleSort("ram")}>
-                  <span className="flex items-center gap-1.5">
-                    <HardDriveIcon className="size-3.5" />RAM
-                    <SortIcon k="ram" sortKey={sortKey} sortAsc={sortAsc} />
-                  </span>
-                </th>
-
-                {/* Sortable: hdd */}
-                <th className="text-left px-4 py-3 min-w-[175px] cursor-pointer hover:text-foreground transition-colors select-none"
-                  onClick={() => toggleSort("hdd")}>
-                  <span className="flex items-center gap-1.5">
-                    <HardDriveIcon className="size-3.5" />Диск
-                    <SortIcon k="hdd" sortKey={sortKey} sortAsc={sortAsc} />
-                  </span>
-                </th>
-
-                {/* Sortable: uptime */}
-                <th className="text-left px-4 py-3 cursor-pointer hover:text-foreground transition-colors select-none"
-                  onClick={() => toggleSort("uptime")}>
-                  <span className="flex items-center gap-1.5">
-                    <ClockIcon className="size-3.5" />Uptime
-                    <SortIcon k="uptime" sortKey={sortKey} sortAsc={sortAsc} />
-                  </span>
-                </th>
-
-                {/* Sortable: temp */}
-                <th className="text-left px-4 py-3 cursor-pointer hover:text-foreground transition-colors select-none"
-                  onClick={() => toggleSort("temp")}>
-                  <span className="flex items-center gap-1.5">
-                    <ThermometerIcon className="size-3.5" />°C
-                    <SortIcon k="temp" sortKey={sortKey} sortAsc={sortAsc} />
-                  </span>
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-border">
-              {visible.length === 0 && (
-                <tr>
-                  <td colSpan={7} className="text-center text-sm text-muted-foreground py-12">
-                    <SearchIcon className="size-6 mx-auto mb-2 opacity-20" />
-                    Ничего не найдено
-                  </td>
-                </tr>
-              )}
-              {visible.map(r => {
-                const srv = r.server!
-                const offline = srv.status !== "online"
-                const hasSamples = r.hasData !== false
-                const noMetrics = offline || !hasSamples
-                const isCrit  = !noMetrics && (r.cpu >= 85 || r.ramPct >= 85 || r.hddPct >= 85 || (r.temp ?? 0) >= 70)
-                const cpuColor = r.cpu >= 85 ? "hsl(0 84% 60%)" : r.cpu >= 70 ? "hsl(38 92% 50%)" : "hsl(142 76% 36%)"
-                return (
-                  <tr key={r.serverId} className={cn(
-                    "hover:bg-muted/30 transition-colors",
-                    offline && "opacity-50",
-                    isCrit  && "bg-red-500/3",
-                  )}>
-
-                    {/* Server */}
-                    <td className="px-5 py-3">
-                      <div className="flex items-center gap-2 flex-wrap">
-                        {isCrit && <AlertCircleIcon className="size-3.5 text-red-500 shrink-0" />}
-                        {!isCrit && <StatusDot status={srv.status} pulse={!offline} />}
-                        <Flag code={srv.country} size={16} />
-                        <span className="font-mono font-semibold">{srv.name}</span>
-                        <TypeChip type={srv.type} />
-                        <span className="text-xs text-muted-foreground hidden xl:inline">{srv.site}</span>
-                        {!offline && r.hasData === false && (
-                          <span className="text-[10px] rounded border border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-400 px-1.5 py-0.5">
-                            нет данных
-                          </span>
-                        )}
-                      </div>
-                    </td>
-
-                    {/* Board + ROS */}
-                    <td className="px-4 py-3 hidden md:table-cell">
-                      <div className="flex flex-col leading-tight">
-                        <span className="font-mono text-xs text-muted-foreground">{hasSamples ? r.boardName : "—"}</span>
-                        <span className="text-[10px] text-muted-foreground/50">{srv.os}</span>
-                      </div>
-                    </td>
-
-                    {/* CPU */}
-                    <td className="px-4 py-3">
-                      {noMetrics
-                        ? <span className="text-xs text-muted-foreground/30">{offline ? "—" : "нет опроса"}</span>
-                        : (
-                          <div className="flex flex-col gap-1.5 min-w-[140px]">
-                            <div className="flex items-center gap-2">
-                              <span className={cn("font-mono text-sm font-semibold tabular-nums w-10 shrink-0", resPctColor(r.cpu))}>
-                                {r.cpu}%
-                              </span>
-                              <MiniBar pct={r.cpu} className="flex-1" />
-                            </div>
-                            <Sparkline data={r.cpuHistory} width={120} height={18} color={cpuColor} filled />
-                          </div>
-                        )}
-                    </td>
-
-                    {/* RAM */}
-                    <td className="px-4 py-3">
-                      {noMetrics
-                        ? <span className="text-xs text-muted-foreground/30">{offline ? "—" : "нет опроса"}</span>
-                        : (
-                          <div className="flex flex-col gap-1.5 min-w-[155px]">
-                            <div className="flex items-center justify-between text-xs">
-                              <span className={cn("font-mono font-semibold", resPctColor(r.ramPct))}>{r.ramPct}%</span>
-                              <span className="text-muted-foreground/60 font-mono text-[10px]">
-                                {fmtMB(r.ramUsed)}/{fmtMB(r.ramTotal)}
-                              </span>
-                            </div>
-                            <MiniBar pct={r.ramPct} />
-                          </div>
-                        )}
-                    </td>
-
-                    {/* HDD */}
-                    <td className="px-4 py-3">
-                      {noMetrics
-                        ? <span className="text-xs text-muted-foreground/30">{offline ? "—" : "нет опроса"}</span>
-                        : (
-                          <div className="flex flex-col gap-1.5 min-w-[155px]">
-                            <div className="flex items-center justify-between text-xs">
-                              <span className={cn("font-mono font-semibold", resPctColor(r.hddPct))}>{r.hddPct}%</span>
-                              <span className="text-muted-foreground/60 font-mono text-[10px]">
-                                {fmtMB(r.hddUsed)}/{fmtMB(r.hddTotal)}
-                              </span>
-                            </div>
-                            <MiniBar pct={r.hddPct} />
-                          </div>
-                        )}
-                    </td>
-
-                    {/* Uptime */}
-                    <td className="px-4 py-3">
-                      <span className="font-mono text-xs text-muted-foreground">
-                        {noMetrics ? (offline ? "—" : "—") : fmtUptime(r.uptimeSeconds)}
-                      </span>
-                    </td>
-
-                    {/* Temp */}
-                    <td className="px-4 py-3">
-                      {r.temp !== undefined && !noMetrics ? (
-                        <span className={cn("font-mono text-sm font-semibold tabular-nums",
-                          r.temp >= 70 ? "text-red-600 dark:text-red-400"
-                          : r.temp >= 55 ? "text-amber-600 dark:text-amber-400"
-                          : "text-muted-foreground",
-                        )}>
-                          {r.temp}°C
-                        </span>
-                      ) : (
-                        <span className="text-muted-foreground/30 text-xs">—</span>
-                      )}
-                    </td>
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
-        </div>
-      </Card>
+      <DataPageCard>
+        <DataPageToolbar
+          segmented={{
+            value: typeFilter,
+            onChange: setTypeFilter,
+            options: typeOpts,
+          }}
+          search={resSearch}
+          onSearchChange={setResSearch}
+          searchPlaceholder="Поиск по имени, площадке…"
+          countLabel={`${visible.length} из ${rows.length} серверов`}
+          actions={
+            <Button variant="outline" size="sm" className="h-8 gap-1.5 shrink-0" onClick={exportCsv}>
+              <DownloadIcon className="size-3.5" />
+              CSV
+            </Button>
+          }
+        />
+        <UptimeResourcesDataGrid rows={visible} />
+      </DataPageCard>
 
       <p className="text-xs text-muted-foreground/40 text-center">
         {liveApi
@@ -2401,7 +2124,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">
@@ -2528,114 +2251,13 @@ export default function UptimePage() {
 
               {/* ── history ── */}
               {speedRuns.length > 0 && (
-                <Card className="overflow-hidden">
-                  <div className="flex items-center justify-between px-4 py-3 border-b">
+                <DataPageCard>
+                  <div className="flex items-center justify-between px-5 py-3 border-b">
                     <p className="text-sm font-medium">История тестов</p>
                     <span className="text-xs text-muted-foreground">{speedRuns.length} запусков</span>
                   </div>
-                  <div className="overflow-x-auto">
-                    <table className="w-full text-xs">
-                      <thead>
-                        <tr className="border-b bg-muted/40 text-muted-foreground">
-                          {["Время", "Маршрут", "Параметры", "Статус", "TX avg", "RX avg", "Ping после BT"].map(h => (
-                            <th key={h} className="px-4 py-2.5 text-left font-medium whitespace-nowrap">{h}</th>
-                          ))}
-                        </tr>
-                      </thead>
-                      <tbody className="divide-y divide-border/60">
-                        {speedRuns.map((run) => {
-                          const src = allServers.find((s) => s.id === run.srcServerId)
-                          const dst = allServers.find((s) => s.id === run.dstServerId)
-                          const maxVal = Math.max(run.txAvgMbps, run.rxAvgMbps, 1)
-                          return (
-                            <tr key={run.id} className="hover:bg-muted/20 transition-colors">
-                              <td className="px-4 py-2.5 text-muted-foreground whitespace-nowrap tabular-nums font-mono">
-                                {new Date(run.startedAt).toLocaleString("ru-RU", { hour: "2-digit", minute: "2-digit", second: "2-digit", day: "2-digit", month: "2-digit" })}
-                              </td>
-                              <td className="px-4 py-2.5 font-mono whitespace-nowrap">
-                                <div className="flex items-center gap-1.5">
-                                  <Flag code={src?.country ?? "UN"} size={13} />
-                                  <span>{src?.name ?? run.srcServerId}</span>
-                                  <ArrowRightIcon className="size-3 text-muted-foreground" />
-                                  <Flag code={dst?.country ?? "UN"} size={13} />
-                                  <span>{dst?.name ?? run.dstServerId}</span>
-                                </div>
-                                <div className="text-[10px] text-muted-foreground mt-0.5 font-mono">
-                                  {run.srcInterfaceAddress && run.dstInterfaceAddress
-                                    ? `${run.srcInterfaceAddress} → ${run.dstInterfaceAddress}`
-                                    : "внутренние IP: auto/не указаны"}
-                                </div>
-                              </td>
-                              <td className="px-4 py-2.5 text-muted-foreground whitespace-nowrap">
-                                <div className="flex items-center gap-1">
-                                  <span className="inline-flex items-center rounded border px-1.5 py-0.5 text-[10px] font-semibold bg-muted/60 border-border/60">
-                                    {run.protocol.toUpperCase()}
-                                  </span>
-                                  <span className="text-muted-foreground/60">·</span>
-                                  <span>{run.direction}</span>
-                                  <span className="text-muted-foreground/60">·</span>
-                                  <span>{run.durationSec}s</span>
-                                </div>
-                              </td>
-                              <td className="px-4 py-2.5">
-                                {run.status === "running" ? (
-                                  <span className="inline-flex items-center gap-1 text-[var(--status-degraded-fg)]">
-                                    <RefreshCwIcon className="size-3 animate-spin" />running
-                                  </span>
-                                ) : run.status === "error" ? (
-                                  <span className="text-[var(--status-offline-fg)]">error</span>
-                                ) : (
-                                  <span className="text-[var(--status-online-fg)]">done</span>
-                                )}
-                              </td>
-                              <td className="px-4 py-2.5">
-                                <div className="flex items-center gap-2 min-w-[120px]">
-                                  <div className="w-16 h-1.5 rounded-full bg-muted overflow-hidden">
-                                    <div className="h-full rounded-full bg-[var(--chart-tx)]"
-                                      style={{ width: `${(run.txAvgMbps / maxVal) * 100}%` }} />
-                                  </div>
-                                  <span className="font-mono tabular-nums text-[var(--chart-tx)] font-medium whitespace-nowrap">
-                                    {run.txAvgMbps} Мбит/с
-                                  </span>
-                                </div>
-                              </td>
-                              <td className="px-4 py-2.5">
-                                <div className="flex items-center gap-2 min-w-[120px]">
-                                  <div className="w-16 h-1.5 rounded-full bg-muted overflow-hidden">
-                                    <div className="h-full rounded-full bg-[var(--chart-rx)]"
-                                      style={{ width: `${(run.rxAvgMbps / maxVal) * 100}%` }} />
-                                  </div>
-                                  <span className="font-mono tabular-nums text-[var(--chart-rx)] font-medium whitespace-nowrap">
-                                    {run.rxAvgMbps} Мбит/с
-                                  </span>
-                                </div>
-                              </td>
-                              <td className="px-4 py-2.5 font-mono tabular-nums whitespace-nowrap">
-                                {run.status !== "done" ? "—" : run.afterBtPing?.error ? (
-                                  <span className="text-[var(--status-offline-fg)]" title={run.afterBtPing.error}>
-                                    ошибка
-                                  </span>
-                                ) : run.afterBtPing?.rttMs != null ? (
-                                  <span className="text-violet-600 dark:text-violet-400">
-                                    {run.afterBtPing.rttMs} мс
-                                    {run.afterBtPing.lossPct != null && run.afterBtPing.lossPct > 0 && (
-                                      <span className="text-amber-600 dark:text-amber-400"> · {run.afterBtPing.lossPct}%</span>
-                                    )}
-                                  </span>
-                                ) : (
-                                  <span className="text-amber-600 dark:text-amber-400">
-                                    timeout
-                                    {run.afterBtPing?.lossPct != null && <span> · {run.afterBtPing.lossPct}%</span>}
-                                  </span>
-                                )}
-                              </td>
-                            </tr>
-                          )
-                        })}
-                      </tbody>
-                    </table>
-                  </div>
-                </Card>
+                  <UptimeSpeedHistoryDataGrid runs={speedRuns} servers={allServers} />
+                </DataPageCard>
               )}
 
             </div>
@@ -2824,7 +2446,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 +2624,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 +2637,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 +2648,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 +2678,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 +2689,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 +2791,7 @@ export default function UptimePage() {
               </div>
             </div>
 
-            <Field
+            <FormField
               label="Источник (кто пингует)"
               hint="— весь каталог, в т.ч. выключенные в инвентаре (Home Router часто «выкл.», но доступен по LAN для ping)"
             >
@@ -3178,9 +2800,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 +2810,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)/vxlan/page.tsx

@@ -4,17 +4,14 @@ import { useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
 import { vxlanTunnels, servers } from "@/lib/data"
 import type { VxlanTunnel } from "@/lib/data"
-import { Flag } from "@/components/flag"
 import { Card, CardContent } from "@/components/ui/card"
+import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import { VxlanDataGrid } from "@/components/data-grids/vxlan-data-grid"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import {
-  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
-  DropdownMenuItem, DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu"
-import {
-  SearchIcon, NetworkIcon, PlusIcon, MoreHorizontalIcon,
-  Trash2Icon, PencilIcon, PowerIcon, CopyIcon, CheckIcon,
+  NetworkIcon, PlusIcon, CopyIcon, CheckIcon,
   CodeXmlIcon, LayersIcon,
 } from "lucide-react"
 import {
@@ -125,100 +122,7 @@ function ExportSheet({ open, tunnel, onClose }: {
   )
 }
 
-// ─── Tunnel row ───────────────────────────────────────────────────────────────
-
-function TunnelRow({
-  tunnel,
-  onExport,
-}: {
-  tunnel: VxlanTunnel
-  onExport: () => void
-}) {
-  const srv = serverFor(tunnel.serverId)
-
-  return (
-    <div className={cn(
-      "grid grid-cols-[10px_1fr_1fr_auto_auto_auto_auto_auto_auto_auto_auto] gap-3 px-4 py-3 items-center border-b last:border-b-0 hover:bg-muted/30 transition-colors",
-      !tunnel.enabled && "opacity-50",
-    )}>
-      {/* status dot */}
-      <span className={cn(
-        "size-2 rounded-full shrink-0",
-        tunnel.status === "up" ? "bg-emerald-500" : "bg-red-500",
-      )} />
-
-      {/* name */}
-      <div className="min-w-0">
-        <p className="font-mono font-medium text-sm truncate">{tunnel.name}</p>
-        <p className="text-[11px] text-muted-foreground font-mono">VTEP: {tunnel.vtepIp}</p>
-      </div>
-
-      {/* server */}
-      <div className="flex items-center gap-1.5 text-xs text-muted-foreground min-w-0">
-        {srv && <><Flag code={srv.country} size={12} /><span className="font-mono truncate">{srv.name}</span></>}
-      </div>
-
-      {/* VNI */}
-      <div className="text-center">
-        <p className="text-[10px] text-muted-foreground">VNI</p>
-        <p className="font-mono text-sm">{tunnel.vni}</p>
-      </div>
-
-      {/* Port */}
-      <div className="text-center">
-        <p className="text-[10px] text-muted-foreground">Port</p>
-        <p className="font-mono text-sm">{tunnel.dstPort}</p>
-      </div>
-
-      {/* Remote VTEPs */}
-      <div className="text-center">
-        <p className="text-[10px] text-muted-foreground">Remote VTEP</p>
-        <p className="font-mono text-sm">{tunnel.remoteVteps.length}</p>
-      </div>
-
-      {/* ARP Proxy */}
-      <span className={cn("text-[10px] font-mono px-1.5 py-0.5 rounded",
-        tunnel.arpProxy ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-muted text-muted-foreground")}>
-        ARP {tunnel.arpProxy ? "✓" : "✗"}
-      </span>
-
-      {/* MAC learning */}
-      <span className={cn("text-[10px] font-mono px-1.5 py-0.5 rounded",
-        tunnel.macLearning ? "bg-sky-500/10 text-sky-600 dark:text-sky-400" : "bg-muted text-muted-foreground")}>
-        MAC {tunnel.macLearning ? "✓" : "✗"}
-      </span>
-
-      {/* Status badge */}
-      <span className={cn(
-        "text-[11px] font-mono px-2 py-0.5 rounded border whitespace-nowrap",
-        tunnel.status === "up"
-          ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
-          : "bg-red-500/10 text-red-500 border-red-500/20",
-      )}>
-        {tunnel.status === "up" ? "UP" : "DOWN"}
-      </span>
-
-      {/* menu */}
-      <DropdownMenu>
-        <DropdownMenuTrigger render={
-          <Button variant="ghost" size="icon" className="size-7">
-            <MoreHorizontalIcon className="size-4" />
-          </Button>
-        } />
-        <DropdownMenuContent side="bottom" align="end">
-          <DropdownMenuItem onClick={onExport}><CodeXmlIcon className="size-4" />Экспорт .rsc</DropdownMenuItem>
-          <DropdownMenuItem><PencilIcon className="size-4" />Редактировать</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem><PowerIcon className="size-4" />{tunnel.enabled ? "Отключить" : "Включить"}</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem variant="destructive"><Trash2Icon className="size-4" />Удалить</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  )
-}
-
-// ════════════════════════════════════════════════════════════════════════════
+// ─── Export Sheet ─────────────────────────────────────────────────────────────
 export default function VxlanPage() {
   const [search, setSearch]           = useState("")
   const [exportTunnel, setExportTunnel] = useState<VxlanTunnel | null>(null)
@@ -284,45 +188,19 @@ export default function VxlanPage() {
           </div>
 
           {/* Table */}
-          <Card>
-            <div className="flex items-center gap-3 px-4 py-3 border-b">
-              <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[240px]">
-                <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="Поиск по имени, VNI, серверу…"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                />
-              </div>
-              <span className="text-sm text-muted-foreground ml-auto">{filtered.length} туннелей</span>
-            </div>
-
-            {/* header */}
-            <div className="grid grid-cols-[10px_1fr_1fr_auto_auto_auto_auto_auto_auto_auto_auto] gap-3 px-4 py-2 border-b text-[10px] font-semibold uppercase tracking-widest text-muted-foreground bg-muted/20">
-              <span />
-              <span>Имя / VTEP IP</span>
-              <span>Сервер</span>
-              <span>VNI</span>
-              <span>Port</span>
-              <span>Remote</span>
-              <span />
-              <span />
-              <span>Статус</span>
-              <span />
-            </div>
-
-            {filtered.length === 0 ? (
-              <div className="flex flex-col items-center justify-center py-16 text-center text-muted-foreground">
-                <NetworkIcon className="size-10 mb-3 opacity-20" />
-                <p className="text-sm font-medium">VXLAN туннели не найдены</p>
-              </div>
-            ) : (
-              filtered.map((t) => (
-                <TunnelRow key={t.id} tunnel={t} onExport={() => setExportTunnel(t)} />
-              ))
-            )}
-          </Card>
+          <DataPageCard>
+            <DataPageToolbar
+              search={search}
+              onSearchChange={setSearch}
+              searchPlaceholder="Поиск по имени, VNI, серверу…"
+              countLabel={`${filtered.length} туннелей`}
+            />
+            <VxlanDataGrid
+              tunnels={filtered}
+              servers={servers}
+              onExport={setExportTunnel}
+            />
+          </DataPageCard>
 
           {/* Reference */}
           <Card>

app/(main)/wireguard/page.tsx

@@ -3,34 +3,28 @@
 import { useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
 import { servers } from "@/lib/data"
-import type { WireGuardInterface, WireGuardPeer } from "@/lib/data"
-import { Flag } from "@/components/flag"
-import { Card, CardContent } from "@/components/ui/card"
+import type { WireGuardInterface } from "@/lib/data"
+import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import {
+  WireguardDataGrid,
+  type WgIfaceWithServer,
+} from "@/components/data-grids/wireguard-data-grid"
 import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
 import {
   Sheet, SheetContent, SheetHeader, SheetTitle,
   SheetDescription, SheetFooter, SheetClose,
 } from "@/components/ui/sheet"
 import {
-  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
-  DropdownMenuItem, DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu"
-import {
-  ShieldCheckIcon, PlusIcon, SearchIcon, KeyRoundIcon,
-  ChevronDownIcon, ChevronRightIcon, MoreHorizontalIcon,
-  PencilIcon, Trash2Icon, PowerIcon, CopyIcon, CheckIcon,
-  CodeXmlIcon, UsersIcon, ActivityIcon, ArrowDownIcon, ArrowUpIcon,
+  ShieldCheckIcon, PlusIcon, KeyRoundIcon,
+  CodeXmlIcon, UsersIcon, ActivityIcon,
+  CopyIcon, CheckIcon,
 } from "lucide-react"
 
 // ─── collect all WireGuard interfaces from all servers ────────────────────────
 
-interface WgIfaceWithServer extends WireGuardInterface {
-  serverId: string
-  serverName: string
-  serverCountry: string
-}
-
 function collectInterfaces(): WgIfaceWithServer[] {
   const result: WgIfaceWithServer[] = []
   for (const srv of servers) {
@@ -48,19 +42,6 @@ function collectInterfaces(): WgIfaceWithServer[] {
 
 // ─── helpers ──────────────────────────────────────────────────────────────────
 
-function fmtBytes(n: number | undefined): string {
-  if (!n) return "—"
-  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)} ГБ`
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)} МБ`
-  if (n >= 1_000) return `${(n / 1_000).toFixed(0)} КБ`
-  return `${n} Б`
-}
-
-function truncKey(key: string): string {
-  if (key.length <= 20) return key
-  return `${key.slice(0, 8)}…${key.slice(-8)}`
-}
-
 // ─── RSC generator ────────────────────────────────────────────────────────────
 
 function generateWgRsc(iface: WgIfaceWithServer): string {
@@ -89,161 +70,6 @@ function generateWgRsc(iface: WgIfaceWithServer): string {
   return lines.join("\n")
 }
 
-// ─── Peer row ─────────────────────────────────────────────────────────────────
-
-function PeerRow({ peer }: { peer: WireGuardPeer }) {
-  return (
-    <div className="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-3 px-4 py-2.5 items-center text-xs border-t border-border/50 bg-muted/20">
-      {/* public key */}
-      <div className="flex items-center gap-1.5 min-w-0">
-        <KeyRoundIcon className="size-3 text-muted-foreground shrink-0" />
-        <span className="font-mono text-muted-foreground truncate" title={peer.publicKey}>
-          {truncKey(peer.publicKey)}
-        </span>
-      </div>
-      {/* allowed IPs */}
-      <div className="font-mono text-muted-foreground truncate">
-        {peer.allowedIps.join(", ")}
-      </div>
-      {/* handshake */}
-      <span className={cn(
-        "font-mono text-[11px] whitespace-nowrap",
-        peer.latestHandshake ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground",
-      )}>
-        {peer.latestHandshake ?? "нет рукопожатия"}
-      </span>
-      {/* rx / tx */}
-      <div className="flex items-center gap-2 text-muted-foreground whitespace-nowrap">
-        <span className="flex items-center gap-0.5">
-          <ArrowDownIcon className="size-3 text-emerald-500" />{fmtBytes(peer.transferRx)}
-        </span>
-        <span className="flex items-center gap-0.5">
-          <ArrowUpIcon className="size-3 text-blue-400" />{fmtBytes(peer.transferTx)}
-        </span>
-      </div>
-      {/* endpoint */}
-      <span className="font-mono text-muted-foreground/60 text-[11px]">{peer.endpoint ?? "—"}</span>
-    </div>
-  )
-}
-
-// ─── Interface card ───────────────────────────────────────────────────────────
-
-function IfaceRow({
-  iface,
-  expanded,
-  onToggleExpand,
-  onExport,
-}: {
-  iface: WgIfaceWithServer
-  expanded: boolean
-  onToggleExpand: () => void
-  onExport: () => void
-}) {
-  const onlinePeers = iface.peers.filter((p) => !!p.latestHandshake).length
-
-  return (
-    <div className={cn("border-b last:border-b-0", !iface.enabled && "opacity-50")}>
-      <div
-        className="grid grid-cols-[20px_1fr_auto_auto_auto_auto_auto_auto] gap-3 px-4 py-3 items-center hover:bg-muted/30 transition-colors cursor-pointer"
-        onClick={onToggleExpand}
-      >
-        {/* expand */}
-        <button className="text-muted-foreground" onClick={(e) => { e.stopPropagation(); onToggleExpand() }}>
-          {expanded
-            ? <ChevronDownIcon className="size-3.5" />
-            : <ChevronRightIcon className="size-3.5" />}
-        </button>
-
-        {/* name + server */}
-        <div className="min-w-0">
-          <div className="flex items-center gap-2">
-            <span className={cn(
-              "size-2 rounded-full shrink-0",
-              iface.status === "up" ? "bg-emerald-500 animate-pulse" : "bg-red-500",
-            )} />
-            <span className="font-mono font-semibold text-sm">{iface.name}</span>
-          </div>
-          <div className="flex items-center gap-1.5 mt-0.5 text-[11px] text-muted-foreground font-mono">
-            <Flag code={iface.serverCountry} size={12} />
-            {iface.serverName}
-          </div>
-        </div>
-
-        {/* port */}
-        <div className="text-center">
-          <p className="text-[10px] text-muted-foreground">Порт</p>
-          <p className="font-mono text-sm">{iface.listenPort}</p>
-        </div>
-
-        {/* MTU */}
-        <div className="text-center">
-          <p className="text-[10px] text-muted-foreground">MTU</p>
-          <p className="font-mono text-sm">{iface.mtu}</p>
-        </div>
-
-        {/* peers */}
-        <div className="text-center">
-          <p className="text-[10px] text-muted-foreground">Пиров</p>
-          <p className="font-mono text-sm">
-            <span className="text-emerald-600 dark:text-emerald-400">{onlinePeers}</span>
-            <span className="text-muted-foreground">/{iface.peers.length}</span>
-          </p>
-        </div>
-
-        {/* status badge */}
-        <span className={cn(
-          "text-[11px] font-mono px-2 py-0.5 rounded border",
-          iface.status === "up"
-            ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
-            : "bg-red-500/10 text-red-500 border-red-500/20",
-        )}>
-          {iface.status === "up" ? "UP" : "DOWN"}
-        </span>
-
-        {/* menu */}
-        <DropdownMenu>
-          <DropdownMenuTrigger render={
-            <Button variant="ghost" size="icon" className="size-7" onClick={(e) => e.stopPropagation()}>
-              <MoreHorizontalIcon className="size-4" />
-            </Button>
-          } />
-          <DropdownMenuContent side="bottom" align="end">
-            <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onExport() }}>
-              <CodeXmlIcon className="size-4" />Экспорт .rsc
-            </DropdownMenuItem>
-            <DropdownMenuItem><PencilIcon className="size-4" />Редактировать</DropdownMenuItem>
-            <DropdownMenuItem><PlusIcon className="size-4" />Добавить пира</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem><PowerIcon className="size-4" />{iface.enabled ? "Отключить" : "Включить"}</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem variant="destructive"><Trash2Icon className="size-4" />Удалить</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-
-      {/* expanded peers */}
-      {expanded && iface.peers.length > 0 && (
-        <div>
-          <div className="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-3 px-4 py-1.5 bg-muted/10 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground border-t border-border/50">
-            <span>Public Key</span>
-            <span>Allowed IPs</span>
-            <span>Последнее рукопожатие</span>
-            <span>RX / TX</span>
-            <span>Endpoint</span>
-          </div>
-          {iface.peers.map((p) => <PeerRow key={p.publicKey} peer={p} />)}
-        </div>
-      )}
-      {expanded && iface.peers.length === 0 && (
-        <div className="px-4 py-4 text-xs text-muted-foreground text-center border-t border-border/50">
-          Нет пиров
-        </div>
-      )}
-    </div>
-  )
-}
-
 // ─── Export Sheet ─────────────────────────────────────────────────────────────
 
 function ExportSheet({ open, iface, onClose }: {
@@ -309,8 +135,7 @@ function ExportSheet({ open, iface, onClose }: {
 export default function WireGuardPage() {
   const allIfaces = useMemo(() => collectInterfaces(), [])
 
-  const [search, setSearch]           = useState("")
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+  const [search, setSearch] = useState("")
   const [exportIface, setExportIface] = useState<WgIfaceWithServer | null>(null)
 
   const filtered = useMemo(() => {
@@ -327,14 +152,6 @@ export default function WireGuardPage() {
   const onlinePeers  = allIfaces.reduce((s, i) => s + i.peers.filter((p) => !!p.latestHandshake).length, 0)
   const upIfaces     = allIfaces.filter((i) => i.status === "up").length
 
-  function toggleExpand(id: string) {
-    setExpandedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id); else next.add(id)
-      return next
-    })
-  }
-
   return (
     <div className="flex flex-col h-full">
       <PageHeader
@@ -384,49 +201,18 @@ export default function WireGuardPage() {
           </div>
 
           {/* Search + table */}
-          <Card>
-            <div className="flex items-center gap-3 px-4 py-3 border-b">
-              <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[260px]">
-                <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="Поиск по имени, серверу, IP…"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                />
-              </div>
-              <span className="text-sm text-muted-foreground ml-auto">{filtered.length} интерфейсов</span>
-            </div>
-
-            {/* table header */}
-            <div className="grid grid-cols-[20px_1fr_auto_auto_auto_auto_auto_auto] gap-3 px-4 py-2 border-b text-[10px] font-semibold uppercase tracking-widest text-muted-foreground bg-muted/20">
-              <span />
-              <span>Интерфейс / Сервер</span>
-              <span>Порт</span>
-              <span>MTU</span>
-              <span>Пиры</span>
-              <span>Статус</span>
-              <span />
-            </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>
-            ) : (
-              filtered.map((iface) => (
-                <IfaceRow
-                  key={iface.id}
-                  iface={iface}
-                  expanded={expandedIds.has(iface.id)}
-                  onToggleExpand={() => toggleExpand(iface.id)}
-                  onExport={() => setExportIface(iface)}
-                />
-              ))
-            )}
-          </Card>
+          <DataPageCard>
+            <DataPageToolbar
+              search={search}
+              onSearchChange={setSearch}
+              searchPlaceholder="Поиск по имени, серверу, IP…"
+              countLabel={`${filtered.length} интерфейсов`}
+            />
+            <WireguardDataGrid
+              interfaces={filtered}
+              onExport={setExportIface}
+            />
+          </DataPageCard>
 
           {/* RouterOS reference */}
           <Card>

app/api/system/database/backup/route.ts

@@ -0,0 +1,13 @@
+import type { NextRequest } from "next/server"
+import { proxyBackendRequest } from "@/lib/proxy-backend-request"
+
+export const runtime = "nodejs"
+export const dynamic = "force-dynamic"
+export const maxDuration = 600
+
+export async function GET(request: NextRequest) {
+  return proxyBackendRequest(request, "/api/system/database/backup", {
+    method: "GET",
+    forwardRequestBody: false,
+  })
+}

app/api/system/database/restore/route.ts

@@ -0,0 +1,10 @@
+import type { NextRequest } from "next/server"
+import { proxyBackendRequest } from "@/lib/proxy-backend-request"
+
+export const runtime = "nodejs"
+export const dynamic = "force-dynamic"
+export const maxDuration = 600
+
+export async function POST(request: NextRequest) {
+  return proxyBackendRequest(request, "/api/system/database/restore", { method: "POST" })
+}

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%);

backend/.gitignore

@@ -4,3 +4,4 @@ dist/
 *.db-shm
 *.db-wal
 .env
+storage/backups/

backend/src/db/index.ts

@@ -1,4 +1,6 @@
 import Database from "better-sqlite3"
+import { existsSync, readFileSync } from "node:fs"
+import path from "node:path"
 
 type SqliteHandle = InstanceType<typeof Database>
 import { drizzle } from "drizzle-orm/better-sqlite3"
@@ -351,6 +353,7 @@ CREATE TABLE IF NOT EXISTS certificate_issue_jobs (
   id TEXT PRIMARY KEY,
   status TEXT NOT NULL DEFAULT 'queued',
   step TEXT NOT NULL DEFAULT 'queued',
+  source TEXT NOT NULL DEFAULT 'manual',
   server_id TEXT NOT NULL,
   cert_name TEXT NOT NULL,
   domain_names TEXT NOT NULL,
@@ -362,6 +365,47 @@ CREATE TABLE IF NOT EXISTS certificate_issue_jobs (
   error TEXT
 );
 
+CREATE TABLE IF NOT EXISTS certificate_renew_settings (
+  id INTEGER PRIMARY KEY,
+  enabled INTEGER NOT NULL DEFAULT 1,
+  interval_sec INTEGER NOT NULL DEFAULT 21600,
+  renew_before_days INTEGER NOT NULL DEFAULT 30,
+  last_collected_at TEXT,
+  last_duration_ms INTEGER,
+  last_error TEXT,
+  updated_at TEXT NOT NULL DEFAULT (datetime('now'))
+);
+
+CREATE TABLE IF NOT EXISTS backup_schedule_settings (
+  id INTEGER PRIMARY KEY,
+  enabled INTEGER NOT NULL DEFAULT 1,
+  frequency TEXT NOT NULL DEFAULT 'daily',
+  hour INTEGER NOT NULL DEFAULT 3,
+  minute INTEGER NOT NULL DEFAULT 0,
+  week_day INTEGER NOT NULL DEFAULT 0,
+  month_day INTEGER NOT NULL DEFAULT 1,
+  keep_count INTEGER NOT NULL DEFAULT 7,
+  format TEXT NOT NULL DEFAULT 'rsc',
+  server_ids_json TEXT NOT NULL DEFAULT '[]',
+  last_run_at TEXT,
+  last_duration_ms INTEGER,
+  last_error TEXT,
+  updated_at TEXT NOT NULL DEFAULT (datetime('now'))
+);
+
+CREATE TABLE IF NOT EXISTS backup_entries (
+  id TEXT PRIMARY KEY,
+  server_id TEXT NOT NULL,
+  server_name TEXT NOT NULL,
+  filename TEXT NOT NULL,
+  size_bytes INTEGER NOT NULL,
+  kind TEXT NOT NULL DEFAULT 'manual',
+  notes TEXT,
+  created_at TEXT NOT NULL
+);
+CREATE INDEX IF NOT EXISTS idx_backup_entries_server_created ON backup_entries(server_id, created_at);
+CREATE UNIQUE INDEX IF NOT EXISTS idx_backup_entries_filename ON backup_entries(filename);
+
 CREATE TABLE IF NOT EXISTS alert_rules (
   id TEXT PRIMARY KEY,
   name TEXT NOT NULL,
@@ -617,12 +661,64 @@ SELECT 1, 'https://acme-v02.api.letsencrypt.org/directory', '', '', ''
 WHERE NOT EXISTS (SELECT 1 FROM acme_settings WHERE id = 1);
 `)
 
+const certIssueJobCols = sqlite.prepare(`PRAGMA table_info('certificate_issue_jobs')`).all() as Array<{ name?: string }>
+if (!certIssueJobCols.some((c) => c.name === "source")) {
+  sqlite.exec(`ALTER TABLE certificate_issue_jobs ADD COLUMN source TEXT NOT NULL DEFAULT 'manual'`)
+}
+
+sqlite.exec(`
+INSERT INTO certificate_renew_settings (id, enabled, interval_sec, renew_before_days)
+SELECT 1, 1, 21600, 30
+WHERE NOT EXISTS (SELECT 1 FROM certificate_renew_settings WHERE id = 1);
+`)
+
+sqlite.exec(`
+INSERT INTO backup_schedule_settings (id, enabled, frequency, hour, minute, week_day, month_day, keep_count, format, server_ids_json)
+SELECT 1, 1, 'daily', 3, 0, 0, 1, 7, 'rsc', '[]'
+WHERE NOT EXISTS (SELECT 1 FROM backup_schedule_settings WHERE id = 1);
+`)
+
 sqlite.exec(`
 INSERT INTO alert_engine_cursor (id, last_source_finished_at)
 SELECT 1, NULL
 WHERE NOT EXISTS (SELECT 1 FROM alert_engine_cursor WHERE id = 1);
 `)
 
+const backupEntryCount = sqlite.prepare(`SELECT COUNT(*) AS c FROM backup_entries`).get() as { c: number }
+if (backupEntryCount.c === 0) {
+  const legacyIndexPath = path.resolve(process.cwd(), "storage", "backups", "index.json")
+  if (existsSync(legacyIndexPath)) {
+    try {
+      const parsed = JSON.parse(readFileSync(legacyIndexPath, "utf8")) as unknown
+      if (Array.isArray(parsed)) {
+        const insert = sqlite.prepare(`
+          INSERT OR IGNORE INTO backup_entries (id, server_id, server_name, filename, size_bytes, kind, notes, created_at)
+          VALUES (@id, @serverId, @serverName, @filename, @sizeBytes, @kind, @notes, @createdAt)
+        `)
+        for (const row of parsed) {
+          if (!row || typeof row !== "object") continue
+          const item = row as Record<string, unknown>
+          const id = String(item.id ?? "").trim()
+          const filename = String(item.filename ?? "").trim()
+          if (!id || !filename) continue
+          insert.run({
+            id,
+            serverId: String(item.serverId ?? ""),
+            serverName: String(item.serverName ?? ""),
+            filename,
+            sizeBytes: Number(item.sizeBytes ?? 0) || 0,
+            kind: item.kind === "auto" ? "auto" : "manual",
+            notes: item.notes == null ? null : String(item.notes),
+            createdAt: String(item.createdAt ?? new Date().toISOString()),
+          })
+        }
+      }
+    } catch {
+      /* legacy index.json не читается — пропускаем */
+    }
+  }
+}
+
 export const db = drizzle(sqlite, { schema })
 
 /** Прямой доступ к better-sqlite3 для сложных read-only запросов (напр. /api/alerts). */

backend/src/db/schema.ts

@@ -300,6 +300,7 @@ export const certificateIssueJobs = sqliteTable("certificate_issue_jobs", {
   id:          text("id").primaryKey(),
   status:      text("status", { enum: ["queued", "running", "done", "failed"] }).notNull().default("queued"),
   step:        text("step").notNull().default("queued"),
+  source:      text("source", { enum: ["manual", "scheduler"] }).notNull().default("manual"),
   serverId:    text("server_id").notNull(),
   certName:    text("cert_name").notNull(),
   domainNames: text("domain_names").notNull(),
@@ -311,6 +312,45 @@ export const certificateIssueJobs = sqliteTable("certificate_issue_jobs", {
   error:       text("error"),
 })
 
+export const certificateRenewSettings = sqliteTable("certificate_renew_settings", {
+  id:              integer("id").primaryKey(),
+  enabled:         integer("enabled", { mode: "boolean" }).notNull().default(true),
+  intervalSec:     integer("interval_sec").notNull().default(21600),
+  renewBeforeDays: integer("renew_before_days").notNull().default(30),
+  lastCollectedAt: text("last_collected_at"),
+  lastDurationMs:  integer("last_duration_ms"),
+  lastError:       text("last_error"),
+  updatedAt:       text("updated_at").notNull().default(sql`(datetime('now'))`),
+})
+
+export const backupScheduleSettings = sqliteTable("backup_schedule_settings", {
+  id:             integer("id").primaryKey(),
+  enabled:        integer("enabled", { mode: "boolean" }).notNull().default(true),
+  frequency:      text("frequency", { enum: ["daily", "weekly", "monthly"] }).notNull().default("daily"),
+  hour:           integer("hour").notNull().default(3),
+  minute:         integer("minute").notNull().default(0),
+  weekDay:        integer("week_day").notNull().default(0),
+  monthDay:       integer("month_day").notNull().default(1),
+  keepCount:      integer("keep_count").notNull().default(7),
+  format:         text("format", { enum: ["rsc", "backup"] }).notNull().default("rsc"),
+  serverIdsJson:  text("server_ids_json").notNull().default("[]"),
+  lastRunAt:      text("last_run_at"),
+  lastDurationMs: integer("last_duration_ms"),
+  lastError:      text("last_error"),
+  updatedAt:      text("updated_at").notNull().default(sql`(datetime('now'))`),
+})
+
+export const backupEntries = sqliteTable("backup_entries", {
+  id:         text("id").primaryKey(),
+  serverId:   text("server_id").notNull(),
+  serverName: text("server_name").notNull(),
+  filename:   text("filename").notNull(),
+  sizeBytes:  integer("size_bytes").notNull(),
+  kind:       text("kind", { enum: ["manual", "auto"] }).notNull().default("manual"),
+  notes:      text("notes"),
+  createdAt:  text("created_at").notNull(),
+})
+
 /** Группы правил: ANY = хотя бы одно; ALL = все одновременно в окне тика. */
 export const alertGroups = sqliteTable("alert_groups", {
   id:                text("id").primaryKey(),
@@ -531,6 +571,9 @@ export type EvobgpSettingsRow = typeof evobgpSettings.$inferSelect
 export type AlertTelegramSettingsRow = typeof alertTelegramSettings.$inferSelect
 export type AcmeSettingsRow = typeof acmeSettings.$inferSelect
 export type CertificateIssueJobRow = typeof certificateIssueJobs.$inferSelect
+export type CertificateRenewSettingsRow = typeof certificateRenewSettings.$inferSelect
+export type BackupScheduleSettingsRow = typeof backupScheduleSettings.$inferSelect
+export type BackupEntryRow = typeof backupEntries.$inferSelect
 export type AlertGroupRow = typeof alertGroups.$inferSelect
 export type AlertRuleRow = typeof alertRules.$inferSelect
 export type AlertRuleTargetRow = typeof alertRuleTargets.$inferSelect

backend/src/index.ts

@@ -27,6 +27,8 @@ import { refreshScheduler, stopScheduler } from "./services/scheduler.js"
 // ── app factory ────────────────────────────────────────────────────────────────
 
 const app = Fastify({
+  bodyLimit: 512 * 1024 * 1024,
+  requestTimeout: 10 * 60 * 1000,
   logger: {
     transport: {
       target: "pino-pretty",

backend/src/routes/backups.ts

@@ -1,23 +1,22 @@
 import { randomUUID } from "node:crypto"
-import { mkdir, readFile, rm, stat, writeFile } from "node:fs/promises"
+import { readFile } from "node:fs/promises"
 import path from "node:path"
 import { z } from "zod"
 import type { FastifyPluginAsyncZod } from "@fastify/type-provider-zod"
+import { putBackupScheduleSettingsSchema } from "@mmapp/contracts/backups"
 import { listServersRead } from "../modules/servers/service/servers-service.js"
-import { getServerRowById } from "../modules/servers/repository/servers-repository.js"
-import { MikrotikClient } from "../services/mikrotik.js"
 import { appendEvent } from "../modules/events/service/events-service.js"
-
-type BackupMeta = {
-  id: string
-  serverId: string
-  serverName: string
-  filename: string
-  sizeBytes: number
-  createdAt: string
-  kind: "manual"
-  notes?: string
-}
+import { refreshScheduler } from "../services/scheduler.js"
+import {
+  deleteBackupRecord,
+  getBackupById,
+  getBackupsDir,
+  getBackupScheduleSettings,
+  listBackups,
+  runBackupForServer,
+  updateBackupScheduleSettings,
+  type BackupMeta,
+} from "../services/backup-service.js"
 
 type BackupJobStatus = "queued" | "running" | "done" | "failed"
 type BackupJob = {
@@ -32,36 +31,8 @@ type BackupJob = {
   failures: Array<{ serverId: string; error: string }>
 }
 
-const BACKUPS_DIR = path.resolve(process.cwd(), "storage", "backups")
-const INDEX_PATH = path.join(BACKUPS_DIR, "index.json")
 const backupJobs = new Map<string, BackupJob>()
 
-async function ensureStorage() {
-  await mkdir(BACKUPS_DIR, { recursive: true })
-}
-
-async function readIndex(): Promise<BackupMeta[]> {
-  await ensureStorage()
-  try {
-    const raw = await readFile(INDEX_PATH, "utf8")
-    const parsed = JSON.parse(raw) as unknown
-    if (!Array.isArray(parsed)) return []
-    return parsed as BackupMeta[]
-  } catch {
-    return []
-  }
-}
-
-async function writeIndex(rows: BackupMeta[]): Promise<void> {
-  await ensureStorage()
-  await writeFile(INDEX_PATH, JSON.stringify(rows, null, 2), "utf8")
-}
-
-function fmtTs(d = new Date()): string {
-  const p = (n: number) => String(n).padStart(2, "0")
-  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}_${p(d.getHours())}-${p(d.getMinutes())}-${p(d.getSeconds())}`
-}
-
 const CreateBackupBodySchema = z.object({
   serverIds: z.array(z.union([z.string(), z.number()])).min(1),
   notes: z.string().max(500).optional(),
@@ -74,43 +45,12 @@ const BackupJobIdParamSchema = z.object({
   jobId: z.string().min(1),
 })
 
-async function runBackupForServer(id: string, notes?: string): Promise<BackupMeta> {
-  const serverIdNum = Number.parseInt(id, 10)
-  if (!Number.isFinite(serverIdNum)) {
-    throw new Error("Невалидный id сервера")
-  }
-  const row = getServerRowById(serverIdNum)
-  if (!row) {
-    throw new Error("Сервер не найден")
-  }
-  const client = MikrotikClient.fromServer(row)
-  const script = await client.exportConfigScript()
-  const ts = fmtTs()
-  const safeServer = row.name.replace(/[^a-zA-Z0-9._-]+/g, "_")
-  const filename = `${safeServer}_${ts}.rsc`
-  const filePath = path.join(BACKUPS_DIR, filename)
-  await writeFile(filePath, script, "utf8")
-  const st = await stat(filePath)
-  return {
-    id: randomUUID(),
-    serverId: String(row.id),
-    serverName: row.name,
-    filename,
-    sizeBytes: st.size,
-    createdAt: new Date().toISOString(),
-    kind: "manual",
-    notes,
-  }
-}
-
 async function processBackupJob(job: BackupJob, ids: string[], notes?: string) {
   job.status = "running"
   job.startedAt = new Date().toISOString()
-  const indexRows = await readIndex()
   for (const id of ids) {
     try {
-      const meta = await runBackupForServer(id, notes)
-      indexRows.unshift(meta)
+      const meta = await runBackupForServer(id, "manual", notes)
       job.created.push(meta)
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err)
@@ -119,7 +59,6 @@ async function processBackupJob(job: BackupJob, ids: string[], notes?: string) {
       job.completed += 1
     }
   }
-  await writeIndex(indexRows)
   job.status = "done"
   job.finishedAt = new Date().toISOString()
   appendEvent({
@@ -141,9 +80,21 @@ async function processBackupJob(job: BackupJob, ids: string[], notes?: string) {
 
 const backupsRoutes: FastifyPluginAsyncZod = async (app) => {
   app.get("/backups", async (_req, reply) => {
-    const rows = await readIndex()
-    rows.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
-    return reply.send(rows)
+    return reply.send(listBackups())
+  })
+
+  app.get("/backups/schedule", async (_req, reply) => {
+    return reply.send(getBackupScheduleSettings())
+  })
+
+  app.put("/backups/schedule", async (req, reply) => {
+    const parsed = putBackupScheduleSettingsSchema.safeParse(req.body ?? {})
+    if (!parsed.success) {
+      return reply.status(400).send({ error: "Некорректное тело запроса", details: parsed.error.flatten() })
+    }
+    const result = updateBackupScheduleSettings(parsed.data)
+    refreshScheduler()
+    return reply.send(result)
   })
 
   app.post("/backups/create", { schema: { body: CreateBackupBodySchema } }, async (req, reply) => {
@@ -216,10 +167,9 @@ const backupsRoutes: FastifyPluginAsyncZod = async (app) => {
   })
 
   app.get("/backups/:id/download", { schema: { params: BackupIdParamSchema } }, async (req, reply) => {
-    const rows = await readIndex()
-    const hit = rows.find((r) => r.id === req.params.id)
+    const hit = getBackupById(req.params.id)
     if (!hit) return reply.status(404).send({ error: "Бэкап не найден" })
-    const filePath = path.join(BACKUPS_DIR, hit.filename)
+    const filePath = path.join(getBackupsDir(), hit.filename)
     const content = await readFile(filePath, "utf8").catch(() => null)
     if (content == null) return reply.status(404).send({ error: "Файл бэкапа не найден" })
     reply.header("Content-Type", "text/plain; charset=utf-8")
@@ -228,12 +178,8 @@ const backupsRoutes: FastifyPluginAsyncZod = async (app) => {
   })
 
   app.delete("/backups/:id", { schema: { params: BackupIdParamSchema } }, async (req, reply) => {
-    const rows = await readIndex()
-    const idx = rows.findIndex((r) => r.id === req.params.id)
-    if (idx < 0) return reply.status(404).send({ error: "Бэкап не найден" })
-    const [hit] = rows.splice(idx, 1)
-    await writeIndex(rows)
-    await rm(path.join(BACKUPS_DIR, hit.filename), { force: true })
+    const hit = await deleteBackupRecord(req.params.id)
+    if (!hit) return reply.status(404).send({ error: "Бэкап не найден" })
     return reply.status(204).send()
   })
 }

backend/src/routes/certificates.ts

@@ -3,101 +3,25 @@ import type { FastifyPluginAsyncZod } from "@fastify/type-provider-zod"
 import {
   certificateIssueRequestSchema,
   putAcmeCloudflareSettingsSchema,
+  putCertificateRenewSettingsSchema,
   testAcmeCloudflareSettingsSchema,
 } from "@mmapp/contracts/certificates"
-import { appendEvent } from "../modules/events/service/events-service.js"
-import { issueCertificateWithCloudflareDns, testCloudflareToken } from "../services/acme-cloudflare.js"
+import { refreshScheduler } from "../services/scheduler.js"
+import { testCloudflareToken } from "../services/acme-cloudflare.js"
+import { queueCertificateIssueJob } from "../services/certificate-issue-runner.js"
 import {
   createIssueJobRecord,
   getAcmeCloudflareToken,
   getAcmeSettingsPublic,
+  getCertificateRenewSettings,
   getIssueJobRecord,
   getServerRowByIdString,
   listCertificatesFromServers,
   toIssueJobDto,
   updateAcmeSettings,
-  updateIssueJobRecord,
+  updateCertificateRenewSettings,
 } from "../services/certificates-service.js"
 
-const runningJobs = new Set<string>()
-
-async function runIssueJob(jobId: string) {
-  if (runningJobs.has(jobId)) return
-  runningJobs.add(jobId)
-  const row = getIssueJobRecord(jobId)
-  if (!row) {
-    runningJobs.delete(jobId)
-    return
-  }
-
-  const server = getServerRowByIdString(row.serverId)
-  if (!server) {
-    updateIssueJobRecord(jobId, {
-      status: "failed",
-      step: "failed",
-      finishedAt: new Date().toISOString(),
-      error: "Сервер не найден",
-    })
-    runningJobs.delete(jobId)
-    return
-  }
-
-  let domainNames: string[] = []
-  try {
-    domainNames = JSON.parse(row.domainNames) as string[]
-  } catch {
-    domainNames = []
-  }
-
-  const trustStore = row.trustStore.split(",").map((s) => s.trim()).filter(Boolean)
-  const startedAt = new Date().toISOString()
-  updateIssueJobRecord(jobId, { status: "running", step: "acme_order", startedAt, error: null })
-
-  try {
-    await issueCertificateWithCloudflareDns({
-      server,
-      certName: row.certName,
-      domainNames,
-      keyType: row.keyType === "ec256" ? "ec256" : "rsa2048",
-      trustStore: trustStore.length > 0 ? trustStore : ["www", "api"],
-      onStep: (step) => updateIssueJobRecord(jobId, { step }),
-    })
-    updateIssueJobRecord(jobId, {
-      status: "done",
-      step: "done",
-      finishedAt: new Date().toISOString(),
-      error: null,
-    })
-    appendEvent({
-      level: "info",
-      eventType: "certificates.issue.done",
-      sourceModule: "certificates",
-      title: "Сертификат выпущен",
-      message: `${row.certName} · ${domainNames.join(", ")} · ${server.name}`,
-      entityType: "server",
-      entityId: String(server.id),
-    })
-  } catch (e) {
-    updateIssueJobRecord(jobId, {
-      status: "failed",
-      step: "failed",
-      finishedAt: new Date().toISOString(),
-      error: e instanceof Error ? e.message : String(e),
-    })
-    appendEvent({
-      level: "warning",
-      eventType: "certificates.issue.failed",
-      sourceModule: "certificates",
-      title: "Ошибка выпуска сертификата",
-      message: e instanceof Error ? e.message : String(e),
-      entityType: "server",
-      entityId: String(server.id),
-    })
-  } finally {
-    runningJobs.delete(jobId)
-  }
-}
-
 const certificatesRoutes: FastifyPluginAsyncZod = async (app) => {
   app.get("/certificates", async (_req, reply) => {
     return reply.send(await listCertificatesFromServers())
@@ -119,6 +43,20 @@ const certificatesRoutes: FastifyPluginAsyncZod = async (app) => {
     return reply.send(updateAcmeSettings(parsed.data))
   })
 
+  app.get("/certificates/renew-settings", async (_req, reply) => {
+    return reply.send(getCertificateRenewSettings())
+  })
+
+  app.put("/certificates/renew-settings", async (req, reply) => {
+    const parsed = putCertificateRenewSettingsSchema.safeParse(req.body ?? {})
+    if (!parsed.success) {
+      return reply.status(400).send({ error: "Некорректное тело запроса", details: parsed.error.flatten() })
+    }
+    const result = updateCertificateRenewSettings(parsed.data)
+    refreshScheduler()
+    return reply.send(result)
+  })
+
   app.post("/certificates/acme-settings/test", async (req, reply) => {
     const parsed = testAcmeCloudflareSettingsSchema.safeParse(req.body ?? {})
     if (!parsed.success) {
@@ -157,8 +95,9 @@ const certificatesRoutes: FastifyPluginAsyncZod = async (app) => {
       domainNames: parsed.data.domainNames.map((d) => d.trim()).filter(Boolean),
       keyType: parsed.data.keyType ?? "rsa2048",
       trustStore,
+      source: "manual",
     })
-    queueMicrotask(() => { void runIssueJob(jobId) })
+    queueCertificateIssueJob(jobId)
     return reply.send({ jobId })
   })
 

backend/src/services/backup-scheduler-collector.ts

@@ -0,0 +1,136 @@
+import { appendEvent } from "../modules/events/service/events-service.js"
+import type { BackupsRunSnapshot } from "../types/scheduler-run-snapshot.js"
+import { SCHEDULER_RUN_SNAPSHOT_VERSION } from "../types/scheduler-run-snapshot.js"
+import {
+  getBackupScheduleSettings,
+  isBackupDue,
+  pruneBackupsForServer,
+  resolveBackupServerIds,
+  runBackupForServer,
+  touchBackupScheduleRunMeta,
+} from "./backup-service.js"
+
+let collecting = false
+
+export function getBackupSchedulerCollectorState(): { running: boolean } {
+  return { running: collecting }
+}
+
+export async function collectScheduledBackupsOnce(): Promise<BackupsRunSnapshot> {
+  const sampledAt = new Date().toISOString()
+  const settings = getBackupScheduleSettings()
+  const snapshot: BackupsRunSnapshot = {
+    v: SCHEDULER_RUN_SNAPSHOT_VERSION,
+    job: "backups",
+    sampledAt,
+    due: false,
+    created: 0,
+    failures: 0,
+    pruned: 0,
+    errors: [],
+  }
+
+  if (collecting) {
+    snapshot.skipped = true
+    return snapshot
+  }
+
+  if (!settings.enabled) {
+    snapshot.skipped = true
+    return snapshot
+  }
+
+  const due = isBackupDue(new Date(), settings, settings.lastRunAt)
+  snapshot.due = due
+  if (!due) {
+    return snapshot
+  }
+
+  if (settings.format !== "rsc") {
+    snapshot.skipped = true
+    snapshot.errors = ["Формат backup пока не поддерживается, используйте rsc"]
+    touchBackupScheduleRunMeta({
+      lastRunAt: sampledAt,
+      lastDurationMs: 0,
+      lastError: snapshot.errors[0],
+    })
+    return snapshot
+  }
+
+  collecting = true
+  const started = Date.now()
+  const serverIds = resolveBackupServerIds(settings)
+
+  appendEvent({
+    level: "info",
+    eventType: "backups.job.started",
+    sourceModule: "backups",
+    title: "Запущен плановый бэкап",
+    message: `Серверов в очереди: ${serverIds.length}`,
+    entityType: "backup_job",
+    entityId: "scheduler",
+    payload: { serverIds, scheduled: true },
+  })
+
+  try {
+    for (const id of serverIds) {
+      try {
+        await runBackupForServer(id, "auto")
+        snapshot.created += 1
+      } catch (e) {
+        const message = e instanceof Error ? e.message : String(e)
+        snapshot.failures += 1
+        snapshot.errors?.push(`${id}: ${message}`)
+      }
+    }
+
+    for (const id of serverIds) {
+      snapshot.pruned += await pruneBackupsForServer(id, settings.keepCount)
+    }
+
+    touchBackupScheduleRunMeta({
+      lastRunAt: sampledAt,
+      lastDurationMs: Date.now() - started,
+      lastError: snapshot.errors?.length ? snapshot.errors.join("; ") : null,
+    })
+
+    appendEvent({
+      level: snapshot.failures > 0 ? "warning" : "info",
+      eventType: "backups.job.done",
+      sourceModule: "backups",
+      title: snapshot.failures > 0 ? "Плановый бэкап завершен с ошибками" : "Плановый бэкап завершен",
+      message: `Создано: ${snapshot.created}, ошибок: ${snapshot.failures}`,
+      entityType: "backup_job",
+      entityId: "scheduler",
+      payload: {
+        total: serverIds.length,
+        completed: snapshot.created + snapshot.failures,
+        failures: snapshot.errors,
+        pruned: snapshot.pruned,
+      },
+    })
+
+    return snapshot
+  } catch (e) {
+    const message = e instanceof Error ? e.message : String(e)
+    snapshot.fatalError = message
+    snapshot.errors?.push(message)
+    touchBackupScheduleRunMeta({
+      lastRunAt: sampledAt,
+      lastDurationMs: Date.now() - started,
+      lastError: message,
+    })
+    appendEvent({
+      level: "critical",
+      eventType: "backups.job.failed",
+      sourceModule: "backups",
+      title: "Плановый бэкап прерван",
+      message,
+      entityType: "backup_job",
+      entityId: "scheduler",
+    })
+    return snapshot
+  } finally {
+    collecting = false
+  }
+}

backend/src/services/backup-service.ts

@@ -0,0 +1,273 @@
+import { randomUUID } from "node:crypto"
+import { mkdir, rm, stat, writeFile } from "node:fs/promises"
+import path from "node:path"
+import { desc, eq } from "drizzle-orm"
+import type { BackupScheduleSettingsDto } from "@mmapp/contracts/backups"
+import { db } from "../db/index.js"
+import { backupEntries, backupScheduleSettings } from "../db/schema.js"
+import { getServerRowById } from "../modules/servers/repository/servers-repository.js"
+import { listServersRead } from "../modules/servers/service/servers-service.js"
+import { MikrotikClient } from "./mikrotik.js"
+
+const SETTINGS_ID = 1
+const BACKUPS_DIR = path.resolve(process.cwd(), "storage", "backups")
+
+export type BackupMeta = {
+  id: string
+  serverId: string
+  serverName: string
+  filename: string
+  sizeBytes: number
+  createdAt: string
+  kind: "manual" | "auto"
+  notes?: string
+}
+
+function rowToMeta(row: typeof backupEntries.$inferSelect): BackupMeta {
+  return {
+    id: row.id,
+    serverId: row.serverId,
+    serverName: row.serverName,
+    filename: row.filename,
+    sizeBytes: row.sizeBytes,
+    createdAt: row.createdAt,
+    kind: row.kind,
+    notes: row.notes ?? undefined,
+  }
+}
+
+export async function ensureBackupStorage(): Promise<void> {
+  await mkdir(BACKUPS_DIR, { recursive: true })
+}
+
+export function listBackups(): BackupMeta[] {
+  return db.select().from(backupEntries).orderBy(desc(backupEntries.createdAt)).all().map(rowToMeta)
+}
+
+export function getBackupById(id: string): BackupMeta | null {
+  const row = db.select().from(backupEntries).where(eq(backupEntries.id, id)).limit(1).all()[0]
+  return row ? rowToMeta(row) : null
+}
+
+export function insertBackup(meta: BackupMeta): void {
+  db.insert(backupEntries).values({
+    id: meta.id,
+    serverId: meta.serverId,
+    serverName: meta.serverName,
+    filename: meta.filename,
+    sizeBytes: meta.sizeBytes,
+    kind: meta.kind,
+    notes: meta.notes ?? null,
+    createdAt: meta.createdAt,
+  }).run()
+}
+
+export async function deleteBackupRecord(id: string): Promise<BackupMeta | null> {
+  const hit = getBackupById(id)
+  if (!hit) return null
+  db.delete(backupEntries).where(eq(backupEntries.id, id)).run()
+  await rm(path.join(BACKUPS_DIR, hit.filename), { force: true })
+  return hit
+}
+
+function fmtTs(d = new Date()): string {
+  const p = (n: number) => String(n).padStart(2, "0")
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}_${p(d.getHours())}-${p(d.getMinutes())}-${p(d.getSeconds())}`
+}
+
+function parseServerIds(raw: string): string[] {
+  try {
+    const parsed = JSON.parse(raw) as unknown
+    if (!Array.isArray(parsed)) return []
+    return parsed.map(String).filter(Boolean)
+  } catch {
+    return []
+  }
+}
+
+function getBackupScheduleSettingsRow() {
+  return db.select().from(backupScheduleSettings).where(eq(backupScheduleSettings.id, SETTINGS_ID)).limit(1).all()[0]
+    ?? {
+      id: SETTINGS_ID,
+      enabled: true,
+      frequency: "daily" as const,
+      hour: 3,
+      minute: 0,
+      weekDay: 0,
+      monthDay: 1,
+      keepCount: 7,
+      format: "rsc" as const,
+      serverIdsJson: "[]",
+      lastRunAt: null,
+      lastDurationMs: null,
+      lastError: null,
+      updatedAt: new Date().toISOString(),
+    }
+}
+
+export function getBackupScheduleSettings(): BackupScheduleSettingsDto {
+  const row = getBackupScheduleSettingsRow()
+  return {
+    enabled: row.enabled,
+    frequency: row.frequency,
+    hour: row.hour,
+    minute: row.minute,
+    weekDay: row.weekDay,
+    monthDay: row.monthDay,
+    keepCount: row.keepCount,
+    format: row.format,
+    serverIds: parseServerIds(row.serverIdsJson),
+    lastRunAt: row.lastRunAt ?? null,
+    lastDurationMs: row.lastDurationMs ?? null,
+    lastError: row.lastError ?? null,
+    updatedAt: row.updatedAt,
+  }
+}
+
+export function updateBackupScheduleSettings(patch: Partial<{
+  enabled: boolean
+  frequency: "daily" | "weekly" | "monthly"
+  hour: number
+  minute: number
+  weekDay: number
+  monthDay: number
+  keepCount: number
+  format: "rsc" | "backup"
+  serverIds: string[]
+}>) {
+  const prev = getBackupScheduleSettingsRow()
+  const now = new Date().toISOString()
+  const next = {
+    enabled: patch.enabled ?? prev.enabled,
+    frequency: patch.frequency ?? prev.frequency,
+    hour: patch.hour ?? prev.hour,
+    minute: patch.minute ?? prev.minute,
+    weekDay: patch.weekDay ?? prev.weekDay,
+    monthDay: patch.monthDay ?? prev.monthDay,
+    keepCount: patch.keepCount ?? prev.keepCount,
+    format: patch.format ?? prev.format,
+    serverIdsJson: patch.serverIds ? JSON.stringify(patch.serverIds) : prev.serverIdsJson,
+    updatedAt: now,
+  }
+  if (db.select().from(backupScheduleSettings).where(eq(backupScheduleSettings.id, SETTINGS_ID)).limit(1).all()[0]) {
+    db.update(backupScheduleSettings).set(next).where(eq(backupScheduleSettings.id, SETTINGS_ID)).run()
+  } else {
+    db.insert(backupScheduleSettings).values({ id: SETTINGS_ID, ...next }).run()
+  }
+  return getBackupScheduleSettings()
+}
+
+export function touchBackupScheduleRunMeta(patch: {
+  lastRunAt?: string
+  lastDurationMs?: number
+  lastError?: string | null
+}) {
+  const prev = getBackupScheduleSettingsRow()
+  db.update(backupScheduleSettings).set({
+    lastRunAt: patch.lastRunAt ?? prev.lastRunAt,
+    lastDurationMs: patch.lastDurationMs ?? prev.lastDurationMs,
+    lastError: patch.lastError === undefined ? prev.lastError : patch.lastError,
+    updatedAt: new Date().toISOString(),
+  }).where(eq(backupScheduleSettings.id, SETTINGS_ID)).run()
+}
+
+export function resolveBackupServerIds(settings: BackupScheduleSettingsDto): string[] {
+  const enabled = new Set(listServersRead().map((s) => String(s.id)))
+  const requested = settings.serverIds.length > 0 ? settings.serverIds : [...enabled]
+  return [...new Set(requested)].filter((id) => enabled.has(id))
+}
+
+function scheduledSlotForDate(now: Date, settings: BackupScheduleSettingsDto): Date | null {
+  if (settings.frequency === "weekly") {
+    const currentDow = (now.getDay() + 6) % 7
+    if (currentDow !== settings.weekDay) return null
+  } else if (settings.frequency === "monthly") {
+    if (now.getDate() !== settings.monthDay) return null
+  }
+
+  const slot = new Date(now)
+  slot.setSeconds(0, 0)
+  slot.setMilliseconds(0)
+  slot.setHours(settings.hour, settings.minute, 0, 0)
+  return slot
+}
+
+function sameLocalMinute(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear()
+    && a.getMonth() === b.getMonth()
+    && a.getDate() === b.getDate()
+    && a.getHours() === b.getHours()
+    && a.getMinutes() === b.getMinutes()
+}
+
+/** Срабатывает только в минуту расписания; 60 с в UI — интервал проверки, не частота бэкапа. */
+export function isBackupDue(now: Date, settings: BackupScheduleSettingsDto, lastRunAt: string | null | undefined): boolean {
+  if (!settings.enabled) return false
+
+  const slot = scheduledSlotForDate(now, settings)
+  if (!slot) return false
+  if (now < slot) return false
+  if (!sameLocalMinute(now, slot)) return false
+
+  if (lastRunAt) {
+    const prev = new Date(lastRunAt)
+    if (Number.isNaN(prev.getTime())) return true
+    if (sameLocalMinute(prev, slot)) return false
+  }
+
+  return true
+}
+
+export async function runBackupForServer(
+  id: string,
+  kind: BackupMeta["kind"],
+  notes?: string,
+): Promise<BackupMeta> {
+  const serverIdNum = Number.parseInt(id, 10)
+  if (!Number.isFinite(serverIdNum)) {
+    throw new Error("Невалидный id сервера")
+  }
+  const row = getServerRowById(serverIdNum)
+  if (!row) {
+    throw new Error("Сервер не найден")
+  }
+  const client = MikrotikClient.fromServer(row)
+  const script = await client.exportConfigScript()
+  const ts = fmtTs()
+  const safeServer = row.name.replace(/[^a-zA-Z0-9._-]+/g, "_")
+  const filename = `${safeServer}_${ts}.rsc`
+  const filePath = path.join(BACKUPS_DIR, filename)
+  await ensureBackupStorage()
+  await writeFile(filePath, script, "utf8")
+  const st = await stat(filePath)
+  const meta: BackupMeta = {
+    id: randomUUID(),
+    serverId: String(row.id),
+    serverName: row.name,
+    filename,
+    sizeBytes: st.size,
+    createdAt: new Date().toISOString(),
+    kind,
+    notes,
+  }
+  insertBackup(meta)
+  return meta
+}
+
+export async function pruneBackupsForServer(serverId: string, keepCount: number): Promise<number> {
+  const rows = db.select().from(backupEntries)
+    .where(eq(backupEntries.serverId, serverId))
+    .orderBy(desc(backupEntries.createdAt))
+    .all()
+  if (rows.length <= keepCount) return 0
+  const toDelete = rows.slice(keepCount)
+  for (const hit of toDelete) {
+    db.delete(backupEntries).where(eq(backupEntries.id, hit.id)).run()
+    await rm(path.join(BACKUPS_DIR, hit.filename), { force: true })
+  }
+  return toDelete.length
+}
+
+export function getBackupsDir(): string {
+  return BACKUPS_DIR
+}

backend/src/services/certificate-issue-runner.ts

@@ -0,0 +1,104 @@
+import { appendEvent } from "../modules/events/service/events-service.js"
+import { issueCertificateWithCloudflareDns } from "./acme-cloudflare.js"
+import {
+  getIssueJobRecord,
+  getServerRowByIdString,
+  updateIssueJobRecord,
+} from "./certificates-service.js"
+
+const runningJobs = new Set<string>()
+
+export async function runCertificateIssueJob(jobId: string): Promise<void> {
+  if (runningJobs.has(jobId)) return
+  runningJobs.add(jobId)
+  const row = getIssueJobRecord(jobId)
+  if (!row) {
+    runningJobs.delete(jobId)
+    return
+  }
+
+  const server = getServerRowByIdString(row.serverId)
+  if (!server) {
+    updateIssueJobRecord(jobId, {
+      status: "failed",
+      step: "failed",
+      finishedAt: new Date().toISOString(),
+      error: "Сервер не найден",
+    })
+    runningJobs.delete(jobId)
+    return
+  }
+
+  let domainNames: string[] = []
+  try {
+    domainNames = JSON.parse(row.domainNames) as string[]
+  } catch {
+    domainNames = []
+  }
+
+  const trustStore = row.trustStore.split(",").map((s) => s.trim()).filter(Boolean)
+  const startedAt = new Date().toISOString()
+  const isScheduler = row.source === "scheduler"
+  updateIssueJobRecord(jobId, { status: "running", step: "acme_order", startedAt, error: null })
+
+  if (isScheduler) {
+    appendEvent({
+      level: "info",
+      eventType: "certificates.renew.started",
+      sourceModule: "certificates",
+      title: "Запущено автообновление сертификата",
+      message: `${row.certName} · ${domainNames.join(", ")} · ${server.name}`,
+      entityType: "server",
+      entityId: String(server.id),
+    })
+  }
+
+  try {
+    await issueCertificateWithCloudflareDns({
+      server,
+      certName: row.certName,
+      domainNames,
+      keyType: row.keyType === "ec256" ? "ec256" : "rsa2048",
+      trustStore: trustStore.length > 0 ? trustStore : ["www", "api"],
+      onStep: (step) => updateIssueJobRecord(jobId, { step }),
+    })
+    updateIssueJobRecord(jobId, {
+      status: "done",
+      step: "done",
+      finishedAt: new Date().toISOString(),
+      error: null,
+    })
+    appendEvent({
+      level: "info",
+      eventType: isScheduler ? "certificates.renew.done" : "certificates.issue.done",
+      sourceModule: "certificates",
+      title: isScheduler ? "Сертификат обновлён" : "Сертификат выпущен",
+      message: `${row.certName} · ${domainNames.join(", ")} · ${server.name}`,
+      entityType: "server",
+      entityId: String(server.id),
+    })
+  } catch (e) {
+    const message = e instanceof Error ? e.message : String(e)
+    updateIssueJobRecord(jobId, {
+      status: "failed",
+      step: "failed",
+      finishedAt: new Date().toISOString(),
+      error: message,
+    })
+    appendEvent({
+      level: "warning",
+      eventType: isScheduler ? "certificates.renew.failed" : "certificates.issue.failed",
+      sourceModule: "certificates",
+      title: isScheduler ? "Ошибка автообновления сертификата" : "Ошибка выпуска сертификата",
+      message,
+      entityType: "server",
+      entityId: String(server.id),
+    })
+  } finally {
+    runningJobs.delete(jobId)
+  }
+}
+
+export function queueCertificateIssueJob(jobId: string): void {
+  queueMicrotask(() => { void runCertificateIssueJob(jobId) })
+}

backend/src/services/certificate-renew-collector.ts

@@ -0,0 +1,158 @@
+import { randomUUID } from "node:crypto"
+import { appendEvent } from "../modules/events/service/events-service.js"
+import type { CertificatesRenewRunSnapshot } from "../types/scheduler-run-snapshot.js"
+import { SCHEDULER_RUN_SNAPSHOT_VERSION } from "../types/scheduler-run-snapshot.js"
+import { mapRosCertificates } from "./certificate-parse.js"
+import { runCertificateIssueJob } from "./certificate-issue-runner.js"
+import {
+  createIssueJobRecord,
+  getCertificateRenewSettings,
+  getServerRowByIdString,
+  hasActiveIssueJob,
+  listManagedCertificateTargets,
+  touchCertificateRenewRunMeta,
+} from "./certificates-service.js"
+import { MikrotikClient } from "./mikrotik.js"
+
+let collecting = false
+
+export function getCertificateRenewCollectorState(): { running: boolean } {
+  return { running: collecting }
+}
+
+export async function collectCertificatesRenewOnce(): Promise<CertificatesRenewRunSnapshot> {
+  const sampledAt = new Date().toISOString()
+  const settings = getCertificateRenewSettings()
+  if (collecting) {
+    return {
+      v: SCHEDULER_RUN_SNAPSHOT_VERSION,
+      job: "certificates_renew",
+      sampledAt,
+      skipped: true,
+      checked: 0,
+      renewed: 0,
+      skippedTargets: 0,
+      errors: [],
+    }
+  }
+
+  collecting = true
+  const started = Date.now()
+  const snapshot: CertificatesRenewRunSnapshot = {
+    v: SCHEDULER_RUN_SNAPSHOT_VERSION,
+    job: "certificates_renew",
+    sampledAt,
+    checked: 0,
+    renewed: 0,
+    skippedTargets: 0,
+    errors: [],
+    targets: [],
+  }
+
+  try {
+    if (!settings.enabled) {
+      snapshot.skipped = true
+      return snapshot
+    }
+
+    const targets = listManagedCertificateTargets()
+    for (const target of targets) {
+      snapshot.checked += 1
+      const item = {
+        serverId: target.serverId,
+        certName: target.certName,
+        action: "ok" as "ok" | "renewed" | "skipped" | "error",
+        daysLeft: null as number | null,
+        message: "",
+      }
+
+      if (hasActiveIssueJob(target.serverId, target.certName)) {
+        item.action = "skipped"
+        item.message = "Уже выполняется выпуск"
+        snapshot.skippedTargets += 1
+        snapshot.targets?.push(item)
+        appendEvent({
+          level: "info",
+          eventType: "certificates.renew.skipped",
+          sourceModule: "certificates",
+          title: "Автообновление пропущено",
+          message: `${target.certName}: уже выполняется выпуск`,
+          entityType: "server",
+          entityId: target.serverId,
+        })
+        continue
+      }
+
+      const server = getServerRowByIdString(target.serverId)
+      if (!server) {
+        item.action = "error"
+        item.message = "Сервер не найден"
+        snapshot.errors.push(`${target.certName}: сервер не найден`)
+        snapshot.targets?.push(item)
+        continue
+      }
+
+      try {
+        const client = MikrotikClient.fromServer(server)
+        const rows = await client.getCertificates()
+        const mapped = mapRosCertificates(server.id, server.name, rows)
+        const hit = mapped.find((c) => c.name === target.certName)
+        if (!hit) {
+          item.action = "error"
+          item.message = "Сертификат не найден на устройстве"
+          snapshot.errors.push(`${target.certName}: не найден на ${server.name}`)
+          snapshot.targets?.push(item)
+          continue
+        }
+
+        item.daysLeft = hit.daysLeft
+        if (hit.daysLeft > settings.renewBeforeDays) {
+          item.action = "ok"
+          item.message = `До истечения ${hit.daysLeft} дн.`
+          snapshot.targets?.push(item)
+          continue
+        }
+
+        const jobId = randomUUID()
+        createIssueJobRecord({
+          id: jobId,
+          serverId: target.serverId,
+          certName: target.certName,
+          domainNames: target.domainNames,
+          keyType: target.keyType,
+          trustStore: target.trustStore,
+          source: "scheduler",
+        })
+        await runCertificateIssueJob(jobId)
+        snapshot.renewed += 1
+        item.action = "renewed"
+        item.message = "Запущено обновление"
+        snapshot.targets?.push(item)
+      } catch (e) {
+        const message = e instanceof Error ? e.message : String(e)
+        item.action = "error"
+        item.message = message
+        snapshot.errors.push(`${target.certName}: ${message}`)
+        snapshot.targets?.push(item)
+      }
+    }
+
+    touchCertificateRenewRunMeta({
+      lastCollectedAt: sampledAt,
+      lastDurationMs: Date.now() - started,
+      lastError: snapshot.errors.length > 0 ? snapshot.errors.join("; ") : null,
+    })
+    return snapshot
+  } catch (e) {
+    const message = e instanceof Error ? e.message : String(e)
+    snapshot.fatalError = message
+    touchCertificateRenewRunMeta({
+      lastCollectedAt: sampledAt,
+      lastDurationMs: Date.now() - started,
+      lastError: message,
+    })
+    return snapshot
+  } finally {
+    collecting = false
+  }
+}

backend/src/services/certificates-service.ts

@@ -1,12 +1,26 @@
-import { eq } from "drizzle-orm"
-import type { CertificateDto } from "@mmapp/contracts/certificates"
+import { desc, eq, inArray } from "drizzle-orm"
+import type { CertificateDto, CertificateRenewSettingsDto } from "@mmapp/contracts/certificates"
 import { db } from "../db/index.js"
-import { acmeSettings, certificateIssueJobs, servers } from "../db/schema.js"
+import {
+  acmeSettings,
+  certificateIssueJobs,
+  certificateRenewSettings,
+  servers,
+} from "../db/schema.js"
 import { mapRosCertificates } from "./certificate-parse.js"
 import { MikrotikClient } from "./mikrotik.js"
 
 const SETTINGS_ID = 1
 
+export type ManagedCertificateTarget = {
+  serverId: string
+  certName: string
+  domainNames: string[]
+  keyType: string
+  trustStore: string
+  finishedAt: string
+}
+
 export async function listCertificatesFromServers(): Promise<{
   certificates: CertificateDto[]
   failures: Array<{ serverId: string; serverName?: string; error: string }>
@@ -109,12 +123,14 @@ export function createIssueJobRecord(input: {
   domainNames: string[]
   keyType: string
   trustStore: string
+  source?: "manual" | "scheduler"
 }) {
   const now = new Date().toISOString()
   db.insert(certificateIssueJobs).values({
     id: input.id,
     status: "queued",
     step: "queued",
+    source: input.source ?? "manual",
     serverId: input.serverId,
     certName: input.certName,
     domainNames: JSON.stringify(input.domainNames),
@@ -168,3 +184,103 @@ export function getServerRowByIdString(serverId: string) {
   if (!Number.isFinite(id)) return null
   return db.select().from(servers).where(eq(servers.id, id)).limit(1).all()[0] ?? null
 }
+
+function getCertificateRenewSettingsRow() {
+  return db.select().from(certificateRenewSettings).where(eq(certificateRenewSettings.id, SETTINGS_ID)).limit(1).all()[0]
+    ?? {
+      id: SETTINGS_ID,
+      enabled: true,
+      intervalSec: 21600,
+      renewBeforeDays: 30,
+      lastCollectedAt: null,
+      lastDurationMs: null,
+      lastError: null,
+      updatedAt: new Date().toISOString(),
+    }
+}
+
+export function getCertificateRenewSettings(): CertificateRenewSettingsDto {
+  const row = getCertificateRenewSettingsRow()
+  return {
+    enabled: row.enabled,
+    intervalSec: row.intervalSec,
+    renewBeforeDays: row.renewBeforeDays,
+    lastCollectedAt: row.lastCollectedAt ?? null,
+    lastDurationMs: row.lastDurationMs ?? null,
+    lastError: row.lastError ?? null,
+    updatedAt: row.updatedAt,
+  }
+}
+
+export function updateCertificateRenewSettings(patch: {
+  enabled?: boolean
+  intervalSec?: number
+  renewBeforeDays?: number
+}) {
+  const prev = getCertificateRenewSettingsRow()
+  const now = new Date().toISOString()
+  const next = {
+    enabled: patch.enabled ?? prev.enabled,
+    intervalSec: patch.intervalSec ?? prev.intervalSec,
+    renewBeforeDays: patch.renewBeforeDays ?? prev.renewBeforeDays,
+    updatedAt: now,
+  }
+  if (db.select().from(certificateRenewSettings).where(eq(certificateRenewSettings.id, SETTINGS_ID)).limit(1).all()[0]) {
+    db.update(certificateRenewSettings).set(next).where(eq(certificateRenewSettings.id, SETTINGS_ID)).run()
+  } else {
+    db.insert(certificateRenewSettings).values({ id: SETTINGS_ID, ...next }).run()
+  }
+  return getCertificateRenewSettings()
+}
+
+export function touchCertificateRenewRunMeta(patch: {
+  lastCollectedAt?: string
+  lastDurationMs?: number
+  lastError?: string | null
+}) {
+  const prev = getCertificateRenewSettingsRow()
+  db.update(certificateRenewSettings).set({
+    lastCollectedAt: patch.lastCollectedAt ?? prev.lastCollectedAt,
+    lastDurationMs: patch.lastDurationMs ?? prev.lastDurationMs,
+    lastError: patch.lastError === undefined ? prev.lastError : patch.lastError,
+    updatedAt: new Date().toISOString(),
+  }).where(eq(certificateRenewSettings.id, SETTINGS_ID)).run()
+}
+
+export function listManagedCertificateTargets(): ManagedCertificateTarget[] {
+  const rows = db.select().from(certificateIssueJobs)
+    .where(eq(certificateIssueJobs.status, "done"))
+    .orderBy(desc(certificateIssueJobs.finishedAt), desc(certificateIssueJobs.requestedAt))
+    .all()
+
+  const byKey = new Map<string, ManagedCertificateTarget>()
+  for (const row of rows) {
+    const key = `${row.serverId}::${row.certName}`
+    if (byKey.has(key)) continue
+    let domainNames: string[] = []
+    try {
+      const parsed = JSON.parse(row.domainNames) as unknown
+      if (Array.isArray(parsed)) domainNames = parsed.map(String)
+    } catch {
+      domainNames = []
+    }
+    byKey.set(key, {
+      serverId: row.serverId,
+      certName: row.certName,
+      domainNames,
+      keyType: row.keyType,
+      trustStore: row.trustStore,
+      finishedAt: row.finishedAt ?? row.requestedAt,
+    })
+  }
+  return [...byKey.values()]
+}
+
+export function hasActiveIssueJob(serverId: string, certName: string): boolean {
+  const row = db.select().from(certificateIssueJobs)
+    .where(inArray(certificateIssueJobs.status, ["queued", "running"]))
+    .orderBy(desc(certificateIssueJobs.requestedAt))
+    .all()
+    .find((r) => r.serverId === serverId && r.certName === certName)
+  return Boolean(row)
+}

backend/src/services/scheduler.ts

@@ -42,6 +42,10 @@ import {
   collectInternetPathSnapshotOnce,
   getInternetPathSettings,
 } from "./internet-path-collector.js"
+import { collectCertificatesRenewOnce } from "./certificate-renew-collector.js"
+import { getCertificateRenewSettings } from "./certificates-service.js"
+import { collectScheduledBackupsOnce } from "./backup-scheduler-collector.js"
+import { getBackupScheduleSettings } from "./backup-service.js"
 import {
   endSchedulerJob,
   isSchedulerJobRunning,
@@ -57,6 +61,8 @@ export const JOB_KEYS = [
   "uptime_speed",
   "internet_path",
   "gre_bgp",
+  "certificates_renew",
+  "backups",
   "alert_engine",
 ] as const
 export type SchedulerJobKey = (typeof JOB_KEYS)[number]
@@ -119,6 +125,12 @@ async function runSchedulerJobBody(jobKey: SchedulerJobKey): Promise<void> {
       case "internet_path":
         snapshot = await collectInternetPathSnapshotOnce()
         break
+      case "certificates_renew":
+        snapshot = await collectCertificatesRenewOnce()
+        break
+      case "backups":
+        snapshot = await collectScheduledBackupsOnce()
+        break
       case "alert_engine": {
         const r = await runAlertEngineOnce()
         snapshot = {
@@ -322,6 +334,30 @@ export function refreshScheduler(): void {
     }, greBgpMs),
   )
 
+  const certRenew = getCertificateRenewSettings()
+  if (certRenew.enabled) {
+    const certRenewMs = Math.max(300_000, certRenew.intervalSec * 1000)
+    void executeSchedulerJob("certificates_renew").catch(() => {})
+    timers.set(
+      "certificates_renew",
+      setInterval(() => {
+        void executeSchedulerJob("certificates_renew").catch(() => {})
+      }, certRenewMs),
+    )
+  }
+
+  const backupSchedule = getBackupScheduleSettings()
+  if (backupSchedule.enabled) {
+    const backupMs = 60_000
+    void executeSchedulerJob("backups").catch(() => {})
+    timers.set(
+      "backups",
+      setInterval(() => {
+        void executeSchedulerJob("backups").catch(() => {})
+      }, backupMs),
+    )
+  }
+
   const alertMs = 20_000
   void executeSchedulerJob("alert_engine").catch(() => {})
   timers.set(
@@ -353,6 +389,8 @@ export function getSchedulerStatus() {
   const uptime = getUptimeSettings()
   const apiPing = getServersApiPingSettings()
   const internetPath = getInternetPathSettings()
+  const certRenew = getCertificateRenewSettings()
+  const backupSchedule = getBackupScheduleSettings()
 
   const resOn = uptime.resourcesEnabled ?? uptime.enabled
   const pingOn = uptime.pingEnabled ?? uptime.enabled
@@ -366,6 +404,8 @@ export function getSchedulerStatus() {
     uptime_speed: { enabled: spdOn, intervalSec: uptime.speedIntervalSec },
     internet_path: { enabled: internetPath.enabled, intervalSec: internetPath.intervalSec },
     gre_bgp: { enabled: true, intervalSec: 30 },
+    certificates_renew: { enabled: certRenew.enabled, intervalSec: certRenew.intervalSec },
+    backups: { enabled: backupSchedule.enabled, intervalSec: 60 },
     alert_engine: { enabled: true, intervalSec: 20 },
   }
 

backend/src/types/scheduler-run-snapshot.ts

@@ -192,6 +192,40 @@ export interface InternetPathRunSnapshot {
   fatalError?: string
 }
 
+export interface CertificatesRenewTargetSnapshot {
+  serverId: string
+  certName: string
+  action: "ok" | "renewed" | "skipped" | "error"
+  daysLeft: number | null
+  message: string
+}
+
+export interface CertificatesRenewRunSnapshot {
+  v: typeof SCHEDULER_RUN_SNAPSHOT_VERSION
+  job: "certificates_renew"
+  sampledAt: string
+  skipped?: boolean
+  fatalError?: string
+  checked: number
+  renewed: number
+  skippedTargets: number
+  errors: string[]
+  targets?: CertificatesRenewTargetSnapshot[]
+}
+
+export interface BackupsRunSnapshot {
+  v: typeof SCHEDULER_RUN_SNAPSHOT_VERSION
+  job: "backups"
+  sampledAt: string
+  skipped?: boolean
+  due: boolean
+  created: number
+  failures: number
+  pruned: number
+  errors?: string[]
+  fatalError?: string
+}
+
 export type SchedulerRunSnapshot =
   | TrafficRunSnapshot
   | ResourcesRunSnapshot
@@ -200,4 +234,6 @@ export type SchedulerRunSnapshot =
   | ServersRestPingRunSnapshot
   | GreBgpSnapshotRunSnapshot
   | InternetPathRunSnapshot
+  | CertificatesRenewRunSnapshot
+  | BackupsRunSnapshot
   | AlertEngineRunSnapshot

backend/storage/backups/index.json

@@ -1,111 +0,0 @@
-[
-  {
-    "id": "b820bdc8-d184-4615-92e1-40df3872d554",
-    "serverId": "2",
-    "serverName": "Gateway",
-    "filename": "Gateway_2026-05-07_14-41-51.rsc",
-    "sizeBytes": 913056,
-    "createdAt": "2026-05-07T07:41:51.371Z",
-    "kind": "manual"
-  },
-  {
-    "id": "7d46ee5b-c829-4d42-af90-847026bafd8a",
-    "serverId": "6",
-    "serverName": "ihor.msk.rt.shx.su",
-    "filename": "ihor.msk.rt.shx.su_2026-05-07_14-19-22.rsc",
-    "sizeBytes": 676415,
-    "createdAt": "2026-05-07T07:19:22.073Z",
-    "kind": "manual"
-  },
-  {
-    "id": "c34f71e5-6766-456b-9b8a-9b8efaa91edc",
-    "serverId": "5",
-    "serverName": "servhost.nsk.rt.shx.su",
-    "filename": "servhost.nsk.rt.shx.su_2026-05-07_14-19-19.rsc",
-    "sizeBytes": 672268,
-    "createdAt": "2026-05-07T07:19:19.639Z",
-    "kind": "manual"
-  },
-  {
-    "id": "40e253a1-98a8-40a7-982b-7c5af213f490",
-    "serverId": "4",
-    "serverName": "veesp.swe.rt.shx.su",
-    "filename": "veesp.swe.rt.shx.su_2026-05-07_14-19-17.rsc",
-    "sizeBytes": 2131,
-    "createdAt": "2026-05-07T07:19:17.801Z",
-    "kind": "manual"
-  },
-  {
-    "id": "9199d0a8-9bc0-4d20-8498-b37f1f15262b",
-    "serverId": "3",
-    "serverName": "vpsville.msk.rt.shx.su",
-    "filename": "vpsville.msk.rt.shx.su_2026-05-07_14-19-17.rsc",
-    "sizeBytes": 675732,
-    "createdAt": "2026-05-07T07:19:17.272Z",
-    "kind": "manual"
-  },
-  {
-    "id": "4de5263f-edb4-4ca9-ae90-2247defdc05e",
-    "serverId": "2",
-    "serverName": "Gateway",
-    "filename": "Gateway_2026-05-07_14-19-14.rsc",
-    "sizeBytes": 913056,
-    "createdAt": "2026-05-07T07:19:14.772Z",
-    "kind": "manual"
-  },
-  {
-    "id": "de49d319-a24f-475c-bb6e-8075eff86380",
-    "serverId": "2",
-    "serverName": "Gateway",
-    "filename": "Gateway_2026-05-07_14-16-45.rsc",
-    "sizeBytes": 911521,
-    "createdAt": "2026-05-07T07:16:45.543Z",
-    "kind": "manual",
-    "notes": "async"
-  },
-  {
-    "id": "ec5b9e31-42cb-40b9-aba7-3501d5145713",
-    "serverId": "6",
-    "serverName": "ihor.msk.rt.shx.su",
-    "filename": "ihor.msk.rt.shx.su_2026-05-07_14-13-58.rsc",
-    "sizeBytes": 676415,
-    "createdAt": "2026-05-07T07:13:58.749Z",
-    "kind": "manual"
-  },
-  {
-    "id": "7909c7de-a548-44d4-bdf7-7c221bfedd36",
-    "serverId": "5",
-    "serverName": "servhost.nsk.rt.shx.su",
-    "filename": "servhost.nsk.rt.shx.su_2026-05-07_14-13-56.rsc",
-    "sizeBytes": 672268,
-    "createdAt": "2026-05-07T07:13:56.245Z",
-    "kind": "manual"
-  },
-  {
-    "id": "63339ebb-eb94-455e-a61b-368523fed7e1",
-    "serverId": "4",
-    "serverName": "veesp.swe.rt.shx.su",
-    "filename": "veesp.swe.rt.shx.su_2026-05-07_14-13-54.rsc",
-    "sizeBytes": 2131,
-    "createdAt": "2026-05-07T07:13:54.493Z",
-    "kind": "manual"
-  },
-  {
-    "id": "daccab1d-f60a-4570-9d11-c7b06491f6f7",
-    "serverId": "3",
-    "serverName": "vpsville.msk.rt.shx.su",
-    "filename": "vpsville.msk.rt.shx.su_2026-05-07_14-13-53.rsc",
-    "sizeBytes": 675732,
-    "createdAt": "2026-05-07T07:13:53.791Z",
-    "kind": "manual"
-  },
-  {
-    "id": "d976cae6-aae8-4f55-9452-71d5480ac8e8",
-    "serverId": "2",
-    "serverName": "Gateway",
-    "filename": "Gateway_2026-05-07_14-13-48.rsc",
-    "sizeBytes": 913056,
-    "createdAt": "2026-05-07T07:13:48.326Z",
-    "kind": "manual"
-  }
-]

backend/storage/backups/veesp.swe.rt.shx.su_2026-05-07_14-13-22.rsc

@@ -1,44 +0,0 @@
-# synthetic export generated by MikrotikManager
-# generated-at: 2026-05-07T07:13:21.880Z
-
-/system identity
-set name="veesp.swe.rt.shx.su"
-
-/interface
-:put "interface name="ether1" mtu=1500 disabled=no"
-:put "interface name="MSK-DC" mtu=1350 disabled=no"
-:put "interface name="MSK-IHOR" mtu=1400 disabled=no"
-:put "interface name="MSK-VPSVILLE" mtu=1400 disabled=no"
-:put "interface name="NSK-SERVHOST" mtu=1400 disabled=no"
-:put "interface name="br1" mtu=1500 disabled=no"
-:put "interface name="gre-tunnel1" mtu=1450 disabled=no"
-:put "interface name="lo" mtu=65536 disabled=no"
-:put "interface name="wg-tunnel" mtu=1420 disabled=no"
-:put "interface name="wg1" mtu=1280 disabled=no"
-
-/ip address
-add address=62.182.194.146/24 interface="ether1"
-add address=10.200.100.26/30 interface="MSK-IHOR"
-add address=10.200.200.2/30 interface="*5"
-add address=10.200.40.2/30 interface="MSK-VPSVILLE"
-add address=10.205.1.2/30 interface="wg1"
-add address=10.200.100.2/30 interface="*11" comment="Interface: MSK-SELECTEL (GRE) to selectel.msk.rt.shx.su"
-add address=10.200.100.38/30 interface="MSK-DC" comment="Interface: MSK-DC (GRE) to dc.msk.rt.shx.su"
-add address=10.200.100.14/30 interface="MSK-VPSVILLE" comment="Interface: MSK-VPSVILLE (GRE) to vpsville.msk.rt.shx.su"
-add address=10.101.1.2/30 interface="gre-tunnel1"
-add address=10.200.100.54/30 interface="NSK-SERVHOST" comment="Interface: NSK-SERVHOST (GRE) to servhost.nsk.rt.shx.su"
-
-/ip route
-add dst-address=0.0.0.0/0 gateway=62.182.194.1 distance=1
-add dst-address=10.101.1.0/30 gateway=gre-tunnel1 distance=0
-add dst-address=10.200.100.12/30 gateway=MSK-VPSVILLE distance=0
-add dst-address=10.200.100.24/30 gateway=MSK-IHOR distance=0
-add dst-address=10.200.100.36/30 gateway=MSK-DC distance=0
-add dst-address=10.200.100.52/30 gateway=NSK-SERVHOST distance=0
-add dst-address=10.205.1.0/30 gateway=wg1 distance=0
-add dst-address=62.182.194.0/24 gateway=br1 distance=0
-add dst-address=192.168.0.0/16 gateway=10.200.100.13%MSK-VPSVILLE distance=1
-
-/ip firewall filter
-add chain=input action=drop protocol=udp dst-port=53
-add chain=input action=accept protocol=udp dst-port=13231

backend/storage/backups/veesp.swe.rt.shx.su_2026-05-07_14-13-54.rsc

@@ -1,44 +0,0 @@
-# synthetic export generated by MikrotikManager
-# generated-at: 2026-05-07T07:13:54.118Z
-
-/system identity
-set name="veesp.swe.rt.shx.su"
-
-/interface
-:put "interface name="ether1" mtu=1500 disabled=no"
-:put "interface name="MSK-DC" mtu=1350 disabled=no"
-:put "interface name="MSK-IHOR" mtu=1400 disabled=no"
-:put "interface name="MSK-VPSVILLE" mtu=1400 disabled=no"
-:put "interface name="NSK-SERVHOST" mtu=1400 disabled=no"
-:put "interface name="br1" mtu=1500 disabled=no"
-:put "interface name="gre-tunnel1" mtu=1450 disabled=no"
-:put "interface name="lo" mtu=65536 disabled=no"
-:put "interface name="wg-tunnel" mtu=1420 disabled=no"
-:put "interface name="wg1" mtu=1280 disabled=no"
-
-/ip address
-add address=62.182.194.146/24 interface="ether1"
-add address=10.200.100.26/30 interface="MSK-IHOR"
-add address=10.200.200.2/30 interface="*5"
-add address=10.200.40.2/30 interface="MSK-VPSVILLE"
-add address=10.205.1.2/30 interface="wg1"
-add address=10.200.100.2/30 interface="*11" comment="Interface: MSK-SELECTEL (GRE) to selectel.msk.rt.shx.su"
-add address=10.200.100.38/30 interface="MSK-DC" comment="Interface: MSK-DC (GRE) to dc.msk.rt.shx.su"
-add address=10.200.100.14/30 interface="MSK-VPSVILLE" comment="Interface: MSK-VPSVILLE (GRE) to vpsville.msk.rt.shx.su"
-add address=10.101.1.2/30 interface="gre-tunnel1"
-add address=10.200.100.54/30 interface="NSK-SERVHOST" comment="Interface: NSK-SERVHOST (GRE) to servhost.nsk.rt.shx.su"
-
-/ip route
-add dst-address=0.0.0.0/0 gateway=62.182.194.1 distance=1
-add dst-address=10.101.1.0/30 gateway=gre-tunnel1 distance=0
-add dst-address=10.200.100.12/30 gateway=MSK-VPSVILLE distance=0
-add dst-address=10.200.100.24/30 gateway=MSK-IHOR distance=0
-add dst-address=10.200.100.36/30 gateway=MSK-DC distance=0
-add dst-address=10.200.100.52/30 gateway=NSK-SERVHOST distance=0
-add dst-address=10.205.1.0/30 gateway=wg1 distance=0
-add dst-address=62.182.194.0/24 gateway=br1 distance=0
-add dst-address=192.168.0.0/16 gateway=10.200.100.13%MSK-VPSVILLE distance=1
-
-/ip firewall filter
-add chain=input action=drop protocol=udp dst-port=53
-add chain=input action=accept protocol=udp dst-port=13231

backend/storage/backups/veesp.swe.rt.shx.su_2026-05-07_14-19-17.rsc

@@ -1,44 +0,0 @@
-# synthetic export generated by MikrotikManager
-# generated-at: 2026-05-07T07:19:17.424Z
-
-/system identity
-set name="veesp.swe.rt.shx.su"
-
-/interface
-:put "interface name="ether1" mtu=1500 disabled=no"
-:put "interface name="MSK-DC" mtu=1350 disabled=no"
-:put "interface name="MSK-IHOR" mtu=1400 disabled=no"
-:put "interface name="MSK-VPSVILLE" mtu=1400 disabled=no"
-:put "interface name="NSK-SERVHOST" mtu=1400 disabled=no"
-:put "interface name="br1" mtu=1500 disabled=no"
-:put "interface name="gre-tunnel1" mtu=1450 disabled=no"
-:put "interface name="lo" mtu=65536 disabled=no"
-:put "interface name="wg-tunnel" mtu=1420 disabled=no"
-:put "interface name="wg1" mtu=1280 disabled=no"
-
-/ip address
-add address=62.182.194.146/24 interface="ether1"
-add address=10.200.100.26/30 interface="MSK-IHOR"
-add address=10.200.200.2/30 interface="*5"
-add address=10.200.40.2/30 interface="MSK-VPSVILLE"
-add address=10.205.1.2/30 interface="wg1"
-add address=10.200.100.2/30 interface="*11" comment="Interface: MSK-SELECTEL (GRE) to selectel.msk.rt.shx.su"
-add address=10.200.100.38/30 interface="MSK-DC" comment="Interface: MSK-DC (GRE) to dc.msk.rt.shx.su"
-add address=10.200.100.14/30 interface="MSK-VPSVILLE" comment="Interface: MSK-VPSVILLE (GRE) to vpsville.msk.rt.shx.su"
-add address=10.101.1.2/30 interface="gre-tunnel1"
-add address=10.200.100.54/30 interface="NSK-SERVHOST" comment="Interface: NSK-SERVHOST (GRE) to servhost.nsk.rt.shx.su"
-
-/ip route
-add dst-address=0.0.0.0/0 gateway=62.182.194.1 distance=1
-add dst-address=10.101.1.0/30 gateway=gre-tunnel1 distance=0
-add dst-address=10.200.100.12/30 gateway=MSK-VPSVILLE distance=0
-add dst-address=10.200.100.24/30 gateway=MSK-IHOR distance=0
-add dst-address=10.200.100.36/30 gateway=MSK-DC distance=0
-add dst-address=10.200.100.52/30 gateway=NSK-SERVHOST distance=0
-add dst-address=10.205.1.0/30 gateway=wg1 distance=0
-add dst-address=62.182.194.0/24 gateway=br1 distance=0
-add dst-address=192.168.0.0/16 gateway=10.200.100.13%MSK-VPSVILLE distance=1
-
-/ip firewall filter
-add chain=input action=drop protocol=udp dst-port=53
-add chain=input action=accept protocol=udp dst-port=13231

components.json

@@ -21,5 +21,7 @@
   },
   "menuColor": "default",
   "menuAccent": "subtle",
-  "registries": {}
+  "registries": {
+    "@reui": "https://reui.io/r/{style}/{name}.json"
+  }
 }

components/data-grids/asns-data-grid.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { Asn } from "@/lib/data"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { FilterIcon, NetworkIcon } from "lucide-react"
+
+interface AsnsDataGridProps {
+  asns: Asn[]
+  isLoading?: boolean
+  pagination?: boolean
+}
+
+function AsnsDataGrid({ asns, isLoading, pagination = false }: AsnsDataGridProps) {
+  const columns = useMemo<ColumnDef<Asn>[]>(
+    () => [
+      {
+        id: "asn",
+        accessorKey: "asn",
+        header: ({ column }) => <DataGridSortHeader column={column} title="ASN" className="ml-1" />,
+        cell: ({ row }) => <span className="font-mono font-semibold">{row.original.asn}</span>,
+        meta: {
+          headerTitle: "ASN",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "org",
+        accessorKey: "org",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Имя / организация" />,
+        cell: ({ row }) => (
+          <span className="font-medium max-w-[min(28rem,50vw)] truncate block" title={row.original.org}>
+            {row.original.org}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Имя / организация",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "prefixes",
+        accessorKey: "prefixes",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Префиксов" />,
+        cell: ({ row }) => (
+          <span className="font-mono tabular-nums">{row.original.prefixes.toLocaleString("ru")}</span>
+        ),
+        meta: {
+          headerTitle: "Префиксов",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "filter",
+        accessorKey: "filter",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Фильтр" />,
+        cell: ({ row }) => (
+          <span className="inline-flex items-center gap-1 text-xs bg-muted rounded px-2 py-0.5">
+            <FilterIcon className="size-3 text-muted-foreground" />
+            {row.original.filter}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Фильтр",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "updated",
+        accessorKey: "updated",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Обновлён" />,
+        cell: ({ row }) => <span className="text-xs text-muted-foreground">{row.original.updated}</span>,
+        meta: {
+          headerTitle: "Обновлён",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "enabled",
+        accessorKey: "enabled",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
+        cell: ({ row }) => (
+          <span
+            className={`text-xs font-medium ${row.original.enabled ? "text-emerald-600" : "text-muted-foreground"}`}
+          >
+            {row.original.enabled ? "Активен" : "Отключён"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Статус",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: asns,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    ...(pagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={asns.length}
+      isLoading={isLoading}
+      loadingMode="skeleton"
+      pagination={pagination}
+      emptyMessage={
+        <EmptyState
+          icon={<NetworkIcon className="size-4" />}
+          title="Нет ASN"
+          description="Добавьте автономные системы или импортируйте каталог"
+          className="border-0 py-12"
+        />
+      }
+    />
+  )
+}
+
+export { AsnsDataGrid, type AsnsDataGridProps }

components/data-grids/backups-data-grid.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { Backup } from "@/lib/data"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { DownloadIcon, HardDriveIcon, RefreshCwIcon, Trash2Icon } from "lucide-react"
+
+interface BackupsDataGridProps {
+  backups: Backup[]
+  onDownload: (id: string, filename: string) => void
+  onRestore: (backup: Backup) => void
+  onDelete: (id: string) => void
+}
+
+function BackupsDataGrid({
+  backups,
+  onDownload,
+  onRestore,
+  onDelete,
+}: BackupsDataGridProps) {
+  const columns = useMemo<ColumnDef<Backup>[]>(
+    () => [
+      {
+        id: "filename",
+        accessorKey: "filename",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Файл" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs font-medium">{row.original.filename}</span>
+        ),
+        meta: {
+          headerTitle: "Файл",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "server",
+        accessorKey: "server",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground">{row.original.server}</span>
+        ),
+        meta: {
+          headerTitle: "Сервер",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "size",
+        accessorKey: "size",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Размер" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">{row.original.size}</span>
+        ),
+        meta: {
+          headerTitle: "Размер",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "kind",
+        accessorKey: "kind",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
+        cell: ({ row }) => {
+          const kind = row.original.kind
+          return (
+            <span
+              className={cn(
+                "text-xs px-2 py-0.5 rounded border font-medium",
+                kind === "manual"
+                  ? "bg-blue-500/10 text-blue-400 border-blue-500/20"
+                  : "bg-muted text-muted-foreground border-border",
+              )}
+            >
+              {kind === "auto" ? "авто" : "вручную"}
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Тип",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "notes",
+        accessorKey: "notes",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Заметки" />,
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground max-w-[200px] truncate block">
+            {row.original.notes || "—"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Заметки",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "created",
+        accessorKey: "created",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Создан" />,
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground">{row.original.created}</span>
+        ),
+        meta: {
+          headerTitle: "Создан",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "actions",
+        header: () => <span className="sr-only">Действия</span>,
+        cell: ({ row }) => {
+          const b = row.original
+          return (
+            <div className="flex items-center gap-1 justify-end opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7"
+                title="Скачать"
+                onClick={() => onDownload(b.id, b.filename)}
+              >
+                <DownloadIcon className="size-3.5" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7"
+                title="Восстановить"
+                onClick={() => onRestore(b)}
+              >
+                <RefreshCwIcon className="size-3.5" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7 text-destructive hover:text-destructive"
+                title="Удалить"
+                onClick={() => onDelete(b.id)}
+              >
+                <Trash2Icon className="size-3.5" />
+              </Button>
+            </div>
+          )
+        },
+        enableSorting: false,
+        size: 120,
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [onDelete, onDownload, onRestore],
+  )
+
+  const table = useReactTable({
+    data: backups,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (backups.length === 0) {
+    return (
+      <EmptyState
+        icon={<HardDriveIcon className="size-4" />}
+        title="Нет бэкапов"
+        description="Создайте первый бэкап вручную или настройте расписание"
+        className="border-0 py-10"
+      />
+    )
+  }
+
+  return <DataGridShell table={table} recordCount={backups.length} />
+}
+
+export { BackupsDataGrid, type BackupsDataGridProps }

components/data-grids/bgp-session-detail.tsx

@@ -0,0 +1,130 @@
+"use client"
+
+import { useState } from "react"
+import { cn } from "@/lib/utils"
+import { ClipboardCopyIcon } from "lucide-react"
+import type { BgpSessionRow } from "@/lib/bgp/types"
+import { fmtBgpNum, rscBgpSnippet } from "@/lib/bgp/helpers"
+
+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 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">{fmtBgpNum(r.val)}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function BgpSessionDetail({ session }: { session: BgpSessionRow }) {
+  const [copied, setCopied] = useState(false)
+
+  function copy() {
+    navigator.clipboard.writeText(rscBgpSnippet(session)).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: session.routerId },
+          { label: "Hold / KA", value: `${session.holdTime}s / ${session.keepalive}s` },
+          { label: "AFI/SAFI", value: session.afi },
+          {
+            label: "Сообщения ↓/↑",
+            value: `${fmtBgpNum(session.inputMessages)} / ${fmtBgpNum(session.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>
+
+      {session.state === "Established" && (
+        <div className="mb-4">
+          <p className="text-[10px] text-muted-foreground mb-2 uppercase tracking-wider font-semibold">
+            Префиксы
+          </p>
+          <PrefixBar
+            rx={session.prefixesRx}
+            tx={session.prefixesTx}
+            active={session.prefixesActive}
+          />
+        </div>
+      )}
+
+      {session.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">
+            {session.capabilities.map((c) => (
+              <CapChip key={c} cap={c} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {session.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">{session.lastError}</p>
+        </div>
+      )}
+
+      <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">
+            {rscBgpSnippet(session)}
+          </pre>
+          <button
+            type="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>
+  )
+}
+
+export { BgpSessionDetail }

components/data-grids/bgp-sessions-data-grid.tsx

@@ -0,0 +1,293 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { cn } from "@/lib/utils"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { BgpSessionDetail } from "@/components/data-grids/bgp-session-detail"
+import type { BgpSessionRow, BgpState, BgpType } from "@/lib/bgp/types"
+import { BGP_AS_NAMES } from "@/lib/bgp/types"
+import { fmtBgpNum } from "@/lib/bgp/helpers"
+import { ChevronDownIcon, ChevronRightIcon, NetworkIcon } from "lucide-react"
+
+const STATE_STYLE: Record<BgpState, { bg: string; text: string; dot: string; label: string }> = {
+  Established: {
+    bg: "bg-emerald-500/10",
+    text: "text-emerald-600 dark:text-emerald-400",
+    dot: "bg-emerald-500",
+    label: "Established",
+  },
+  Active: {
+    bg: "bg-amber-500/10",
+    text: "text-amber-600 dark:text-amber-400",
+    dot: "bg-amber-500",
+    label: "Active",
+  },
+  Idle: {
+    bg: "bg-slate-500/10",
+    text: "text-slate-500 dark:text-slate-400",
+    dot: "bg-slate-500",
+    label: "Idle",
+  },
+  Connect: {
+    bg: "bg-blue-500/10",
+    text: "text-blue-600 dark:text-blue-400",
+    dot: "bg-blue-500",
+    label: "Connect",
+  },
+  OpenSent: {
+    bg: "bg-violet-500/10",
+    text: "text-violet-600 dark:text-violet-400",
+    dot: "bg-violet-500",
+    label: "OpenSent",
+  },
+  OpenConfirm: {
+    bg: "bg-violet-500/10",
+    text: "text-violet-600 dark:text-violet-400",
+    dot: "bg-violet-500",
+    label: "OpenConfirm",
+  },
+}
+
+const TYPE_STYLE: Record<BgpType, { bg: string; text: string }> = {
+  eBGP: { bg: "bg-blue-500/10", text: "text-blue-600 dark:text-blue-400" },
+  iBGP: { bg: "bg-purple-500/10", text: "text-purple-600 dark:text-purple-400" },
+}
+
+function StateBadge({ state }: { state: BgpState }) {
+  const s = STATE_STYLE[state]
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded border px-2 py-0.5 text-[11px] font-semibold",
+        s.bg,
+        s.text,
+        "border-current/20",
+      )}
+    >
+      <span className={cn("size-1.5 rounded-full shrink-0", s.dot)} />
+      {s.label}
+    </span>
+  )
+}
+
+function TypeBadge({ type }: { type: BgpType }) {
+  const s = TYPE_STYLE[type]
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded border px-1.5 py-0.5 text-[10px] font-semibold",
+        s.bg,
+        s.text,
+        "border-current/20",
+      )}
+    >
+      {type}
+    </span>
+  )
+}
+
+interface BgpSessionsDataGridProps {
+  sessions: BgpSessionRow[]
+}
+
+function BgpSessionsDataGrid({ sessions }: BgpSessionsDataGridProps) {
+  const columns = useMemo<ColumnDef<BgpSessionRow>[]>(
+    () => [
+      {
+        id: "serverLabel",
+        accessorKey: "serverLabel",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Роутер" className="ml-1" />
+        ),
+        cell: ({ row }) => {
+          const expanded = row.getIsExpanded()
+          return (
+            <div className="flex items-center gap-2">
+              {expanded ? (
+                <ChevronDownIcon className="size-3.5 shrink-0 text-muted-foreground" />
+              ) : (
+                <ChevronRightIcon className="size-3.5 shrink-0 text-muted-foreground/40" />
+              )}
+              <span className="font-mono whitespace-nowrap">{row.original.serverLabel}</span>
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Роутер",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+          expandedContent: (row: BgpSessionRow) => <BgpSessionDetail session={row} />,
+        },
+      },
+      {
+        id: "peerIp",
+        accessorKey: "peerIp",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Peer IP" />,
+        cell: ({ row }) => <span className="font-mono">{row.original.peerIp}</span>,
+        meta: {
+          headerTitle: "Peer IP",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "remoteAs",
+        accessorKey: "remoteAs",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Remote AS" />,
+        cell: ({ row }) => {
+          const as = row.original.remoteAs
+          return (
+            <div className="flex items-center gap-1.5 font-mono">
+              <span>AS{as}</span>
+              {BGP_AS_NAMES[as] && (
+                <span className="text-muted-foreground text-[10px]">{BGP_AS_NAMES[as]}</span>
+              )}
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Remote AS",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "description",
+        accessorKey: "description",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Описание" />,
+        cell: ({ row }) => (
+          <span className="text-muted-foreground max-w-[180px] truncate block">
+            {row.original.description}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Описание",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "type",
+        accessorKey: "type",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
+        cell: ({ row }) => <TypeBadge type={row.original.type} />,
+        meta: {
+          headerTitle: "Тип",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "state",
+        accessorKey: "state",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Состояние" />,
+        cell: ({ row }) => <StateBadge state={row.original.state} />,
+        meta: {
+          headerTitle: "Состояние",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "uptime",
+        accessorKey: "uptime",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Uptime" />,
+        cell: ({ row }) => (
+          <span className="font-mono tabular-nums text-muted-foreground">
+            {row.original.uptime ?? "—"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Uptime",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "prefixesRx",
+        accessorKey: "prefixesRx",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Prefixes ↓" />,
+        cell: ({ row }) => {
+          const n = row.original.prefixesRx
+          return n > 0 ? (
+            <span className="font-mono tabular-nums text-emerald-600 dark:text-emerald-400 text-right block">
+              {fmtBgpNum(n)}
+            </span>
+          ) : (
+            <span className="text-muted-foreground">—</span>
+          )
+        },
+        meta: {
+          headerTitle: "Prefixes ↓",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "prefixesTx",
+        accessorKey: "prefixesTx",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Prefixes ↑" />,
+        cell: ({ row }) => {
+          const n = row.original.prefixesTx
+          return n > 0 ? (
+            <span className="font-mono tabular-nums text-[var(--chart-tx)] text-right block">
+              {fmtBgpNum(n)}
+            </span>
+          ) : (
+            <span className="text-muted-foreground">—</span>
+          )
+        },
+        meta: {
+          headerTitle: "Prefixes ↑",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: sessions,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowId: (row) => row.id,
+    getRowCanExpand: () => true,
+  })
+
+  if (sessions.length === 0) {
+    return (
+      <EmptyState
+        icon={<NetworkIcon className="size-4" />}
+        title="Нет BGP-сессий"
+        description="Измените фильтры или проверьте подключение к роутерам"
+        className="border-0 py-10"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={sessions.length}
+      onRowClick={(row) => table.getRow(row.id).toggleExpanded()}
+    />
+  )
+}
+
+export { BgpSessionsDataGrid, type BgpSessionsDataGridProps }

components/data-grids/certificate-expanded-detail.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import type { CertificateDto } from "@mmapp/contracts/certificates"
+import { cn } from "@/lib/utils"
+
+function daysLeftBar(days: number, total = 365): number {
+  if (days <= 0) return 0
+  return Math.min(100, Math.round((days / total) * 100))
+}
+
+function CertificateExpandedDetail({ cert }: { cert: CertificateDto }) {
+  const pct = daysLeftBar(cert.daysLeft)
+
+  return (
+    <div className="px-10 pb-4 grid grid-cols-2 sm:grid-cols-4 gap-4 text-xs border-t border-border/50 pt-3">
+      <div>
+        <p className="text-muted-foreground mb-1">Key size</p>
+        <p className="font-mono font-medium">{cert.keySize} bit</p>
+      </div>
+      <div>
+        <p className="text-muted-foreground mb-1">Действителен с</p>
+        <p className="font-mono">{cert.validFrom}</p>
+      </div>
+      <div>
+        <p className="text-muted-foreground mb-1">SAN / Alt Names</p>
+        <div className="flex flex-wrap gap-1">
+          {cert.sans.length > 0
+            ? cert.sans.map((s) => (
+                <span key={s} className="font-mono bg-muted px-1.5 py-0.5 rounded">
+                  {s}
+                </span>
+              ))
+            : <span className="text-muted-foreground">—</span>}
+        </div>
+      </div>
+      <div>
+        <p className="text-muted-foreground mb-1">Trusted</p>
+        <p className={cert.trusted ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}>
+          {cert.trusted ? "Да (доверенный)" : "Нет (не доверенный)"}
+        </p>
+      </div>
+      <div className="col-span-2 sm:col-span-4">
+        <div className="h-1.5 bg-muted rounded-full overflow-hidden max-w-xs">
+          <div
+            className={cn(
+              "h-full rounded-full",
+              cert.daysLeft < 0 || cert.daysLeft <= 7
+                ? "bg-red-500"
+                : cert.daysLeft <= 30
+                  ? "bg-amber-500"
+                  : "bg-emerald-500",
+            )}
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { CertificateExpandedDetail, daysLeftBar }

components/data-grids/certificates-data-grid.tsx

@@ -0,0 +1,279 @@
+"use client"
+
+import { useMemo, type ReactNode } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { CertStatus, Server } from "@/lib/data"
+import type { CertificateDto } from "@mmapp/contracts/certificates"
+import { Flag } from "@/components/flag"
+import { cn } from "@/lib/utils"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import {
+  CertificateExpandedDetail,
+  daysLeftBar,
+} from "@/components/data-grids/certificate-expanded-detail"
+import { EmptyState } from "@/components/empty-state"
+import {
+  BadgeCheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ServerIcon,
+  ShieldAlertIcon,
+  ShieldCheckIcon,
+  ShieldOffIcon,
+} from "lucide-react"
+
+const STATUS_CONFIG: Record<
+  CertStatus,
+  { label: string; icon: ReactNode; badge: string; row: string }
+> = {
+  valid: {
+    label: "Действителен",
+    icon: <BadgeCheckIcon className="size-4 text-emerald-500" />,
+    badge: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+    row: "",
+  },
+  expired: {
+    label: "Истёк",
+    icon: <ShieldOffIcon className="size-4 text-red-500" />,
+    badge: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
+    row: "bg-red-500/5",
+  },
+  revoked: {
+    label: "Отозван",
+    icon: <ShieldAlertIcon className="size-4 text-amber-500" />,
+    badge: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
+    row: "bg-amber-500/5",
+  },
+}
+
+function daysLeftColor(days: number): string {
+  if (days < 0) return "text-red-500"
+  if (days <= 7) return "text-red-500"
+  if (days <= 30) return "text-amber-500"
+  return "text-emerald-600 dark:text-emerald-400"
+}
+
+function CertDaysCell({ cert }: { cert: CertificateDto }) {
+  const pct = daysLeftBar(cert.daysLeft)
+  return (
+    <>
+      <div className="flex items-center justify-between text-xs mb-1">
+        <span className={cn("font-mono font-medium", daysLeftColor(cert.daysLeft))}>
+          {cert.daysLeft < 0 ? `Истёк ${-cert.daysLeft}д назад` : `${cert.daysLeft}д осталось`}
+        </span>
+        <span className="text-muted-foreground text-[10px]">{cert.validUntil}</span>
+      </div>
+      <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+        <div
+          className={cn(
+            "h-full rounded-full",
+            cert.daysLeft < 0 || cert.daysLeft <= 7
+              ? "bg-red-500"
+              : cert.daysLeft <= 30
+                ? "bg-amber-500"
+                : "bg-emerald-500",
+          )}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+    </>
+  )
+}
+
+interface CertificatesDataGridProps {
+  certificates: CertificateDto[]
+  serverMap: Map<string, Server>
+  isLoading?: boolean
+}
+
+function CertificatesDataGrid({ certificates, serverMap, isLoading }: CertificatesDataGridProps) {
+  const columns = useMemo<ColumnDef<CertificateDto>[]>(
+    () => [
+      {
+        id: "name",
+        accessorKey: "name",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Сертификат" className="ml-1" />
+        ),
+        cell: ({ row }) => {
+          const cert = row.original
+          const cfg = STATUS_CONFIG[cert.status]
+          const expanded = row.getIsExpanded()
+          return (
+            <div className="flex items-start gap-2 min-w-0">
+              {expanded ? (
+                <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">
+                <div className="flex items-center gap-2 min-w-0">
+                  <span className="shrink-0">{cfg.icon}</span>
+                  <span className="font-medium text-sm truncate" title={cert.name}>
+                    {cert.name}
+                  </span>
+                </div>
+                <p className="text-xs text-muted-foreground font-mono mt-0.5 truncate" title={cert.commonName}>
+                  {cert.commonName}
+                </p>
+              </div>
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Сертификат",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+          expandedContent: (row: CertificateDto) => <CertificateExpandedDetail cert={row} />,
+        },
+      },
+      {
+        id: "server",
+        accessorKey: "serverId",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
+        cell: ({ row }) => {
+          const cert = row.original
+          const server = serverMap.get(cert.serverId)
+          return server ? (
+            <div className="flex items-center gap-1.5 text-xs text-muted-foreground min-w-0">
+              <Flag code={server.country} size={12} />
+              <span className="font-mono truncate">{server.name}</span>
+            </div>
+          ) : (
+            <div className="flex items-center gap-1.5 text-xs text-muted-foreground min-w-0">
+              <ServerIcon className="size-3.5" />
+              <span className="font-mono truncate">{cert.serverName ?? cert.serverId}</span>
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Сервер",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "issuedBy",
+        accessorKey: "issuedBy",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Издатель" />,
+        cell: ({ row }) => (
+          <p className="text-xs text-muted-foreground truncate min-w-0" title={row.original.issuedBy}>
+            {row.original.issuedBy}
+          </p>
+        ),
+        meta: {
+          headerTitle: "Издатель",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "daysLeft",
+        accessorKey: "daysLeft",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Срок" />,
+        cell: ({ row }) => (
+          <div className="min-w-0">
+            <CertDaysCell cert={row.original} />
+          </div>
+        ),
+        meta: {
+          headerTitle: "Срок",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "usage",
+        accessorKey: "usage",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Использование</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <div className="flex flex-wrap gap-1 min-w-0 overflow-hidden">
+            {row.original.usage.map((u) => (
+              <span
+                key={u}
+                className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-muted text-muted-foreground border"
+              >
+                {u}
+              </span>
+            ))}
+          </div>
+        ),
+        meta: {
+          headerTitle: "Использование",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "status",
+        accessorKey: "status",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
+        cell: ({ row }) => {
+          const cfg = STATUS_CONFIG[row.original.status]
+          return (
+            <span
+              className={cn(
+                "text-[11px] font-mono px-2 py-0.5 rounded border whitespace-nowrap",
+                cfg.badge,
+              )}
+            >
+              {cfg.label}
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Статус",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [serverMap],
+  )
+
+  const table = useReactTable({
+    data: certificates,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowId: (row) => row.id,
+    getRowCanExpand: () => true,
+  })
+
+  if (!isLoading && certificates.length === 0) {
+    return (
+      <EmptyState
+        icon={<ShieldCheckIcon className="size-4" />}
+        title="Нет сертификатов"
+        description="Выпустите или импортируйте сертификат"
+        className="border-0 py-12"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={certificates.length}
+      isLoading={isLoading}
+      loadingMode="skeleton"
+      onRowClick={(row) => table.getRow(row.id).toggleExpanded()}
+    />
+  )
+}
+
+export { CertificatesDataGrid, STATUS_CONFIG, type CertificatesDataGridProps }

components/data-grids/communities-data-grid.tsx

@@ -0,0 +1,272 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { cn } from "@/lib/utils"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  ServerIcon,
+  TagIcon,
+} from "lucide-react"
+
+export type CommunityType = "standard" | "no-export" | "no-advertise" | "local-as" | "custom"
+
+export interface CommunityRow {
+  id: string
+  value: string
+  name: string
+  description: string
+  type: CommunityType
+  filterIds: string[]
+  serverCount: number
+  prefixCount: number
+  action: "permit" | "deny" | "local-pref" | "metric"
+  actionValue?: number
+  enabled: boolean
+}
+
+const TYPE_LABELS: Record<CommunityType, string> = {
+  standard: "Стандартный",
+  "no-export": "No-export",
+  "no-advertise": "No-advertise",
+  "local-as": "Local-AS",
+  custom: "Кастомный",
+}
+
+const ACTION_LABELS: Record<CommunityRow["action"], string> = {
+  permit: "Permit",
+  deny: "Deny",
+  "local-pref": "Local-pref",
+  metric: "MED/Metric",
+}
+
+const ACTION_COLOR: Record<CommunityRow["action"], string> = {
+  permit: "text-emerald-500",
+  deny: "text-red-500",
+  "local-pref": "text-blue-500",
+  metric: "text-amber-500",
+}
+
+interface CommunitiesDataGridProps {
+  communities: CommunityRow[]
+  selectedId?: string | null
+  copiedValue?: string | null
+  onSelect: (community: CommunityRow) => void
+  onCopy: (value: string) => void
+}
+
+function CommunitiesDataGrid({
+  communities,
+  selectedId,
+  copiedValue,
+  onSelect,
+  onCopy,
+}: CommunitiesDataGridProps) {
+  const columns = useMemo<ColumnDef<CommunityRow>[]>(
+    () => [
+      {
+        id: "value",
+        accessorKey: "value",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Community" className="ml-1" />
+        ),
+        cell: ({ row }) => {
+          const c = row.original
+          return (
+            <div
+              className="flex items-center gap-2"
+              data-community-disabled={!c.enabled ? true : undefined}
+            >
+              <TagIcon className="size-3.5 text-muted-foreground shrink-0" />
+              <span className="font-mono text-xs font-medium bg-muted px-1.5 py-0.5 rounded">
+                {c.value}
+              </span>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onCopy(c.value)
+                }}
+                className="text-muted-foreground/40 hover:text-muted-foreground transition-colors"
+              >
+                {copiedValue === c.value ? (
+                  <CheckIcon className="size-3" />
+                ) : (
+                  <CopyIcon className="size-3" />
+                )}
+              </button>
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Community",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "name",
+        accessorKey: "name",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Имя / описание" />,
+        cell: ({ row }) => (
+          <div className="min-w-0">
+            <p className="font-medium text-xs">{row.original.name}</p>
+            <p className="text-xs text-muted-foreground line-clamp-1">{row.original.description}</p>
+          </div>
+        ),
+        meta: {
+          headerTitle: "Имя / описание",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "type",
+        accessorKey: "type",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground">
+            {TYPE_LABELS[row.original.type]}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Тип",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "action",
+        accessorKey: "action",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Действие" />,
+        cell: ({ row }) => {
+          const c = row.original
+          return (
+            <span className={cn("text-xs font-medium", ACTION_COLOR[c.action])}>
+              {ACTION_LABELS[c.action]}
+              {c.actionValue !== undefined ? ` ${c.actionValue}` : ""}
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Действие",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "prefixCount",
+        accessorKey: "prefixCount",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Маршрутов" className="ml-auto" />
+        ),
+        cell: ({ row }) => (
+          <span className="font-mono text-xs tabular-nums text-right block">
+            {row.original.prefixCount.toLocaleString("ru-RU")}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Маршрутов",
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+        },
+      },
+      {
+        id: "serverCount",
+        accessorKey: "serverCount",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Серверов" className="ml-auto" />
+        ),
+        cell: ({ row }) => (
+          <div className="flex items-center justify-end gap-1">
+            <ServerIcon className="size-3 text-muted-foreground" />
+            <span className="font-mono text-xs tabular-nums">
+              {row.original.serverCount.toLocaleString("ru-RU")}
+            </span>
+          </div>
+        ),
+        meta: {
+          headerTitle: "Серверов",
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+        },
+      },
+      {
+        id: "chevron",
+        header: () => <span className="sr-only">Детали</span>,
+        enableSorting: false,
+        cell: () => <ChevronRightIcon className="size-4 text-muted-foreground/40" />,
+        size: 40,
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [copiedValue, onCopy],
+  )
+
+  const rowSelection = useMemo(
+    () => (selectedId ? { [selectedId]: true } : {}),
+    [selectedId],
+  )
+
+  const table = useReactTable({
+    data: communities,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+    enableRowSelection: true,
+    state: { rowSelection },
+  })
+
+  if (communities.length === 0) {
+    return (
+      <EmptyState
+        icon={<TagIcon className="size-4" />}
+        title="Ничего не найдено"
+        className="border-0 py-16"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={communities.length}
+      onRowClick={(row) => onSelect(row)}
+      tableClassNames={{
+        headerRow: "border-b border-border",
+        bodyRow: cn(
+          "group/row",
+          "data-[state=selected]:bg-primary/5",
+          "[&:has([data-community-disabled=true])]:opacity-50",
+        ),
+      }}
+    />
+  )
+}
+
+export {
+  CommunitiesDataGrid,
+  type CommunitiesDataGridProps,
+  TYPE_LABELS,
+  ACTION_LABELS,
+  ACTION_COLOR,
+}

components/data-grids/compact-data-grid.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import { useMemo, type ReactNode } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { InboxIcon } from "lucide-react"
+
+export interface CompactDataGridColumn<T> {
+  id: string
+  header: string
+  accessorKey?: keyof T & string
+  cell?: (row: T) => ReactNode
+  enableSorting?: boolean
+  headerClassName?: string
+  cellClassName?: string
+}
+
+interface CompactDataGridProps<T extends { id: string }> {
+  data: T[]
+  columns: CompactDataGridColumn<T>[]
+  isLoading?: boolean
+  emptyTitle?: string
+  emptyDescription?: string
+  onRowClick?: (row: T) => void
+  getExpandedContent?: (row: T) => ReactNode
+}
+
+function CompactDataGrid<T extends { id: string }>({
+  data,
+  columns,
+  isLoading,
+  emptyTitle = "Нет записей",
+  emptyDescription,
+  onRowClick,
+  getExpandedContent,
+}: CompactDataGridProps<T>) {
+  const columnDefs = useMemo<ColumnDef<T>[]>(
+    () =>
+      columns.map((col, index) => ({
+        id: col.id,
+        accessorKey: col.accessorKey ?? col.id,
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title={col.header} className={index === 0 ? "ml-1" : undefined} />
+        ),
+        cell: ({ row }) => (col.cell ? col.cell(row.original) : String(row.getValue(col.id) ?? "—")),
+        enableSorting: col.enableSorting !== false,
+        meta: {
+          headerTitle: col.header,
+          headerClassName:
+            col.headerClassName ??
+            (index === 0
+              ? DATA_GRID_CELL_PAD_FIRST
+              : index === columns.length - 1
+                ? DATA_GRID_CELL_PAD_LAST
+                : DATA_GRID_CELL_PAD),
+          cellClassName:
+            col.cellClassName ??
+            (index === 0
+              ? DATA_GRID_CELL_PAD_FIRST
+              : index === columns.length - 1
+                ? DATA_GRID_CELL_PAD_LAST
+                : DATA_GRID_CELL_PAD),
+          ...(getExpandedContent && index === 0
+            ? { expandedContent: getExpandedContent }
+            : {}),
+        },
+      })),
+    [columns, getExpandedContent],
+  )
+
+  const table = useReactTable({
+    data,
+    columns: columnDefs,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    ...(getExpandedContent ? { getExpandedRowModel: getExpandedRowModel() } : {}),
+    getRowId: (row) => row.id,
+    ...(getExpandedContent ? { getRowCanExpand: () => true } : {}),
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={data.length}
+      isLoading={isLoading}
+      loadingMode="skeleton"
+      onRowClick={
+        onRowClick ??
+        (getExpandedContent
+          ? (row) => table.getRow(row.id).toggleExpanded()
+          : undefined)
+      }
+      emptyMessage={
+        <EmptyState
+          icon={<InboxIcon className="size-4" />}
+          title={emptyTitle}
+          description={emptyDescription}
+          className="border-0 py-10"
+        />
+      }
+    />
+  )
+}
+
+export { CompactDataGrid, type CompactDataGridProps }

components/data-grids/dashboard-active-probes-data-grid.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import { useMemo } from "react"
+import type { PingProbe, Server, ServerType } from "@/lib/data"
+import { Flag } from "@/components/flag"
+import { StatusBadge } from "@/components/status-badge"
+import { StatusDot } from "@/components/status-dot"
+import { Sparkline } from "@/components/sparkline"
+import { CompactDataGrid, type CompactDataGridColumn } from "@/components/data-grids/compact-data-grid"
+import { cn } from "@/lib/utils"
+import { FilterIcon } from "lucide-react"
+
+function formatLossPct(loss: number): string {
+  if (!Number.isFinite(loss)) return "—"
+  return Number.isInteger(loss) ? `${loss}%` : `${loss.toFixed(1)}%`
+}
+
+function TypeChip({ type }: { type: ServerType }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold border shrink-0",
+        type === "home-router"
+          ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
+          : type === "jump-host"
+            ? "bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20"
+            : "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20",
+      )}
+    >
+      {type === "jump-host" ? "JH" : type === "home-router" ? "HR" : "EN"}
+    </span>
+  )
+}
+
+function ProbeSourceCell({ probe, catalog }: { probe: PingProbe; catalog: Server[] }) {
+  const srv = catalog.find((s) => s.id === probe.srcServerId)
+  const iface = (probe.srcInterface ?? "").trim() || "auto"
+
+  if (!srv) {
+    return (
+      <div className="flex items-start gap-2 min-w-0 max-w-[280px]">
+        <span className="mt-1 shrink-0 inline-flex">
+          <StatusDot status="offline" />
+        </span>
+        <div className="min-w-0">
+          <p className="text-[13px] font-medium text-muted-foreground truncate">
+            Сервер <span className="font-mono tabular-nums">{probe.srcServerId}</span>
+          </p>
+          <p className="text-[11px] font-mono text-muted-foreground truncate mt-0.5" title={iface}>
+            {iface}
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-start gap-2 min-w-0 max-w-[280px]">
+      <span className="mt-1 shrink-0 inline-flex">
+        <StatusDot status={srv.status} pulse={srv.status === "online"} />
+      </span>
+      <div className="flex gap-2 min-w-0 flex-1">
+        <Flag code={srv.country} size={16} className="shrink-0 mt-0.5" />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-1.5 flex-wrap">
+            <span className="text-[13px] font-medium leading-tight truncate">{srv.name}</span>
+            <TypeChip type={srv.type} />
+          </div>
+          <p className="text-[11px] text-muted-foreground mt-0.5 truncate" title={`Интерфейс: ${iface}`}>
+            <span className="font-mono tabular-nums">{iface}</span>
+            {srv.site && srv.site !== "—" && (
+              <span className="text-muted-foreground/90"> · {srv.site}</span>
+            )}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface DashboardActiveProbesDataGridProps {
+  probes: PingProbe[]
+  catalog: Server[]
+  isLoading?: boolean
+  emptyTitle?: string
+  emptyDescription?: string
+}
+
+function DashboardActiveProbesDataGrid({
+  probes,
+  catalog,
+  isLoading,
+  emptyTitle = "Нет активных проб",
+  emptyDescription,
+}: DashboardActiveProbesDataGridProps) {
+  const columns = useMemo<CompactDataGridColumn<PingProbe>[]>(
+    () => [
+      {
+        id: "source",
+        header: "Источник",
+        enableSorting: false,
+        cell: (p) => <ProbeSourceCell probe={p} catalog={catalog} />,
+      },
+      {
+        id: "name",
+        header: "Проба",
+        accessorKey: "name",
+        cell: (p) => <span className="font-medium">{p.name}</span>,
+      },
+      {
+        id: "target",
+        header: "Цель",
+        accessorKey: "target",
+        cell: (p) => <span className="font-mono text-xs text-muted-foreground">{p.target}</span>,
+      },
+      {
+        id: "filter",
+        header: "Фильтр",
+        accessorKey: "filter",
+        enableSorting: false,
+        cell: (p) => (
+          <span className="inline-flex items-center gap-1 text-xs border border-border rounded px-2 py-0.5">
+            <FilterIcon className="size-3 text-muted-foreground" />
+            {p.filter}
+          </span>
+        ),
+      },
+      {
+        id: "rtt",
+        header: "RTT",
+        headerClassName: "text-right",
+        cellClassName: "font-mono text-right",
+        cell: (p) => (p.rtt == null ? "—" : `${p.rtt} мс`),
+      },
+      {
+        id: "loss",
+        header: "Потери",
+        headerClassName: "text-right",
+        cellClassName: "font-mono text-right",
+        cell: (p) => (
+          <span
+            className={cn(
+              p.loss > 5 ? "text-red-500" : p.loss > 0 ? "text-amber-500" : "text-muted-foreground",
+            )}
+          >
+            {formatLossPct(p.loss)}
+          </span>
+        ),
+      },
+      {
+        id: "series",
+        header: "60с",
+        enableSorting: false,
+        headerClassName: "w-36",
+        cell: (p) => {
+          const sparkColor =
+            p.status === "down"
+              ? "hsl(0 84% 60%)"
+              : p.status === "warn"
+                ? "hsl(32 94% 44%)"
+                : "hsl(142 76% 36%)"
+          return <Sparkline data={p.series} width={120} height={24} color={sparkColor} />
+        },
+      },
+      {
+        id: "status",
+        header: "Статус",
+        enableSorting: false,
+        cell: (p) => (
+          <StatusBadge
+            status={p.status === "up" ? "online" : p.status === "warn" ? "degraded" : "offline"}
+          />
+        ),
+      },
+    ],
+    [catalog],
+  )
+
+  return (
+    <CompactDataGrid
+      data={probes}
+      columns={columns}
+      isLoading={isLoading}
+      emptyTitle={emptyTitle}
+      emptyDescription={emptyDescription}
+    />
+  )
+}
+
+export { DashboardActiveProbesDataGrid, type DashboardActiveProbesDataGridProps }

components/data-grids/data-collection-scheduler-data-grid.tsx

@@ -0,0 +1,219 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { SchedulerJobStatusDto } from "@/lib/scheduler-settings"
+import { FormToggle } from "@/components/form-kit"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { cn } from "@/lib/utils"
+import { RefreshCwIcon } from "lucide-react"
+
+export interface SchedulerJobGridRow {
+  id: string
+  jobKey: string
+  label: string
+  description: string
+  fixedSchedule: boolean
+  enabled: boolean
+  intervalValue: string
+  intervalReadOnly: boolean
+  intervalDisabled: boolean
+  defaultInterval: number
+  job?: SchedulerJobStatusDto
+  onEnabledChange?: (enabled: boolean) => void
+  onIntervalChange: (value: string) => void
+  onRunNow: () => void
+  runNowLoading: boolean
+  saveBusy: boolean
+}
+
+interface DataCollectionSchedulerDataGridProps {
+  rows: SchedulerJobGridRow[]
+}
+
+function DataCollectionSchedulerDataGrid({ rows }: DataCollectionSchedulerDataGridProps) {
+  const columns = useMemo<ColumnDef<SchedulerJobGridRow>[]>(
+    () => [
+      {
+        id: "task",
+        accessorKey: "label",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Задача</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <div className="align-top">
+            <span className="font-medium text-sm">{row.original.label}</span>
+            <p className="text-[11px] text-muted-foreground mt-0.5 leading-snug">
+              {row.original.description}
+            </p>
+            <p className="text-[11px] text-muted-foreground font-mono mt-1">{row.original.jobKey}</p>
+          </div>
+        ),
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: cn(DATA_GRID_CELL_PAD_FIRST, "align-top"),
+        },
+      },
+      {
+        id: "enabled",
+        accessorKey: "enabled",
+        header: () => (
+          <span className="text-xs font-medium text-muted-foreground text-center block">Вкл</span>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => {
+          const { fixedSchedule, enabled, saveBusy, onEnabledChange } = row.original
+          return (
+            <div className="text-center align-top">
+              <span className={fixedSchedule ? "inline-flex pointer-events-none opacity-50" : "inline-flex"}>
+                <FormToggle
+                  checked={enabled}
+                  disabled={fixedSchedule || saveBusy}
+                  onChange={(v) => {
+                    if (fixedSchedule || saveBusy) return
+                    onEnabledChange?.(v)
+                  }}
+                />
+              </span>
+            </div>
+          )
+        },
+        size: 56,
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: cn(DATA_GRID_CELL_PAD, "align-top") },
+      },
+      {
+        id: "interval",
+        accessorKey: "intervalValue",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Интервал (с)</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <div className="w-28 align-top">
+              <Input
+                value={r.intervalValue}
+                onChange={(e) => r.onIntervalChange(e.target.value)}
+                className="h-8 text-sm tabular-nums"
+                inputMode="numeric"
+                readOnly={r.intervalReadOnly}
+                disabled={r.intervalDisabled}
+                placeholder={String(r.defaultInterval)}
+              />
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: cn(DATA_GRID_CELL_PAD, "align-top") },
+      },
+      {
+        id: "lastRun",
+        accessorFn: (row) => row.job?.lastFinishedAt ?? "",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Последний прогон</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const j = row.original.job
+          return (
+            <div className="text-xs text-muted-foreground align-top">
+              {j?.lastFinishedAt ? new Date(j.lastFinishedAt).toLocaleString("ru-RU") : "—"}
+              {j?.lastDurationMs != null && (
+                <span className="block text-[11px]">{j.lastDurationMs} мс</span>
+              )}
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: cn(DATA_GRID_CELL_PAD, "align-top") },
+      },
+      {
+        id: "status",
+        accessorFn: (row) => row.job?.lastStatus ?? "",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Статус</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const j = row.original.job
+          return (
+            <div className="flex flex-wrap items-center gap-1.5 align-top">
+              {j?.running ? (
+                <Badge variant="secondary" className="text-[10px]">
+                  выполняется
+                </Badge>
+              ) : null}
+              {j?.lastStatus ? (
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    "text-[10px]",
+                    j.lastStatus === "ok" && "border-emerald-500/40 text-emerald-700 dark:text-emerald-400",
+                    j.lastStatus === "error" && "border-destructive/50 text-destructive",
+                  )}
+                >
+                  {j.lastStatus}
+                </Badge>
+              ) : null}
+              {j?.lastError ? (
+                <span className="text-[10px] text-destructive max-w-[200px] truncate block" title={j.lastError}>
+                  {j.lastError}
+                </span>
+              ) : null}
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: cn(DATA_GRID_CELL_PAD, "align-top") },
+      },
+      {
+        id: "runNow",
+        header: () => (
+          <span className="text-xs font-medium text-muted-foreground text-right block">Сейчас</span>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <div className="text-right align-top">
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-8"
+                disabled={r.job?.running || r.runNowLoading}
+                onClick={r.onRunNow}
+              >
+                <RefreshCwIcon className={cn("size-3.5", r.runNowLoading && "animate-spin")} />
+              </Button>
+            </div>
+          )
+        },
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: cn(DATA_GRID_CELL_PAD_LAST, "align-top"),
+        },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={rows.length}
+      tableClassNames={{ bodyRow: "group/row hover:bg-muted/40 text-sm" }}
+    />
+  )
+}
+
+export { DataCollectionSchedulerDataGrid, type DataCollectionSchedulerDataGridProps }

components/data-grids/domains-data-grid.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { Domain } from "@/lib/data"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { FilterIcon, GlobeIcon } from "lucide-react"
+
+interface DomainsDataGridProps {
+  domains: Domain[]
+  isLoading?: boolean
+  pagination?: boolean
+}
+
+function DomainsDataGrid({ domains, isLoading, pagination = false }: DomainsDataGridProps) {
+  const columns = useMemo<ColumnDef<Domain>[]>(
+    () => [
+      {
+        id: "domain",
+        accessorKey: "domain",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Домен" className="ml-1" />,
+        cell: ({ row }) => <span className="font-medium">{row.original.domain}</span>,
+        meta: {
+          headerTitle: "Домен",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "resolvedIp",
+        accessorKey: "resolvedIp",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Resolved IP" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">{row.original.resolvedIp}</span>
+        ),
+        meta: {
+          headerTitle: "Resolved IP",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "asn",
+        accessorKey: "asn",
+        header: ({ column }) => <DataGridSortHeader column={column} title="ASN" />,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.asn}</span>,
+        meta: {
+          headerTitle: "ASN",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "purpose",
+        accessorKey: "purpose",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Назначение" />,
+        cell: ({ row }) => (
+          <span className="text-xs border border-border rounded px-2 py-0.5">{row.original.purpose}</span>
+        ),
+        meta: {
+          headerTitle: "Назначение",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "filter",
+        accessorKey: "filter",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Фильтр" />,
+        cell: ({ row }) => (
+          <span className="inline-flex items-center gap-1 text-xs bg-muted rounded px-2 py-0.5">
+            <FilterIcon className="size-3 text-muted-foreground" />
+            {row.original.filter}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Фильтр",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "updated",
+        accessorKey: "updated",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Обновлён" />,
+        cell: ({ row }) => <span className="text-xs text-muted-foreground">{row.original.updated}</span>,
+        meta: {
+          headerTitle: "Обновлён",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "enabled",
+        accessorKey: "enabled",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
+        cell: ({ row }) => (
+          <span
+            className={`text-xs font-medium ${row.original.enabled ? "text-emerald-600" : "text-muted-foreground"}`}
+          >
+            {row.original.enabled ? "Активен" : "Отключён"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Статус",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: domains,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    ...(pagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={domains.length}
+      isLoading={isLoading}
+      loadingMode="skeleton"
+      pagination={pagination}
+      emptyMessage={
+        <EmptyState
+          icon={<GlobeIcon className="size-4" />}
+          title="Нет доменов"
+          description="Добавьте домены или импортируйте каталог"
+          className="border-0 py-12"
+        />
+      }
+    />
+  )
+}
+
+export { DomainsDataGrid, type DomainsDataGridProps }

components/data-grids/filters-data-grid.tsx

@@ -0,0 +1,457 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { FilterRule, GreTunnel, Server } from "@/lib/data"
+import { Flag } from "@/components/flag"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import {
+  AlertCircleIcon,
+  AlertTriangleIcon,
+  CheckCircle2Icon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CircleDashedIcon,
+  PencilIcon,
+  RouteIcon,
+  StarIcon,
+  TrashIcon,
+  XCircleIcon,
+  FilterIcon,
+} from "lucide-react"
+
+export type FilterRouterSyncStatus = "synced" | "drift" | "missing"
+
+export interface RecursiveRouteLite {
+  id: string
+  dstAddress: string
+  gateway: string
+  distance: number
+  routingTable: string
+  comment: string
+  disabled: boolean
+}
+
+function RouterSyncMarker({
+  status,
+}: {
+  status: FilterRouterSyncStatus | null | "skip"
+}) {
+  if (status === "skip") {
+    return <span className="size-3.5 shrink-0 block" aria-hidden />
+  }
+  const icon =
+    status === "synced"
+      ? <CheckCircle2Icon className="size-3.5 text-emerald-600 dark:text-emerald-500 shrink-0" />
+      : status === "drift"
+        ? <AlertTriangleIcon className="size-3.5 text-amber-500 shrink-0" />
+        : status === "missing"
+          ? <XCircleIcon className="size-3.5 text-destructive shrink-0" />
+          : <CircleDashedIcon className="size-3.5 text-muted-foreground/35 shrink-0" />
+  const title =
+    status === "synced"
+      ? "Совпадает с цепочкой bgp-in на MikroTik"
+      : status === "drift"
+        ? "В БД и на роутере разное действие (gateway, blackhole или out-interface)"
+        : status === "missing"
+          ? "Эта community не найдена в правиле bgp-in на роутере"
+          : "Не проверено — нажмите «Сверить с роутером»"
+  return (
+    <Tooltip>
+      <TooltipTrigger className="inline-flex cursor-default border-0 bg-transparent p-0">
+        {icon}
+      </TooltipTrigger>
+      <TooltipContent side="top" className="max-w-xs">
+        {title}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+function innerIpToGateway(ip: string) {
+  return ip.split("/")[0]
+}
+
+function gatewayFromRecursiveDst(dstAddress: string) {
+  return innerIpToGateway((dstAddress ?? "").trim())
+}
+
+function pickRecursiveRouteByGatewayHop(routes: RecursiveRouteLite[], hopIp: string) {
+  const hop = hopIp.trim()
+  if (!hop) return undefined
+  const candidates = routes.filter(
+    (r) => !r.disabled && gatewayFromRecursiveDst(r.dstAddress) === hop,
+  )
+  if (candidates.length === 0) return undefined
+  return candidates.reduce((a, b) => (a.distance <= b.distance ? a : b))
+}
+
+function isRecursiveGatewayRef(ref: string) {
+  return ref.startsWith("rec:")
+}
+
+function FilterGatewayCell({
+  rule,
+  tunnelsList,
+  serversList,
+  recursiveRoutes,
+}: {
+  rule: FilterRule
+  tunnelsList: GreTunnel[]
+  serversList: Server[]
+  recursiveRoutes: RecursiveRouteLite[]
+}) {
+  const isBlackhole = rule.action === "blackhole"
+  const isRecRef = !isBlackhole && isRecursiveGatewayRef(rule.gatewayTunnelId)
+  const recRowByRef = isRecRef
+    ? recursiveRoutes.find((r) => r.id === rule.gatewayTunnelId.slice(4))
+    : undefined
+  const recRowByHop =
+    !isBlackhole && !(rule.gatewayTunnelId ?? "").trim() && rule.gateway.trim()
+      ? pickRecursiveRouteByGatewayHop(recursiveRoutes, rule.gateway)
+      : undefined
+  const recRow = recRowByRef ?? recRowByHop
+  const treatAsRecursive = !isBlackhole && (isRecRef || !!recRowByHop)
+  const tunnel =
+    !isBlackhole && !treatAsRecursive
+      ? tunnelsList.find((t) => t.id === rule.gatewayTunnelId)
+      : undefined
+  const remoteSrv = tunnel ? serversList.find((s) => s.host === tunnel.remoteAddress) : undefined
+
+  if (isBlackhole) {
+    return (
+      <div className="flex items-center gap-1.5">
+        <span className="size-1.5 rounded-full shrink-0 bg-red-500 animate-pulse" />
+        <span className="font-mono text-xs font-medium text-red-600 dark:text-red-400">type=blackhole</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-w-0 flex flex-col gap-0.5">
+      <div className="flex items-center gap-1.5 flex-wrap">
+        <span
+          className={cn(
+            "size-1.5 rounded-full shrink-0",
+            treatAsRecursive
+              ? "bg-sky-500"
+              : tunnel?.status === "up"
+                ? "bg-[var(--status-online)]"
+                : tunnel?.status === "degraded"
+                  ? "bg-[var(--status-degraded)]"
+                  : "bg-[var(--status-offline)]",
+          )}
+        />
+        {treatAsRecursive ? (
+          <>
+            <RouteIcon className="size-3 text-muted-foreground shrink-0" />
+            <span className="font-mono text-xs font-medium">
+              {recRow ? gatewayFromRecursiveDst(recRow.dstAddress) : rule.gateway}
+            </span>
+            <span className="text-[10px] font-medium text-muted-foreground border border-border rounded px-1 uppercase tracking-wide">
+              recursive
+            </span>
+          </>
+        ) : (
+          <>
+            {remoteSrv && <Flag code={remoteSrv.country} />}
+            <span className="font-mono text-xs font-medium">{rule.gateway}</span>
+          </>
+        )}
+      </div>
+      {treatAsRecursive ? (
+        recRow ? (
+          <p className="text-[11px] text-muted-foreground truncate pl-3">{recRow.dstAddress}</p>
+        ) : isRecRef ? (
+          <p className="text-[11px] text-amber-600 dark:text-amber-400 truncate pl-3">
+            рекурсивный маршрут (нет строки в списке)
+          </p>
+        ) : null
+      ) : tunnel ? (
+        <p className="text-[11px] text-muted-foreground truncate pl-3">{tunnel.name}</p>
+      ) : null}
+    </div>
+  )
+}
+
+function FilterRowActions({
+  onEdit,
+  onDelete,
+}: {
+  onEdit: () => void
+  onDelete: () => void
+}) {
+  const [confirmDel, setConfirmDel] = useState(false)
+  return (
+    <div className="flex items-center gap-0.5 justify-end opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100">
+      <Button
+        size="sm"
+        variant="ghost"
+        className="size-7 p-0 text-muted-foreground hover:text-foreground"
+        onClick={onEdit}
+      >
+        <PencilIcon className="size-3.5" />
+      </Button>
+      <Button
+        size="sm"
+        variant="ghost"
+        className={cn(
+          "size-7 p-0 transition-colors",
+          confirmDel
+            ? "text-destructive bg-destructive/10 hover:bg-destructive/20"
+            : "text-muted-foreground hover:text-destructive",
+        )}
+        onClick={() => {
+          if (!confirmDel) setConfirmDel(true)
+          else onDelete()
+        }}
+        onBlur={() => setConfirmDel(false)}
+      >
+        {confirmDel ? <AlertCircleIcon className="size-3.5" /> : <TrashIcon className="size-3.5" />}
+      </Button>
+    </div>
+  )
+}
+
+interface FiltersDataGridProps {
+  rules: FilterRule[]
+  tunnelsList: GreTunnel[]
+  serversList: Server[]
+  communityNameMap: Record<string, string>
+  recursiveRoutes: RecursiveRouteLite[]
+  routerSyncByCommunity?: Record<string, FilterRouterSyncStatus> | null
+  isLive?: boolean
+  enableSorting?: boolean
+  onEdit: (rule: FilterRule) => void
+  onDelete: (id: string) => void
+  onMoveUp: (id: string) => void
+  onMoveDown: (id: string) => void
+}
+
+function FiltersDataGrid({
+  rules,
+  tunnelsList,
+  serversList,
+  communityNameMap,
+  recursiveRoutes,
+  routerSyncByCommunity,
+  isLive,
+  enableSorting = false,
+  onEdit,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+}: FiltersDataGridProps) {
+  const columns = useMemo<ColumnDef<FilterRule>[]>(
+    () => [
+      {
+        id: "priority",
+        header: () => <span className="text-xs font-medium text-muted-foreground">#</span>,
+        enableSorting: false,
+        cell: ({ row, table }) => {
+          const isLast = row.index === table.getRowModel().rows.length - 1
+          return (
+            <div className="flex items-center justify-center text-[11px] font-mono text-muted-foreground/40">
+              {isLast ? (
+                <StarIcon className="size-3 text-amber-400 fill-amber-400" aria-label="Наивысший приоритет" />
+              ) : (
+                <span>{row.index + 1}</span>
+              )}
+            </div>
+          )
+        },
+        size: 28,
+        meta: { headerClassName: DATA_GRID_CELL_PAD_FIRST, cellClassName: DATA_GRID_CELL_PAD_FIRST },
+      },
+      {
+        id: "reorder",
+        header: () => <span className="sr-only">Порядок</span>,
+        enableSorting: false,
+        cell: ({ row, table }) => {
+          const isLast = row.index === table.getRowModel().rows.length - 1
+          return (
+            <div className="flex flex-col gap-px opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100">
+              <button
+                type="button"
+                onClick={() => onMoveUp(row.original.id)}
+                disabled={row.index === 0}
+                className="text-muted-foreground/50 hover:text-foreground disabled:opacity-20"
+              >
+                <ChevronUpIcon className="size-3" />
+              </button>
+              <button
+                type="button"
+                onClick={() => onMoveDown(row.original.id)}
+                disabled={isLast}
+                className="text-muted-foreground/50 hover:text-foreground disabled:opacity-20"
+              >
+                <ChevronDownIcon className="size-3" />
+              </button>
+            </div>
+          )
+        },
+        size: 28,
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "routerSync",
+        header: () => (
+          <Tooltip>
+            <TooltipTrigger className="cursor-help font-mono text-xs text-muted-foreground border-0 bg-transparent p-0">
+              MT
+            </TooltipTrigger>
+            <TooltipContent side="top" className="max-w-xs">
+              Совпадение с MikroTik (bgp-in)
+            </TooltipContent>
+          </Tooltip>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => (
+          <RouterSyncMarker
+            status={
+              !isLive
+                ? "skip"
+                : !routerSyncByCommunity
+                  ? null
+                  : routerSyncByCommunity[row.original.community.trim()] ?? null
+            }
+          />
+        ),
+        size: 32,
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "community",
+        accessorKey: "community",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Community" />,
+        enableSorting,
+        cell: ({ row }) => {
+          const rule = row.original
+          const isBlackhole = rule.action === "blackhole"
+          const communityName = communityNameMap[rule.community] ?? rule.communityName
+          return (
+            <div className="min-w-0">
+              <div className="flex items-center gap-1.5 flex-wrap">
+                <span
+                  className={cn(
+                    "inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium border font-mono",
+                    isBlackhole
+                      ? "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/25"
+                      : "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20",
+                  )}
+                >
+                  {rule.community}
+                </span>
+                {isBlackhole && (
+                  <span className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-semibold border bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20 uppercase">
+                    ⊘ blackhole
+                  </span>
+                )}
+              </div>
+              {communityName && (
+                <p className="text-[11px] text-muted-foreground mt-0.5 truncate">{communityName}</p>
+              )}
+            </div>
+          )
+        },
+        meta: { headerTitle: "Community", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "gateway",
+        accessorKey: "gateway",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Gateway" />,
+        enableSorting,
+        cell: ({ row }) => (
+          <FilterGatewayCell
+            rule={row.original}
+            tunnelsList={tunnelsList}
+            serversList={serversList}
+            recursiveRoutes={recursiveRoutes}
+          />
+        ),
+        meta: { headerTitle: "Gateway", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "description",
+        accessorKey: "description",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Описание" />,
+        enableSorting,
+        cell: ({ row }) => (
+          <p className="text-xs text-muted-foreground truncate">{row.original.description || "—"}</p>
+        ),
+        meta: { headerTitle: "Описание", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "actions",
+        header: () => <span className="sr-only">Действия</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <FilterRowActions
+            onEdit={() => onEdit(row.original)}
+            onDelete={() => onDelete(row.original.id)}
+          />
+        ),
+        size: 64,
+        meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
+      },
+    ],
+    [
+      communityNameMap,
+      enableSorting,
+      isLive,
+      onDelete,
+      onEdit,
+      onMoveDown,
+      onMoveUp,
+      recursiveRoutes,
+      routerSyncByCommunity,
+      serversList,
+      tunnelsList,
+    ],
+  )
+
+  const table = useReactTable({
+    data: rules,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (rules.length === 0) {
+    return (
+      <EmptyState
+        icon={<FilterIcon className="size-4" />}
+        title="Ничего не найдено"
+        className="border-0 py-16"
+      />
+    )
+  }
+
+  return (
+    <>
+      <DataGridShell table={table} recordCount={rules.length} />
+      <div className="px-5 py-2 text-[11px] text-muted-foreground/40 flex items-center gap-1.5 border-t">
+        <StarIcon className="size-3 text-amber-400 fill-amber-400 shrink-0" />
+        Последнее правило имеет наивысший приоритет в RouterOS
+      </div>
+    </>
+  )
+}
+
+export { FiltersDataGrid, RouterSyncMarker, type FiltersDataGridProps }

components/data-grids/firewall-rules-data-grid.tsx

@@ -0,0 +1,311 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { FirewallRule } from "@/lib/data"
+import { FormToggle } from "@/components/form-kit"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import {
+  CopyIcon,
+  MoreHorizontalIcon,
+  PencilIcon,
+  PowerIcon,
+  ShieldOffIcon,
+  Trash2Icon,
+} from "lucide-react"
+
+const ACTION_STYLES: Record<string, string> = {
+  accept: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+  drop: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
+  reject: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
+  masquerade: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
+  "mark-routing": "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
+  "mark-conn": "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
+  "fasttrack-connection": "bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20",
+  "dst-nat": "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20",
+  "src-nat": "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20",
+  "add-src-to-address-list": "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/20",
+}
+
+const CHAIN_STYLES: Record<string, string> = {
+  forward: "bg-foreground/5 text-foreground/70",
+  input: "bg-violet-500/10 text-violet-600 dark:text-violet-400",
+  output: "bg-sky-500/10 text-sky-600 dark:text-sky-400",
+  srcnat: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  dstnat: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  prerouting: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  postrouting: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  "ip6-input": "bg-violet-500/10 text-violet-600 dark:text-violet-400",
+  "ip6-forward": "bg-foreground/5 text-foreground/70",
+  "ip6-output": "bg-sky-500/10 text-sky-600 dark:text-sky-400",
+}
+
+function fmtHits(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}М`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}к`
+  return String(n)
+}
+
+function ActionBadge({ action }: { action: string }) {
+  const cls = ACTION_STYLES[action] ?? "bg-muted text-muted-foreground border-border"
+  return (
+    <span className={cn("text-[11px] font-mono font-medium px-2 py-0.5 rounded border whitespace-nowrap", cls)}>
+      {action}
+    </span>
+  )
+}
+
+function ChainBadge({ chain }: { chain: string }) {
+  const cls = CHAIN_STYLES[chain] ?? "bg-muted text-muted-foreground"
+  return (
+    <span className={cn("text-[11px] font-mono px-2 py-0.5 rounded", cls)}>
+      {chain}
+    </span>
+  )
+}
+
+interface FirewallRulesDataGridProps {
+  rules: FirewallRule[]
+  onToggle: (id: string) => void
+  onEdit: (rule: FirewallRule) => void
+}
+
+function FirewallRulesDataGrid({ rules, onToggle, onEdit }: FirewallRulesDataGridProps) {
+  const indexedRules = useMemo(
+    () => rules.map((rule, index) => ({ ...rule, _index: index + 1 })),
+    [rules],
+  )
+
+  const columns = useMemo<ColumnDef<FirewallRule & { _index: number }>[]>(
+    () => [
+      {
+        id: "index",
+        accessorKey: "_index",
+        header: () => <span className="text-xs font-medium text-muted-foreground">#</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <span
+            className="font-mono text-xs text-muted-foreground"
+            data-rule-disabled={!row.original.enabled ? true : undefined}
+          >
+            {row.original._index}
+          </span>
+        ),
+        size: 48,
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "chain",
+        accessorKey: "chain",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Цепочка" />,
+        cell: ({ row }) => <ChainBadge chain={row.original.chain} />,
+        meta: { headerTitle: "Цепочка", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "action",
+        accessorKey: "action",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Действие" />,
+        cell: ({ row }) => <ActionBadge action={row.original.action} />,
+        meta: { headerTitle: "Действие", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "src",
+        accessorKey: "src",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Источник" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground max-w-[140px] truncate block">
+            {row.original.src || "any"}
+          </span>
+        ),
+        meta: { headerTitle: "Источник", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "dst",
+        accessorKey: "dst",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Назначение" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground max-w-[140px] truncate block">
+            {row.original.dst || "any"}
+          </span>
+        ),
+        meta: { headerTitle: "Назначение", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "proto",
+        accessorKey: "proto",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Протокол" />,
+        cell: ({ row }) => <span className="text-xs font-mono">{row.original.proto}</span>,
+        meta: { headerTitle: "Протокол", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "port",
+        accessorKey: "port",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Порт" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">{row.original.port || "—"}</span>
+        ),
+        meta: { headerTitle: "Порт", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "iface",
+        accessorKey: "iface",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">{row.original.iface || "—"}</span>
+        ),
+        meta: { headerTitle: "Интерфейс", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "hits",
+        accessorKey: "hits",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Пакетов" className="ml-auto" />
+        ),
+        cell: ({ row }) => {
+          const hits = row.original.hits
+          return (
+            <span
+              className={cn(
+                "text-xs font-mono tabular-nums text-right block",
+                hits > 1_000_000
+                  ? "text-emerald-600 dark:text-emerald-400 font-semibold"
+                  : hits > 10_000
+                    ? "text-foreground"
+                    : "text-muted-foreground",
+              )}
+            >
+              {fmtHits(hits)}
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Пакетов",
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+        },
+      },
+      {
+        id: "enabled",
+        accessorKey: "enabled",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Вкл</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <div onClick={(e) => e.stopPropagation()}>
+            <FormToggle checked={row.original.enabled} onChange={() => onToggle(row.original.id)} />
+          </div>
+        ),
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "actions",
+        header: () => <span className="sr-only">Действия</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <div className="flex justify-end" onClick={(e) => e.stopPropagation()}>
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  render={
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      className={cn(
+                        "size-8 shrink-0 border-border/60 bg-background/80 text-muted-foreground shadow-none",
+                        "opacity-0 transition-opacity group-hover/row:opacity-100 focus-visible:opacity-100",
+                        "data-popup-open:opacity-100",
+                      )}
+                      aria-label={`Действия: ${r.chain} ${r.action}`}
+                    >
+                      <MoreHorizontalIcon className="size-4" />
+                    </Button>
+                  }
+                />
+                <DropdownMenuContent side="bottom" align="end">
+                  <DropdownMenuItem onClick={() => onEdit(r)}>
+                    <PencilIcon className="size-4" />
+                    Редактировать
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <CopyIcon className="size-4" />
+                    Дублировать
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => onToggle(r.id)}>
+                    <PowerIcon className="size-4" />
+                    {r.enabled ? "Отключить" : "Включить"}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem variant="destructive">
+                    <Trash2Icon className="size-4" />
+                    Удалить правило
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )
+        },
+        size: 56,
+        meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
+      },
+    ],
+    [onEdit, onToggle],
+  )
+
+  const table = useReactTable({
+    data: indexedRules,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (rules.length === 0) {
+    return (
+      <EmptyState
+        icon={<ShieldOffIcon className="size-4" />}
+        title="Правила не найдены"
+        description="Попробуйте изменить фильтр или добавьте новое правило"
+        className="border-0 py-16"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={rules.length}
+      tableClassNames={{
+        headerRow: "border-b border-border",
+        bodyRow: cn("group/row", "[&:has([data-rule-disabled=true])]:opacity-40"),
+      }}
+    />
+  )
+}
+
+export { FirewallRulesDataGrid, type FirewallRulesDataGridProps, ActionBadge, ChainBadge }

components/data-grids/firewall-scenario-rules-data-grid.tsx

@@ -0,0 +1,216 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { ActionBadge, ChainBadge } from "@/components/data-grids/firewall-rules-data-grid"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { cn } from "@/lib/utils"
+import { PowerIcon, Trash2Icon } from "lucide-react"
+
+function ScenarioCell({ enabled, children }: { enabled: boolean; children: React.ReactNode }) {
+  return <div className={cn(!enabled && "opacity-40")}>{children}</div>
+}
+
+export interface ScenarioRuleRow {
+  id: string
+  chain: string
+  action: string
+  proto: string
+  src: string
+  dst: string
+  port: string
+  iface: string
+  comment: string
+  enabled: boolean
+}
+
+interface FirewallScenarioRulesDataGridProps {
+  rules: ScenarioRuleRow[]
+  onToggleEnabled: (id: string) => void
+  onMoveUp: (id: string) => void
+  onMoveDown: (id: string) => void
+  onRemove: (id: string) => void
+}
+
+function FirewallScenarioRulesDataGrid({
+  rules,
+  onToggleEnabled,
+  onMoveUp,
+  onMoveDown,
+  onRemove,
+}: FirewallScenarioRulesDataGridProps) {
+  const indexedRules = useMemo(
+    () => rules.map((rule, index) => ({ ...rule, _index: index + 1 })),
+    [rules],
+  )
+
+  const columns = useMemo<ColumnDef<ScenarioRuleRow & { _index: number }>[]>(
+    () => [
+      {
+        id: "index",
+        accessorKey: "_index",
+        header: () => <span className="text-xs font-medium text-muted-foreground">#</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <ScenarioCell enabled={row.original.enabled}>
+            <span className="font-mono text-xs text-muted-foreground tabular-nums">{row.original._index}</span>
+          </ScenarioCell>
+        ),
+        size: 40,
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "chain",
+        accessorKey: "chain",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Цепочка</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <ScenarioCell enabled={row.original.enabled}>
+            <ChainBadge chain={row.original.chain} />
+          </ScenarioCell>
+        ),
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "action",
+        accessorKey: "action",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Действие</span>,
+        enableSorting: false,
+        cell: ({ row }) => <ActionBadge action={row.original.action} />,
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "src",
+        accessorKey: "src",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Src</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground max-w-[90px] truncate block">
+            {row.original.src || "any"}
+          </span>
+        ),
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "dst",
+        accessorKey: "dst",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Dst</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground max-w-[90px] truncate block">
+            {row.original.dst || "any"}
+          </span>
+        ),
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "port",
+        accessorKey: "port",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Порт</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">{row.original.port || "—"}</span>
+        ),
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "iface",
+        accessorKey: "iface",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Iface</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">{row.original.iface || "—"}</span>
+        ),
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "comment",
+        accessorKey: "comment",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Комментарий</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground/70 max-w-[110px] truncate block">
+            {row.original.comment || "—"}
+          </span>
+        ),
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "actions",
+        header: () => null,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const index = row.original._index - 1
+          return (
+            <div className="flex items-center gap-0.5 justify-end opacity-0 group-hover/row:opacity-100 transition-opacity">
+              <button
+                type="button"
+                onClick={() => onToggleEnabled(row.original.id)}
+                title={row.original.enabled ? "Отключить" : "Включить"}
+                className="p-0.5 text-muted-foreground/40 hover:text-foreground transition-colors"
+              >
+                <PowerIcon className="size-3.5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => onMoveUp(row.original.id)}
+                disabled={index === 0}
+                className="p-0.5 text-muted-foreground/40 hover:text-foreground disabled:opacity-20 transition-colors"
+              >
+                ▲
+              </button>
+              <button
+                type="button"
+                onClick={() => onMoveDown(row.original.id)}
+                disabled={index === rules.length - 1}
+                className="p-0.5 text-muted-foreground/40 hover:text-foreground disabled:opacity-20 transition-colors"
+              >
+                ▼
+              </button>
+              <button
+                type="button"
+                onClick={() => onRemove(row.original.id)}
+                className="p-0.5 ml-0.5 text-muted-foreground/40 hover:text-red-500 transition-colors"
+              >
+                <Trash2Icon className="size-3.5" />
+              </button>
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
+      },
+    ],
+    [onMoveDown, onMoveUp, onRemove, onToggleEnabled, rules.length],
+  )
+
+  const table = useReactTable({
+    data: indexedRules,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={rules.length}
+      tableClassNames={{
+        bodyRow: cn("group/row text-xs", "hover:bg-muted/20 transition-colors"),
+      }}
+    />
+  )
+}
+
+export { FirewallScenarioRulesDataGrid, type FirewallScenarioRulesDataGridProps }

components/data-grids/gre-pools-data-grid.tsx

@@ -0,0 +1,202 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { GrePool } from "@/lib/data"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { LayersIcon, MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react"
+
+interface GrePoolsDataGridProps {
+  pools: GrePool[]
+}
+
+function GrePoolsDataGrid({ pools }: GrePoolsDataGridProps) {
+  const columns = useMemo<ColumnDef<GrePool>[]>(
+    () => [
+      {
+        id: "name",
+        accessorKey: "name",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Имя пула" className="ml-1" />
+        ),
+        cell: ({ row }) => (
+          <span className="font-mono text-[13px] font-medium">{row.original.name}</span>
+        ),
+        meta: {
+          headerTitle: "Имя пула",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "cidr",
+        accessorKey: "cidr",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Диапазон CIDR" />,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.cidr}</span>,
+        meta: {
+          headerTitle: "Диапазон CIDR",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "allocated",
+        accessorKey: "allocated",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Назначено /30" className="ml-auto" />
+        ),
+        cell: ({ row }) => (
+          <span className="tabular-nums text-right block">{row.original.allocated}</span>
+        ),
+        meta: {
+          headerTitle: "Назначено /30",
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+        },
+      },
+      {
+        id: "available",
+        header: () => (
+          <span className="text-xs font-medium text-muted-foreground block text-right">
+            Доступно /30
+          </span>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => {
+          const p = row.original
+          return (
+            <span className="tabular-nums text-muted-foreground text-right block">
+              {p.total - p.allocated}
+            </span>
+          )
+        },
+        meta: {
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+        },
+      },
+      {
+        id: "usage",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Использование</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const pool = row.original
+          const pct = pool.total > 0 ? Math.round((pool.allocated / pool.total) * 100) : 0
+          return (
+            <div className="flex items-center gap-2 min-w-[140px]">
+              <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+                <div
+                  className={cn("h-full rounded-full", pct > 80 ? "bg-amber-500" : "bg-emerald-500")}
+                  style={{ width: `${pct}%` }}
+                />
+              </div>
+              <span className="text-xs text-muted-foreground tabular-nums w-8 text-right">{pct}%</span>
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "comment",
+        accessorKey: "comment",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Назначение" />,
+        cell: ({ row }) => (
+          <span className="text-muted-foreground text-xs">{row.original.comment}</span>
+        ),
+        meta: {
+          headerTitle: "Назначение",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "actions",
+        header: () => <span className="sr-only">Действия</span>,
+        enableSorting: false,
+        cell: () => (
+          <div className="flex justify-end">
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    className={cn(
+                      "size-8 shrink-0 border-border/60 bg-background/80 text-muted-foreground shadow-none",
+                      "opacity-0 transition-opacity group-hover/row:opacity-100 focus-visible:opacity-100",
+                      "data-popup-open:opacity-100",
+                    )}
+                  >
+                    <MoreHorizontalIcon className="size-4" />
+                  </Button>
+                }
+              />
+              <DropdownMenuContent side="bottom" align="end">
+                <DropdownMenuItem>
+                  <PencilIcon className="size-4" /> Редактировать
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">
+                  <Trash2Icon className="size-4" /> Удалить пул
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        ),
+        size: 56,
+        meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: pools,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (pools.length === 0) {
+    return (
+      <EmptyState
+        icon={<LayersIcon className="size-4" />}
+        title="Нет IP-пулов"
+        className="border-0 py-16"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={pools.length}
+      tableClassNames={{ headerRow: "border-b border-border", bodyRow: "group/row" }}
+    />
+  )
+}
+
+export { GrePoolsDataGrid, type GrePoolsDataGridProps }

components/data-grids/gre-tunnels-data-grid.tsx

@@ -0,0 +1,352 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type {
+  GrePool,
+  GreTunnel,
+  GreStatus,
+  IpsecEncAlg,
+  IpsecAuthAlg,
+  IpsecDhGroup,
+  IkeVersion,
+  Server,
+} from "@/lib/data"
+import { Flag } from "@/components/flag"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import {
+  CodeXmlIcon,
+  LockIcon,
+  LockOpenIcon,
+  MoreHorizontalIcon,
+  NetworkIcon,
+  PencilIcon,
+  PowerIcon,
+  Trash2Icon,
+} from "lucide-react"
+
+const ENC_LABELS: Record<IpsecEncAlg, string> = {
+  "aes-128": "AES-128",
+  "aes-192": "AES-192",
+  "aes-256": "AES-256",
+}
+const AUTH_LABELS: Record<IpsecAuthAlg, string> = {
+  sha1: "SHA-1",
+  sha256: "SHA-256",
+  sha512: "SHA-512",
+}
+const DH_LABELS: Record<IpsecDhGroup, string> = {
+  modp1024: "DH-2 (1024)",
+  modp2048: "DH-14 (2048)",
+  modp4096: "DH-16 (4096)",
+  ecp256: "ECP-256",
+  ecp384: "ECP-384",
+  ecp521: "ECP-521",
+}
+const IKE_LABELS: Record<IkeVersion, string> = { ikev1: "IKEv1", ikev2: "IKEv2" }
+
+const STATUS_MAP: Record<GreStatus, { label: string; dot: string }> = {
+  up: { label: "Up", dot: "bg-emerald-500" },
+  degraded: { label: "Degraded", dot: "bg-amber-500" },
+  down: { label: "Down", dot: "bg-red-500" },
+}
+
+function TunnelStatus({ status }: { status: GreStatus }) {
+  const s = STATUS_MAP[status]
+  return (
+    <span className="inline-flex items-center gap-1.5 text-sm">
+      <span className={cn("size-1.5 rounded-full", s.dot)} />
+      {s.label}
+    </span>
+  )
+}
+
+function IpsecBadge({ secured }: { secured: boolean }) {
+  return secured ? (
+    <span className="inline-flex items-center gap-1 text-xs font-medium border rounded px-2 py-0.5 bg-emerald-500/10 text-emerald-400 border-emerald-500/20">
+      <LockIcon className="size-3" /> IPsec
+    </span>
+  ) : (
+    <span className="inline-flex items-center gap-1 text-xs font-medium border rounded px-2 py-0.5 bg-muted text-muted-foreground border-border">
+      <LockOpenIcon className="size-3" /> Открытый
+    </span>
+  )
+}
+
+interface GreTunnelsDataGridProps {
+  tunnels: GreTunnel[]
+  servers: Server[]
+  pools: GrePool[]
+  onCodePreview: (tunnel: GreTunnel) => void
+}
+
+function GreTunnelsDataGrid({
+  tunnels,
+  servers,
+  pools,
+  onCodePreview,
+}: GreTunnelsDataGridProps) {
+  const serverMap = useMemo(() => new Map(servers.map((s) => [s.id, s])), [servers])
+  const poolMap = useMemo(() => new Map(pools.map((p) => [p.id, p])), [pools])
+
+  const columns = useMemo<ColumnDef<GreTunnel>[]>(
+    () => [
+      {
+        id: "name",
+        accessorKey: "name",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Интерфейс / Сервер" className="ml-1" />
+        ),
+        cell: ({ row }) => {
+          const t = row.original
+          const srv = serverMap.get(t.serverId)
+          return (
+            <div className="min-w-0">
+              <p className="font-medium font-mono text-[13px]">{t.name}</p>
+              <p className="text-xs text-muted-foreground mt-0.5 flex items-center gap-1">
+                {srv && <Flag code={srv.country} />}
+                {srv?.name ?? t.serverId}
+              </p>
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Интерфейс / Сервер",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "endpoints",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Эндпоинты</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const t = row.original
+          return (
+            <div>
+              <p className="font-mono text-xs">
+                {t.localAddress === "0.0.0.0" ? (
+                  <span className="text-muted-foreground">авто</span>
+                ) : (
+                  t.localAddress
+                )}
+              </p>
+              <p className="font-mono text-xs text-muted-foreground">→ {t.remoteAddress}</p>
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "innerIp",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Внутренний IP</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const t = row.original
+          return (
+            <div>
+              <p className="font-mono text-xs">{t.localInnerIp}</p>
+              <p className="font-mono text-xs text-muted-foreground">{t.remoteInnerIp}</p>
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "pool",
+        accessorKey: "poolId",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Пул" />,
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground font-mono">
+            {poolMap.get(row.original.poolId)?.name ?? "—"}
+          </span>
+        ),
+        meta: { headerTitle: "Пул", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "ipsec",
+        header: () => <span className="text-xs font-medium text-muted-foreground">IPsec</span>,
+        enableSorting: false,
+        cell: ({ row }) => <IpsecBadge secured={!!row.original.ipsec} />,
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "encryption",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Шифрование</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const t = row.original
+          if (!t.ipsec) return <span className="text-xs text-muted-foreground">—</span>
+          return (
+            <div className="flex flex-col gap-0.5">
+              <span className="text-xs font-mono">
+                {ENC_LABELS[t.ipsec.encAlg]} / {AUTH_LABELS[t.ipsec.authAlg]}
+              </span>
+              <span className="text-xs text-muted-foreground font-mono">
+                {DH_LABELS[t.ipsec.dhGroup].split(" ")[0]} · {IKE_LABELS[t.ipsec.ikeVersion]}
+                {t.ipsec.pfs && " · PFS"}
+              </span>
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "mtu",
+        accessorKey: "mtu",
+        header: ({ column }) => <DataGridSortHeader column={column} title="MTU" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-center block">{row.original.mtu}</span>
+        ),
+        meta: {
+          headerTitle: "MTU",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+        },
+      },
+      {
+        id: "keepalive",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Keepalive</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const t = row.original
+          return (
+            <span className="font-mono text-xs text-muted-foreground">
+              {t.keepaliveInterval === 0 ? "откл." : `${t.keepaliveInterval}с / ${t.keepaliveRetries}`}
+            </span>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "status",
+        accessorKey: "status",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
+        cell: ({ row }) => <TunnelStatus status={row.original.status} />,
+        meta: { headerTitle: "Статус", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "actions",
+        header: () => <span className="sr-only">Действия</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const t = row.original
+          return (
+            <div className="flex items-center gap-1 justify-end">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className={cn(
+                  "size-7 opacity-0 transition-opacity group-hover/row:opacity-100 focus-visible:opacity-100",
+                )}
+                title="Предпросмотр кода RouterOS"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onCodePreview(t)
+                }}
+              >
+                <CodeXmlIcon className="size-3.5" />
+              </Button>
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  render={
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      className={cn(
+                        "size-8 shrink-0 border-border/60 bg-background/80 text-muted-foreground shadow-none",
+                        "opacity-0 transition-opacity group-hover/row:opacity-100 focus-visible:opacity-100",
+                        "data-popup-open:opacity-100",
+                      )}
+                      aria-label={`Действия: ${t.name}`}
+                    >
+                      <MoreHorizontalIcon className="size-4" />
+                    </Button>
+                  }
+                />
+                <DropdownMenuContent side="bottom" align="end">
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>{t.name}</DropdownMenuLabel>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => onCodePreview(t)}>
+                    <CodeXmlIcon className="size-4" /> Просмотр кода
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <PencilIcon className="size-4" /> Редактировать
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <PowerIcon className="size-4" />
+                    {t.enabled ? "Выключить" : "Включить"}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem variant="destructive">
+                    <Trash2Icon className="size-4" /> Удалить туннель
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )
+        },
+        size: 88,
+        meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
+      },
+    ],
+    [onCodePreview, poolMap, serverMap],
+  )
+
+  const table = useReactTable({
+    data: tunnels,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row, index) => `${row.id}:${row.serverId}:${row.name}:${index}`,
+  })
+
+  if (tunnels.length === 0) {
+    return (
+      <EmptyState
+        icon={<NetworkIcon className="size-4" />}
+        title="Нет GRE-туннелей"
+        description="Измените фильтр или добавьте туннель"
+        className="border-0 py-16"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={tunnels.length}
+      tableClassNames={{ headerRow: "border-b border-border", bodyRow: "group/row" }}
+    />
+  )
+}
+
+export { GreTunnelsDataGrid, type GreTunnelsDataGridProps }

components/data-grids/ip-ranges-data-grid.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { IpRange } from "@/lib/data"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { FilterIcon, NetworkIcon } from "lucide-react"
+
+interface IpRangesDataGridProps {
+  ipRanges: IpRange[]
+  isLoading?: boolean
+  pagination?: boolean
+}
+
+function IpRangesDataGrid({ ipRanges, isLoading, pagination = false }: IpRangesDataGridProps) {
+  const columns = useMemo<ColumnDef<IpRange>[]>(
+    () => [
+      {
+        id: "cidr",
+        accessorKey: "cidr",
+        header: ({ column }) => <DataGridSortHeader column={column} title="CIDR" className="ml-1" />,
+        cell: ({ row }) => <span className="font-mono font-medium">{row.original.cidr}</span>,
+        meta: {
+          headerTitle: "CIDR",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "asn",
+        accessorKey: "asn",
+        header: ({ column }) => <DataGridSortHeader column={column} title="ASN" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">{row.original.asn}</span>
+        ),
+        meta: {
+          headerTitle: "ASN",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "country",
+        accessorKey: "country",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Страна" />,
+        cell: ({ row }) => (
+          <span className="text-xs border border-border rounded px-2 py-0.5">{row.original.country}</span>
+        ),
+        meta: {
+          headerTitle: "Страна",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "purpose",
+        accessorKey: "purpose",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Назначение" />,
+        cell: ({ row }) => (
+          <span className="text-xs border border-border rounded px-2 py-0.5">{row.original.purpose}</span>
+        ),
+        meta: {
+          headerTitle: "Назначение",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "filter",
+        accessorKey: "filter",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Фильтр" />,
+        cell: ({ row }) => (
+          <span className="inline-flex items-center gap-1 text-xs bg-muted rounded px-2 py-0.5">
+            <FilterIcon className="size-3 text-muted-foreground" />
+            {row.original.filter}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Фильтр",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "updated",
+        accessorKey: "updated",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Обновлён" />,
+        cell: ({ row }) => <span className="text-xs text-muted-foreground">{row.original.updated}</span>,
+        meta: {
+          headerTitle: "Обновлён",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "enabled",
+        accessorKey: "enabled",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
+        cell: ({ row }) => (
+          <span
+            className={`text-xs font-medium ${row.original.enabled ? "text-emerald-600" : "text-muted-foreground"}`}
+          >
+            {row.original.enabled ? "Активен" : "Отключён"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Статус",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: ipRanges,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    ...(pagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={ipRanges.length}
+      isLoading={isLoading}
+      loadingMode="skeleton"
+      pagination={pagination}
+      emptyMessage={
+        <EmptyState
+          icon={<NetworkIcon className="size-4" />}
+          title="Нет IP-диапазонов"
+          description="Добавьте CIDR-блоки или импортируйте каталог"
+          className="border-0 py-12"
+        />
+      }
+    />
+  )
+}
+
+export { IpRangesDataGrid, type IpRangesDataGridProps }

components/data-grids/ospf-bfd-data-grid.tsx

@@ -0,0 +1,298 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { cn } from "@/lib/utils"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { ActivityIcon } from "lucide-react"
+
+export interface BfdSessionRow {
+  id: string
+  serverId: string
+  serverLabel: string
+  localAddr: string
+  remoteAddr: string
+  state: "Up" | "Down" | "Init" | "AdminDown"
+  interval: number
+  multiplier: number
+  iface: string
+  uptime: string | null
+  multihop: boolean
+  rxInterval: number
+  holdTime: number
+  packetsRx: number
+  packetsTx: number
+  stateChanges: number
+}
+
+function stateClass(state: BfdSessionRow["state"]) {
+  if (state === "Up")
+    return "bg-[var(--status-online-bg)] text-[var(--status-online-fg)] border-current/25"
+  if (state === "Init")
+    return "bg-[var(--status-degraded-bg)] text-[var(--status-degraded-fg)] border-current/25"
+  return "bg-[var(--status-offline-bg)] text-[var(--status-offline-fg)] border-current/25"
+}
+
+function Chip({ children, color }: { children: React.ReactNode; color?: string }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium border",
+        color ?? "bg-muted text-muted-foreground border-border",
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+function fmtMs(ms: number) {
+  if (!ms) return "—"
+  if (ms < 1000) return `${ms}ms`
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+interface OspfBfdDataGridProps {
+  sessions: BfdSessionRow[]
+}
+
+function OspfBfdDataGrid({ sessions }: OspfBfdDataGridProps) {
+  const columns = useMemo<ColumnDef<BfdSessionRow>[]>(
+    () => [
+      {
+        id: "serverLabel",
+        accessorKey: "serverLabel",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Роутер" className="ml-1" />
+        ),
+        cell: ({ row }) => {
+          const b = row.original
+          return (
+            <div className="flex flex-col gap-0.5">
+              <span className="font-mono whitespace-nowrap">{b.serverLabel}</span>
+              {b.multihop && (
+                <Chip color="bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20">
+                  multihop
+                </Chip>
+              )}
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Роутер",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "iface",
+        accessorKey: "iface",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-muted-foreground whitespace-nowrap">
+            {row.original.iface || "—"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Интерфейс",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "localAddr",
+        accessorKey: "localAddr",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Локальный" />,
+        cell: ({ row }) => (
+          <span className="font-mono whitespace-nowrap">{row.original.localAddr}</span>
+        ),
+        meta: {
+          headerTitle: "Локальный",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "remoteAddr",
+        accessorKey: "remoteAddr",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Удалённый" />,
+        cell: ({ row }) => (
+          <span className="font-mono whitespace-nowrap">{row.original.remoteAddr}</span>
+        ),
+        meta: {
+          headerTitle: "Удалённый",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "state",
+        accessorKey: "state",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Состояние" />,
+        cell: ({ row }) => (
+          <span
+            className={cn(
+              "inline-flex items-center rounded border px-1.5 py-0.5 text-[11px] font-medium",
+              stateClass(row.original.state),
+            )}
+          >
+            {row.original.state}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Состояние",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "uptime",
+        accessorKey: "uptime",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Uptime" />,
+        cell: ({ row }) => (
+          <span className="text-muted-foreground whitespace-nowrap tabular-nums">
+            {row.original.uptime ?? "—"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Uptime",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "intervals",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Tx / Rx</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const b = row.original
+          return (
+            <span className="font-mono tabular-nums text-muted-foreground whitespace-nowrap">
+              {fmtMs(b.interval)} / {fmtMs(b.rxInterval)}
+            </span>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "holdTime",
+        accessorKey: "holdTime",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Hold" />,
+        cell: ({ row }) => (
+          <span className="font-mono tabular-nums text-muted-foreground whitespace-nowrap">
+            {fmtMs(row.original.holdTime)}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Hold",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "multiplier",
+        accessorKey: "multiplier",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Mult" />,
+        cell: ({ row }) => (
+          <span className="font-mono tabular-nums text-center block">{row.original.multiplier}</span>
+        ),
+        meta: {
+          headerTitle: "Mult",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+        },
+      },
+      {
+        id: "packetsRx",
+        accessorKey: "packetsRx",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Пакеты Rx" className="ml-auto" />
+        ),
+        cell: ({ row }) => (
+          <span className="font-mono tabular-nums text-right text-muted-foreground block">
+            {row.original.packetsRx.toLocaleString()}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Пакеты Rx",
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+        },
+      },
+      {
+        id: "packetsTx",
+        accessorKey: "packetsTx",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Пакеты Tx" className="ml-auto" />
+        ),
+        cell: ({ row }) => (
+          <span className="font-mono tabular-nums text-right text-muted-foreground block">
+            {row.original.packetsTx.toLocaleString()}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Пакеты Tx",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+        },
+      },
+      {
+        id: "stateChanges",
+        accessorKey: "stateChanges",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Переходы" className="ml-auto" />
+        ),
+        cell: ({ row }) => (
+          <span className="font-mono tabular-nums text-right block">{row.original.stateChanges}</span>
+        ),
+        meta: {
+          headerTitle: "Переходы",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: cn(DATA_GRID_CELL_PAD_LAST, "text-right"),
+        },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: sessions,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (sessions.length === 0) {
+    return (
+      <EmptyState
+        icon={<ActivityIcon className="size-4" />}
+        title="BFD-сессий не обнаружено"
+        className="border-0 py-10"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={sessions.length}
+      tableClassNames={{ headerRow: "border-b border-border", bodyRow: "group/row hover:bg-muted/30" }}
+      tableLayout={{ dense: true }}
+    />
+  )
+}
+
+export { OspfBfdDataGrid, type OspfBfdDataGridProps }

components/data-grids/ospf-neighbors-data-grid.tsx

@@ -0,0 +1,238 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { cn } from "@/lib/utils"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { NetworkIcon } from "lucide-react"
+
+export interface OspfNeighborRow {
+  id: string
+  localRouter: string
+  localLabel: string
+  localIface: string
+  remoteRouter: string
+  remoteLabel: string
+  remoteRouterId: string
+  area: string
+  state: "Full" | "2-Way" | "ExStart" | "Down"
+  cost: number
+  uptime: string
+  priority: number
+}
+
+function stateClass(state: OspfNeighborRow["state"]) {
+  if (state === "Full")
+    return "bg-[var(--status-online-bg)] text-[var(--status-online-fg)] border-current/25"
+  if (state === "2-Way")
+    return "bg-[var(--status-degraded-bg)] text-[var(--status-degraded-fg)] border-current/25"
+  return "bg-[var(--status-offline-bg)] text-[var(--status-offline-fg)] border-current/25"
+}
+
+interface OspfNeighborsDataGridProps {
+  neighbors: OspfNeighborRow[]
+  highlightRouterId?: string | null
+  selectedRouterId?: string | null
+  onHighlight?: (routerId: string | null) => void
+  onSelect?: (routerId: string | null) => void
+}
+
+function OspfNeighborsDataGrid({
+  neighbors,
+  highlightRouterId,
+  selectedRouterId,
+  onHighlight,
+  onSelect,
+}: OspfNeighborsDataGridProps) {
+  const columns = useMemo<ColumnDef<OspfNeighborRow>[]>(
+    () => [
+      {
+        id: "localLabel",
+        accessorKey: "localLabel",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Роутер" className="ml-1" />
+        ),
+        cell: ({ row }) => (
+          <span className="font-mono whitespace-nowrap">{row.original.localLabel}</span>
+        ),
+        meta: {
+          headerTitle: "Роутер",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "localIface",
+        accessorKey: "localIface",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-muted-foreground whitespace-nowrap">
+            {row.original.localIface}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Интерфейс",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "remote",
+        header: () => (
+          <span className="text-xs font-medium text-muted-foreground">Сосед (Router ID)</span>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => {
+          const n = row.original
+          return (
+            <div className="flex flex-col">
+              <span className="font-mono">
+                {n.remoteLabel !== n.remoteRouterId ? n.remoteLabel : n.remoteRouterId}
+              </span>
+              {n.remoteLabel !== n.remoteRouterId && (
+                <span className="text-[10px] font-mono text-muted-foreground">{n.remoteRouterId}</span>
+              )}
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "area",
+        accessorKey: "area",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Область" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-muted-foreground">{row.original.area}</span>
+        ),
+        meta: {
+          headerTitle: "Область",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "state",
+        accessorKey: "state",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Состояние" />,
+        cell: ({ row }) => (
+          <span
+            className={cn(
+              "inline-flex items-center rounded border px-1.5 py-0.5 text-[11px] font-medium",
+              stateClass(row.original.state),
+            )}
+          >
+            {row.original.state}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Состояние",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "cost",
+        accessorKey: "cost",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Cost" />,
+        cell: ({ row }) => (
+          <span className="font-mono tabular-nums text-center block">{row.original.cost}</span>
+        ),
+        meta: {
+          headerTitle: "Cost",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+        },
+      },
+      {
+        id: "uptime",
+        accessorKey: "uptime",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Uptime" />,
+        cell: ({ row }) => (
+          <span className="text-muted-foreground whitespace-nowrap tabular-nums">
+            {row.original.uptime}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Uptime",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "priority",
+        accessorKey: "priority",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Prio" />,
+        cell: ({ row }) => (
+          <span className="text-center font-mono block">{row.original.priority}</span>
+        ),
+        meta: {
+          headerTitle: "Prio",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: cn(DATA_GRID_CELL_PAD_LAST, "text-center"),
+        },
+      },
+    ],
+    [],
+  )
+
+  const rowSelection = useMemo(() => {
+    if (!selectedRouterId) return {}
+    const match = neighbors.find(
+      (n) => n.localRouter === selectedRouterId || n.remoteRouter === selectedRouterId,
+    )
+    return match ? { [match.id]: true } : {}
+  }, [neighbors, selectedRouterId])
+
+  const table = useReactTable({
+    data: neighbors,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+    enableRowSelection: true,
+    state: { rowSelection },
+  })
+
+  if (neighbors.length === 0) {
+    return (
+      <EmptyState
+        icon={<NetworkIcon className="size-4" />}
+        title="Нет OSPF-соседей"
+        className="border-0 py-10"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={neighbors.length}
+      onRowClick={(row) => {
+        onSelect?.(selectedRouterId === row.localRouter ? null : row.localRouter)
+      }}
+      tableClassNames={{
+        headerRow: "border-b border-border",
+        bodyRow: cn(
+          "group/row cursor-pointer",
+          "data-[state=selected]:bg-primary/5",
+          highlightRouterId && "[&:hover]:bg-muted/30",
+        ),
+      }}
+      tableLayout={{ dense: true }}
+    />
+  )
+}
+
+export { OspfNeighborsDataGrid, type OspfNeighborsDataGridProps }

components/data-grids/ospf-routes-data-grid.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { cn } from "@/lib/utils"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { RouteIcon } from "lucide-react"
+
+export interface OspfRouteRow {
+  id: string
+  destination: string
+  type: "O" | "O IA" | "O E1" | "O E2"
+  cost: number
+  nextHop: string
+  via: string
+  serverId: string
+  serverLabel: string
+  area: string
+}
+
+function routeTypeClass(type: OspfRouteRow["type"]) {
+  if (type === "O") return "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25"
+  if (type === "O IA") return "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/25"
+  if (type === "O E1") return "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/25"
+  return "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/25"
+}
+
+interface OspfRoutesDataGridProps {
+  routes: OspfRouteRow[]
+}
+
+function OspfRoutesDataGrid({ routes }: OspfRoutesDataGridProps) {
+  const columns = useMemo<ColumnDef<OspfRouteRow>[]>(
+    () => [
+      {
+        id: "destination",
+        accessorKey: "destination",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Назначение" className="ml-1" />
+        ),
+        cell: ({ row }) => <span className="font-mono">{row.original.destination}</span>,
+        meta: {
+          headerTitle: "Назначение",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "type",
+        accessorKey: "type",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
+        cell: ({ row }) => (
+          <span
+            className={cn(
+              "inline-flex items-center rounded border px-1.5 py-0.5 text-[11px] font-medium",
+              routeTypeClass(row.original.type),
+            )}
+          >
+            {row.original.type}
+          </span>
+        ),
+        meta: { headerTitle: "Тип", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "cost",
+        accessorKey: "cost",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Cost" />,
+        cell: ({ row }) => (
+          <span className="font-mono tabular-nums text-center block">{row.original.cost}</span>
+        ),
+        meta: {
+          headerTitle: "Cost",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+        },
+      },
+      {
+        id: "nextHop",
+        accessorKey: "nextHop",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Следующий хоп" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-muted-foreground">{row.original.nextHop}</span>
+        ),
+        meta: {
+          headerTitle: "Следующий хоп",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "via",
+        accessorKey: "via",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-muted-foreground">{row.original.via}</span>
+        ),
+        meta: {
+          headerTitle: "Интерфейс",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "serverLabel",
+        accessorKey: "serverLabel",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Роутер" />,
+        cell: ({ row }) => <span className="font-mono">{row.original.serverLabel}</span>,
+        meta: {
+          headerTitle: "Роутер",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "area",
+        accessorKey: "area",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Область" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-muted-foreground">{row.original.area}</span>
+        ),
+        meta: {
+          headerTitle: "Область",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: routes,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (routes.length === 0) {
+    return (
+      <EmptyState
+        icon={<RouteIcon className="size-4" />}
+        title="Нет OSPF-маршрутов"
+        className="border-0 py-10"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={routes.length}
+      tableClassNames={{ headerRow: "border-b border-border", bodyRow: "group/row hover:bg-muted/30" }}
+      tableLayout={{ dense: true }}
+    />
+  )
+}
+
+export { OspfRoutesDataGrid, type OspfRoutesDataGridProps, routeTypeClass }

components/data-grids/probes-schedule-data-grid.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { Server } from "@/lib/data"
+import { cn } from "@/lib/utils"
+import { FormToggle } from "@/components/form-kit"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { ClockIcon, Trash2Icon } from "lucide-react"
+
+export type SchedType = "ping" | "bandwidth" | "both"
+
+export interface SchedRule {
+  id: string
+  srcId: string
+  tunnelId: string
+  type: SchedType
+  intervalMin: number
+  enabled: boolean
+  lastRun: string | null
+  nextRunMin: number | null
+}
+
+const TYPE_LABEL: Record<SchedType, string> = {
+  ping: "Ping",
+  bandwidth: "BW-тест",
+  both: "Ping + BW",
+}
+
+interface ProbesScheduleDataGridProps {
+  rules: SchedRule[]
+  serverOptions: Server[]
+  tunnelName: (srcId: string, tunnelId: string) => string | undefined
+  onToggleEnabled: (id: string, enabled: boolean) => void
+  onDelete: (id: string) => void
+}
+
+function ProbesScheduleDataGrid({
+  rules,
+  serverOptions,
+  tunnelName,
+  onToggleEnabled,
+  onDelete,
+}: ProbesScheduleDataGridProps) {
+  const serverMap = useMemo(
+    () => new Map(serverOptions.map((s) => [s.id, s])),
+    [serverOptions],
+  )
+
+  const columns = useMemo<ColumnDef<SchedRule>[]>(
+    () => [
+      {
+        id: "enabled",
+        accessorKey: "enabled",
+        header: () => <span className="sr-only">Вкл</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <div onClick={(e) => e.stopPropagation()}>
+            <FormToggle
+              checked={row.original.enabled}
+              onChange={(v) => onToggleEnabled(row.original.id, v)}
+            />
+          </div>
+        ),
+        size: 48,
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "tunnel",
+        accessorKey: "tunnelId",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Туннель" />,
+        cell: ({ row }) => (
+          <code className="font-mono text-xs truncate block">
+            {tunnelName(row.original.srcId, row.original.tunnelId) ?? row.original.tunnelId}
+          </code>
+        ),
+        meta: {
+          headerTitle: "Туннель",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "server",
+        accessorKey: "srcId",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground truncate block">
+            {serverMap.get(row.original.srcId)?.name ?? row.original.srcId}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Сервер",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "type",
+        accessorKey: "type",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
+        cell: ({ row }) => (
+          <span
+            className={cn(
+              "text-[10px] px-1.5 py-0.5 rounded border font-medium w-fit",
+              row.original.type === "ping"
+                ? "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20"
+                : row.original.type === "bandwidth"
+                  ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
+                  : "bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20",
+            )}
+          >
+            {TYPE_LABEL[row.original.type]}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Тип",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "intervalMin",
+        accessorKey: "intervalMin",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Интервал" />,
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground">каждые {row.original.intervalMin} мин</span>
+        ),
+        meta: {
+          headerTitle: "Интервал",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "lastRun",
+        header: () => (
+          <span className="text-xs font-medium text-muted-foreground">Последний / следующий</span>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => {
+          const rule = row.original
+          return (
+            <div className="text-xs text-muted-foreground flex items-center gap-2 min-w-0">
+              {rule.lastRun && <span className="truncate">{rule.lastRun}</span>}
+              {rule.nextRunMin != null && rule.enabled && (
+                <span className="text-sky-600 dark:text-sky-400 shrink-0">
+                  · через {rule.nextRunMin} мин
+                </span>
+              )}
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Последний / следующий",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "actions",
+        header: () => <span className="sr-only">Действия</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <button
+            type="button"
+            onClick={() => onDelete(row.original.id)}
+            className="size-6 flex items-center justify-center rounded text-muted-foreground/40 hover:text-red-500 hover:bg-red-500/10 transition-colors opacity-0 group-hover/row:opacity-100 focus-visible:opacity-100"
+            aria-label="Удалить правило"
+          >
+            <Trash2Icon className="size-3.5" />
+          </button>
+        ),
+        size: 48,
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [onDelete, onToggleEnabled, serverMap, tunnelName],
+  )
+
+  const table = useReactTable({
+    data: rules,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (rules.length === 0) {
+    return (
+      <EmptyState
+        icon={<ClockIcon className="size-4" />}
+        title="Нет правил расписания"
+        description="Добавьте правило ping или bandwidth-теста"
+        className="border-0 py-10"
+      />
+    )
+  }
+
+  return <DataGridShell table={table} recordCount={rules.length} />
+}
+
+export { ProbesScheduleDataGrid, type ProbesScheduleDataGridProps }

components/data-grids/probes-speed-probes-data-grid.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { cn } from "@/lib/utils"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { ClockIcon } from "lucide-react"
+
+export interface SpeedProbeApiRow {
+  id: string
+  srcServerId: string
+  dstServerId: string
+  srcInterface: string
+  dstInterface: string
+  protocol: string
+  direction: string
+  durationSec: string
+  enabled: boolean
+  lastRunAt: string | null
+  lastTxAvgMbps: number | null
+  lastRxAvgMbps: number | null
+  lastStatus: string | null
+  lastError: string | null
+}
+
+interface ProbesSpeedProbesDataGridProps {
+  rows: SpeedProbeApiRow[]
+  serverName: (id: string) => string
+}
+
+function ProbesSpeedProbesDataGrid({ rows, serverName }: ProbesSpeedProbesDataGridProps) {
+  const columns = useMemo<ColumnDef<SpeedProbeApiRow>[]>(
+    () => [
+      {
+        id: "src",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Источник" className="ml-1" />,
+        accessorFn: (row) => row.srcServerId,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <span className="truncate font-mono text-xs block">
+              {serverName(r.srcServerId)}
+              {r.srcInterface ? ` · ${r.srcInterface}` : ""}
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Источник",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "dst",
+        accessorFn: (row) => row.dstServerId,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Назначение" />,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <span className="truncate font-mono text-xs block">
+              {serverName(r.dstServerId)}
+              {r.dstInterface ? ` · ${r.dstInterface}` : ""}
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Назначение",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "protocol",
+        accessorKey: "protocol",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Протокол" />,
+        cell: ({ row }) => <span className="text-xs">{row.original.protocol.toUpperCase()}</span>,
+        meta: {
+          headerTitle: "Протокол",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "durationSec",
+        accessorKey: "durationSec",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Сек" />,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.durationSec}s</span>,
+        meta: {
+          headerTitle: "Сек",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "enabled",
+        accessorKey: "enabled",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Вкл" />,
+        cell: ({ row }) => <span className="text-xs">{row.original.enabled ? "да" : "нет"}</span>,
+        meta: {
+          headerTitle: "Вкл",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "lastRunAt",
+        accessorKey: "lastRunAt",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Последний запуск" />,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <span className="text-xs text-muted-foreground truncate block">
+              {r.lastRunAt ?? "—"}
+              {r.lastStatus === "done" && r.lastTxAvgMbps != null && (
+                <span className="text-emerald-600 dark:text-emerald-400 ml-1">
+                  TX≈{r.lastTxAvgMbps.toFixed(1)} RX≈{(r.lastRxAvgMbps ?? 0).toFixed(1)} Mb/s
+                </span>
+              )}
+              {r.lastStatus === "error" && r.lastError && (
+                <span className="text-destructive ml-1 truncate">{r.lastError}</span>
+              )}
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Последний запуск",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [serverName],
+  )
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (rows.length === 0) {
+    return (
+      <EmptyState
+        icon={<ClockIcon className="size-4" />}
+        title="Нет записей speed-test"
+        description="Настраиваются через API PUT /api/uptime/speed-probes"
+        className="border-0 py-10"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={rows.length}
+      tableClassNames={{
+        headerRow: "border-b border-border",
+        bodyRow: cn("group/row", "[&[data-disabled=true]]:opacity-50"),
+      }}
+    />
+  )
+}
+
+export { ProbesSpeedProbesDataGrid, type ProbesSpeedProbesDataGridProps }

components/data-grids/recursive-routes-data-grid.tsx

@@ -0,0 +1,328 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { Flag } from "@/components/flag"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import {
+  AlertCircleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  PencilIcon,
+  RouteIcon,
+  TrashIcon,
+} from "lucide-react"
+
+export interface RecursiveRouteEndpoint {
+  id: string
+  gateway: string
+  distance: number
+  scope: number | null
+  targetScope: number | null
+  checkGateway: string
+  country: string
+  disabled: boolean
+}
+
+export interface RecursiveRouteGroup {
+  id?: string
+  key: string
+  dstAddress: string
+  routingTable: string
+  comment: string
+  endpoints: RecursiveRouteEndpoint[]
+}
+
+const INFER_COUNTRIES = [
+  { code: "RU", keys: ["MSK", "SPB", "RTK", "MTS", "VPSVILLE", "IHOR"] },
+  { code: "SE", keys: ["SWE", "STO"] },
+  { code: "FI", keys: ["HEL", "FIN"] },
+  { code: "DE", keys: ["FRA", "GER", "DE"] },
+  { code: "NL", keys: ["AMS", "NLD", "NL"] },
+  { code: "SG", keys: ["SGP", "SIN", "SG"] },
+  { code: "TR", keys: ["TUR", "TR"] },
+  { code: "US", keys: ["USA", "US", "NYC", "LAX"] },
+]
+
+function inferCountry(name: string): string | null {
+  const upper = name.toUpperCase()
+  for (const c of INFER_COUNTRIES) {
+    if (c.keys.some((k) => upper.includes(k))) return c.code
+  }
+  return null
+}
+
+function RouteGroupExpandedDetail({ group }: { group: RecursiveRouteGroup }) {
+  const sorted = [...group.endpoints].sort((a, b) => a.distance - b.distance)
+  return (
+    <div className="flex flex-col gap-4 px-5 py-4 bg-muted/20">
+      <div className="flex flex-wrap gap-x-6 gap-y-2 text-xs">
+        <span className="text-muted-foreground">
+          Route: <span className="font-mono text-foreground">{group.dstAddress}</span>
+        </span>
+        <span className="text-muted-foreground">
+          Table:{" "}
+          <span className="font-mono text-foreground">{group.routingTable || "main"}</span>
+        </span>
+        {group.comment && <span className="text-muted-foreground italic">{group.comment}</span>}
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
+        {sorted.map((ep, idx) => (
+          <div key={ep.id} className="rounded-lg border border-border bg-background px-4 py-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5">
+                {(ep.country || inferCountry(ep.gateway)) && (
+                  <Flag code={ep.country || inferCountry(ep.gateway) || ""} size={16} />
+                )}
+                <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide">
+                  Endpoint {idx + 1}
+                </span>
+              </div>
+              <span className="text-[11px] font-mono">distance: {ep.distance}</span>
+            </div>
+            <p className="mt-1.5 font-mono text-sm break-all leading-tight">{ep.gateway}</p>
+            <div className="mt-1.5 text-[11px] text-muted-foreground flex items-center gap-3">
+              <span>scope: {ep.scope ?? "—"}</span>
+              <span>t.scope: {ep.targetScope ?? "—"}</span>
+              <span>check: {ep.checkGateway || "—"}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface RecursiveRoutesDataGridProps {
+  groups: RecursiveRouteGroup[]
+  expandedKey?: string | null
+  onExpandedChange?: (key: string | null) => void
+  onEdit: (group: RecursiveRouteGroup) => void
+  onDelete: (group: RecursiveRouteGroup) => void
+}
+
+function RecursiveRoutesDataGrid({
+  groups,
+  expandedKey,
+  onExpandedChange,
+  onEdit,
+  onDelete,
+}: RecursiveRoutesDataGridProps) {
+  const [confirmDeleteKey, setConfirmDeleteKey] = useState<string | null>(null)
+
+  const expanded = useMemo(() => {
+    if (!expandedKey) return {}
+    const g = groups.find((x) => x.key === expandedKey)
+    return g ? { [(g.id ?? g.key)]: true } : {}
+  }, [expandedKey, groups])
+
+  const columns = useMemo<ColumnDef<RecursiveRouteGroup>[]>(
+    () => [
+      {
+        id: "route",
+        accessorKey: "dstAddress",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Route / Comment" className="ml-1" />
+        ),
+        cell: ({ row }) => {
+          const g = row.original
+          const isExpanded = expandedKey === g.key
+          return (
+            <div className="flex items-start gap-2 min-w-0">
+              {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">{g.dstAddress}</p>
+                <p className="text-xs font-mono text-muted-foreground">{g.comment || "—"}</p>
+              </div>
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Route / Comment",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+          expandedContent: (group: RecursiveRouteGroup) => (
+            <RouteGroupExpandedDetail group={group} />
+          ),
+        },
+      },
+      {
+        id: "gateways",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Gateways</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const sorted = [...row.original.endpoints].sort((a, b) => a.distance - b.distance)
+          return (
+            <div className="flex flex-col gap-0.5">
+              {sorted.map((ep, idx) => {
+                const code = ep.country || inferCountry(ep.gateway)
+                return (
+                  <div key={ep.id} className="flex items-center gap-1.5 text-[11px] font-mono">
+                    <span
+                      className={cn(
+                        "size-1.5 rounded-full shrink-0",
+                        idx === 0 ? "bg-emerald-500" : "bg-sky-500",
+                      )}
+                    />
+                    {code ? (
+                      <Flag code={code} size={14} className="shrink-0" />
+                    ) : (
+                      <span className="text-[10px] text-muted-foreground w-3.5 text-center shrink-0">
+                        ?
+                      </span>
+                    )}
+                    <span className="font-semibold text-sky-600 dark:text-sky-400 truncate min-w-0">
+                      {ep.gateway}
+                    </span>
+                  </div>
+                )
+              })}
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "epCount",
+        header: () => <span className="text-xs font-medium text-muted-foreground">EP</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <span className="text-xs tabular-nums">{row.original.endpoints.length}</span>
+        ),
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "priority",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Priority</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const bestDistance = Math.min(...row.original.endpoints.map((ep) => ep.distance))
+          return <span className="font-mono text-xs">d{bestDistance}</span>
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "table",
+        accessorKey: "routingTable",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Table" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">
+            {row.original.routingTable || "main"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Table",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "actions",
+        header: () => <span className="sr-only">Действия</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const g = row.original
+          const confirmDel = confirmDeleteKey === g.key
+          return (
+            <div
+              className="flex items-center gap-0.5 justify-end opacity-0 group-hover/row:opacity-100 transition-opacity"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <Button
+                size="sm"
+                variant="ghost"
+                className="size-7 p-0 text-muted-foreground hover:text-foreground"
+                onClick={() => onEdit(g)}
+              >
+                <PencilIcon className="size-3.5" />
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                className={cn(
+                  "size-7 p-0 transition-colors",
+                  confirmDel
+                    ? "text-destructive bg-destructive/10 hover:bg-destructive/20"
+                    : "text-muted-foreground hover:text-destructive",
+                )}
+                onClick={() => {
+                  if (!confirmDel) setConfirmDeleteKey(g.key)
+                  else {
+                    onDelete(g)
+                    setConfirmDeleteKey(null)
+                  }
+                }}
+                onBlur={() => setConfirmDeleteKey(null)}
+              >
+                {confirmDel ? (
+                  <AlertCircleIcon className="size-3.5" />
+                ) : (
+                  <TrashIcon className="size-3.5" />
+                )}
+              </Button>
+            </div>
+          )
+        },
+        size: 80,
+        meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
+      },
+    ],
+    [confirmDeleteKey, expandedKey, onDelete, onEdit],
+  )
+
+  const table = useReactTable({
+    data: groups,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowId: (row) => row.id ?? row.key,
+    getRowCanExpand: () => true,
+    state: { expanded },
+  })
+
+  if (groups.length === 0) {
+    return (
+      <EmptyState
+        icon={<RouteIcon className="size-4" />}
+        title="Нет маршрутов"
+        className="border-0 py-10"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={groups.length}
+      onRowClick={(row) => {
+        onExpandedChange?.(expandedKey === row.key ? null : row.key)
+      }}
+      tableClassNames={{
+        headerRow: "border-b border-border",
+        bodyRow: cn("group/row cursor-pointer", expandedKey && "data-[state=selected]:bg-muted/30"),
+      }}
+    />
+  )
+}
+
+export { RecursiveRoutesDataGrid, type RecursiveRoutesDataGridProps, inferCountry }

components/data-grids/route-optimizer-comm-recs-data-grid.tsx

@@ -0,0 +1,259 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { CommRec } from "@/lib/route-optimizer-data"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { ArrowRightIcon, PinIcon, RefreshCwIcon } from "lucide-react"
+
+function Chip({ children, color }: { children: React.ReactNode; color?: string }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium border",
+        color ?? "bg-muted text-muted-foreground border-border",
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+function ProbChip({ prob, best }: { prob: number; best?: boolean }) {
+  return (
+    <Chip
+      color={
+        best
+          ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
+          : "bg-muted text-muted-foreground border-border"
+      }
+    >
+      {prob}%
+    </Chip>
+  )
+}
+
+interface RouteOptimizerCommRecsDataGridProps {
+  recs: CommRec[]
+  homeId: string
+  pinned: Set<string>
+  applied: Set<string>
+  applying: Set<string>
+  onPin: (key: string) => void
+  onApply: (community: string, homeId: string) => void
+}
+
+function RouteOptimizerCommRecsDataGrid({
+  recs,
+  homeId,
+  pinned,
+  applied,
+  applying,
+  onPin,
+  onApply,
+}: RouteOptimizerCommRecsDataGridProps) {
+  const rows = useMemo(
+    () => recs.map((r, idx) => ({ ...r, _rowKey: `${homeId}::${r.community}::${idx}` })),
+    [homeId, recs],
+  )
+
+  const columns = useMemo<ColumnDef<(typeof rows)[number]>[]>(
+    () => [
+      {
+        id: "community",
+        accessorKey: "community",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Community" className="ml-1" />
+        ),
+        cell: ({ row }) => (
+          <div>
+            <div className="font-mono text-xs font-medium">{row.original.community}</div>
+            <div className="text-[11px] text-muted-foreground">{row.original.communityName}</div>
+          </div>
+        ),
+        meta: {
+          headerTitle: "Community",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "current",
+        header: () => (
+          <span className="text-[11px] font-medium text-muted-foreground">
+            Текущий (WAN → JH → Exit)
+          </span>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => {
+          const r = row.original
+          if (!r.current) return <span className="text-muted-foreground text-xs">—</span>
+          return (
+            <div className="text-xs flex items-center gap-1 flex-wrap">
+              <span className="font-mono font-medium text-sky-600 dark:text-sky-400">
+                {r.current.wan}
+              </span>
+              <ArrowRightIcon className="size-3 text-muted-foreground shrink-0" />
+              <span>{r.current.jh}</span>
+              <ArrowRightIcon className="size-3 text-muted-foreground shrink-0" />
+              <span className="text-muted-foreground">{r.current.exit}</span>
+              <span className="font-mono text-[10px] text-muted-foreground">
+                ({r.current.gateway})
+              </span>
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "recommended",
+        header: () => <span className="text-[11px] font-medium text-muted-foreground">Рекомендуемый</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const r = row.original
+          const pinKey = `${homeId}::${r.community}`
+          const isPinned = pinned.has(pinKey)
+          if (!r.recommended) return <span className="text-muted-foreground text-xs">—</span>
+          return (
+            <div
+              className={cn(
+                "text-xs flex items-center gap-1 flex-wrap",
+                r.shouldSwitch && !isPinned && "text-amber-600 dark:text-amber-400",
+              )}
+            >
+              <span className="font-mono font-medium">{r.recommended.wan}</span>
+              <ArrowRightIcon className="size-3 shrink-0 opacity-60" />
+              <span>{r.recommended.jh}</span>
+              <ArrowRightIcon className="size-3 shrink-0 opacity-60" />
+              <span>{r.recommended.exit}</span>
+              {r.shouldSwitch && !isPinned && (
+                <span className="ml-1 text-[10px] font-bold bg-amber-500/10 border border-amber-500/20 px-1.5 py-0.5 rounded">
+                  +{(r.recommended.prob ?? 0) - (r.current?.prob ?? 0)}%
+                </span>
+              )}
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "probability",
+        header: () => (
+          <span className="text-[11px] font-medium text-muted-foreground block text-center">
+            P(тек / рек)
+          </span>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => {
+          const r = row.original
+          const pinKey = `${homeId}::${r.community}`
+          return (
+            <div className="flex items-center justify-center gap-1">
+              <ProbChip prob={r.current?.prob ?? 0} />
+              <span className="text-muted-foreground text-[10px]">/</span>
+              <ProbChip prob={r.recommended?.prob ?? 0} best={r.shouldSwitch && !pinned.has(pinKey)} />
+            </div>
+          )
+        },
+        meta: {
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+        },
+      },
+      {
+        id: "actions",
+        header: () => (
+          <span className="text-[11px] font-medium text-muted-foreground block text-right">
+            Действие
+          </span>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => {
+          const r = row.original
+          const pinKey = `${homeId}::${r.community}`
+          const isPinned = pinned.has(pinKey)
+          const isApplied = applied.has(pinKey)
+          const isApplying = applying.has(pinKey)
+          const canApply = r.shouldSwitch && !isPinned && !isApplied
+          return (
+            <div className="flex items-center justify-end gap-1.5" onClick={(e) => e.stopPropagation()}>
+              {isPinned && <PinIcon className="size-3 text-sky-500 fill-sky-500" />}
+              <Button
+                variant="outline"
+                size="sm"
+                className={cn("h-7 text-xs", isPinned && "text-sky-600 dark:text-sky-400 border-sky-500/30")}
+                onClick={() => onPin(pinKey)}
+              >
+                <PinIcon className={cn("size-3", isPinned && "fill-current")} />
+                {isPinned ? "Открепить" : "Закрепить"}
+              </Button>
+              {canApply && (
+                <Button
+                  size="sm"
+                  className="h-7 text-xs"
+                  disabled={isApplying}
+                  onClick={() => onApply(r.community, homeId)}
+                >
+                  {isApplying ? (
+                    <RefreshCwIcon className="size-3 animate-spin" />
+                  ) : (
+                    "Применить"
+                  )}
+                </Button>
+              )}
+              {isApplied && (
+                <span className="text-[10px] text-emerald-600 dark:text-emerald-400 font-medium">
+                  ✓ применено
+                </span>
+              )}
+            </div>
+          )
+        },
+        meta: {
+          headerClassName: cn(DATA_GRID_CELL_PAD_LAST, "text-right"),
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [applied, applying, homeId, onApply, onPin, pinned],
+  )
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row._rowKey,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={rows.length}
+      tableClassNames={{
+        headerRow: "border-b bg-muted/20",
+        bodyRow: cn(
+          "group/row hover:bg-muted/30",
+          "[&:has([data-comm-switch=true])]:bg-amber-500/5",
+          "[&:has([data-comm-applied=true])]:bg-emerald-500/5",
+        ),
+      }}
+      tableLayout={{ dense: true }}
+    />
+  )
+}
+
+export { RouteOptimizerCommRecsDataGrid, type RouteOptimizerCommRecsDataGridProps }

components/data-grids/route-optimizer-full-routes-data-grid.tsx

@@ -0,0 +1,294 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { FullRoute } from "@/lib/route-optimizer-data"
+import { Flag } from "@/components/flag"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { ArrowRightIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Chip({ children, color }: { children: React.ReactNode; color?: string }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium border",
+        color ?? "bg-muted text-muted-foreground border-border",
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+function ProbChip({ prob, best }: { prob: number; best?: boolean }) {
+  return (
+    <Chip
+      color={
+        best
+          ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
+          : "bg-muted text-muted-foreground border-border"
+      }
+    >
+      {prob}%
+    </Chip>
+  )
+}
+
+function ConfChip({ conf }: { conf: string }) {
+  const map: Record<string, string> = {
+    HIGH: "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20",
+    MEDIUM: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
+    LOW: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
+  }
+  return <Chip color={map[conf] ?? map.LOW}>{conf}</Chip>
+}
+
+interface RouteOptimizerFullRoutesDataGridProps {
+  routes: FullRoute[]
+  bestId?: string
+}
+
+function RouteOptimizerFullRoutesDataGrid({
+  routes,
+  bestId,
+}: RouteOptimizerFullRoutesDataGridProps) {
+  const [expanded, setExpanded] = useState(false)
+  const visibleRoutes = expanded ? routes : routes.slice(0, 5)
+
+  const indexed = useMemo(
+    () => visibleRoutes.map((r, index) => ({ ...r, _index: index })),
+    [visibleRoutes],
+  )
+
+  const columns = useMemo<ColumnDef<FullRoute & { _index: number }>[]>(
+    () => [
+      {
+        id: "index",
+        header: () => <span className="text-[11px] font-medium text-muted-foreground"># Маршрут</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const isBest = row.original.id === bestId || row.original._index === 0
+          return (
+            <div className="flex items-center gap-2">
+              <span className="text-[10px] font-mono text-muted-foreground w-4">
+                {row.original._index + 1}
+              </span>
+              {isBest && (
+                <span className="text-[9px] font-bold uppercase tracking-wide text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-1.5 py-0.5 rounded">
+                  Лучший
+                </span>
+              )}
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD_FIRST, cellClassName: DATA_GRID_CELL_PAD_FIRST },
+      },
+      {
+        id: "wanJh",
+        header: () => <span className="text-[11px] font-medium text-muted-foreground">WAN → JH</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <div className="flex items-center gap-1.5 text-xs">
+              <span className="font-mono font-semibold text-sky-600 dark:text-sky-400">{r.wan.name}</span>
+              <ArrowRightIcon className="size-3 text-muted-foreground shrink-0" />
+              <div>
+                <div className="font-medium">{r.jh.label}</div>
+                <div className="font-mono text-[10px] text-muted-foreground">
+                  {r.hw.pingMs} мс · ↓{r.hw.dlMbps} ↑{r.hw.ulMbps}
+                </div>
+              </div>
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "jhExit",
+        header: () => <span className="text-[11px] font-medium text-muted-foreground">JH → Exit</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <div className="text-xs">
+              <div className="flex items-center gap-1 font-medium">
+                <Flag code={r.exit.country} />
+                {r.exit.label}
+                <span className="text-[10px] text-muted-foreground">({r.exit.site})</span>
+              </div>
+              <div className="font-mono text-[10px] text-muted-foreground">
+                {r.je.pingMs} мс · ↓{r.je.dlMbps} ↑{r.je.ulMbps}
+              </div>
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "totalPing",
+        accessorFn: (row) => row.hw.pingMs + row.je.pingMs,
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Ping (итого)" className="mx-auto" />
+        ),
+        cell: ({ row }) => {
+          const totalPing = row.original.hw.pingMs + row.original.je.pingMs
+          return (
+            <span
+              className={cn(
+                "font-mono text-xs text-center block",
+                totalPing < 40
+                  ? "text-emerald-600 dark:text-emerald-400"
+                  : totalPing < 80
+                    ? "text-amber-600 dark:text-amber-400"
+                    : "text-red-500",
+              )}
+            >
+              {totalPing} мс
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Ping (итого)",
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+        },
+      },
+      {
+        id: "bw",
+        header: () => (
+          <span className="text-[11px] font-medium text-muted-foreground block text-center">
+            BW (мин)
+          </span>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => {
+          const r = row.original
+          const minDl = Math.min(r.hw.dlMbps, r.je.dlMbps)
+          const minUl = Math.min(r.hw.ulMbps, r.je.ulMbps)
+          return (
+            <div className="font-mono text-xs text-muted-foreground text-center">
+              <div>↓{minDl}</div>
+              <div>↑{minUl}</div>
+            </div>
+          )
+        },
+        meta: {
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+        },
+      },
+      {
+        id: "score",
+        accessorKey: "score",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Score" className="mx-auto" />
+        ),
+        cell: ({ row }) => (
+          <span className="font-mono text-xs font-semibold text-center block">
+            {row.original.score}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Score",
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+        },
+      },
+      {
+        id: "prob",
+        accessorKey: "probabilityOptimal",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="P(opt)" className="mx-auto" />
+        ),
+        cell: ({ row }) => {
+          const isBest = row.original.id === bestId || row.original._index === 0
+          return (
+            <div className="flex justify-center">
+              <ProbChip prob={row.original.probabilityOptimal} best={isBest} />
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "P(opt)",
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+        },
+      },
+      {
+        id: "confidence",
+        accessorKey: "confidence",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Conf." className="mx-auto" />
+        ),
+        cell: ({ row }) => (
+          <div className="flex justify-center">
+            <ConfChip conf={row.original.confidence} />
+          </div>
+        ),
+        meta: {
+          headerTitle: "Conf.",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: cn(DATA_GRID_CELL_PAD_LAST, "text-center"),
+        },
+      },
+    ],
+    [bestId],
+  )
+
+  const table = useReactTable({
+    data: indexed,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <div>
+      <DataGridShell
+        table={table}
+        recordCount={visibleRoutes.length}
+        tableClassNames={{
+          headerRow: "border-b bg-muted/20",
+          bodyRow: cn("group/row hover:bg-muted/30", "has-[[data-route-best=true]]:bg-emerald-500/5"),
+        }}
+        tableLayout={{ dense: true }}
+      />
+      {routes.length > 5 && (
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          className="w-full py-2 text-xs text-muted-foreground hover:text-foreground transition-colors border-t flex items-center justify-center gap-1"
+        >
+          {expanded ? (
+            <>
+              <ChevronUpIcon className="size-3" />
+              Свернуть
+            </>
+          ) : (
+            <>
+              <ChevronDownIcon className="size-3" />
+              Показать все {routes.length} комбинаций
+            </>
+          )}
+        </button>
+      )}
+    </div>
+  )
+}
+
+export { RouteOptimizerFullRoutesDataGrid, type RouteOptimizerFullRoutesDataGridProps }

components/data-grids/route-optimizer-ospf-preview-data-grid.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { cn } from "@/lib/utils"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { NetworkIcon } from "lucide-react"
+
+export interface OspfPreviewInterfaceRow {
+  id: string
+  interface: string
+  currentCost: number
+  optimalCost: number
+  score: number
+  pingMs: number
+  dlMbps: number
+  ulMbps: number
+}
+
+interface RouteOptimizerOspfPreviewDataGridProps {
+  rows: OspfPreviewInterfaceRow[]
+  error?: string | null
+  loading?: boolean
+}
+
+function RouteOptimizerOspfPreviewDataGrid({
+  rows,
+  error,
+  loading,
+}: RouteOptimizerOspfPreviewDataGridProps) {
+  const columns = useMemo<ColumnDef<OspfPreviewInterfaceRow>[]>(
+    () => [
+      {
+        id: "interface",
+        accessorKey: "interface",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Интерфейс" className="ml-1" />
+        ),
+        cell: ({ row }) => <span className="font-mono">{row.original.interface}</span>,
+        meta: {
+          headerTitle: "Интерфейс",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "cost",
+        accessorKey: "currentCost",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Cost" />,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <span className="font-mono">
+              <span className="text-sky-600 dark:text-sky-400">{r.currentCost}</span>
+              {" → "}
+              <span
+                className={
+                  r.currentCost === r.optimalCost
+                    ? "text-emerald-600 dark:text-emerald-400"
+                    : "text-amber-600 dark:text-amber-400"
+                }
+              >
+                {r.optimalCost}
+              </span>
+            </span>
+          )
+        },
+        meta: { headerTitle: "Cost", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "score",
+        accessorKey: "score",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Score" />,
+        cell: ({ row }) => <span className="font-mono">{row.original.score}</span>,
+        meta: { headerTitle: "Score", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "pingMs",
+        accessorKey: "pingMs",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Ping" />,
+        cell: ({ row }) => <span className="font-mono">{row.original.pingMs}ms</span>,
+        meta: { headerTitle: "Ping", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "speed",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Speed (dl/ul)</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <span className="font-mono">
+              ↓{r.dlMbps} / ↑{r.ulMbps}
+            </span>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (error) {
+    return (
+      <p className="px-3 py-2 text-xs text-destructive">Ошибка preview: {error}</p>
+    )
+  }
+
+  if (!loading && rows.length === 0) {
+    return (
+      <EmptyState
+        icon={<NetworkIcon className="size-4" />}
+        title="Интерфейсы OSPF не найдены для выбранного сервера"
+        className="border-0 py-6 text-xs"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={rows.length}
+      isLoading={loading}
+      loadingMode="skeleton"
+      tableClassNames={{ headerRow: "border-b bg-muted/30", bodyRow: "group/row" }}
+      tableLayout={{ dense: true }}
+    />
+  )
+}
+
+export { RouteOptimizerOspfPreviewDataGrid, type RouteOptimizerOspfPreviewDataGridProps }

components/data-grids/route-optimizer-wan-matrix-data-grid.tsx

@@ -0,0 +1,183 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { HomeRouter, JumpHost, WanJhLeg } from "@/lib/route-optimizer-data"
+import { Flag } from "@/components/flag"
+import { cn } from "@/lib/utils"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { WifiIcon } from "lucide-react"
+
+function LossChip({ loss }: { loss: number }) {
+  if (loss === 0) return <span className="text-emerald-600 dark:text-emerald-400 text-[11px] font-mono">0%</span>
+  return (
+    <span className={cn("text-[11px] font-mono", loss > 1 ? "text-red-500" : "text-amber-500")}>
+      {loss}%
+    </span>
+  )
+}
+
+interface RouteOptimizerWanMatrixDataGridProps {
+  home: HomeRouter
+  legs: WanJhLeg[]
+  jumpHosts: JumpHost[]
+}
+
+function RouteOptimizerWanMatrixDataGrid({
+  home,
+  legs,
+  jumpHosts,
+}: RouteOptimizerWanMatrixDataGridProps) {
+  const bestScore = legs.length ? Math.max(...legs.map((l) => l.score)) : 0
+
+  const columns = useMemo<ColumnDef<HomeRouter["wans"][number]>[]>(() => {
+    const base: ColumnDef<HomeRouter["wans"][number]>[] = [
+      {
+        id: "wan",
+        accessorKey: "name",
+        header: () => <span className="text-[11px] font-medium text-muted-foreground">WAN-аплинк</span>,
+        cell: ({ row }) => {
+          const wan = row.original
+          return (
+            <div className="flex items-center gap-2">
+              <WifiIcon className="size-3.5 text-muted-foreground shrink-0" />
+              <div>
+                <p className="font-mono text-xs font-semibold">{wan.name}</p>
+                <p className="text-[10px] text-muted-foreground">{wan.iface}</p>
+              </div>
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD_FIRST, cellClassName: DATA_GRID_CELL_PAD_FIRST },
+      },
+      {
+        id: "isp",
+        header: () => <span className="text-[11px] font-medium text-muted-foreground">ISP / IP</span>,
+        cell: ({ row }) => {
+          const wan = row.original
+          return (
+            <div>
+              <p className="text-xs font-medium">{wan.isp}</p>
+              <p className="font-mono text-[10px] text-muted-foreground">{wan.ip}</p>
+            </div>
+          )
+        },
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "bandwidth",
+        header: () => (
+          <span className="text-[11px] font-medium text-muted-foreground block text-right">
+            Макс. полоса
+          </span>
+        ),
+        cell: ({ row }) => {
+          const wan = row.original
+          return (
+            <div className="text-right">
+              <p className="font-mono text-xs">↓{wan.maxDl}</p>
+              <p className="font-mono text-[10px] text-muted-foreground">↑{wan.maxUl} Мбит</p>
+            </div>
+          )
+        },
+        meta: {
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+        },
+      },
+    ]
+
+    const jhCols: ColumnDef<HomeRouter["wans"][number]>[] = jumpHosts.map((jh) => ({
+      id: `jh-${jh.id}`,
+      header: () => (
+        <div className="text-center">
+          <div className="text-[11px] font-medium text-muted-foreground">{jh.label}</div>
+          <div className="font-mono font-normal text-[10px] opacity-60 flex items-center justify-center gap-1">
+            <Flag code={jh.country} />
+            {jh.site} · {jh.ip}
+          </div>
+        </div>
+      ),
+      cell: ({ row }) => {
+        const wan = row.original
+        const leg = legs.find((l) => l.wanId === wan.id && l.jhId === jh.id)
+        if (!leg) return <span className="text-center text-muted-foreground text-xs block">—</span>
+        const isBest = leg.score === bestScore
+        return (
+          <div className={cn("text-center", isBest && "bg-emerald-500/5")}>
+            <div
+              className={cn(
+                "flex flex-col items-center gap-0.5 rounded-md px-2 py-1.5 transition-colors",
+                isBest ? "border border-emerald-500/20 bg-emerald-500/8" : "border border-transparent",
+              )}
+            >
+              {isBest && (
+                <span className="text-[9px] font-bold uppercase tracking-wide text-emerald-600 dark:text-emerald-400 mb-0.5">
+                  ★ ЛУЧШИЙ
+                </span>
+              )}
+              <span
+                className={cn(
+                  "font-mono text-xs font-semibold",
+                  leg.pingMs < 10
+                    ? "text-emerald-600 dark:text-emerald-400"
+                    : leg.pingMs < 25
+                      ? "text-foreground"
+                      : "text-amber-600 dark:text-amber-400",
+                )}
+              >
+                {leg.pingMs} мс
+              </span>
+              <span className="text-[10px] text-muted-foreground font-mono">
+                ↓{leg.dlMbps} ↑{leg.ulMbps}
+              </span>
+              <div className="flex items-center gap-1.5 mt-0.5">
+                <span className="text-[10px] font-mono text-foreground/70">score {leg.score}</span>
+                {leg.loss > 0 && <LossChip loss={leg.loss} />}
+              </div>
+            </div>
+          </div>
+        )
+      },
+      meta: {
+        headerClassName: cn(DATA_GRID_CELL_PAD, "min-w-[130px] text-center"),
+        cellClassName: cn(DATA_GRID_CELL_PAD, "min-w-[130px]"),
+      },
+    }))
+
+    const last = jhCols[jhCols.length - 1]
+    if (last?.meta) {
+      last.meta.headerClassName = cn(last.meta.headerClassName, DATA_GRID_CELL_PAD_LAST.replace("py-3", ""))
+      last.meta.cellClassName = DATA_GRID_CELL_PAD_LAST
+    }
+
+    return [...base, ...jhCols]
+  }, [bestScore, jumpHosts, legs])
+
+  const table = useReactTable({
+    data: home.wans,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={home.wans.length}
+      tableClassNames={{ headerRow: "border-b bg-muted/20", bodyRow: "group/row hover:bg-muted/30" }}
+      tableLayout={{ dense: true }}
+    />
+  )
+}
+
+export { RouteOptimizerWanMatrixDataGrid, type RouteOptimizerWanMatrixDataGridProps }

components/data-grids/server-expanded-detail.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import type { Server } from "@/lib/data"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { RosBadge, rosVer } from "@/components/data-grids/servers-data-grid"
+import { CheckCircleIcon, XCircleIcon, RefreshCwIcon } from "lucide-react"
+
+const ROS_FEATURES = [
+  { 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" },
+]
+
+interface ServerExpandedDetailProps {
+  server: Server
+  isLive: boolean
+  isPolling: boolean
+  onPoll: () => void
+}
+
+function ServerExpandedDetail({ server: s, isLive, isPolling, onPoll }: ServerExpandedDetailProps) {
+  const ver = rosVer(s.os)
+
+  return (
+    <div className="flex flex-col gap-5 px-5 py-5 bg-muted/20">
+      <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>
+          ) : (
+            <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={isPolling}
+            onClick={(e) => { e.stopPropagation(); onPoll() }}
+          >
+            <RefreshCwIcon className={cn("size-3.5", isPolling && "animate-spin")} />
+            {isPolling ? "Опрос…" : "Опросить сейчас"}
+          </Button>
+        )}
+      </div>
+      <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>
+  )
+}
+
+export { ServerExpandedDetail }

components/data-grids/servers-data-grid.tsx

@@ -0,0 +1,390 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { Server, ServerType } from "@/lib/data"
+import { StatusBadge } from "@/components/status-badge"
+import { Flag } from "@/components/flag"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { ServerExpandedDetail } from "@/components/data-grids/server-expanded-detail"
+import {
+  ChevronRightIcon,
+  ChevronDownIcon,
+  HomeIcon,
+  ServerIcon,
+  NetworkIcon,
+  ShieldIcon,
+  WifiIcon,
+  MoreHorizontalIcon,
+  ExternalLinkIcon,
+  PencilIcon,
+  RefreshCwIcon,
+  PowerIcon,
+  Trash2Icon,
+} from "lucide-react"
+
+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",
+}
+
+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)
+}
+
+function TypeBadge({ type }: { type: ServerType }) {
+  const icon =
+    type === "jump-host" ? <ServerIcon className="size-3 mr-1" />
+    : type === "exit-node" ? <NetworkIcon className="size-3 mr-1" />
+    : <HomeIcon className="size-3 mr-1" />
+  return (
+    <span className={cn("inline-flex items-center text-xs font-medium border rounded px-2 py-0.5", TYPE_STYLES[type])}>
+      {icon}{TYPE_LABELS[type]}
+    </span>
+  )
+}
+
+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>
+}
+
+interface ServerRowActionsProps {
+  server: Server
+  isLive: boolean
+  isPolling: boolean
+  onEdit: (server: Server) => void
+  onDelete: (id: string) => void
+  onPoll: (id: string) => void
+  onToggleStatus: (id: string) => void
+}
+
+function ServerRowActions({
+  server,
+  isLive,
+  isPolling,
+  onEdit,
+  onDelete,
+  onPoll,
+  onToggleStatus,
+}: ServerRowActionsProps) {
+  return (
+    <div
+      className="flex justify-end"
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => e.stopPropagation()}
+    >
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className={cn(
+                "size-8 shrink-0 border-border/60 bg-background/80 text-muted-foreground shadow-none",
+                "opacity-0 transition-[opacity,background-color,color,border-color]",
+                "group-hover/row:opacity-100 focus-visible:opacity-100",
+                "data-popup-open:opacity-100 data-popup-open:bg-muted",
+                "hover:bg-muted hover:text-foreground hover:border-border",
+              )}
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`Действия: ${server.name}`}
+            >
+              <MoreHorizontalIcon className="size-4" />
+            </Button>
+          }
+        />
+        <DropdownMenuContent align="end" side="bottom" className="w-52">
+          <DropdownMenuItem onClick={() => window.open(`https://${server.host}`, "_blank")}>
+            <ExternalLinkIcon className="size-4" />
+            Открыть WebFig
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => onEdit(server)}>
+            <PencilIcon className="size-4" />
+            Редактировать
+          </DropdownMenuItem>
+          {isLive && (
+            <DropdownMenuItem onClick={() => onPoll(server.id)} disabled={isPolling}>
+              <RefreshCwIcon className={cn("size-4", isPolling && "animate-spin")} />
+              {isPolling ? "Опрос…" : "Опросить"}
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem onClick={() => onToggleStatus(server.id)}>
+            <PowerIcon className="size-4" />
+            {server.status === "offline" ? "Включить" : "Отключить"}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive" onClick={() => onDelete(server.id)}>
+            <Trash2Icon className="size-4" />
+            Удалить
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
+
+interface ServersDataGridProps {
+  servers: Server[]
+  isLive: boolean
+  pollingIds: Set<string>
+  onPoll: (id: string) => void
+  onEdit: (server: Server) => void
+  onDelete: (id: string) => void
+  onToggleStatus: (id: string) => void
+}
+
+function ServersDataGrid({
+  servers,
+  isLive,
+  pollingIds,
+  onPoll,
+  onEdit,
+  onDelete,
+  onToggleStatus,
+}: ServersDataGridProps) {
+  const columns = useMemo<ColumnDef<Server>[]>(
+    () => [
+      {
+        id: "name",
+        accessorKey: "name",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Имя / Хост" className="ml-1" />
+        ),
+        cell: ({ row }) => {
+          const s = row.original
+          const expanded = row.getIsExpanded()
+          return (
+            <div className="flex items-start gap-2 min-w-0">
+              {expanded
+                ? <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>
+          )
+        },
+        meta: {
+          headerTitle: "Имя / Хост",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+          expandedContent: (row: Server) => (
+            <ServerExpandedDetail
+              server={row}
+              isLive={isLive}
+              isPolling={pollingIds.has(row.id)}
+              onPoll={() => onPoll(row.id)}
+            />
+          ),
+        },
+      },
+      {
+        id: "type",
+        accessorKey: "type",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
+        cell: ({ row }) => <TypeBadge type={row.original.type} />,
+        meta: { headerTitle: "Тип", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "model",
+        accessorKey: "model",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Модель" />,
+        cell: ({ row }) => <span className="text-muted-foreground text-xs">{row.original.model}</span>,
+        meta: { headerTitle: "Модель", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "os",
+        accessorKey: "os",
+        header: ({ column }) => <DataGridSortHeader column={column} title="RouterOS" />,
+        cell: ({ row }) => <RosBadge os={row.original.os} />,
+        meta: { headerTitle: "RouterOS", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "site",
+        accessorKey: "site",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Площадка" />,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-1.5">
+            <Flag code={row.original.country} />
+            <span className="font-medium text-sm">{row.original.site}</span>
+          </div>
+        ),
+        meta: { headerTitle: "Площадка", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "wan",
+        header: () => (
+          <span className="text-xs font-medium text-muted-foreground">WAN / LAN</span>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => {
+          const s = row.original
+          if (s.type === "home-router" && s.wanUplinks?.length) {
+            return (
+              <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>
+            )
+          }
+          return (
+            <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>
+          )
+        },
+        meta: { headerTitle: "WAN / LAN", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "latency",
+        accessorKey: "latency",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Задержка" className="w-full justify-end" />
+        ),
+        cell: ({ row }) => {
+          const s = row.original
+          return (
+            <span className={cn(
+              "font-mono text-sm block text-right tabular-nums",
+              s.latency == null ? "text-muted-foreground" : s.latency > 60 ? "text-[var(--status-degraded-fg)]" : "",
+            )}>
+              {s.latency == null ? "—" : `${s.latency} мс`}
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Задержка",
+          headerClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
+        },
+      },
+      {
+        id: "status",
+        accessorKey: "status",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
+        cell: ({ row }) => <StatusBadge status={row.original.status} />,
+        meta: { headerTitle: "Статус", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "actions",
+        header: () => <span className="sr-only">Действия</span>,
+        cell: ({ row }) => {
+          const s = row.original
+          return (
+            <ServerRowActions
+              server={s}
+              isLive={isLive}
+              isPolling={pollingIds.has(s.id)}
+              onEdit={onEdit}
+              onDelete={onDelete}
+              onPoll={onPoll}
+              onToggleStatus={onToggleStatus}
+            />
+          )
+        },
+        enableSorting: false,
+        size: 56,
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [isLive, onDelete, onEdit, onPoll, onToggleStatus, pollingIds],
+  )
+
+  const table = useReactTable({
+    data: servers,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowId: (row) => row.id,
+    getRowCanExpand: () => true,
+  })
+
+  if (servers.length === 0) {
+    return (
+      <EmptyState
+        icon={<ServerIcon className="size-4" />}
+        title="Нет серверов"
+        description="Добавьте первый MikroTik-сервер для мониторинга"
+        className="border-0 py-12"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={servers.length}
+      onRowClick={(row) => table.getRow(row.id).toggleExpanded()}
+    />
+  )
+}
+
+export { ServersDataGrid, rosVer, RosBadge, TypeBadge }

components/data-grids/settings-access-summary-data-grid.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import { useMemo } from "react"
+import type { Server } from "@/lib/data"
+import { CompactDataGrid, type CompactDataGridColumn } from "@/components/data-grids/compact-data-grid"
+import { cn } from "@/lib/utils"
+
+type PermLevel = "none" | "read" | "write"
+type Role = "admin" | "operator" | "viewer"
+
+interface SectionPerm {
+  section: string
+  level: PermLevel
+}
+
+interface ServerPerm {
+  serverId: string
+  level: PermLevel
+}
+
+export interface AccessSummaryUser {
+  id: string
+  name: string
+  avatar: string
+  active: boolean
+  role: Role
+  sections: SectionPerm[]
+  servers: ServerPerm[]
+}
+
+function AvatarCircle({ avatar, active }: { avatar: string; active: boolean }) {
+  return (
+    <div
+      className={cn(
+        "size-7 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0",
+        active ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground",
+      )}
+    >
+      {avatar}
+    </div>
+  )
+}
+
+interface SettingsAccessSummaryDataGridProps {
+  users: AccessSummaryUser[]
+  servers: Server[]
+  allSectionsCount: number
+}
+
+function SettingsAccessSummaryDataGrid({
+  users,
+  servers,
+  allSectionsCount,
+}: SettingsAccessSummaryDataGridProps) {
+  const columns = useMemo<CompactDataGridColumn<AccessSummaryUser>[]>(
+    () => [
+      {
+        id: "name",
+        header: "Пользователь",
+        accessorKey: "name",
+        cell: (u) => (
+          <div className="flex items-center gap-2">
+            <AvatarCircle avatar={u.avatar} active={u.active} />
+            <span className="text-sm font-medium">{u.name}</span>
+          </div>
+        ),
+      },
+      {
+        id: "sections",
+        header: "Разделы",
+        enableSorting: false,
+        cell: (u) => {
+          const writeSections =
+            u.role === "admin"
+              ? []
+              : u.sections.filter((s) => s.level === "write").map((s) => s.section)
+          const readSections =
+            u.role === "admin"
+              ? []
+              : u.sections.filter((s) => s.level === "read").map((s) => s.section)
+          return (
+            <span className="text-xs text-muted-foreground">
+              {u.role === "admin" ? (
+                <span className="text-violet-600 dark:text-violet-400 font-medium">
+                  Все ({allSectionsCount})
+                </span>
+              ) : (
+                <span>{readSections.length + writeSections.length} из {allSectionsCount}</span>
+              )}
+            </span>
+          )
+        },
+      },
+      {
+        id: "servers",
+        header: "Серверы",
+        enableSorting: false,
+        cell: (u) => {
+          const accessServers =
+            u.role === "admin"
+              ? servers
+              : servers.filter((s) => u.servers.find((p) => p.serverId === s.id && p.level !== "none"))
+          return (
+            <span className="text-xs text-muted-foreground">
+              {u.role === "admin" ? (
+                <span className="text-violet-600 dark:text-violet-400 font-medium">
+                  Все ({servers.length})
+                </span>
+              ) : (
+                <span>
+                  {accessServers.length} из {servers.length}
+                </span>
+              )}
+            </span>
+          )
+        },
+      },
+      {
+        id: "write",
+        header: "Права записи",
+        enableSorting: false,
+        cell: (u) => {
+          const writeSections =
+            u.role === "admin"
+              ? []
+              : u.sections.filter((s) => s.level === "write").map((s) => s.section)
+          return (
+            <div className="flex flex-wrap gap-1">
+              {u.role === "admin" ? (
+                <span className="text-[10px] px-1.5 py-0.5 rounded bg-violet-500/10 text-violet-600 dark:text-violet-400 border border-violet-500/20">
+                  Полный доступ
+                </span>
+              ) : writeSections.length === 0 ? (
+                <span className="text-[10px] text-muted-foreground">Только просмотр</span>
+              ) : (
+                <>
+                  {writeSections.slice(0, 3).map((s) => (
+                    <span
+                      key={s}
+                      className="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20"
+                    >
+                      {s}
+                    </span>
+                  ))}
+                  {writeSections.length > 3 && (
+                    <span className="text-[10px] text-muted-foreground">+{writeSections.length - 3}</span>
+                  )}
+                </>
+              )}
+            </div>
+          )
+        },
+      },
+    ],
+    [allSectionsCount, servers],
+  )
+
+  return (
+    <CompactDataGrid
+      data={users}
+      columns={columns}
+      emptyTitle="Нет пользователей"
+    />
+  )
+}
+
+export { SettingsAccessSummaryDataGrid, type SettingsAccessSummaryDataGridProps }

components/data-grids/shared/data-grid-layout.ts

@@ -0,0 +1,34 @@
+import type { DataGridProps } from "@/components/reui/data-grid/data-grid"
+
+const DATA_GRID_CELL_PAD = "py-3"
+const DATA_GRID_CELL_PAD_FIRST = "pl-5 py-3"
+const DATA_GRID_CELL_PAD_LAST = "pr-4 py-3"
+
+const DEFAULT_DATA_GRID_LAYOUT: NonNullable<DataGridProps<object>["tableLayout"]> = {
+  rowBorder: true,
+  headerBackground: true,
+  headerBorder: true,
+  columnsResizable: false,
+}
+
+const DEFAULT_DATA_GRID_CLASS_NAMES: NonNullable<DataGridProps<object>["tableClassNames"]> = {
+  headerRow: "border-b border-border",
+  bodyRow: "group/row",
+}
+
+const DATA_GRID_CONTAINER_CLASS = "w-full rounded-none border-0"
+
+const DATA_PAGE_CARD_CLASS = "flex w-full flex-col overflow-hidden py-0 gap-0"
+
+const DATA_PAGE_TOOLBAR_CLASS = "flex items-center gap-3 px-5 py-3 border-b flex-wrap"
+
+export {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+  DEFAULT_DATA_GRID_LAYOUT,
+  DEFAULT_DATA_GRID_CLASS_NAMES,
+  DATA_GRID_CONTAINER_CLASS,
+  DATA_PAGE_CARD_CLASS,
+  DATA_PAGE_TOOLBAR_CLASS,
+}

components/data-grids/shared/data-grid-shell.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import type { ReactNode } from "react"
+import type { Table } from "@tanstack/react-table"
+import {
+  DataGrid,
+  DataGridContainer,
+  DataGridPagination,
+  DataGridTable,
+  type DataGridProps,
+} from "@/components/reui/data-grid"
+import {
+  DATA_GRID_CONTAINER_CLASS,
+  DEFAULT_DATA_GRID_CLASS_NAMES,
+  DEFAULT_DATA_GRID_LAYOUT,
+} from "@/components/data-grids/shared/data-grid-layout"
+
+interface DataGridShellProps<TData extends object> {
+  table: Table<TData>
+  recordCount: number
+  children?: ReactNode
+  pagination?: boolean
+  isLoading?: boolean
+  loadingMode?: DataGridProps<TData>["loadingMode"]
+  emptyMessage?: ReactNode
+  onRowClick?: DataGridProps<TData>["onRowClick"]
+  tableLayout?: DataGridProps<TData>["tableLayout"]
+  tableClassNames?: DataGridProps<TData>["tableClassNames"]
+}
+
+function DataGridShell<TData extends object>({
+  table,
+  recordCount,
+  children,
+  pagination = false,
+  isLoading,
+  loadingMode,
+  emptyMessage,
+  onRowClick,
+  tableLayout = DEFAULT_DATA_GRID_LAYOUT,
+  tableClassNames = DEFAULT_DATA_GRID_CLASS_NAMES,
+}: DataGridShellProps<TData>) {
+  return (
+    <DataGrid
+      className="w-full"
+      table={table}
+      recordCount={recordCount}
+      isLoading={isLoading}
+      loadingMode={loadingMode}
+      emptyMessage={emptyMessage}
+      onRowClick={onRowClick}
+      tableLayout={tableLayout}
+      tableClassNames={tableClassNames}
+    >
+      {children ?? (
+        <>
+          <DataGridContainer border={false} className={DATA_GRID_CONTAINER_CLASS}>
+            <DataGridTable />
+          </DataGridContainer>
+          {pagination && recordCount > 0 && (
+            <DataGridPagination className="px-5 pb-3" />
+          )}
+        </>
+      )}
+    </DataGrid>
+  )
+}
+
+export { DataGridShell, type DataGridShellProps }

components/data-grids/shared/data-grid-sort-header.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import type { Column } from "@tanstack/react-table"
+import { cn } from "@/lib/utils"
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react"
+
+interface DataGridSortHeaderProps<TData> {
+  column: Column<TData, unknown>
+  title: string
+  className?: string
+}
+
+function DataGridSortHeader<TData>({
+  column,
+  title,
+  className,
+}: DataGridSortHeaderProps<TData>) {
+  const sorted = column.getIsSorted()
+  const canSort = column.getCanSort()
+
+  if (!canSort) {
+    return (
+      <span className={cn("text-xs font-medium text-muted-foreground", className)}>
+        {title}
+      </span>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground",
+        "hover:text-foreground transition-colors rounded-md -ml-1 px-1 py-0.5",
+        className,
+      )}
+      onClick={column.getToggleSortingHandler()}
+    >
+      {title}
+      {sorted === "asc" ? (
+        <ArrowUpIcon className="size-3 text-foreground" />
+      ) : sorted === "desc" ? (
+        <ArrowDownIcon className="size-3 text-foreground" />
+      ) : (
+        <ArrowUpDownIcon className="size-3 opacity-35" />
+      )}
+    </button>
+  )
+}
+
+export { DataGridSortHeader, type DataGridSortHeaderProps }

components/data-grids/snapshot-data-grid.tsx

@@ -0,0 +1,498 @@
+"use client"
+
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+import {
+  CompactDataGrid,
+  type CompactDataGridColumn,
+  type CompactDataGridProps,
+} from "@/components/data-grids/compact-data-grid"
+import type {
+  AlertEngineRuleDiagSnapshot,
+  PingProbeSnapshot,
+  ResourceServerSnapshot,
+  ServerRestPingSnapshot,
+  SpeedRunSnapshot,
+  TrafficServerSnapshot,
+} from "@/lib/scheduler-run-snapshot"
+
+type SnapshotRow = { id: string }
+
+function withRowId<T extends { serverId?: number; probeId?: string; ruleId?: string; target?: string }>(
+  rows: T[],
+  idFn: (row: T, index: number) => string,
+): (T & SnapshotRow)[] {
+  return rows.map((row, index) => ({ ...row, id: idFn(row, index) }))
+}
+
+function SnapshotOkBadge({
+  ok,
+  okLabel = "ok",
+  errLabel = "ошибка",
+}: {
+  ok: boolean
+  okLabel?: string
+  errLabel?: string
+}) {
+  return ok ? (
+    <Badge variant="outline" className="text-[10px] border-emerald-500/40 text-emerald-700 dark:text-emerald-400">
+      {okLabel}
+    </Badge>
+  ) : (
+    <Badge variant="outline" className="text-[10px] border-destructive/50 text-destructive">
+      {errLabel}
+    </Badge>
+  )
+}
+
+function SnapshotErrorCell({ error, className }: { error?: string; className?: string }) {
+  return (
+    <span
+      className={cn("text-destructive max-w-[220px] truncate block", className)}
+      title={error}
+    >
+      {error ?? "—"}
+    </span>
+  )
+}
+
+function SnapshotDataGrid<T extends SnapshotRow>(
+  props: CompactDataGridProps<T>,
+) {
+  return <CompactDataGrid {...props} />
+}
+
+function TrafficSnapshotGrid({ servers }: { servers: TrafficServerSnapshot[] }) {
+  const data = withRowId(servers, (s) => String(s.serverId))
+  const columns: CompactDataGridColumn<(typeof data)[number]>[] = [
+    { id: "name", header: "Сервер", accessorKey: "name", cell: (r) => <span className="font-medium">{r.name}</span> },
+    {
+      id: "host",
+      header: "Хост",
+      accessorKey: "host",
+      cell: (r) => <span className="font-mono text-muted-foreground">{r.host}</span>,
+    },
+    {
+      id: "ok",
+      header: "Результат",
+      enableSorting: false,
+      cell: (r) => <SnapshotOkBadge ok={r.ok} />,
+    },
+    {
+      id: "interfaces",
+      header: "IF",
+      accessorKey: "interfaces",
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums",
+      cell: (r) => r.interfaces ?? "—",
+    },
+    {
+      id: "sumRxMbps",
+      header: "Σ RX",
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums",
+      cell: (r) => (r.sumRxMbps != null ? `${r.sumRxMbps} Мбит/с` : "—"),
+    },
+    {
+      id: "sumTxMbps",
+      header: "Σ TX",
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums",
+      cell: (r) => (r.sumTxMbps != null ? `${r.sumTxMbps} Мбит/с` : "—"),
+    },
+    {
+      id: "error",
+      header: "Ошибка",
+      enableSorting: false,
+      cell: (r) => <SnapshotErrorCell error={r.error} />,
+    },
+  ]
+  return <SnapshotDataGrid data={data} columns={columns} emptyTitle="Нет сэмплов трафика" />
+}
+
+function ResourcesSnapshotGrid({ servers }: { servers: ResourceServerSnapshot[] }) {
+  const data = withRowId(servers, (s) => String(s.serverId))
+  const columns: CompactDataGridColumn<(typeof data)[number]>[] = [
+    {
+      id: "name",
+      header: "Сервер",
+      enableSorting: false,
+      cell: (r) => (
+        <div>
+          <span className="font-medium">{r.name}</span>
+          <span className="block font-mono text-[10px] text-muted-foreground">{r.host}</span>
+        </div>
+      ),
+    },
+    {
+      id: "status",
+      header: "Статус",
+      enableSorting: false,
+      cell: (r) => (
+        <Badge
+          variant="outline"
+          className={cn(
+            "text-[10px]",
+            r.status === "online" && "border-emerald-500/40 text-emerald-700 dark:text-emerald-400",
+            r.status === "offline" && "border-destructive/50 text-destructive",
+          )}
+        >
+          {r.status}
+        </Badge>
+      ),
+    },
+    {
+      id: "cpuLoadPct",
+      header: "CPU %",
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums",
+      cell: (r) => r.cpuLoadPct ?? "—",
+    },
+    {
+      id: "memory",
+      header: "Память",
+      enableSorting: false,
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums whitespace-nowrap",
+      cell: (r) =>
+        r.memUsedMb != null && r.memTotalMb != null ? `${r.memUsedMb} / ${r.memTotalMb} МБ` : "—",
+    },
+    {
+      id: "memUsedPct",
+      header: "% RAM",
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums",
+      cell: (r) => (r.memUsedPct != null ? `${r.memUsedPct}%` : "—"),
+    },
+    {
+      id: "disk",
+      header: "Диск своб.",
+      enableSorting: false,
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums whitespace-nowrap",
+      cell: (r) =>
+        r.diskFreeMb != null && r.diskTotalMb != null ? `${r.diskFreeMb} / ${r.diskTotalMb} МБ` : "—",
+    },
+    {
+      id: "uptimeSeconds",
+      header: "Uptime",
+      cellClassName: "tabular-nums",
+      cell: (r) => (r.uptimeSeconds != null ? fmtUptimeSec(r.uptimeSeconds) : "—"),
+    },
+    {
+      id: "board",
+      header: "Плата / ROS",
+      enableSorting: false,
+      cell: (r) => (
+        <div className="max-w-[140px]">
+          <span className="block truncate" title={r.boardName}>{r.boardName || "—"}</span>
+          <span className="block truncate text-muted-foreground font-mono text-[10px]" title={r.rosVersion}>
+            {r.rosVersion || ""}
+          </span>
+        </div>
+      ),
+    },
+    {
+      id: "error",
+      header: "Ошибка",
+      enableSorting: false,
+      cell: (r) => <SnapshotErrorCell error={r.error} className="max-w-[160px]" />,
+    },
+  ]
+  return <SnapshotDataGrid data={data} columns={columns} emptyTitle="Нет сэмплов ресурсов" />
+}
+
+function ServersRestPingSnapshotGrid({ servers }: { servers: ServerRestPingSnapshot[] }) {
+  const data = withRowId(servers, (s) => String(s.serverId))
+  const columns: CompactDataGridColumn<(typeof data)[number]>[] = [
+    { id: "name", header: "Сервер", accessorKey: "name", cell: (r) => <span className="font-medium">{r.name}</span> },
+    {
+      id: "host",
+      header: "Хост",
+      accessorKey: "host",
+      cell: (r) => <span className="font-mono text-muted-foreground">{r.host}</span>,
+    },
+    {
+      id: "ok",
+      header: "Результат",
+      enableSorting: false,
+      cell: (r) => <SnapshotOkBadge ok={r.ok} errLabel="недоступен" />,
+    },
+    {
+      id: "latencyMs",
+      header: "RTT REST",
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums",
+      cell: (r) => (r.latencyMs != null ? `${r.latencyMs} мс` : "—"),
+    },
+    {
+      id: "error",
+      header: "Ошибка",
+      enableSorting: false,
+      cell: (r) => <SnapshotErrorCell error={r.error} />,
+    },
+  ]
+  return <SnapshotDataGrid data={data} columns={columns} emptyTitle="Нет сэмплов REST ping" />
+}
+
+function PingSnapshotGrid({ probes }: { probes: PingProbeSnapshot[] }) {
+  const data = withRowId(probes, (p) => `${p.probeId}-${p.target}`)
+  const columns: CompactDataGridColumn<(typeof data)[number]>[] = [
+    {
+      id: "name",
+      header: "Проба",
+      enableSorting: false,
+      cell: (r) => (
+        <div>
+          <span className="font-medium">{r.name}</span>
+          <span className="block font-mono text-[10px] text-muted-foreground">{r.probeId}</span>
+        </div>
+      ),
+    },
+    {
+      id: "target",
+      header: "Цель",
+      accessorKey: "target",
+      cell: (r) => <span className="font-mono">{r.target}</span>,
+    },
+    { id: "srcServerName", header: "Источник", accessorKey: "srcServerName" },
+    {
+      id: "srcInterface",
+      header: "IF",
+      accessorKey: "srcInterface",
+      cell: (r) => <span className="font-mono text-muted-foreground">{r.srcInterface || "—"}</span>,
+    },
+    {
+      id: "rttMs",
+      header: "RTT",
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums",
+      cell: (r) => (r.rttMs != null ? `${r.rttMs} мс` : "—"),
+    },
+    {
+      id: "lossPct",
+      header: "Loss",
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums",
+      cell: (r) => `${r.lossPct}%`,
+    },
+    {
+      id: "status",
+      header: "Статус",
+      enableSorting: false,
+      cell: (r) => <Badge variant="outline" className="text-[10px]">{r.status}</Badge>,
+    },
+    {
+      id: "error",
+      header: "Ошибка",
+      enableSorting: false,
+      cell: (r) => <SnapshotErrorCell error={r.error} className="max-w-[180px]" />,
+    },
+  ]
+  return <SnapshotDataGrid data={data} columns={columns} emptyTitle="Нет сэмплов ping" />
+}
+
+function SpeedSnapshotGrid({ runs }: { runs: SpeedRunSnapshot[] }) {
+  const data = withRowId(runs, (r) => r.probeId)
+  const columns: CompactDataGridColumn<(typeof data)[number]>[] = [
+    {
+      id: "probeId",
+      header: "Проба",
+      accessorKey: "probeId",
+      cell: (r) => <span className="font-mono">{r.probeId}</span>,
+    },
+    {
+      id: "route",
+      header: "Маршрут",
+      enableSorting: false,
+      cell: (r) => (
+        <span className="whitespace-nowrap">
+          {r.srcServerName} <span className="text-muted-foreground">→</span> {r.dstServerName}
+        </span>
+      ),
+    },
+    {
+      id: "interfaces",
+      header: "Интерфейсы",
+      enableSorting: false,
+      cell: (r) => (
+        <span className="font-mono text-[10px]">
+          <span className="block">{r.srcInterface || "—"}</span>
+          <span className="block text-muted-foreground">{r.dstInterface || "—"}</span>
+        </span>
+      ),
+    },
+    {
+      id: "protocol",
+      header: "Протокол",
+      enableSorting: false,
+      cell: (r) => `${r.protocol} / ${r.direction} / ${r.durationSec}s`,
+    },
+    {
+      id: "txAvgMbps",
+      header: "TX",
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums",
+      cell: (r) => (r.txAvgMbps != null ? `${Number(r.txAvgMbps).toFixed(1)}` : "—"),
+    },
+    {
+      id: "rxAvgMbps",
+      header: "RX",
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums",
+      cell: (r) => (r.rxAvgMbps != null ? `${Number(r.rxAvgMbps).toFixed(1)}` : "—"),
+    },
+    {
+      id: "pingRttMs",
+      header: "Ping RTT",
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums",
+      cell: (r) => (r.pingRttMs != null ? `${r.pingRttMs} мс` : "—"),
+    },
+    {
+      id: "pingLossPct",
+      header: "Loss",
+      headerClassName: "text-right",
+      cellClassName: "text-right tabular-nums",
+      cell: (r) => (r.pingLossPct != null ? `${r.pingLossPct}%` : "—"),
+    },
+    {
+      id: "ok",
+      header: "Результат",
+      enableSorting: false,
+      cell: (r) => <SnapshotOkBadge ok={r.ok} />,
+    },
+    {
+      id: "error",
+      header: "Ошибка",
+      enableSorting: false,
+      cell: (r) => (
+        <div className="max-w-[200px]">
+          <span className="text-destructive block truncate" title={r.error}>{r.error ?? ""}</span>
+          {r.pingError ? (
+            <span className="text-[10px] text-amber-600 dark:text-amber-400 block truncate" title={r.pingError ?? ""}>
+              ping: {r.pingError}
+            </span>
+          ) : null}
+        </div>
+      ),
+    },
+  ]
+  return <SnapshotDataGrid data={data} columns={columns} emptyTitle="Нет прогонов speed" />
+}
+
+function transitionRu(t: AlertEngineRuleDiagSnapshot["hitTransition"]): string {
+  switch (t) {
+    case "problem":
+      return "проблема"
+    case "recovery":
+      return "восстановление"
+    case "neutral":
+      return "нейтрально"
+    default:
+      return "—"
+  }
+}
+
+function blockedRu(b: AlertEngineRuleDiagSnapshot["blocked"]): string {
+  switch (b) {
+    case "no_hit":
+      return "условие не выполнено"
+    case "stability":
+      return "стабильность (confirmStabilitySec)"
+    case "cooldown":
+      return "cooldown"
+    case "no_telegram":
+      return "нет Telegram"
+    case "dedupe_positive":
+      return "дедуп восстановления"
+    case "in_group":
+      return "в группе (отдельно не шлём)"
+    default:
+      return "—"
+  }
+}
+
+function AlertEngineRuleDiagGrid({ ruleDiag }: { ruleDiag: AlertEngineRuleDiagSnapshot[] }) {
+  const data = withRowId(ruleDiag, (d) => d.ruleId)
+  const columns: CompactDataGridColumn<(typeof data)[number]>[] = [
+    {
+      id: "ruleId",
+      header: "ID правила",
+      accessorKey: "ruleId",
+      cell: (r) => (
+        <span className="font-mono max-w-[140px] truncate block" title={r.ruleId}>
+          {r.ruleId}
+        </span>
+      ),
+    },
+    {
+      id: "evalHit",
+      header: "Сработало",
+      cell: (r) => (r.evalHit ? "Да" : "Нет"),
+    },
+    {
+      id: "hitTransition",
+      header: "Тип срабатывания",
+      cell: (r) => transitionRu(r.hitTransition),
+    },
+    {
+      id: "stabilityOk",
+      header: "Стабильность",
+      cell: (r) => (r.stabilityOk ? "Да" : "Нет"),
+    },
+    {
+      id: "cooldownOk",
+      header: "Кулдаун",
+      cell: (r) => (r.cooldownOk ? "Да" : "Нет"),
+    },
+    {
+      id: "telegramOk",
+      header: "Telegram",
+      cell: (r) => (r.telegramOk ? "Да" : "Нет"),
+    },
+    {
+      id: "hitMessage",
+      header: "Сообщение",
+      enableSorting: false,
+      cell: (r) => (
+        <span className="font-mono max-w-[280px] truncate text-muted-foreground block" title={r.hitMessage ?? ""}>
+          {r.hitMessage ?? "—"}
+        </span>
+      ),
+    },
+    {
+      id: "blocked",
+      header: "Причина блока",
+      cell: (r) => <span className="text-muted-foreground">{blockedRu(r.blocked)}</span>,
+    },
+  ]
+  return (
+    <SnapshotDataGrid
+      data={data}
+      columns={columns}
+      emptyTitle="Нет диагностики по правилам"
+    />
+  )
+}
+
+function fmtUptimeSec(sec: number): string {
+  if (sec <= 0) return "—"
+  const d = Math.floor(sec / 86400)
+  const h = Math.floor((sec % 86400) / 3600)
+  const m = Math.floor((sec % 3600) / 60)
+  if (d > 0) return `${d}д ${h}ч`
+  if (h > 0) return `${h}ч ${m}м`
+  return `${m}м`
+}
+
+export {
+  SnapshotDataGrid,
+  TrafficSnapshotGrid,
+  ResourcesSnapshotGrid,
+  ServersRestPingSnapshotGrid,
+  PingSnapshotGrid,
+  SpeedSnapshotGrid,
+  AlertEngineRuleDiagGrid,
+  type SnapshotRow,
+}

components/data-grids/subusers-data-grid.tsx

@@ -0,0 +1,234 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { Server } from "@/lib/data"
+import { Flag } from "@/components/flag"
+import { cn } from "@/lib/utils"
+import { FormToggle } from "@/components/form-kit"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { CableIcon, CopyIcon, EyeIcon, EyeOffIcon, Trash2Icon } from "lucide-react"
+
+export interface SubUserRow {
+  id: string
+  login: string
+  password: string
+  description: string
+  jhServerIds: string[]
+  clientIp: string
+  active: boolean
+  lastSeen: string | null
+}
+
+interface SubusersDataGridProps {
+  subUsers: SubUserRow[]
+  servers: Server[]
+  revealedIds: Set<string>
+  onToggleReveal: (id: string) => void
+  onToggleActive: (id: string) => void
+  onRemove: (id: string) => void
+}
+
+function SubusersDataGrid({
+  subUsers,
+  servers,
+  revealedIds,
+  onToggleReveal,
+  onToggleActive,
+  onRemove,
+}: SubusersDataGridProps) {
+  const columns = useMemo<ColumnDef<SubUserRow>[]>(
+    () => [
+      {
+        id: "login",
+        accessorKey: "login",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Логин / описание" className="ml-1" />
+        ),
+        cell: ({ row }) => {
+          const su = row.original
+          return (
+            <div className="min-w-0">
+              <p className="text-xs font-mono font-medium truncate">{su.login}</p>
+              {su.description && (
+                <p className="text-[11px] text-muted-foreground truncate">{su.description}</p>
+              )}
+              {su.lastSeen && (
+                <p className="text-[10px] text-muted-foreground/50">{su.lastSeen}</p>
+              )}
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Логин / описание",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "password",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Пароль</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const su = row.original
+          const revealed = revealedIds.has(su.id)
+          return (
+            <div className="flex items-center gap-1 min-w-0" onClick={(e) => e.stopPropagation()}>
+              <span className="font-mono text-[11px] truncate flex-1">
+                {revealed ? su.password : "••••••••••••"}
+              </span>
+              <button
+                type="button"
+                onClick={() => onToggleReveal(su.id)}
+                className="text-muted-foreground/50 hover:text-muted-foreground shrink-0 transition-colors"
+              >
+                {revealed ? <EyeOffIcon className="size-3" /> : <EyeIcon className="size-3" />}
+              </button>
+              <button
+                type="button"
+                onClick={() => navigator.clipboard.writeText(su.password).catch(() => {})}
+                className="text-muted-foreground/50 hover:text-muted-foreground shrink-0 transition-colors"
+              >
+                <CopyIcon className="size-3" />
+              </button>
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Пароль",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "jhServers",
+        header: () => <span className="text-xs font-medium text-muted-foreground">JH-серверы</span>,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const jhs = servers.filter((s) => row.original.jhServerIds.includes(s.id))
+          return (
+            <div className="flex flex-wrap gap-1 min-w-0">
+              {jhs.length === 0 ? (
+                <span className="text-[11px] text-muted-foreground/40">—</span>
+              ) : (
+                jhs.map((jh) => (
+                  <span
+                    key={jh.id}
+                    className="inline-flex items-center gap-1 text-[10px] font-medium bg-violet-500/10 text-violet-600 dark:text-violet-400 border border-violet-500/20 rounded px-1 py-0.5"
+                  >
+                    <Flag code={jh.country} size={10} />
+                    {jh.name.split("-").slice(-1)[0]}
+                  </span>
+                ))
+              )}
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "JH-серверы",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "clientIp",
+        accessorKey: "clientIp",
+        header: ({ column }) => <DataGridSortHeader column={column} title="IP-клиента" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-[11px] text-muted-foreground truncate">
+            {row.original.clientIp || "—"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "IP-клиента",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "active",
+        accessorKey: "active",
+        header: () => <span className="sr-only">Активен</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <div onClick={(e) => e.stopPropagation()}>
+            <FormToggle
+              checked={row.original.active}
+              onChange={() => onToggleActive(row.original.id)}
+            />
+          </div>
+        ),
+        size: 48,
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "actions",
+        header: () => <span className="sr-only">Удалить</span>,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <button
+            type="button"
+            onClick={() => onRemove(row.original.id)}
+            className="text-muted-foreground/50 hover:text-destructive transition-colors opacity-0 group-hover/row:opacity-100 focus-visible:opacity-100"
+            aria-label="Удалить GRE-клиента"
+          >
+            <Trash2Icon className="size-3.5" />
+          </button>
+        ),
+        size: 40,
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [onRemove, onToggleActive, onToggleReveal, revealedIds, servers],
+  )
+
+  const table = useReactTable({
+    data: subUsers,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (subUsers.length === 0) {
+    return (
+      <EmptyState
+        icon={<CableIcon className="size-4" />}
+        title="Нет GRE-клиентов"
+        description="Добавьте учётки для подключения устройств"
+        className="border-0 py-12"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={subUsers.length}
+      tableClassNames={{
+        headerRow: "border-b border-border",
+        bodyRow: cn("group/row", "[&[data-disabled=true]]:opacity-50"),
+      }}
+    />
+  )
+}
+
+export { SubusersDataGrid, type SubusersDataGridProps }

components/data-grids/uptime-resources-data-grid.tsx

@@ -0,0 +1,385 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { Server } from "@/lib/data"
+import { Flag } from "@/components/flag"
+import { Sparkline } from "@/components/sparkline"
+import { StatusDot } from "@/components/status-dot"
+import { cn } from "@/lib/utils"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import {
+  AlertCircleIcon,
+  ClockIcon,
+  CpuIcon,
+  HardDriveIcon,
+  ServerIcon,
+  SearchIcon,
+  ThermometerIcon,
+} from "lucide-react"
+
+export interface UptimeResourceRow {
+  serverId: string
+  server: Server
+  hasData: boolean
+  cpu: number
+  cpuHistory: number[]
+  ramUsed: number
+  ramTotal: number
+  ramPct: number
+  hddUsed: number
+  hddTotal: number
+  hddPct: number
+  uptimeSeconds: number
+  boardName: string
+  temp?: number
+}
+
+function TypeChip({ type }: { type: "jump-host" | "exit-node" | "home-router" }) {
+  return (
+    <span className={cn(
+      "inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold border shrink-0",
+      type === "home-router"
+        ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
+        : type === "jump-host"
+          ? "bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20"
+          : "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20",
+    )}>
+      {type === "jump-host" ? "JH" : type === "home-router" ? "HR" : "EN"}
+    </span>
+  )
+}
+
+function fmtMB(mb: number): string {
+  if (mb >= 1024) return `${(mb / 1024).toFixed(mb >= 10240 ? 0 : 1)} ГБ`
+  return `${mb.toFixed(1)} МБ`
+}
+
+function fmtUptime(sec: number): string {
+  const d = Math.floor(sec / 86400)
+  const h = Math.floor((sec % 86400) / 3600)
+  const m = Math.floor((sec % 3600) / 60)
+  if (d > 0) return `${d}д ${h}ч`
+  if (h > 0) return `${h}ч ${m}м`
+  return `${m}м`
+}
+
+function resPctColor(pct: number, warn = 70, crit = 85): string {
+  if (pct >= crit) return "text-red-600 dark:text-red-400"
+  if (pct >= warn) return "text-amber-600 dark:text-amber-400"
+  return "text-emerald-600 dark:text-emerald-400"
+}
+
+function resBarColor(pct: number, warn = 70, crit = 85): string {
+  if (pct >= crit) return "bg-red-500"
+  if (pct >= warn) return "bg-amber-500"
+  return "bg-emerald-500"
+}
+
+function MiniBar({
+  pct,
+  warn = 70,
+  crit = 85,
+  className,
+}: {
+  pct: number
+  warn?: number
+  crit?: number
+  className?: string
+}) {
+  return (
+    <div className={cn("h-1.5 rounded-full bg-muted overflow-hidden", className)}>
+      <div
+        className={cn("h-full rounded-full transition-all duration-700", resBarColor(pct, warn, crit))}
+        style={{ width: `${Math.min(100, Math.max(0, pct))}%` }}
+      />
+    </div>
+  )
+}
+
+interface UptimeResourcesDataGridProps {
+  rows: UptimeResourceRow[]
+}
+
+function UptimeResourcesDataGrid({ rows }: UptimeResourcesDataGridProps) {
+  const columns = useMemo<ColumnDef<UptimeResourceRow>[]>(
+    () => [
+      {
+        id: "name",
+        accessorFn: (row) => row.server.name,
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Сервер" className="ml-1" />
+        ),
+        cell: ({ row }) => {
+          const r = row.original
+          const srv = r.server
+          const offline = srv.status !== "online"
+          const noMetrics = offline || !r.hasData
+          const isCrit =
+            !noMetrics &&
+            (r.cpu >= 85 || r.ramPct >= 85 || r.hddPct >= 85 || (r.temp ?? 0) >= 70)
+          return (
+            <div className="flex items-center gap-2 flex-wrap">
+              {isCrit && <AlertCircleIcon className="size-3.5 text-red-500 shrink-0" />}
+              {!isCrit && <StatusDot status={srv.status} pulse={!offline} />}
+              <Flag code={srv.country} size={16} />
+              <span className="font-mono font-semibold">{srv.name}</span>
+              <TypeChip type={srv.type} />
+              <span className="text-xs text-muted-foreground hidden xl:inline">{srv.site}</span>
+              {!offline && !r.hasData && (
+                <span className="text-[10px] rounded border border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-400 px-1.5 py-0.5">
+                  нет данных
+                </span>
+              )}
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Сервер",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "board",
+        accessorKey: "boardName",
+        header: () => (
+          <span className="text-xs font-medium text-muted-foreground hidden md:inline">
+            Модель · ROS
+          </span>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <div className="hidden md:flex flex-col leading-tight">
+              <span className="font-mono text-xs text-muted-foreground">
+                {r.hasData ? r.boardName : "—"}
+              </span>
+              <span className="text-[10px] text-muted-foreground/50">{r.server.os}</span>
+            </div>
+          )
+        },
+        meta: { headerClassName: "hidden md:table-cell", cellClassName: "hidden md:table-cell px-4 py-3" },
+      },
+      {
+        id: "cpu",
+        accessorKey: "cpu",
+        header: ({ column }) => (
+          <span className="inline-flex items-center gap-1.5">
+            <CpuIcon className="size-3.5 text-muted-foreground" />
+            <DataGridSortHeader column={column} title="CPU" />
+          </span>
+        ),
+        cell: ({ row }) => {
+          const r = row.original
+          const offline = r.server.status !== "online"
+          const noMetrics = offline || !r.hasData
+          if (noMetrics) {
+            return (
+              <span className="text-xs text-muted-foreground/30">
+                {offline ? "—" : "нет опроса"}
+              </span>
+            )
+          }
+          const cpuColor =
+            r.cpu >= 85 ? "hsl(0 84% 60%)" : r.cpu >= 70 ? "hsl(38 92% 50%)" : "hsl(142 76% 36%)"
+          return (
+            <div className="flex flex-col gap-1.5 min-w-[140px]">
+              <div className="flex items-center gap-2">
+                <span className={cn("font-mono text-sm font-semibold tabular-nums w-10 shrink-0", resPctColor(r.cpu))}>
+                  {r.cpu}%
+                </span>
+                <MiniBar pct={r.cpu} className="flex-1" />
+              </div>
+              <Sparkline data={r.cpuHistory} width={120} height={18} color={cpuColor} filled />
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "CPU",
+          headerClassName: cn(DATA_GRID_CELL_PAD, "min-w-[160px]"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "min-w-[160px]"),
+        },
+      },
+      {
+        id: "ram",
+        accessorKey: "ramPct",
+        header: ({ column }) => (
+          <span className="inline-flex items-center gap-1.5">
+            <HardDriveIcon className="size-3.5 text-muted-foreground" />
+            <DataGridSortHeader column={column} title="RAM" />
+          </span>
+        ),
+        cell: ({ row }) => {
+          const r = row.original
+          const offline = r.server.status !== "online"
+          const noMetrics = offline || !r.hasData
+          if (noMetrics) {
+            return <span className="text-xs text-muted-foreground/30">{offline ? "—" : "нет опроса"}</span>
+          }
+          return (
+            <div className="flex flex-col gap-1.5 min-w-[155px]">
+              <div className="flex items-center justify-between text-xs">
+                <span className={cn("font-mono font-semibold", resPctColor(r.ramPct))}>{r.ramPct}%</span>
+                <span className="text-muted-foreground/60 font-mono text-[10px]">
+                  {fmtMB(r.ramUsed)}/{fmtMB(r.ramTotal)}
+                </span>
+              </div>
+              <MiniBar pct={r.ramPct} />
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "RAM",
+          headerClassName: cn(DATA_GRID_CELL_PAD, "min-w-[175px]"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "min-w-[175px]"),
+        },
+      },
+      {
+        id: "hdd",
+        accessorKey: "hddPct",
+        header: ({ column }) => (
+          <span className="inline-flex items-center gap-1.5">
+            <HardDriveIcon className="size-3.5 text-muted-foreground" />
+            <DataGridSortHeader column={column} title="Диск" />
+          </span>
+        ),
+        cell: ({ row }) => {
+          const r = row.original
+          const offline = r.server.status !== "online"
+          const noMetrics = offline || !r.hasData
+          if (noMetrics) {
+            return <span className="text-xs text-muted-foreground/30">{offline ? "—" : "нет опроса"}</span>
+          }
+          return (
+            <div className="flex flex-col gap-1.5 min-w-[155px]">
+              <div className="flex items-center justify-between text-xs">
+                <span className={cn("font-mono font-semibold", resPctColor(r.hddPct))}>{r.hddPct}%</span>
+                <span className="text-muted-foreground/60 font-mono text-[10px]">
+                  {fmtMB(r.hddUsed)}/{fmtMB(r.hddTotal)}
+                </span>
+              </div>
+              <MiniBar pct={r.hddPct} />
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Диск",
+          headerClassName: cn(DATA_GRID_CELL_PAD, "min-w-[175px]"),
+          cellClassName: cn(DATA_GRID_CELL_PAD, "min-w-[175px]"),
+        },
+      },
+      {
+        id: "uptime",
+        accessorKey: "uptimeSeconds",
+        header: ({ column }) => (
+          <span className="inline-flex items-center gap-1.5">
+            <ClockIcon className="size-3.5 text-muted-foreground" />
+            <DataGridSortHeader column={column} title="Uptime" />
+          </span>
+        ),
+        cell: ({ row }) => {
+          const r = row.original
+          const offline = r.server.status !== "online"
+          const noMetrics = offline || !r.hasData
+          return (
+            <span className="font-mono text-xs text-muted-foreground">
+              {noMetrics ? "—" : fmtUptime(r.uptimeSeconds)}
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Uptime",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "temp",
+        accessorKey: "temp",
+        header: ({ column }) => (
+          <span className="inline-flex items-center gap-1.5">
+            <ThermometerIcon className="size-3.5 text-muted-foreground" />
+            <DataGridSortHeader column={column} title="°C" />
+          </span>
+        ),
+        cell: ({ row }) => {
+          const r = row.original
+          const offline = r.server.status !== "online"
+          const noMetrics = offline || !r.hasData
+          if (r.temp !== undefined && !noMetrics) {
+            return (
+              <span
+                className={cn(
+                  "font-mono text-sm font-semibold tabular-nums",
+                  r.temp >= 70
+                    ? "text-red-600 dark:text-red-400"
+                    : r.temp >= 55
+                      ? "text-amber-600 dark:text-amber-400"
+                      : "text-muted-foreground",
+                )}
+              >
+                {r.temp}°C
+              </span>
+            )
+          }
+          return <span className="text-muted-foreground/30 text-xs">—</span>
+        },
+        meta: {
+          headerTitle: "°C",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.serverId,
+  })
+
+  if (rows.length === 0) {
+    return (
+      <EmptyState
+        icon={<SearchIcon className="size-4" />}
+        title="Ничего не найдено"
+        className="border-0 py-12"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={rows.length}
+      tableClassNames={{
+        headerRow: "border-b border-border bg-muted/30",
+        bodyRow: cn(
+          "group/row hover:bg-muted/30",
+          "[&:has([data-resource-offline=true])]:opacity-50",
+          "[&:has([data-resource-crit=true])]:bg-red-500/3",
+        ),
+      }}
+    />
+  )
+}
+
+export { UptimeResourcesDataGrid, type UptimeResourcesDataGridProps }