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/access/access-api-keys-card.tsx

@@ -1,25 +1,14 @@
 import { useState } from 'react'
-import { Plus, RefreshCw, Trash2 } from 'lucide-react'
+import { Plus, RefreshCw } from 'lucide-react'
 
 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 { AccessApiKeysGrid } from '@/components/access/access-api-keys-grid'
+import { DataGridCard } from '@/components/data-grid-shell'
 import { ApiKeyCreateDialog } from '@/components/access/api-key-create-dialog'
 import { ApiKeyTokenDialog } from '@/components/access/api-key-token-dialog'
-import { Badge } from '@/components/reui/badge'
-import { ConfirmDialog } from '@/components/confirm-dialog'
 import { QueryState } from '@/components/query-state'
-import { StatusBadge } from '@/components/status-badge'
 import { TableSkeleton } from '@/components/skeletons'
-import { formatApiKeyDate } from '@/lib/access/api-key-labels'
 import { useRevokeApiKeyMutation, useRotateApiKeyMutation } from '@/queries/api-keys'
 import type { ApiKey, ApiKeyCreated } from '@/types/api'
 
@@ -58,121 +47,45 @@ export function AccessApiKeysCard({
 
   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">API-ключи</CardTitle>
-            <CardDescription>
-              Управление ключами tenant. Полный токен показывается только при создании и ротации.
-            </CardDescription>
-          </div>
-          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
-            <Button size="sm" variant="outline" onClick={onRetry} disabled={isLoading}>
+      <DataGridCard
+        title="API-ключи"
+        description="Управление ключами tenant. Полный токен показывается только при создании и ротации."
+        actions={
+          <>
+            <Button size="sm" variant="outline" type="button" onClick={onRetry} disabled={isLoading}>
               <RefreshCw className={isLoading ? 'animate-spin' : ''} />
               Обновить
             </Button>
-            <Button size="sm" onClick={() => setCreateOpen(true)}>
+            <Button size="sm" type="button" onClick={() => setCreateOpen(true)}>
               <Plus />
               Создать
             </Button>
-          </div>
-        </CardHeader>
-        <CardContent className="p-0">
-          <QueryState
-            data={items}
-            isLoading={isLoading}
-            isError={isError}
-            error={error}
-            empty={items.length === 0}
-            emptyTitle="Нет ключей"
-            emptyDescription="Создайте API-ключ для автоматизации или отдельного доступа."
-            skeleton={<TableSkeleton rows={4} cols={6} />}
-            onRetry={onRetry}
-          >
-            {(data) => (
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Имя</TableHead>
-                    <TableHead>Роль</TableHead>
-                    <TableHead>Префикс</TableHead>
-                    <TableHead>Статус</TableHead>
-                    <TableHead>Истекает</TableHead>
-                    <TableHead>Последнее использование</TableHead>
-                    <TableHead className="w-24" />
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {data.map((k) => (
-                    <TableRow key={k.id}>
-                      <TableCell className="font-medium">{k.name}</TableCell>
-                      <TableCell>
-                        <Badge variant="outline" className="font-mono text-xs">
-                          {k.role}
-                        </Badge>
-                      </TableCell>
-                      <TableCell className="font-mono text-xs text-muted-foreground">
-                        {k.prefix}…
-                      </TableCell>
-                      <TableCell>
-                        {k.revoked_at ? (
-                          <StatusBadge status="error" label="отозван" />
-                        ) : (
-                          <StatusBadge status="active" label="активен" />
-                        )}
-                      </TableCell>
-                      <TableCell className="text-sm text-muted-foreground">
-                        {formatApiKeyDate(k.expires_at)}
-                      </TableCell>
-                      <TableCell className="text-sm text-muted-foreground">
-                        {formatApiKeyDate(k.last_used_at)}
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex gap-1">
-                          <ConfirmDialog
-                            trigger={
-                              <Button
-                                variant="ghost"
-                                size="icon-sm"
-                                title="Ротировать"
-                                disabled={!!k.revoked_at || rotate.isPending}
-                              >
-                                <RefreshCw className="size-3.5" />
-                              </Button>
-                            }
-                            title="Ротировать ключ?"
-                            description="Старый токен перестанет работать сразу."
-                            confirmLabel="Ротировать"
-                            onConfirm={() => handleRotated(k.id)}
-                          />
-                          <ConfirmDialog
-                            trigger={
-                              <Button
-                                variant="ghost"
-                                size="icon-sm"
-                                className="text-destructive"
-                                disabled={!!k.revoked_at || revoke.isPending}
-                                title="Отозвать"
-                              >
-                                <Trash2 className="size-3.5" />
-                              </Button>
-                            }
-                            title="Отозвать API-ключ?"
-                            description={`${k.name} (${k.prefix}…)`}
-                            confirmLabel="Отозвать"
-                            destructive
-                            onConfirm={() => revoke.mutate(k.id)}
-                          />
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            )}
-          </QueryState>
-        </CardContent>
-      </Card>
+          </>
+        }
+      >
+        <QueryState
+          data={items}
+          isLoading={isLoading}
+          isError={isError}
+          error={error}
+          empty={items.length === 0}
+          emptyTitle="Нет ключей"
+          emptyDescription="Создайте API-ключ для автоматизации или отдельного доступа."
+          skeleton={<TableSkeleton rows={4} cols={6} />}
+          onRetry={onRetry}
+        >
+          {(data) => (
+            <AccessApiKeysGrid
+              items={data}
+              isLoading={isLoading}
+              onRotate={handleRotated}
+              onRevoke={(id) => revoke.mutate(id)}
+              rotatePending={rotate.isPending}
+              revokePending={revoke.isPending}
+            />
+          )}
+        </QueryState>
+      </DataGridCard>
 
       <ApiKeyCreateDialog
         open={createOpen}

apps/web/src/components/access/access-api-keys-grid.tsx

@@ -0,0 +1,158 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { RefreshCw, Trash2 } from 'lucide-react'
+import { useMemo } from 'react'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { Badge } from '@/components/reui/badge'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { StatusBadge } from '@/components/status-badge'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { formatApiKeyDate } from '@/lib/access/api-key-labels'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { ApiKey } from '@/types/api'
+
+export function AccessApiKeysGrid({
+  items,
+  isLoading = false,
+  onRotate,
+  onRevoke,
+  rotatePending = false,
+  revokePending = false,
+}: {
+  items: ApiKey[]
+  isLoading?: boolean
+  onRotate: (id: string) => void
+  onRevoke: (id: string) => void
+  rotatePending?: boolean
+  revokePending?: boolean
+}) {
+  const columns = useMemo<ColumnDef<ApiKey>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
+        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
+        meta: { headerTitle: 'Имя' },
+      },
+      {
+        accessorKey: 'role',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Роль" />,
+        cell: ({ row }) => (
+          <Badge variant="outline" className="font-mono text-xs">
+            {row.original.role}
+          </Badge>
+        ),
+        meta: { headerTitle: 'Роль' },
+      },
+      {
+        accessorKey: 'prefix',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Префикс" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">{row.original.prefix}…</span>
+        ),
+        meta: { headerTitle: 'Префикс' },
+      },
+      {
+        id: 'status',
+        enableSorting: false,
+        header: 'Статус',
+        cell: ({ row }) =>
+          row.original.revoked_at ? (
+            <StatusBadge status="error" label="отозван" />
+          ) : (
+            <StatusBadge status="active" label="активен" />
+          ),
+        meta: { headerTitle: 'Статус' },
+      },
+      {
+        id: 'expires_at',
+        accessorFn: (row) => row.expires_at ?? '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Истекает" />,
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground">
+            {formatApiKeyDate(row.original.expires_at)}
+          </span>
+        ),
+        meta: { headerTitle: 'Истекает' },
+      },
+      {
+        id: 'last_used_at',
+        accessorFn: (row) => row.last_used_at ?? '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Последнее использование" />,
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground">
+            {formatApiKeyDate(row.original.last_used_at)}
+          </span>
+        ),
+        meta: { headerTitle: 'Последнее использование' },
+      },
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: () => null,
+        cell: ({ row }) => {
+          const k = row.original
+          return (
+            <div className="flex gap-1">
+              <ConfirmDialog
+                trigger={
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    type="button"
+                    title="Ротировать"
+                    disabled={!!k.revoked_at || rotatePending}
+                  >
+                    <RefreshCw className="size-3.5" />
+                  </Button>
+                }
+                title="Ротировать ключ?"
+                description="Старый токен перестанет работать сразу."
+                confirmLabel="Ротировать"
+                onConfirm={() => onRotate(k.id)}
+              />
+              <ConfirmDialog
+                trigger={
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    type="button"
+                    className="text-destructive"
+                    disabled={!!k.revoked_at || revokePending}
+                    title="Отозвать"
+                  >
+                    <Trash2 className="size-3.5" />
+                  </Button>
+                }
+                title="Отозвать API-ключ?"
+                description={`${k.name} (${k.prefix}…)`}
+                confirmLabel="Отозвать"
+                destructive
+                onConfirm={() => onRevoke(k.id)}
+              />
+            </div>
+          )
+        },
+      },
+    ],
+    [onRevoke, onRotate, revokePending, rotatePending],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<ApiKey>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет ключей"
+    />
+  )
+}