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

app/(main)/asns/page.tsx

@@ -2,11 +2,13 @@
 
 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"
@@ -16,6 +18,7 @@ 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
 
@@ -25,6 +28,17 @@ 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
@@ -60,56 +74,19 @@ export default function AsnsPage() {
               </p>
             )}
           </div>
-          <DataTable
-            data={rows}
-            isLoading={useEvoCatalog && loading && !snapshot}
-            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