refactor: enhance UI components with PanelCard integration and improved layout consistency

Updated multiple components to utilize the new PanelCard for better organization and presentation of content. Refactored DataGridShell, DataGridCard, and various analytics components to streamline layouts and enhance user experience. Adjusted styles for consistency across components, including pagination and toolbar elements, ensuring a cohesive interface throughout the application.

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

@@ -3,11 +3,12 @@ import { useQuery } from '@tanstack/react-query'
 import { Activity, AlertTriangle, Bird, RefreshCw } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { PanelCard } from '@/components/panel-card'
 import { Separator } from '@evobgp/ui/components/separator'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { DataGridCard } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
+import { jobKindRu } from '@/lib/ui-labels'
 import {
   DashboardOperationsFlowCard,
   MonitoringHealthCard,
@@ -139,15 +140,16 @@ function MonitoringComponent() {
               </QueryState>
             </DataGridCard>
 
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-base">
+            <PanelCard
+              title={
+                <span className="flex items-center gap-2">
                   <Bird className="size-4" />
                   BGP на API-хосте
-                </CardTitle>
-                <CardDescription>GET /v1/bird/status</CardDescription>
-              </CardHeader>
-              <CardContent>
+                </span>
+              }
+              description="GET /v1/bird/status"
+              contentClassName="py-4"
+            >
                 <QueryState
                   data={birdQ.data}
                   isLoading={birdQ.isLoading}
@@ -158,20 +160,20 @@ function MonitoringComponent() {
                 >
                   {(bird) => <BirdSummary bird={bird} />}
                 </QueryState>
-              </CardContent>
-            </Card>
+            </PanelCard>
           </div>
 
           <div className="grid gap-4 lg:grid-cols-2">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-base">
+            <PanelCard
+              title={
+                <span className="flex items-center gap-2">
                   <Activity className="size-4" />
                   Задачи
-                </CardTitle>
-                <CardDescription>Последние 100 задач · GET /v1/jobs</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
+                </span>
+              }
+              description="Последние 100 задач · GET /v1/jobs"
+              contentClassName="space-y-4 py-4"
+            >
                 <div className="flex flex-wrap gap-4 text-sm">
                   <Metric label="Активных" value={jobs.filter((j) => j.status === 'running' || j.status === 'queued').length} />
                   <Metric
@@ -189,7 +191,7 @@ function MonitoringComponent() {
                       {failedJobs.map((job) => (
                         <li key={job.job_id} className="rounded-lg border px-3 py-2 text-sm">
                           <div className="flex items-start justify-between gap-2">
-                            <p className="font-medium">{job.kind}</p>
+                            <p className="font-medium">{jobKindRu(job.kind)}</p>
                             <StatusBadge status={job.status} />
                           </div>
                           {job.error ? (
@@ -207,18 +209,18 @@ function MonitoringComponent() {
                     Критичных сбоев в последних 100 задачах нет.
                   </p>
                 )}
-              </CardContent>
-            </Card>
+            </PanelCard>
 
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-base">
+            <PanelCard
+              title={
+                <span className="flex items-center gap-2">
                   <AlertTriangle className="size-4 text-muted-foreground" />
                   Что проверять при деградации
-                </CardTitle>
-                <CardDescription>Короткая шпаргалка для triage</CardDescription>
-              </CardHeader>
-              <CardContent>
+                </span>
+              }
+              description="Краткая шпаргалка для первичной диагностики"
+              contentClassName="py-4"
+            >
                 <ul className="space-y-3 text-sm text-muted-foreground">
                   <li>
                     <span className="font-medium text-foreground">API недоступен.</span> Если{' '}
@@ -226,9 +228,9 @@ function MonitoringComponent() {
                     его логи.
                   </li>
                   <li>
-                    <span className="font-medium text-foreground">Readiness не «Готов».</span> Сначала{' '}
+                    <span className="font-medium text-foreground">Готовность не «Готов».</span> Сначала{' '}
                     <code className="text-xs">postgres</code>, затем <code className="text-xs">store</code>{' '}
-                    и <code className="text-xs">jobs</code> в checks.
+                    и <code className="text-xs">jobs</code> в проверках.
                   </li>
                   <li>
                     <span className="font-medium text-foreground">Низкий ratio BGP.</span> Проверьте{' '}
@@ -236,36 +238,37 @@ function MonitoringComponent() {
                   </li>
                   <li>
                     <span className="font-medium text-foreground">Ошибки задач.</span> Откройте Операции и
-                    проверьте последние неуспешные jobs.
+                    проверьте последние неуспешные задачи.
                   </li>
                 </ul>
-              </CardContent>
-            </Card>
+            </PanelCard>
           </div>
         </TabsContent>
 
         <TabsContent value="postgres" className="mt-0">
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">PostgreSQL</CardTitle>
-              <CardDescription>
+          <PanelCard
+            title="PostgreSQL"
+            description={
+              <>
                 Статус соединения и пул. PostgreSQL отображается в readiness-проверке на вкладке «Система»
                 (check <code className="text-xs">postgres</code>).
-              </CardDescription>
-            </CardHeader>
-          </Card>
+              </>
+            }
+            contentClassName="py-4"
+          />
         </TabsContent>
 
         <TabsContent value="runtime-logs" className="mt-0">
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Файловые логи</CardTitle>
-              <CardDescription>
+          <PanelCard
+            title="Файловые логи"
+            description={
+              <>
                 Логи API и pipeline настраиваются переменной <code className="text-xs">EVOBGP_LOG_*</code> и
                 управляются в tenant-settings.
-              </CardDescription>
-            </CardHeader>
-          </Card>
+              </>
+            }
+            contentClassName="py-4"
+          />
         </TabsContent>
       </BadgeTabs>
     </div>
@@ -301,7 +304,7 @@ function BirdSummary({ bird }: { bird: import('@/types/api').BirdStatus }) {
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between text-sm">
-        <span className="text-muted-foreground">Established / total</span>
+        <span className="text-muted-foreground">Установлено / всего</span>
         <span className="font-medium tabular-nums">
           {bird.bgp_established} / {bird.bgp_sessions_total}
           {ratio !== null ? <span className="text-muted-foreground"> ({ratio}%)</span> : null}