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

2026-06-30 22:22:51 +07:00
parent a1a9124f3d
commit d3a2d38b37
63 changed files with 8509 additions and 3652 deletions
@@ -0,0 +1,157 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { IpRange } from "@/lib/data"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { FilterIcon, NetworkIcon } from "lucide-react"
+
+interface IpRangesDataGridProps {
+  ipRanges: IpRange[]
+  isLoading?: boolean
+  pagination?: boolean
+}
+
+function IpRangesDataGrid({ ipRanges, isLoading, pagination = false }: IpRangesDataGridProps) {
+  const columns = useMemo<ColumnDef<IpRange>[]>(
+    () => [
+      {
+        id: "cidr",
+        accessorKey: "cidr",
+        header: ({ column }) => <DataGridSortHeader column={column} title="CIDR" className="ml-1" />,
+        cell: ({ row }) => <span className="font-mono font-medium">{row.original.cidr}</span>,
+        meta: {
+          headerTitle: "CIDR",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "asn",
+        accessorKey: "asn",
+        header: ({ column }) => <DataGridSortHeader column={column} title="ASN" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">{row.original.asn}</span>
+        ),
+        meta: {
+          headerTitle: "ASN",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "country",
+        accessorKey: "country",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Страна" />,
+        cell: ({ row }) => (
+          <span className="text-xs border border-border rounded px-2 py-0.5">{row.original.country}</span>
+        ),
+        meta: {
+          headerTitle: "Страна",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "purpose",
+        accessorKey: "purpose",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Назначение" />,
+        cell: ({ row }) => (
+          <span className="text-xs border border-border rounded px-2 py-0.5">{row.original.purpose}</span>
+        ),
+        meta: {
+          headerTitle: "Назначение",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "filter",
+        accessorKey: "filter",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Фильтр" />,
+        cell: ({ row }) => (
+          <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" />
+            {row.original.filter}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Фильтр",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "updated",
+        accessorKey: "updated",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Обновлён" />,
+        cell: ({ row }) => <span className="text-xs text-muted-foreground">{row.original.updated}</span>,
+        meta: {
+          headerTitle: "Обновлён",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "enabled",
+        accessorKey: "enabled",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
+        cell: ({ row }) => (
+          <span
+            className={`text-xs font-medium ${row.original.enabled ? "text-emerald-600" : "text-muted-foreground"}`}
+          >
+            {row.original.enabled ? "Активен" : "Отключён"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Статус",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: ipRanges,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    ...(pagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={ipRanges.length}
+      isLoading={isLoading}
+      loadingMode="skeleton"
+      pagination={pagination}
+      emptyMessage={
+        <EmptyState
+          icon={<NetworkIcon className="size-4" />}
+          title="Нет IP-диапазонов"
+          description="Добавьте CIDR-блоки или импортируйте каталог"
+          className="border-0 py-12"
+        />
+      }
+    />
+  )
+}
+
+export { IpRangesDataGrid, type IpRangesDataGridProps }