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/routes/_auth/dashboard.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useQueries } from '@tanstack/react-query'
 import {
   Boxes,
@@ -6,26 +6,29 @@ import {
   Clock,
   GitBranch,
   Info,
-  Network,
-  Play,
-  Plus,
   Radio,
   RefreshCw,
   Activity,
-  Share2,
-  Tags,
-  Gauge,
   XCircle,
 } from 'lucide-react'
-import { Link } from '@tanstack/react-router'
 import { useState } from 'react'
 
 import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
 import { Skeleton } from '@evobgp/ui/components/skeleton'
 
+import { DashboardNetworkPanel } from '@/components/dashboard/dashboard-network-panel'
+import { DashboardQuickActions } from '@/components/dashboard/dashboard-quick-actions'
+import { DashboardRecentJobsGrid } from '@/components/dashboard/dashboard-recent-jobs-grid'
+import { DashboardRecentRevisionsGrid } from '@/components/dashboard/dashboard-recent-revisions-grid'
 import { PageHeader } from '@/components/page-header'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
 import { SectionCards, type SectionCardItem } from '@/components/section-cards'
 import { SectionCardsSkeleton } from '@/components/skeletons'
 
@@ -46,6 +49,7 @@ export const Route = createFileRoute('/_auth/dashboard')({
 })
 
 function DashboardComponent() {
+  const navigate = useNavigate()
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
 
   const results = useQueries({
@@ -95,7 +99,7 @@ function DashboardComponent() {
       value: initialLoading ? '—' : String(modules.length),
       icon: <Boxes className="size-4" />,
       hint: countBadge(modules.length, modulesHasMore, 'AS, CDN, домены, IP'),
-      onClick: () => window.location.assign('/modules'),
+      onClick: () => navigate({ to: '/modules' }),
     },
     {
       label: 'Пиры',
@@ -104,7 +108,7 @@ function DashboardComponent() {
       hint: countBadge(peers.length, peersHasMore, 'Established / включённых'),
       badge: net.peersMismatch > 0 ? `mismatch ${net.peersMismatch}` : undefined,
       variant: net.peersMismatch > 0 ? 'warning' : 'default',
-      onClick: () => window.location.assign('/network?tab=peers'),
+      onClick: () => navigate({ to: '/network', search: { tab: 'peers' } }),
     },
     {
       label: 'Спикеры',
@@ -112,26 +116,29 @@ function DashboardComponent() {
       icon: <Radio className="size-4" />,
       hint: countBadge(speakers.length, speakersHasMore, 'online / всего'),
       variant: net.speakersOnline < net.speakersTotal ? 'warning' : 'default',
-      onClick: () => window.location.assign('/network?tab=overview'),
+      onClick: () => navigate({ to: '/network', search: { tab: 'overview' } }),
     },
     {
       label: 'Ревизии',
       value: initialLoading ? '—' : String(revisions.length),
       icon: <Activity className="size-4" />,
       hint: countBadge(revisions.length, revisionsHasMore, 'configs'),
-      onClick: () => window.location.assign('/operations'),
+      onClick: () => navigate({ to: '/operations', search: { tab: 'revisions' } }),
     },
     {
       label: 'Активных задач',
       value: initialLoading ? '—' : String(running),
       icon: <Clock className="size-4" />,
       hint: 'queued и running',
-      onClick: () => window.location.assign('/operations?tab=jobs'),
+      onClick: () => navigate({ to: '/operations', search: { tab: 'jobs' } }),
     },
   ]
 
+  const activityLoading =
+    refreshing && jobs.length === 0 && revisions.length === 0 && peers.length === 0 && speakers.length === 0
+
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-5">
       <PageHeader
         title="Обзор"
         description={
@@ -162,46 +169,61 @@ function DashboardComponent() {
         loadError={modulesQ.isError || peersQ.isError ? 'Некоторые данные не загружены' : null}
       />
 
-      {initialLoading ? <SectionCardsSkeleton count={5} /> : <SectionCards items={items} />}
+      {initialLoading ? <SectionCardsSkeleton count={5} /> : <SectionCards items={items} className="gap-3" />}
 
       <div className="grid gap-4 lg:grid-cols-3">
-        <RecentJobsCard jobs={jobs} nameById={nameById} loading={refreshing} />
-        <RecentRevisionsCard revisions={revisions} loading={refreshing} />
-        <NetworkStatusCard peers={peers} speakers={speakers} loading={refreshing} />
+        <Frame spacing="sm" className="h-full">
+          <FramePanel className="flex h-full flex-col p-0">
+            <FrameHeader className="border-b">
+              <FrameTitle>Недавние задачи</FrameTitle>
+              <FrameDescription>Последние фоновые операции</FrameDescription>
+            </FrameHeader>
+            {activityLoading ? (
+              <Skeleton className="m-3 h-24 w-auto" />
+            ) : (
+              <DashboardRecentJobsGrid jobs={jobs} nameById={nameById} isLoading={refreshing} />
+            )}
+          </FramePanel>
+        </Frame>
+
+        <Frame spacing="sm" className="h-full">
+          <FramePanel className="flex h-full flex-col p-0">
+            <FrameHeader className="border-b">
+              <FrameTitle>Последние ревизии</FrameTitle>
+              <FrameDescription>История конфигураций</FrameDescription>
+            </FrameHeader>
+            {activityLoading ? (
+              <Skeleton className="m-3 h-24 w-auto" />
+            ) : (
+              <DashboardRecentRevisionsGrid revisions={revisions} isLoading={refreshing} />
+            )}
+          </FramePanel>
+        </Frame>
+
+        <Frame spacing="sm" className="h-full">
+          <FramePanel className="flex h-full flex-col p-0">
+            <FrameHeader className="border-b">
+              <FrameTitle>Состояние сети</FrameTitle>
+              <FrameDescription>BGP-сессии и спикеры</FrameDescription>
+            </FrameHeader>
+            {activityLoading ? (
+              <Skeleton className="m-3 h-24 w-auto" />
+            ) : (
+              <DashboardNetworkPanel peers={peers} speakers={speakers} />
+            )}
+          </FramePanel>
+        </Frame>
       </div>
 
-      <Card>
-        <CardHeader className="border-b py-3">
-          <CardTitle className="text-base">Быстрые действия</CardTitle>
-          <CardDescription>Частые переходы к настройке и деплою</CardDescription>
-        </CardHeader>
-        <CardContent className="flex flex-wrap gap-2 p-4">
-          <Button variant="outline" size="sm" render={<Link to="/modules" />}>
-            <Plus className="size-4" />
-            Создать модуль
-          </Button>
-          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/directories')}>
-            <Tags className="size-4" />
-            Добавить community
-          </Button>
-          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/network?tab=overview')}>
-            <Network className="size-4" />
-            Сеть
-          </Button>
-          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/network?tab=peers')}>
-            <Share2 className="size-4" />
-            Добавить пира
-          </Button>
-          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/operations')}>
-            <Play className="size-4" />
-            Деплой (Apply)
-          </Button>
-          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/monitoring')}>
-            <Gauge className="size-4" />
-            Мониторинг
-          </Button>
-        </CardContent>
-      </Card>
+      <Frame spacing="sm">
+        <FramePanel className="p-0">
+          <FrameHeader className="border-b">
+            <FrameTitle>Быстрые действия</FrameTitle>
+            <FrameDescription>Частые переходы к настройке и деплою</FrameDescription>
+          </FrameHeader>
+          <DashboardQuickActions />
+        </FramePanel>
+      </Frame>
     </div>
   )
 }
@@ -255,146 +277,3 @@ function HealthAlert({
     </Alert>
   )
 }
-
-function RecentJobsCard({
-  jobs,
-  nameById,
-  loading,
-}: {
-  jobs: import('@/types/api').JobRow[]
-  nameById: Map<string, string>
-  loading: boolean
-}) {
-  return (
-    <Card>
-      <CardHeader className="border-b py-3">
-        <CardTitle className="text-base">Недавние задачи</CardTitle>
-        <CardDescription>Последние фоновые операции</CardDescription>
-      </CardHeader>
-      <CardContent className="p-3">
-        {loading && jobs.length === 0 ? (
-          <Skeleton className="h-24 w-full" />
-        ) : jobs.length === 0 ? (
-          <p className="px-2 py-6 text-center text-sm text-muted-foreground">Нет задач</p>
-        ) : (
-          <ul className="flex flex-col gap-1">
-            {jobs.slice(0, 8).map((j) => (
-              <li
-                key={j.job_id}
-                className="flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/40"
-              >
-                <span className="flex min-w-0 flex-col gap-0.5">
-                  <span className="truncate font-mono text-xs text-muted-foreground">{j.kind}</span>
-                  <span className="truncate text-xs">
-                    {j.meta?.module_id ? nameById.get(String(j.meta.module_id)) ?? '' : ''}
-                  </span>
-                </span>
-                <span
-                  className={
-                    j.status === 'succeeded'
-                      ? 'text-xs text-success'
-                      : j.status === 'failed'
-                        ? 'text-xs text-destructive'
-                        : 'text-xs text-muted-foreground'
-                  }
-                >
-                  {j.status}
-                </span>
-              </li>
-            ))}
-          </ul>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-function RecentRevisionsCard({
-  revisions,
-  loading,
-}: {
-  revisions: import('@/types/api').RevisionRow[]
-  loading: boolean
-}) {
-  return (
-    <Card>
-      <CardHeader className="border-b py-3">
-        <CardTitle className="text-base">Последние ревизии</CardTitle>
-        <CardDescription>История конфигураций</CardDescription>
-      </CardHeader>
-      <CardContent className="p-3">
-        {loading && revisions.length === 0 ? (
-          <Skeleton className="h-24 w-full" />
-        ) : revisions.length === 0 ? (
-          <p className="px-2 py-6 text-center text-sm text-muted-foreground">Нет ревизий</p>
-        ) : (
-          <ul className="flex flex-col gap-1">
-            {revisions.slice(0, 8).map((r) => (
-              <li
-                key={r.id}
-                className="flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/40"
-              >
-                <span className="truncate font-mono text-xs text-muted-foreground">{r.id.slice(0, 10)}…</span>
-                <span className="text-xs text-muted-foreground">
-                  {new Date(r.created_at).toLocaleString('ru-RU')}
-                </span>
-              </li>
-            ))}
-          </ul>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-function NetworkStatusCard({
-  peers,
-  speakers,
-  loading,
-}: {
-  peers: import('@/types/api').PeerRow[]
-  speakers: import('@/types/api').SpeakerRow[]
-  loading: boolean
-}) {
-  const m = aggregateNetworkMetrics(peers, speakers)
-  return (
-    <Card>
-      <CardHeader className="border-b py-3">
-        <CardTitle className="text-base">Состояние сети</CardTitle>
-        <CardDescription>BGP-сессии и спикеры</CardDescription>
-      </CardHeader>
-      <CardContent className="p-3">
-        {loading && peers.length === 0 && speakers.length === 0 ? (
-          <Skeleton className="h-24 w-full" />
-        ) : (
-          <div className="flex flex-col gap-2 px-1 py-1 text-sm">
-            <Row label="Пиры Established" value={`${m.peersEstablished} / ${m.peersEnabled}`} />
-            <Row label="Спикеры online" value={`${m.speakersOnline} / ${m.speakersTotal}`} />
-            {m.peersMismatch > 0 ? (
-              <Row label="Mismatches" value={String(m.peersMismatch)} variant="warning" />
-            ) : null}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-function Row({
-  label,
-  value,
-  variant = 'default',
-}: {
-  label: string
-  value: string
-  variant?: 'default' | 'warning'
-}) {
-  return (
-    <div className="flex items-center justify-between gap-2">
-      <span className="text-muted-foreground">{label}</span>
-      <span className={variant === 'warning' ? 'font-medium text-warning-foreground' : 'font-medium tabular-nums'}>
-        {value}
-      </span>
-    </div>
-  )
-}