feat: refactor components to utilize SelectField for improved UI consistency

Updated various components to replace traditional select implementations with the new SelectField component. This change enhances the user interface by providing a more consistent layout and improved accessibility. Additionally, refactored the dashboard and operations pages to utilize DataGridCard for better organization of content, streamlining the overall user experience.

apps/web/src/routes/_auth/dashboard.tsx

@@ -15,20 +15,21 @@ 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 { DataGridCard } from '@/components/data-grid-shell'
 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'
 
@@ -172,58 +173,52 @@ function DashboardComponent() {
       {initialLoading ? <SectionCardsSkeleton count={5} /> : <SectionCards items={items} className="gap-3" />}
 
       <div className="grid gap-4 lg:grid-cols-3">
-        <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>
+        <DataGridCard
+          title="Недавние задачи"
+          description="Последние фоновые операции"
+          className="h-full"
+        >
+          {activityLoading ? (
+            <Skeleton className="m-3 h-24 w-auto" />
+          ) : (
+            <DashboardRecentJobsGrid jobs={jobs} nameById={nameById} isLoading={refreshing} />
+          )}
+        </DataGridCard>
 
-        <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>
+        <DataGridCard
+          title="Последние ревизии"
+          description="История конфигураций"
+          className="h-full"
+        >
+          {activityLoading ? (
+            <Skeleton className="m-3 h-24 w-auto" />
+          ) : (
+            <DashboardRecentRevisionsGrid revisions={revisions} isLoading={refreshing} />
+          )}
+        </DataGridCard>
 
-        <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>
+        <Card className="h-full gap-0">
+          <CardHeader className="border-b py-3">
+            <CardTitle className="text-base">Состояние сети</CardTitle>
+            <CardDescription>BGP-сессии и спикеры</CardDescription>
+          </CardHeader>
+          <CardContent className="p-0">
             {activityLoading ? (
               <Skeleton className="m-3 h-24 w-auto" />
             ) : (
               <DashboardNetworkPanel peers={peers} speakers={speakers} />
             )}
-          </FramePanel>
-        </Frame>
+          </CardContent>
+        </Card>
       </div>
 
-      <Frame spacing="sm">
-        <FramePanel className="p-0">
-          <FrameHeader className="border-b">
-            <FrameTitle>Быстрые действия</FrameTitle>
-            <FrameDescription>Частые переходы к настройке и деплою</FrameDescription>
-          </FrameHeader>
-          <DashboardQuickActions />
-        </FramePanel>
-      </Frame>
+      <Card className="gap-0">
+        <CardHeader className="border-b py-3">
+          <CardTitle className="text-base">Быстрые действия</CardTitle>
+          <CardDescription>Частые переходы к настройке и деплою</CardDescription>
+        </CardHeader>
+        <DashboardQuickActions />
+      </Card>
     </div>
   )
 }