feat: refactor components to utilize DataGridCard for improved UI consistency

Updated various components including AccessApiKeysCard, FirewallClientsGrid, FirewallRulesGrid, ModuleEntriesSection, and DirectoriesComponent to replace traditional card and table structures with the new DataGridCard component. This change enhances the user interface by providing a more consistent layout and improved loading states. Additionally, integrated QueryState for better handling of loading and error scenarios across these components, streamlining the overall user experience.

apps/web/src/components/modules/module-entries-grid.tsx

@@ -0,0 +1,251 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { Pencil, Trash2 } from 'lucide-react'
+import { useMemo } from 'react'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { formatDateTime } from '@/lib/modules/display'
+import { communityLabel } from '@/lib/modules/helpers'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type {
+  AsEntry,
+  BgpCommunity,
+  CdnSource,
+  DomainEntry,
+  IpRangeEntry,
+  ModuleRow,
+} from '@/types/api'
+
+type DeleteTarget =
+  | { kind: 'domain'; entry: DomainEntry }
+  | { kind: 'ip-range'; entry: IpRangeEntry }
+  | { kind: 'cdn'; entry: CdnSource }
+  | { kind: 'as'; entry: AsEntry }
+
+function RowActions({ onEdit, onDelete }: { onEdit: () => void; onDelete: () => void }) {
+  return (
+    <div className="flex justify-end gap-1">
+      <Button variant="ghost" size="icon-sm" type="button" onClick={onEdit} aria-label="Редактировать">
+        <Pencil className="size-3.5" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        type="button"
+        className="text-destructive"
+        onClick={onDelete}
+        aria-label="Удалить"
+      >
+        <Trash2 className="size-3.5" />
+      </Button>
+    </div>
+  )
+}
+
+export function ModuleEntriesGrid({
+  mod,
+  rows,
+  communities,
+  onEdit,
+  onDelete,
+  isLoading = false,
+}: {
+  mod: ModuleRow
+  rows: Record<string, unknown>[]
+  communities: BgpCommunity[]
+  onEdit: (target: DeleteTarget) => void
+  onDelete: (target: DeleteTarget) => void
+  isLoading?: boolean
+}) {
+  const columns = useMemo(() => {
+    if (mod.type === 'DOMAINS') {
+      return [
+        {
+          accessorKey: 'fqdn',
+          header: ({ column }: { column: { id: string } }) => (
+            <DataGridColumnHeader column={column as never} title="FQDN" />
+          ),
+          cell: ({ row }: { row: { original: DomainEntry } }) => (
+            <span className="font-mono text-sm">{row.original.fqdn}</span>
+          ),
+        },
+        {
+          id: 'community',
+          header: 'Community',
+          cell: ({ row }: { row: { original: DomainEntry } }) => (
+            <span className="text-sm text-muted-foreground">
+              {communityLabel(row.original.community_id, communities)}
+            </span>
+          ),
+        },
+        {
+          id: 'actions',
+          enableSorting: false,
+          header: () => null,
+          cell: ({ row }: { row: { original: DomainEntry } }) => (
+            <RowActions
+              onEdit={() => onEdit({ kind: 'domain', entry: row.original })}
+              onDelete={() => onDelete({ kind: 'domain', entry: row.original })}
+            />
+          ),
+        },
+      ] as ColumnDef<DomainEntry>[]
+    }
+
+    if (mod.type === 'IP_RANGES') {
+      return [
+        {
+          accessorKey: 'prefix',
+          header: ({ column }: { column: { id: string } }) => (
+            <DataGridColumnHeader column={column as never} title="Префикс (CIDR)" />
+          ),
+          cell: ({ row }: { row: { original: IpRangeEntry } }) => (
+            <span className="font-mono text-sm">{row.original.prefix}</span>
+          ),
+        },
+        {
+          id: 'community',
+          header: 'Community',
+          cell: ({ row }: { row: { original: IpRangeEntry } }) => (
+            <span className="text-sm text-muted-foreground">
+              {communityLabel(row.original.community_id, communities)}
+            </span>
+          ),
+        },
+        {
+          id: 'actions',
+          enableSorting: false,
+          header: () => null,
+          cell: ({ row }: { row: { original: IpRangeEntry } }) => (
+            <RowActions
+              onEdit={() => onEdit({ kind: 'ip-range', entry: row.original })}
+              onDelete={() => onDelete({ kind: 'ip-range', entry: row.original })}
+            />
+          ),
+        },
+      ] as ColumnDef<IpRangeEntry>[]
+    }
+
+    if (mod.type === 'CDN_CIDRS') {
+      return [
+        {
+          accessorKey: 'url',
+          header: ({ column }: { column: { id: string } }) => (
+            <DataGridColumnHeader column={column as never} title="URL" />
+          ),
+          cell: ({ row }: { row: { original: CdnSource } }) => (
+            <span className="max-w-xs truncate font-mono text-xs">{row.original.url}</span>
+          ),
+        },
+        {
+          accessorKey: 'source_kind',
+          header: 'Тип',
+          cell: ({ row }: { row: { original: CdnSource } }) => (
+            <span className="text-sm">{row.original.source_kind}</span>
+          ),
+        },
+        {
+          id: 'community',
+          header: 'Community',
+          cell: ({ row }: { row: { original: CdnSource } }) => (
+            <span className="text-sm text-muted-foreground">
+              {communityLabel(row.original.community_id, communities)}
+            </span>
+          ),
+        },
+        {
+          id: 'last_refreshed_at',
+          accessorFn: (row: CdnSource) => row.last_refreshed_at ?? '',
+          header: ({ column }: { column: { id: string } }) => (
+            <DataGridColumnHeader column={column as never} title="Обновлено" />
+          ),
+          cell: ({ row }: { row: { original: CdnSource } }) => (
+            <span className="text-xs text-muted-foreground">
+              {formatDateTime(row.original.last_refreshed_at)}
+            </span>
+          ),
+        },
+        {
+          id: 'actions',
+          enableSorting: false,
+          header: () => null,
+          cell: ({ row }: { row: { original: CdnSource } }) => (
+            <RowActions
+              onEdit={() => onEdit({ kind: 'cdn', entry: row.original })}
+              onDelete={() => onDelete({ kind: 'cdn', entry: row.original })}
+            />
+          ),
+        },
+      ] as ColumnDef<CdnSource>[]
+    }
+
+    return [
+      {
+        accessorKey: 'asn',
+        header: ({ column }: { column: { id: string } }) => (
+          <DataGridColumnHeader column={column as never} title="ASN" />
+        ),
+        cell: ({ row }: { row: { original: AsEntry } }) => (
+          <span className="font-mono text-sm">{row.original.asn}</span>
+        ),
+      },
+      {
+        accessorKey: 'asn_name',
+        header: 'Имя',
+        cell: ({ row }: { row: { original: AsEntry } }) => (
+          <span className="text-sm">{row.original.asn_name ?? '—'}</span>
+        ),
+      },
+      {
+        accessorKey: 'prefix_count',
+        header: 'Префиксов',
+        cell: ({ row }: { row: { original: AsEntry } }) => (
+          <span className="font-mono text-sm">{row.original.prefix_count ?? '—'}</span>
+        ),
+      },
+      {
+        id: 'community',
+        header: 'Community',
+        cell: ({ row }: { row: { original: AsEntry } }) => (
+          <span className="text-sm text-muted-foreground">
+            {communityLabel(row.original.community_id, communities)}
+          </span>
+        ),
+      },
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: () => null,
+        cell: ({ row }: { row: { original: AsEntry } }) => (
+          <RowActions
+            onEdit={() => onEdit({ kind: 'as', entry: row.original })}
+            onDelete={() => onDelete({ kind: 'as', entry: row.original })}
+          />
+        ),
+      },
+    ] as ColumnDef<AsEntry>[]
+  }, [communities, mod.type, onDelete, onEdit])
+
+  type RowType = DomainEntry | IpRangeEntry | CdnSource | AsEntry
+  const data = rows as unknown as RowType[]
+
+  const table = useReactTable({
+    data,
+    columns: columns as ColumnDef<RowType>[],
+    ...createClientDataGridOptions<RowType>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={data.length}
+      isLoading={isLoading}
+      emptyMessage="Нет записей"
+    />
+  )
+}
+
+export type { DeleteTarget as ModuleEntryDeleteTarget }

