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

app/(main)/gre/page.tsx

@@ -2,6 +2,9 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
+import { DataPageCard } from "@/components/data-page-card"
+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"
@@ -450,7 +453,7 @@ export default function GrePage() {
 
           {/* ── Tunnels ── */}
           {pageTab === "tunnels" && (
-            <Card>
+            <DataPageCard>
               <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) => (
@@ -469,177 +472,25 @@ export default function GrePage() {
                 <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">Внутренний 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>
+            <DataPageCard>
               <div className="flex items-center justify-between px-5 py-3 border-b">
                 <span className="text-sm text-muted-foreground">{displayPools.length} пула</span>
                 <Button size="sm" variant="outline" onClick={() => { setPForm(defaultPoolForm); setPoolOpen(true) }}>
                   <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>
+              <GrePoolsDataGrid pools={displayPools} />
 
               <div className="border-t px-5 py-4">
                 <p className="text-xs font-medium text-muted-foreground mb-3">Назначения по пулам</p>
@@ -664,7 +515,7 @@ export default function GrePage() {
                   })}
                 </div>
               </div>
-            </Card>
+            </DataPageCard>
           )}
 
           {/* RouterOS reference */}