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

app/(main)/bgp/page.tsx

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