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

app/(main)/uptime/page.tsx

@@ -10,6 +10,12 @@ 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 {
+  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"
@@ -854,74 +860,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(",")
@@ -954,7 +941,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}%`)
@@ -1035,195 +1022,9 @@ function ResourcesTab({ resources, serversList, liveApi }: { resources: ServerRe
       </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>
+        <UptimeResourcesDataGrid rows={visible} />
+      </DataPageCard>
 
       <p className="text-xs text-muted-foreground/40 text-center">
         {liveApi
@@ -2478,106 +2279,7 @@ export default function UptimePage() {
                     <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>
+                    <UptimeSpeedHistoryDataGrid runs={speedRuns} servers={allServers} />
                   </div>
                 </Card>
               )}