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/components/analytics/analytics-card-shell.tsx

@@ -1,14 +1,6 @@
 import type { ReactNode } from 'react'
 import { Info } from 'lucide-react'
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@evobgp/ui/components/card'
 import { cn } from '@evobgp/ui/lib/utils'
 import {
   Tooltip,
@@ -16,6 +8,8 @@ import {
   TooltipTrigger,
 } from '@evobgp/ui/components/tooltip'
 
+import { PanelCard } from '@/components/panel-card'
+
 export function AnalyticsCardShell({
   title,
   description,
@@ -33,32 +27,36 @@ export function AnalyticsCardShell({
   className?: string
   children: ReactNode
 }) {
+  const titleNode = (
+    <span className="flex items-center gap-2">
+      {title}
+      {info ? (
+        <Tooltip>
+          <TooltipTrigger
+            className="inline-flex text-muted-foreground transition-colors hover:text-foreground"
+            aria-label="Подробнее"
+          >
+            <Info className="size-3.5" />
+          </TooltipTrigger>
+          <TooltipContent side="top" className="max-w-xs text-xs">
+            {info}
+          </TooltipContent>
+        </Tooltip>
+      ) : null}
+    </span>
+  )
+
   return (
-    <Card className={cn('flex flex-col gap-0 overflow-hidden', className)}>
-      <CardHeader className="flex flex-row items-start justify-between gap-3 border-b py-4">
-        <div className="min-w-0 space-y-1">
-          <CardTitle className="flex items-center gap-2 text-base">
-            {title}
-            {info ? (
-              <Tooltip>
-                <TooltipTrigger
-                  className="inline-flex text-muted-foreground transition-colors hover:text-foreground"
-                  aria-label="Подробнее"
-                >
-                  <Info className="size-3.5" />
-                </TooltipTrigger>
-                <TooltipContent side="top" className="max-w-xs text-xs">
-                  {info}
-                </TooltipContent>
-              </Tooltip>
-            ) : null}
-          </CardTitle>
-          {description ? <CardDescription>{description}</CardDescription> : null}
-        </div>
-        {actions ? <div className="shrink-0">{actions}</div> : null}
-      </CardHeader>
-      <CardContent className="flex flex-col gap-5 p-5">{children}</CardContent>
-      {footer ? <CardFooter className="gap-2 border-t p-4">{footer}</CardFooter> : null}
-    </Card>
+    <PanelCard
+      title={titleNode}
+      description={description}
+      actions={actions}
+      footer={footer}
+      className={cn('overflow-hidden', className)}
+      contentClassName="flex flex-col gap-4 py-4"
+      footerClassName={footer ? 'gap-2 p-3' : undefined}
+    >
+      {children}
+    </PanelCard>
   )
 }

apps/web/src/components/analytics/analytics-progress.tsx

@@ -7,10 +7,12 @@ import { cn } from '@evobgp/ui/lib/utils'
 
 export function AnalyticsProgress({
   label,
+  hint,
   value,
   className,
 }: {
   label: string
+  hint?: string
   value: number
   className?: string
 }) {
@@ -21,9 +23,10 @@ export function AnalyticsProgress({
         <span className="text-muted-foreground">{label}</span>
         <span className="font-medium tabular-nums">{clamped}%</span>
       </div>
-      <Progress value={clamped} className="gap-0">
+      {hint ? <p className="text-xs leading-snug text-muted-foreground">{hint}</p> : null}
+      <Progress value={clamped} className="w-full gap-0">
         <ProgressTrack className="h-2">
-          <ProgressIndicator className="bg-foreground" />
+          <ProgressIndicator />
         </ProgressTrack>
       </Progress>
     </div>

apps/web/src/components/analytics/dashboard-network-capacity-card.tsx

@@ -50,14 +50,14 @@ export function DashboardNetworkCapacityCard({
 
   const deltaLabel =
     mode === 'peers'
-      ? `${peers.filter((p) => p.enabled !== false && p.session_state === 'Established').length} Established`
-      : `${speakers.filter((s) => s.live?.agent_ok).length} online`
+      ? `${peers.filter((p) => p.enabled !== false && p.session_state === 'Established').length} установлено`
+      : `${speakers.filter((s) => s.live?.agent_ok).length} в сети`
 
   return (
     <AnalyticsCardShell
       title="Загрузка BGP"
       description="Текущая утилизация сессий по пирам и спикерам"
-      info="Каждый столбец — enabled peer или speaker. Высота отражает Established/online."
+      info="Каждый столбец — включённый пир или спикер. Высота отражает установленную сессию или доступность."
       actions={
         <AnalyticsSegmentControl
           value={mode}

apps/web/src/components/analytics/dashboard-platform-card.tsx

@@ -9,6 +9,7 @@ import { AnalyticsKpiRow } from '@/components/analytics/analytics-kpi-row'
 import { AnalyticsProgress } from '@/components/analytics/analytics-progress'
 import {
   deploymentProgress,
+  deploymentProgressMeta,
   recentPlatformActivity,
 } from '@/lib/metrics'
 import { runningJobCount } from '@/queries/overview'
@@ -48,6 +49,7 @@ export function DashboardPlatformCard({
     peersEnabled > 0 ? Math.round((peersEstablished / peersEnabled) * 100) : null
 
   const deploy = useMemo(() => deploymentProgress(speakers), [speakers])
+  const deployMeta = useMemo(() => deploymentProgressMeta(deploy), [deploy])
   const activity = useMemo(
     () => recentPlatformActivity(jobs, revisions, peers, speakers),
     [jobs, revisions, peers, speakers],
@@ -74,7 +76,7 @@ export function DashboardPlatformCard({
         label:
           bgpPct === null
             ? 'нет включённых пиров'
-            : `${peersEstablished} Established`,
+            : `${peersEstablished} установлено`,
         tone: (bgpPct !== null && bgpPct >= 90
           ? 'success'
           : bgpPct !== null && bgpPct < 70
@@ -87,16 +89,14 @@ export function DashboardPlatformCard({
       value: loading ? '—' : String(riskCount),
       delta: {
         direction: (riskCount > 0 ? 'down' : 'up') as 'up' | 'down',
-        label: riskCount > 0 ? `${failedJobs} задач, ${peersMismatch} mismatch` : 'в норме',
+        label: riskCount > 0 ? `${failedJobs} задач, ${peersMismatch} расхождений` : 'в норме',
         tone: (riskCount > 0 ? 'destructive' : 'success') as 'destructive' | 'success',
       },
     },
   ]
 
-  const progressLabel =
-    deploy.mode === 'revision'
-      ? `Синхронизация ревизий (${deploy.synced}/${deploy.total})`
-      : `Спикеры online (${deploy.synced}/${deploy.total})`
+  const progressLabel = deployMeta.label
+  const progressHint = deployMeta.hint
 
   return (
     <AnalyticsCardShell
@@ -122,7 +122,11 @@ export function DashboardPlatformCard({
       }
     >
       <AnalyticsKpiRow items={kpis} />
-      <AnalyticsProgress label={progressLabel} value={loading ? 0 : deploy.percent} />
+      <AnalyticsProgress
+        label={progressLabel}
+        hint={progressHint}
+        value={loading ? 0 : deploy.percent}
+      />
       <div className="space-y-3">
         <div className="flex items-center justify-between text-sm">
           <span className="text-muted-foreground">Недавняя активность</span>

apps/web/src/components/analytics/monitoring-health-card.tsx

@@ -18,15 +18,15 @@ export function MonitoringHealthCard({
   return (
     <AnalyticsCardShell
       title="Доступность системы"
-      description="Health и readiness checks"
-      info="Donut отражает результат GET /v1/health и checks из GET /v1/ready."
+      description="Проверки живучести и готовности"
+      info="Диаграмма отражает результат GET /v1/health и проверок из GET /v1/ready."
     >
       {loading ? (
         <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
           Загрузка…
         </div>
       ) : (
-        <ChartDonutMetric slices={slices} centerLabel="Checks" centerValue={total} />
+        <ChartDonutMetric slices={slices} centerLabel="Проверки" centerValue={total} />
       )}
     </AnalyticsCardShell>
   )

apps/web/src/components/analytics/network-overview-analytics-card.tsx

@@ -21,29 +21,29 @@ export function NetworkOverviewAnalyticsCard({
   return (
     <AnalyticsCardShell
       title="Сводка BGP"
-      description="Established, online и mismatch по live-данным"
+      description="Установленные сессии, доступность спикеров и расхождения по live-данным"
       info="Снимок текущего состояния пиров и спикеров."
     >
       <AnalyticsKpiRow
         items={[
           {
-            label: 'Пиры Established',
+            label: 'Пиры с установленной сессией',
             value: loading ? '—' : `${net.peersEstablished}/${net.peersEnabled}`,
             delta: {
               direction: net.peersMismatch > 0 ? 'down' : 'up',
-              label: net.peersMismatch > 0 ? `${net.peersMismatch} mismatch` : 'сессии в норме',
+              label: net.peersMismatch > 0 ? `${net.peersMismatch} расхождений` : 'сессии в норме',
               tone: net.peersMismatch > 0 ? 'warning' : 'success',
             },
           },
           {
-            label: 'Спикеры online',
+            label: 'Спикеры в сети',
             value: loading ? '—' : `${net.speakersOnline}/${net.speakersTotal}`,
             delta: {
               direction: net.speakersOnline < net.speakersTotal ? 'down' : 'up',
               label:
                 net.speakersOnline < net.speakersTotal
-                  ? `${net.speakersTotal - net.speakersOnline} offline`
-                  : 'все online',
+                  ? `${net.speakersTotal - net.speakersOnline} не в сети`
+                  : 'все в сети',
               tone: net.speakersOnline < net.speakersTotal ? 'warning' : 'success',
             },
           },

apps/web/src/components/dashboard/dashboard-network-panel.tsx

@@ -28,10 +28,10 @@ export function DashboardNetworkPanel({
   const m = aggregateNetworkMetrics(peers, speakers)
   return (
     <div className="flex flex-col gap-2 p-3">
-      <Row label="Пиры Established" value={`${m.peersEstablished} / ${m.peersEnabled}`} />
-      <Row label="Спикеры online" value={`${m.speakersOnline} / ${m.speakersTotal}`} />
+      <Row label="Пиры с установленной сессией" value={`${m.peersEstablished} / ${m.peersEnabled}`} />
+      <Row label="Спикеры в сети" value={`${m.speakersOnline} / ${m.speakersTotal}`} />
       {m.peersMismatch > 0 ? (
-        <Row label="Mismatches" value={String(m.peersMismatch)} variant="warning" />
+        <Row label="Расхождения сессий" value={String(m.peersMismatch)} variant="warning" />
       ) : null}
     </div>
   )

apps/web/src/components/dashboard/dashboard-quick-actions.tsx

@@ -2,18 +2,17 @@ import { Link } from '@tanstack/react-router'
 import { Gauge, Network, Play, Plus, Share2, Tags } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
-import { CardFooter } from '@evobgp/ui/components/card'
 
 export function DashboardQuickActions() {
   return (
-    <CardFooter className="flex flex-wrap gap-2 border-t-0 bg-transparent">
+    <div className="flex flex-wrap gap-2">
       <Button variant="outline" size="sm" type="button" render={<Link to="/modules" />}>
         <Plus className="size-4" />
         Создать модуль
       </Button>
       <Button variant="outline" size="sm" type="button" render={<Link to="/directories" />}>
         <Tags className="size-4" />
-        Добавить community
+        Добавить BGP-сообщество
       </Button>
       <Button variant="outline" size="sm" type="button" render={<Link to="/network" search={{ tab: 'overview' }} />}>
         <Network className="size-4" />
@@ -30,12 +29,12 @@ export function DashboardQuickActions() {
         render={<Link to="/operations" search={{ tab: 'revisions' }} />}
       >
         <Play className="size-4" />
-        Деплой (Apply)
+        Деплой
       </Button>
       <Button variant="outline" size="sm" type="button" render={<Link to="/monitoring" search={{ tab: 'system' }} />}>
         <Gauge className="size-4" />
         Мониторинг
       </Button>
-    </CardFooter>
+    </div>
   )
 }

apps/web/src/components/dashboard/dashboard-recent-jobs-grid.tsx

@@ -6,6 +6,7 @@ import { DataGridSection } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
+import { jobKindRu } from '@/lib/ui-labels'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { JobRow } from '@/types/api'
 
@@ -27,7 +28,7 @@ export function DashboardRecentJobsGrid({
         header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
         cell: ({ row }) => (
           <DataGridPrimaryCell
-            title={row.original.kind}
+            title={jobKindRu(row.original.kind)}
             accent="mono"
             subtitle={
               row.original.meta?.module_id
@@ -55,7 +56,7 @@ export function DashboardRecentJobsGrid({
       const moduleName = row.meta?.module_id
         ? (nameById.get(String(row.meta.module_id)) ?? '')
         : ''
-      return `${row.kind} ${row.status} ${moduleName}`
+      return `${jobKindRu(row.kind)} ${row.status} ${moduleName}`
     },
     getRowId: (row) => row.job_id,
     pageSize: 8,

apps/web/src/components/data-grid-shell.tsx

@@ -1,13 +1,15 @@
 import type { ReactNode } from 'react'
 import type { Table } from '@tanstack/react-table'
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { cn } from '@evobgp/ui/lib/utils'
 
 import { DataGridToolbar } from '@/components/data-grid-toolbar'
+import { PanelCard, panelCardContentFlushClassName, panelCardFooterClassName } from '@/components/panel-card'
 import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
 import { DataGrid, DataGridContainer } from '@/components/reui/data-grid/data-grid'
 import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
 import {
+  DATA_GRID_MESSAGES_RU,
   DATA_GRID_PAGINATION_RU,
   DATA_GRID_TABLE_LAYOUT,
 } from '@/lib/data-grid-defaults'
@@ -38,7 +40,8 @@ export function DataGridShell<TData extends object>({
       table={table}
       recordCount={recordCount}
       isLoading={isLoading}
-      emptyMessage={emptyMessage}
+      emptyMessage={emptyMessage ?? DATA_GRID_MESSAGES_RU.emptyMessage}
+      loadingMessage={DATA_GRID_MESSAGES_RU.loadingMessage}
       tableLayout={tableLayout}
       className={className}
       onRowClick={onRowClick}
@@ -47,7 +50,7 @@ export function DataGridShell<TData extends object>({
         <DataGridTable />
       </DataGridContainer>
       {showPagination ? (
-        <div className="border-t px-4 py-3">
+        <div className={cn(panelCardFooterClassName, 'px-3 py-2')}>
           <DataGridPagination {...DATA_GRID_PAGINATION_RU} />
         </div>
       ) : null}
@@ -64,20 +67,16 @@ interface DataGridCardProps {
 }
 
 export function DataGridCard({ title, description, actions, children, className }: DataGridCardProps) {
-  const hasHeader = Boolean(title || description || actions)
   return (
-    <Card className={className ?? 'gap-0'}>
-      {hasHeader ? (
-        <CardHeader className="flex flex-row items-center justify-between border-b py-3">
-          <div className="flex flex-col gap-0.5">
-            {title ? <CardTitle className="text-base">{title}</CardTitle> : null}
-            {description ? <CardDescription>{description}</CardDescription> : null}
-          </div>
-          {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
-        </CardHeader>
-      ) : null}
-      <CardContent className="p-0">{children}</CardContent>
-    </Card>
+    <PanelCard
+      title={title}
+      description={description}
+      actions={actions}
+      className={className}
+      contentClassName={panelCardContentFlushClassName}
+    >
+      {children}
+    </PanelCard>
   )
 }
 

apps/web/src/components/data-grid-toolbar.tsx

@@ -28,7 +28,7 @@ export function DataGridToolbar({
   className,
 }: DataGridToolbarProps) {
   return (
-    <div className={`flex flex-wrap items-center gap-2 border-b px-4 py-3 ${className ?? ''}`}>
+    <div className={`flex flex-wrap items-center gap-2 border-b px-3 py-2 ${className ?? ''}`}>
       <Field className="min-w-[200px] flex-1">
         <InputGroup>
           <InputGroupAddon align="inline-start">

apps/web/src/components/firewall/firewall-clients-grid.tsx

@@ -60,7 +60,7 @@ export function FirewallClientsGrid({
       {
         id: 'last_seen_at',
         accessorFn: (row) => row.last_seen_at ?? '',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Last seen" />,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Последняя активность" />,
         cell: ({ row }) => (
           <DataGridMutedCell>{row.original.last_seen_at?.slice(0, 19) ?? '—'}</DataGridMutedCell>
         ),
@@ -69,12 +69,12 @@ export function FirewallClientsGrid({
           const bv = b.original.last_seen_at ?? ''
           return av.localeCompare(bv)
         },
-        meta: { headerTitle: 'Last seen' },
+        meta: { headerTitle: 'Последняя активность' },
       },
       {
         id: 'apply',
         enableSorting: false,
-        header: 'Apply',
+        header: 'Применение',
         cell: ({ row }) => {
           const c = row.original
           return (
@@ -84,7 +84,7 @@ export function FirewallClientsGrid({
             </span>
           )
         },
-        meta: { headerTitle: 'Apply' },
+        meta: { headerTitle: 'Применение' },
       },
       {
         id: 'packets',

apps/web/src/components/layout/app-shell.tsx

@@ -56,7 +56,7 @@ interface NavGroup {
 const NAV_GROUPS: NavGroup[] = [
   {
     label: 'Обзор',
-    items: [{ to: '/dashboard', label: 'Dashboard', icon: LayoutDashboard }],
+    items: [{ to: '/dashboard', label: 'Панель', icon: LayoutDashboard }],
   },
   {
     label: 'Маршрутизация',
@@ -70,7 +70,7 @@ const NAV_GROUPS: NavGroup[] = [
     label: 'Операции',
     items: [
       { to: '/operations', label: 'Операции', icon: Cog },
-      { to: '/firewall', label: 'Firewall', icon: Shield },
+      { to: '/firewall', label: 'Файрвол', icon: Shield },
       { to: '/schedule', label: 'Задачи', icon: ListChecks },
       { to: '/monitoring', label: 'Мониторинг', icon: Activity },
     ],
@@ -111,7 +111,7 @@ export function AppShell({ children }: { children: ReactNode }) {
             </div>
             <div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
               <span className="truncate text-sm font-semibold">EvoBGP</span>
-              <span className="truncate text-xs text-muted-foreground">Control Plane</span>
+              <span className="truncate text-xs text-muted-foreground">Плоскость управления</span>
             </div>
           </div>
         </SidebarHeader>

apps/web/src/components/modules/modules-list-grid.tsx

@@ -8,6 +8,7 @@ import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-c
 import { DataGridSection } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { moduleTypeRu } from '@/lib/ui-labels'
 import type { ModuleRow } from '@/types/api'
 
 export function ModulesListGrid({
@@ -35,7 +36,7 @@ export function ModulesListGrid({
       {
         accessorKey: 'type',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Тип" />,
-        cell: ({ row }) => <CategoryBadge>{row.original.type}</CategoryBadge>,
+        cell: ({ row }) => <CategoryBadge>{moduleTypeRu(row.original.type)}</CategoryBadge>,
         meta: { headerTitle: 'Тип' },
       },
       {

apps/web/src/components/monitoring/monitoring-ready-grid.tsx

@@ -7,6 +7,7 @@ import { DataGridSection } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { jobStatusRu, readyCheckRu } from '@/lib/ui-labels'
 import type { ReadyStatus } from '@/queries/monitoring'
 
 const READY_CHECK_ICONS: Record<string, typeof Database> = {
@@ -36,19 +37,19 @@ export function MonitoringReadyGrid({
     const rows: ReadyCheckRow[] = [
       {
         id: 'liveness',
-        label: 'Liveness',
+        label: 'Живучесть',
         subtitle: '/v1/health',
         icon: HeartPulse,
         status: health?.ok ? 'ok' : 'error',
-        statusLabel: health?.ok ? 'OK' : 'Ошибка',
+        statusLabel: health?.ok ? 'В норме' : 'Ошибка',
       },
       {
         id: 'readiness',
-        label: 'Readiness',
+        label: 'Готовность',
         subtitle: '/v1/ready',
         icon: ShieldCheck,
         status: ready.status === 'ok' ? 'ok' : 'warning',
-        statusLabel: ready.status ?? '—',
+        statusLabel: ready.status === 'ok' ? 'Готов' : jobStatusRu(ready.status ?? 'pending'),
       },
     ]
     for (const key of Object.keys(checks)) {
@@ -56,10 +57,10 @@ export function MonitoringReadyGrid({
       const ok = typeof value === 'boolean' ? value : value?.ok !== false
       rows.push({
         id: key,
-        label: key,
+        label: readyCheckRu(key),
         icon: READY_CHECK_ICONS[key] ?? ListTodo,
         status: ok ? 'ok' : 'error',
-        statusLabel: ok ? 'OK' : 'Ошибка',
+        statusLabel: ok ? 'В норме' : 'Ошибка',
       })
     }
     return rows

apps/web/src/components/network/network-peers-grid.tsx

@@ -7,6 +7,7 @@ import { DataGridSection } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { bgpSessionStateRu } from '@/lib/ui-labels'
 import type { PeerRow } from '@/types/api'
 
 export function NetworkPeersGrid({
@@ -33,11 +34,11 @@ export function NetworkPeersGrid({
       },
       {
         accessorKey: 'neighbor',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Neighbor" />,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Адрес соседа" />,
         cell: ({ row }) => (
           <DataGridPrimaryCell title={row.original.neighbor} accent="mono" />
         ),
-        meta: { headerTitle: 'Neighbor' },
+        meta: { headerTitle: 'Адрес соседа' },
       },
       {
         accessorKey: 'remote_asn',
@@ -52,9 +53,12 @@ export function NetworkPeersGrid({
         header: ({ column }) => <DataGridColumnHeader column={column} title="Состояние" />,
         cell: ({ row }) => (
           <div className="flex items-center gap-1">
-            <StatusBadge status={row.original.session_state} />
+            <StatusBadge
+              status={row.original.session_state ?? '—'}
+              label={bgpSessionStateRu(row.original.session_state)}
+            />
             {row.original.session_mismatch ? (
-              <CategoryBadge tone="warning">mismatch</CategoryBadge>
+              <CategoryBadge tone="warning">расхождение</CategoryBadge>
             ) : null}
           </div>
         ),

apps/web/src/components/network/network-speakers-grid.tsx

@@ -8,6 +8,7 @@ import { StatusBadge } from '@/components/status-badge'
 import { Badge } from '@/components/reui/badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { speakerOnlineLabel } from '@/lib/ui-labels'
 import type { SpeakerRow } from '@/types/api'
 
 export function NetworkSpeakersGrid({
@@ -21,11 +22,11 @@ export function NetworkSpeakersGrid({
     () => [
       {
         accessorKey: 'endpoint',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Endpoint" />,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Конечная точка" />,
         cell: ({ row }) => (
           <DataGridPrimaryCell title={row.original.endpoint} accent="mono" />
         ),
-        meta: { headerTitle: 'Endpoint' },
+        meta: { headerTitle: 'Конечная точка' },
       },
       {
         accessorKey: 'role',
@@ -36,14 +37,14 @@ export function NetworkSpeakersGrid({
       {
         id: 'agent',
         enableSorting: false,
-        header: 'Agent',
+        header: 'Агент',
         cell: ({ row }) => {
           const live = row.original.live
-          if (live?.agent_ok === true) return <StatusBadge status="ok" label="online" />
-          if (live?.agent_ok === false) return <StatusBadge status="error" label="offline" />
+          if (live?.agent_ok === true) return <StatusBadge status="ok" label={speakerOnlineLabel(true)} />
+          if (live?.agent_ok === false) return <StatusBadge status="error" label={speakerOnlineLabel(false)} />
           return <Badge variant="outline" size="sm" radius="full">—</Badge>
         },
-        meta: { headerTitle: 'Agent' },
+        meta: { headerTitle: 'Агент' },
       },
       {
         id: 'bgp',

apps/web/src/components/network/speaker-form-dialog.tsx

@@ -109,7 +109,7 @@ export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps
       }
     >
       <div className="flex flex-col gap-2">
-        <Label htmlFor="speaker-endpoint">Endpoint</Label>
+        <Label htmlFor="speaker-endpoint">Конечная точка</Label>
         <Input
           id="speaker-endpoint"
           placeholder="https://node.example.com:8443"
@@ -121,14 +121,14 @@ export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps
         id="speaker-role"
         label="Роль"
         items={[
-          { value: 'replica', label: 'replica' },
-          { value: 'master', label: 'master (CP)' },
+          { value: 'replica', label: 'Реплика' },
+          { value: 'master', label: 'Мастер (CP)' },
         ]}
         value={role}
         onValueChange={(v) => setRole(v ?? 'replica')}
       />
       <div className="flex flex-col gap-2">
-        <Label htmlFor="speaker-agent-domain">Agent domain</Label>
+        <Label htmlFor="speaker-agent-domain">Домен агента</Label>
         <Input
           id="speaker-agent-domain"
           placeholder="bird-agent.example.com"
@@ -137,7 +137,7 @@ export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps
         />
       </div>
       <div className="flex flex-col gap-2">
-        <Label htmlFor="speaker-node-ipv4">Node IPv4</Label>
+        <Label htmlFor="speaker-node-ipv4">IPv4 ноды</Label>
         <Input
           id="speaker-node-ipv4"
           placeholder="203.0.113.10"

apps/web/src/components/operations/operations-jobs-grid.tsx

@@ -11,6 +11,7 @@ import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import { apiMutate } from '@/lib/api-client'
+import { jobKindRu } from '@/lib/ui-labels'
 import type { JobRow } from '@/types/api'
 import type { QueryClient } from '@tanstack/react-query'
 
@@ -41,7 +42,7 @@ export function OperationsJobsGrid({
         header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
         cell: ({ row }) => (
           <DataGridPrimaryCell
-            title={row.original.kind}
+            title={jobKindRu(row.original.kind)}
             accent="mono"
             subtitle={
               row.original.meta?.module_id
@@ -119,7 +120,7 @@ export function OperationsJobsGrid({
       const moduleName = row.meta?.module_id
         ? (nameById.get(String(row.meta.module_id)) ?? String(row.meta.module_id))
         : ''
-      return `${row.kind} ${row.status} ${row.job_id} ${moduleName}`
+      return `${jobKindRu(row.kind)} ${row.status} ${row.job_id} ${moduleName}`
     },
     getRowId: (row) => row.job_id,
   })

apps/web/src/components/panel-card.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react'
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@evobgp/ui/components/card'
+import { cn } from '@evobgp/ui/lib/utils'
+
+/** REUI c-data-grid-19: flush card shell with compact header spacing. */
+export const panelCardClassName = 'gap-0 py-0'
+export const panelCardHeaderClassName = 'border-b [.border-b]:pb-3'
+export const panelCardContentFlushClassName = 'px-0'
+export const panelCardFooterClassName = 'border-t bg-transparent py-0'
+
+interface PanelCardProps {
+  title?: ReactNode
+  description?: ReactNode
+  actions?: ReactNode
+  footer?: ReactNode
+  children?: ReactNode
+  className?: string
+  headerClassName?: string
+  contentClassName?: string
+  footerClassName?: string
+  size?: 'default' | 'sm'
+}
+
+export function PanelCard({
+  title,
+  description,
+  actions,
+  footer,
+  children,
+  className,
+  headerClassName,
+  contentClassName,
+  footerClassName,
+  size = 'sm',
+}: PanelCardProps) {
+  const hasHeader = Boolean(title || description || actions)
+
+  return (
+    <Card size={size} className={cn(panelCardClassName, className)}>
+      {hasHeader ? (
+        <CardHeader className={cn(panelCardHeaderClassName, headerClassName)}>
+          {title ? <CardTitle>{title}</CardTitle> : null}
+          {description ? <CardDescription>{description}</CardDescription> : null}
+          {actions ? <CardAction>{actions}</CardAction> : null}
+        </CardHeader>
+      ) : null}
+      {children != null && children !== false ? (
+        <CardContent className={contentClassName}>{children}</CardContent>
+      ) : null}
+      {footer ? (
+        <CardFooter className={cn(panelCardFooterClassName, footerClassName)}>{footer}</CardFooter>
+      ) : null}
+    </Card>
+  )
+}

apps/web/src/components/reui/data-grid/data-grid-pagination.tsx

@@ -140,12 +140,12 @@ function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element {
         mergedProps?.className
       )}
     >
-      <div className="order-2 flex flex-wrap items-center space-x-2.5 pb-2.5 sm:order-1 sm:pb-0">
+      <div className="order-2 flex flex-wrap items-center gap-2 pb-2.5 sm:order-1 sm:pb-0">
         {isLoading ? (
           mergedProps?.sizesSkeleton
         ) : (
           <>
-            <div className="text-muted-foreground text-sm">
+            <div className="shrink-0 text-sm text-muted-foreground whitespace-nowrap">
               {mergedProps.rowsPerPageLabel}
             </div>
             <SelectMenu
@@ -156,10 +156,10 @@ function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element {
                 })) ?? []
               }
               value={`${pageSize}`}
-              triggerClassName="w-14"
+              triggerClassName="min-w-20 w-auto tabular-nums"
               size="sm"
               side="top"
-              contentClassName="min-w-18"
+              contentClassName="min-w-20"
               onValueChange={(value) => {
                 if (!value) return
                 table.setPageSize(Number(value))

apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx

@@ -21,6 +21,7 @@ import {
   DataGridTableViewport,
   getDataGridTableRowSections,
 } from "@/components/reui/data-grid/data-grid-table"
+import { DATA_GRID_MESSAGES_RU } from "@/lib/data-grid-defaults"
 import { flexRender, HeaderGroup, Row, Table } from "@tanstack/react-table"
 import {
   useVirtualizer,
@@ -304,9 +305,9 @@ function DataGridTableVirtual<TData>({
 
   const isVirtualizationEnabled = virtualizerOptions?.enabled !== false
   const loadingMoreMessage =
-    props.fetchingMoreMessage || props.loadingMessage || "Loading..."
+    props.fetchingMoreMessage || props.loadingMessage || DATA_GRID_MESSAGES_RU.loadingMessage
   const allRowsLoadedMessage =
-    props.allRowsLoadedMessage || "All records loaded"
+    props.allRowsLoadedMessage || DATA_GRID_MESSAGES_RU.allRecordsLoadedMessage
 
   const handleViewportRef = useCallback((node: HTMLDivElement | null) => {
     setViewportElements({

apps/web/src/components/reui/data-grid/data-grid-table.tsx

@@ -28,6 +28,7 @@ import { cva } from "class-variance-authority"
 import { cn } from "@evobgp/ui/lib/utils"
 import { Checkbox } from "@evobgp/ui/components/checkbox"
 import { Spinner } from "@evobgp/ui/components/spinner"
+import { DATA_GRID_MESSAGES_RU } from "@/lib/data-grid-defaults"
 
 const headerCellSpacingVariants = cva("", {
   variants: {
@@ -1098,7 +1099,7 @@ function DataGridTableEmpty() {
         colSpan={Math.max(visibleColumnCount, 1)}
         className="text-muted-foreground text-sm py-6 text-center"
       >
-        {props.emptyMessage || "No data available"}
+        {props.emptyMessage || DATA_GRID_MESSAGES_RU.emptyMessage}
       </td>
     </tr>
   )
@@ -1111,7 +1112,7 @@ function DataGridTableLoader() {
     <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
       <div className="text-muted-foreground bg-card rounded-lg text-sm flex items-center gap-2 border px-4 py-2 leading-none font-medium">
         <Spinner className="size-5 opacity-60" />
-        {props.loadingMessage || "Loading..."}
+        {props.loadingMessage || DATA_GRID_MESSAGES_RU.loadingMessage}
       </div>
     </div>
   )
@@ -1123,7 +1124,7 @@ function DataGridTableRowPin<TData>({ row }: { row: Row<TData> }) {
   return (
     <button
       type="button"
-      aria-label={isPinned ? "Unpin row" : "Pin row"}
+      aria-label={isPinned ? DATA_GRID_MESSAGES_RU.unpinRowLabel : DATA_GRID_MESSAGES_RU.pinRowLabel}
       onClick={() => {
         if (isPinned) {
           row.pin(false)
@@ -1179,7 +1180,7 @@ function DataGridTableRowSelect<TData>({ row }: { row: Row<TData> }) {
       <Checkbox
         checked={row.getIsSelected()}
         onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
+        aria-label={DATA_GRID_MESSAGES_RU.selectRowLabel}
         className="align-[inherit]"
       />
     </>
@@ -1198,7 +1199,7 @@ function DataGridTableRowSelectAll() {
       indeterminate={isSomeSelected && !isAllSelected}
       disabled={isLoading || recordCount === 0}
       onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-      aria-label="Select all"
+      aria-label={DATA_GRID_MESSAGES_RU.selectAllLabel}
       className="align-[inherit]"
     />
   )
@@ -1249,7 +1250,7 @@ function DataGridTableBodyRows<TData>({ table }: { table: Table<TData> }) {
                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
               ></path>
             </svg>
-            {props.loadingMessage || "Loading..."}
+            {props.loadingMessage || DATA_GRID_MESSAGES_RU.loadingMessage}
           </div>
         </td>
       </tr>

apps/web/src/components/schedule/schedule-jobs-grid.tsx

@@ -6,6 +6,7 @@ import { DataGridSection } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { jobKindRu } from '@/lib/ui-labels'
 import type { JobRow } from '@/types/api'
 
 export function ScheduleJobsGrid({
@@ -20,7 +21,7 @@ export function ScheduleJobsGrid({
       {
         accessorKey: 'kind',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
-        cell: ({ row }) => <DataGridPrimaryCell title={row.original.kind} accent="mono" />,
+        cell: ({ row }) => <DataGridPrimaryCell title={jobKindRu(row.original.kind)} accent="mono" />,
         meta: { headerTitle: 'Вид' },
       },
       {
@@ -79,7 +80,7 @@ export function ScheduleJobsGrid({
   const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    getSearchText: (row) => `${row.kind} ${row.status} ${row.error ?? ''}`,
+    getSearchText: (row) => `${jobKindRu(row.kind)} ${row.status} ${row.error ?? ''}`,
     getRowId: (row) => row.job_id,
   })
 

apps/web/src/components/schedule/schedule-modules-grid.tsx

@@ -8,6 +8,7 @@ import { DataGridSection } from '@/components/data-grid-shell'
 import { LoadingButton } from '@/components/loading-button'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { moduleTypeRu } from '@/lib/ui-labels'
 import type { ModuleRow } from '@/types/api'
 
 export function ScheduleModulesGrid({
@@ -32,7 +33,7 @@ export function ScheduleModulesGrid({
       {
         accessorKey: 'type',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Тип" />,
-        cell: ({ row }) => <CategoryBadge>{row.original.type}</CategoryBadge>,
+        cell: ({ row }) => <CategoryBadge>{moduleTypeRu(row.original.type)}</CategoryBadge>,
         meta: { headerTitle: 'Тип' },
       },
       {

apps/web/src/components/section-cards.tsx

@@ -42,7 +42,7 @@ export function SectionCards({ items, className }: { items: SectionCardItem[]; c
       {items.map((item, idx) => {
         const clickable = Boolean(item.onClick)
         const content = (
-          <CardContent className="flex items-start gap-2.5 px-3 py-2.5">
+          <CardContent className="flex items-start gap-2.5 px-3 py-2">
             {item.icon ? (
               <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground">
                 {item.icon}
@@ -80,8 +80,9 @@ export function SectionCards({ items, className }: { items: SectionCardItem[]; c
         return (
           <Card
             key={typeof item.label === 'string' ? item.label : idx}
+            size="sm"
             className={cn(
-              'gap-0',
+              'gap-0 py-0',
               VARIANT_CLASS[item.variant ?? 'default'],
               item.active && 'border-primary ring-1 ring-primary/30',
               clickable && 'cursor-pointer transition-colors hover:bg-muted/40',

apps/web/src/components/skeletons.tsx

@@ -18,8 +18,8 @@ export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
 export function AnalyticsDashboardSkeleton() {
   return (
     <div className="grid gap-4 lg:grid-cols-3 lg:items-start">
-      <Card className="gap-0">
-        <CardContent className="space-y-4 p-5">
+      <Card size="sm" className="gap-0 py-0">
+        <CardContent className="space-y-4 py-4">
           <Skeleton className="h-4 w-40" />
           <div className="grid gap-4 sm:grid-cols-3">
             {Array.from({ length: 3 }).map((_, i) => (
@@ -30,15 +30,15 @@ export function AnalyticsDashboardSkeleton() {
           <Skeleton className="h-32 w-full" />
         </CardContent>
       </Card>
-      <Card className="gap-0">
-        <CardContent className="space-y-4 p-5">
+      <Card size="sm" className="gap-0 py-0">
+        <CardContent className="space-y-4 py-4">
           <Skeleton className="h-4 w-32" />
           <Skeleton className="h-10 w-24" />
           <Skeleton className="h-36 w-full" />
         </CardContent>
       </Card>
-      <Card className="gap-0">
-        <CardContent className="space-y-4 p-5">
+      <Card size="sm" className="gap-0 py-0">
+        <CardContent className="space-y-4 py-4">
           <Skeleton className="h-4 w-32" />
           <Skeleton className="h-44 w-full" />
         </CardContent>
@@ -49,16 +49,16 @@ export function AnalyticsDashboardSkeleton() {
 
 export function TableSkeleton({ rows = 6, cols = 4 }: { rows?: number; cols?: number }) {
   return (
-    <Card className="gap-0">
+    <Card size="sm" className="gap-0 py-0">
       <CardContent className="p-0">
         <div className="flex flex-col">
-          <div className="flex gap-2 border-b p-3">
+          <div className="flex gap-2 border-b px-3 py-2">
             {Array.from({ length: cols }).map((_, i) => (
               <Skeleton className="h-4 flex-1" key={`h-${i}`} />
             ))}
           </div>
           {Array.from({ length: rows }).map((_, r) => (
-            <div className="flex gap-2 border-b p-3" key={`r-${r}`}>
+            <div className="flex gap-2 border-b px-3 py-2" key={`r-${r}`}>
               {Array.from({ length: cols }).map((_, c) => (
                 <Skeleton className="h-4 flex-1" key={`c-${r}-${c}`} />
               ))}

apps/web/src/components/status-badge.tsx

@@ -3,6 +3,7 @@ import type { ComponentProps } from 'react'
 import { cn } from '@evobgp/ui/lib/utils'
 
 import { Badge } from '@/components/reui/badge'
+import { jobStatusRu } from '@/lib/ui-labels'
 
 type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>
 
@@ -63,7 +64,7 @@ export function StatusBadge({
     <div className={cn('flex flex-col gap-0.5', className)}>
       <Badge variant={variant} size="sm" radius="full" className="gap-1.5">
         <span className={cn('size-1.5 shrink-0 rounded-full', dotColor)} aria-hidden />
-        {label ?? status}
+        {label ?? jobStatusRu(status)}
       </Badge>
       {hint ? <span className="text-xs text-muted-foreground">{hint}</span> : null}
     </div>