apps/web/src/components/modules/module-entries-section.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Pencil, Plus, Trash2 } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { toast } from 'sonner'
 
 import {
@@ -13,25 +13,16 @@ import {
   AlertDialogTitle,
 } from '@evobgp/ui/components/alert-dialog'
 import { Button } from '@evobgp/ui/components/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@evobgp/ui/components/table'
 
+import { DataGridCard } from '@/components/data-grid-shell'
 import { QueryState } from '@/components/query-state'
 import { TableSkeleton } from '@/components/skeletons'
+import { ModuleEntriesGrid, type ModuleEntryDeleteTarget } from '@/components/modules/module-entries-grid'
 import { ModuleAsEntryDialog } from '@/components/modules/module-as-entry-dialog'
 import { ModuleCdnSourceDialog } from '@/components/modules/module-cdn-source-dialog'
 import { ModuleDomainEntryDialog } from '@/components/modules/module-domain-entry-dialog'
 import { ModuleIpRangeEntryDialog } from '@/components/modules/module-ip-range-entry-dialog'
 import { ApiError, apiMutate } from '@/lib/api-client'
-import { communityLabel } from '@/lib/modules/helpers'
-import { formatDateTime } from '@/lib/modules/display'
 import type {
   AsEntry,
   BgpCommunity,
@@ -53,11 +44,7 @@ interface ModuleEntriesSectionProps {
   onChanged: () => void | Promise<void>
 }
 
-type DeleteTarget =
-  | { kind: 'domain'; entry: DomainEntry }
-  | { kind: 'ip-range'; entry: IpRangeEntry }
-  | { kind: 'cdn'; entry: CdnSource }
-  | { kind: 'as'; entry: AsEntry }
+type DeleteTarget = ModuleEntryDeleteTarget
 
 const CARD_META: Record<
   ModuleRow['type'],
@@ -150,49 +137,45 @@ export function ModuleEntriesSection({
 
   return (
     <>
-      <Card>
-        <CardHeader className="flex flex-col gap-3 border-b py-3 sm:flex-row sm:items-center sm:justify-between">
-          <div className="min-w-0 flex-1">
-            <CardTitle className="text-base">{meta.title}</CardTitle>
-            <CardDescription>{meta.description}</CardDescription>
-          </div>
-          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 self-start sm:self-auto">
-            <Button size="sm" onClick={openCreate}>
-              <Plus />
-              Добавить
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent className="p-0">
-          <QueryState
-            data={items}
-            isLoading={isLoading}
-            isError={isError}
-            error={error}
-            empty={items.length === 0}
-            emptyTitle={meta.emptyTitle}
-            emptyDescription={meta.emptyDescription}
-            skeleton={<TableSkeleton rows={5} cols={3} />}
-            onRetry={onRetry}
-          >
-            {(rows) => (
-              <EntriesTable
-                mod={mod}
-                rows={rows}
-                communities={communities}
-                onEdit={(target) => {
-                  if (target.kind === 'domain') setEditDomain(target.entry)
-                  if (target.kind === 'ip-range') setEditIpRange(target.entry)
-                  if (target.kind === 'cdn') setEditCdn(target.entry)
-                  if (target.kind === 'as') setEditAs(target.entry)
-                  setDialogOpen(true)
-                }}
-                onDelete={setDeleteTarget}
-              />
-            )}
-          </QueryState>
-        </CardContent>
-      </Card>
+      <DataGridCard
+        title={meta.title}
+        description={meta.description}
+        actions={
+          <Button size="sm" type="button" onClick={openCreate}>
+            <Plus />
+            Добавить
+          </Button>
+        }
+      >
+        <QueryState
+          data={items}
+          isLoading={isLoading}
+          isError={isError}
+          error={error}
+          empty={items.length === 0}
+          emptyTitle={meta.emptyTitle}
+          emptyDescription={meta.emptyDescription}
+          skeleton={<TableSkeleton rows={5} cols={3} />}
+          onRetry={onRetry}
+        >
+          {(rows) => (
+            <ModuleEntriesGrid
+              mod={mod}
+              rows={rows}
+              communities={communities}
+              isLoading={isLoading}
+              onEdit={(target) => {
+                if (target.kind === 'domain') setEditDomain(target.entry)
+                if (target.kind === 'ip-range') setEditIpRange(target.entry)
+                if (target.kind === 'cdn') setEditCdn(target.entry)
+                if (target.kind === 'as') setEditAs(target.entry)
+                setDialogOpen(true)
+              }}
+              onDelete={setDeleteTarget}
+            />
+          )}
+        </QueryState>
+      </DataGridCard>
 
       {mod.type === 'DOMAINS' ? (
         <ModuleDomainEntryDialog
@@ -270,168 +253,3 @@ function deleteDescription(target: DeleteTarget | null): string {
       return `AS${target.entry.asn}`
   }
 }
-
-function EntriesTable({
-  mod,
-  rows,
-  communities,
-  onEdit,
-  onDelete,
-}: {
-  mod: ModuleRow
-  rows: Record<string, unknown>[]
-  communities: BgpCommunity[]
-  onEdit: (target: DeleteTarget) => void
-  onDelete: (target: DeleteTarget) => void
-}) {
-  if (mod.type === 'DOMAINS') {
-    const entries = rows as unknown as DomainEntry[]
-    return (
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>FQDN</TableHead>
-            <TableHead>Community</TableHead>
-            <TableHead className="w-20" />
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {entries.map((entry) => (
-            <TableRow key={entry.id}>
-              <TableCell className="font-mono text-sm">{entry.fqdn}</TableCell>
-              <TableCell className="text-sm text-muted-foreground">
-                {communityLabel(entry.community_id, communities)}
-              </TableCell>
-              <TableCell>
-                <RowActions
-                  onEdit={() => onEdit({ kind: 'domain', entry })}
-                  onDelete={() => onDelete({ kind: 'domain', entry })}
-                />
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    )
-  }
-
-  if (mod.type === 'IP_RANGES') {
-    const entries = rows as unknown as IpRangeEntry[]
-    return (
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Префикс (CIDR)</TableHead>
-            <TableHead>Community</TableHead>
-            <TableHead className="w-20" />
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {entries.map((entry) => (
-            <TableRow key={entry.id}>
-              <TableCell className="font-mono text-sm">{entry.prefix}</TableCell>
-              <TableCell className="text-sm text-muted-foreground">
-                {communityLabel(entry.community_id, communities)}
-              </TableCell>
-              <TableCell>
-                <RowActions
-                  onEdit={() => onEdit({ kind: 'ip-range', entry })}
-                  onDelete={() => onDelete({ kind: 'ip-range', entry })}
-                />
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    )
-  }
-
-  if (mod.type === 'CDN_CIDRS') {
-    const entries = rows as unknown as CdnSource[]
-    return (
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>URL</TableHead>
-            <TableHead>Тип</TableHead>
-            <TableHead>Community</TableHead>
-            <TableHead>Обновлено</TableHead>
-            <TableHead className="w-20" />
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {entries.map((entry) => (
-            <TableRow key={entry.id}>
-              <TableCell className="max-w-xs truncate font-mono text-xs">{entry.url}</TableCell>
-              <TableCell className="text-sm">{entry.source_kind}</TableCell>
-              <TableCell className="text-sm text-muted-foreground">
-                {communityLabel(entry.community_id, communities)}
-              </TableCell>
-              <TableCell className="text-xs text-muted-foreground">
-                {formatDateTime(entry.last_refreshed_at)}
-              </TableCell>
-              <TableCell>
-                <RowActions
-                  onEdit={() => onEdit({ kind: 'cdn', entry })}
-                  onDelete={() => onDelete({ kind: 'cdn', entry })}
-                />
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    )
-  }
-
-  const entries = rows as unknown as AsEntry[]
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>ASN</TableHead>
-          <TableHead>Имя</TableHead>
-          <TableHead>Префиксов</TableHead>
-          <TableHead>Community</TableHead>
-          <TableHead className="w-20" />
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {entries.map((entry) => (
-          <TableRow key={entry.id}>
-            <TableCell className="font-mono text-sm">{entry.asn}</TableCell>
-            <TableCell className="text-sm">{entry.asn_name ?? '—'}</TableCell>
-            <TableCell className="font-mono text-sm">{entry.prefix_count ?? '—'}</TableCell>
-            <TableCell className="text-sm text-muted-foreground">
-              {communityLabel(entry.community_id, communities)}
-            </TableCell>
-            <TableCell>
-              <RowActions
-                onEdit={() => onEdit({ kind: 'as', entry })}
-                onDelete={() => onDelete({ kind: 'as', entry })}
-              />
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
-}
-
-function RowActions({ onEdit, onDelete }: { onEdit: () => void; onDelete: () => void }) {
-  return (
-    <div className="flex justify-end gap-1">
-      <Button variant="ghost" size="icon-sm" onClick={onEdit} aria-label="Редактировать">
-        <Pencil className="size-3.5" />
-      </Button>
-      <Button
-        variant="ghost"
-        size="icon-sm"
-        className="text-destructive"
-        onClick={onDelete}
-        aria-label="Удалить"
-      >
-        <Trash2 className="size-3.5" />
-      </Button>
-    </div>
-  )
-}

apps/web/src/components/modules/modules-list-grid.tsx

@@ -0,0 +1,99 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useNavigate } from '@tanstack/react-router'
+import { Boxes } from 'lucide-react'
+import { useMemo } from 'react'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { Badge } from '@/components/reui/badge'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { TruncatedText } from '@/components/truncated-text'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { ModuleRow } from '@/types/api'
+
+export function ModulesListGrid({
+  items,
+  isLoading = false,
+}: {
+  items: ModuleRow[]
+  isLoading?: boolean
+}) {
+  const navigate = useNavigate()
+
+  const columns = useMemo<ColumnDef<ModuleRow>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <Boxes className="size-4 text-muted-foreground" />
+            <TruncatedText className="max-w-[280px] font-medium">{row.original.name}</TruncatedText>
+          </div>
+        ),
+        meta: { headerTitle: 'Название' },
+      },
+      {
+        accessorKey: 'type',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Тип" />,
+        cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
+        meta: { headerTitle: 'Тип' },
+      },
+      {
+        accessorKey: 'priority',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Приоритет" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-sm tabular-nums">{row.original.priority}</span>
+        ),
+        meta: { headerTitle: 'Приоритет' },
+      },
+      {
+        id: 'enabled',
+        accessorFn: (row) => (row.enabled ? 'enabled' : 'disabled'),
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Состояние" />,
+        cell: ({ row }) =>
+          row.original.enabled ? (
+            <Badge variant="success">включён</Badge>
+          ) : (
+            <Badge variant="secondary">выключен</Badge>
+          ),
+        meta: { headerTitle: 'Состояние' },
+      },
+      {
+        id: 'last_refreshed_at',
+        accessorFn: (row) => row.last_refreshed_at ?? '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Обновлено" />,
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground">
+            {row.original.last_refreshed_at
+              ? new Date(row.original.last_refreshed_at).toLocaleString('ru-RU')
+              : '—'}
+          </span>
+        ),
+        sortingFn: (a, b) => {
+          const av = a.original.last_refreshed_at ?? ''
+          const bv = b.original.last_refreshed_at ?? ''
+          return av.localeCompare(bv)
+        },
+        meta: { headerTitle: 'Обновлено' },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<ModuleRow>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет модулей"
+      onRowClick={(row) => void navigate({ to: '/modules/$moduleId', params: { moduleId: row.id } })}
+    />
+  )
+}