feat: refactor data grid components to utilize DataGridSection for enhanced functionality

Updated multiple components to replace DataGridShell with DataGridSection, integrating search functionality and improved data handling. This change enhances user experience by providing a consistent interface across various grids, including AccessApiKeysGrid, DashboardRecentJobsGrid, and others. Additionally, introduced global filtering capabilities to streamline data retrieval and presentation, ensuring a more efficient user interaction with the data grids.

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

@@ -7,8 +7,7 @@ import { Badge } from '@evobgp/ui/components/badge'
 import { Button } from '@evobgp/ui/components/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
 import { Separator } from '@evobgp/ui/components/separator'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
-
+import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import {
   DashboardOperationsFlowCard,
   MonitoringHealthCard,
@@ -41,6 +40,7 @@ export const Route = createFileRoute('/_auth/monitoring')({
 
 function MonitoringComponent() {
   const search = useSearch({ from: '/_auth/monitoring' })
+  const navigate = Route.useNavigate()
   const healthQ = useQuery(monitoringHealthQueryOptions())
   const readyQ = useQuery(monitoringReadyQueryOptions())
   const versionQ = useQuery(monitoringVersionQueryOptions())
@@ -92,14 +92,18 @@ function MonitoringComponent() {
         }
       />
 
-      <Tabs defaultValue={search.tab}>
-        <TabsList>
-          <TabsTrigger value="system">Система</TabsTrigger>
-          <TabsTrigger value="postgres">PostgreSQL</TabsTrigger>
-          <TabsTrigger value="runtime-logs">Файловые логи</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="system" className="mt-4 flex flex-col gap-6">
+      <BadgeTabs
+        value={search.tab}
+        onValueChange={(tab) =>
+          navigate({ search: { tab: tab as 'system' | 'postgres' | 'runtime-logs' } })
+        }
+        items={[
+          { value: 'system', label: 'Система' },
+          { value: 'postgres', label: 'PostgreSQL' },
+          { value: 'runtime-logs', label: 'Файловые логи' },
+        ]}
+      >
+        <TabsContent value="system" className="mt-0 flex flex-col gap-6">
           {analyticsLoading ? (
             <AnalyticsDashboardSkeleton />
           ) : (
@@ -259,7 +263,7 @@ function MonitoringComponent() {
           </div>
         </TabsContent>
 
-        <TabsContent value="postgres" className="mt-4">
+        <TabsContent value="postgres" className="mt-0">
           <Card>
             <CardHeader>
               <CardTitle className="text-base">PostgreSQL</CardTitle>
@@ -278,7 +282,7 @@ function MonitoringComponent() {
           </Card>
         </TabsContent>
 
-        <TabsContent value="runtime-logs" className="mt-4">
+        <TabsContent value="runtime-logs" className="mt-0">
           <Card>
             <CardHeader>
               <CardTitle className="text-base">Файловые логи</CardTitle>
@@ -296,7 +300,7 @@ function MonitoringComponent() {
             </CardContent>
           </Card>
         </TabsContent>
-      </Tabs>
+      </BadgeTabs>
     </div>
   )
 }