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/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"