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

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

@@ -2,6 +2,11 @@
 
 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 { Card } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
@@ -12,7 +17,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 {
@@ -35,25 +40,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: "Сингапур" },
@@ -83,13 +69,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> {
@@ -149,105 +129,6 @@ const emptyForm = (): RouteForm => ({
   endpoints: [newEndpoint()],
 })
 
-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()
@@ -794,37 +675,13 @@ 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">
               <PlusIcon className="size-3.5" />