refactor(web): remove deprecated dashboard components and enhance KPI grid

- Deleted unused components: `DashboardActivityTimeline`, `DashboardFramePanel`, `DashboardModulesGrid`, `DashboardRecentJobsGrid`, and `DashboardRecentRevisionsGrid` to streamline the dashboard.
- Updated `DashboardKpiGrid` to improve KPI display logic, including progress indicators and enhanced badge functionality.
- Refactored `DashboardNetworkHealth` to provide better status representation based on loading states and network conditions.
- Introduced new properties for KPI cards to support progress tracking and improved visual feedback.

This cleanup aims to enhance performance and maintainability of the dashboard while providing a better user experience.

apps/web/src/components/dashboard/dashboard-activity-timeline.tsx

@@ -1,102 +0,0 @@
-import { AlertTriangle, CheckCircle, Info } from 'lucide-react'
-
-import { DashboardFramePanel } from '@/components/dashboard/dashboard-frame-panel'
-import { Badge } from '@/components/reui/badge'
-import {
-  Timeline,
-  TimelineContent,
-  TimelineHeader,
-  TimelineIndicator,
-  TimelineItem,
-  TimelineSeparator,
-  TimelineTitle,
-} from '@/components/reui/timeline'
-import { cn } from '@evobgp/ui/lib/utils'
-
-import { recentPlatformActivity } from '@/lib/metrics'
-import type { JobRow, PeerRow, RevisionRow, SpeakerRow } from '@/types/api'
-
-const KIND_META = {
-  job: { icon: Info, className: 'text-info' },
-  revision: { icon: CheckCircle, className: 'text-success' },
-  network: { icon: AlertTriangle, className: 'text-warning' },
-} as const
-
-function statusBadgeVariant(status: string) {
-  const s = status.toLowerCase()
-  if (['ok', 'success', 'completed', 'done'].includes(s)) return 'success-light' as const
-  if (['running', 'queued', 'pending'].includes(s)) return 'info-light' as const
-  if (['warning', 'mismatch'].includes(s)) return 'warning-light' as const
-  if (['failed', 'error', 'cancelled'].includes(s)) return 'destructive-light' as const
-  return 'outline' as const
-}
-
-export function DashboardActivityTimeline({
-  jobs,
-  revisions,
-  peers,
-  speakers,
-  loading,
-}: {
-  jobs: JobRow[]
-  revisions: RevisionRow[]
-  peers: PeerRow[]
-  speakers: SpeakerRow[]
-  loading?: boolean
-}) {
-  const items = recentPlatformActivity(jobs, revisions, peers, speakers, 6)
-
-  return (
-    <DashboardFramePanel
-      title="Недавняя активность"
-      description="Задачи, ревизии и сетевые события"
-      className="h-full min-w-0"
-    >
-      {loading ? (
-        <p className="text-muted-foreground px-4 py-6 text-sm">Загрузка…</p>
-      ) : items.length === 0 ? (
-        <p className="text-muted-foreground px-4 py-6 text-sm">Нет недавних событий</p>
-      ) : (
-        <div className="px-4 py-4">
-          <Timeline defaultValue={items.length}>
-            {items.map((item, index) => {
-              const meta = KIND_META[item.kind]
-              const Icon = meta.icon
-              return (
-                <TimelineItem
-                  key={item.id}
-                  step={index + 1}
-                  className="group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=vertical]/timeline:not-last:pb-4"
-                >
-                  <TimelineHeader>
-                    <TimelineSeparator className="bg-border! group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:top-2 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem)] group-data-[orientation=vertical]/timeline:translate-y-5" />
-                    <TimelineIndicator className="border-none bg-transparent group-data-[orientation=vertical]/timeline:-left-6">
-                      <span
-                        className={cn(
-                          'bg-muted/70 flex size-7 items-center justify-center rounded-full',
-                          meta.className,
-                        )}
-                      >
-                        <Icon className="size-3.5" aria-hidden />
-                      </span>
-                    </TimelineIndicator>
-                  </TimelineHeader>
-                  <TimelineContent className="min-w-0 pb-1 text-foreground">
-                    <TimelineTitle className="text-sm leading-snug font-normal break-words">
-                      {item.message}
-                    </TimelineTitle>
-                    <div className="mt-2">
-                      <Badge variant={statusBadgeVariant(item.status)} size="sm">
-                        {item.statusLabel ?? item.status}
-                      </Badge>
-                    </div>
-                  </TimelineContent>
-                </TimelineItem>
-              )
-            })}
-          </Timeline>
-        </div>
-      )}
-    </DashboardFramePanel>
-  )
-}

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

@@ -1,36 +0,0 @@
-import type { ReactNode } from 'react'
-
-import {
-  FrameSection,
-  panelCardContentFlushClassName,
-} from '@/components/reui-kit'
-import { cn } from '@evobgp/ui/lib/utils'
-
-/** Frame panel for dashboard sections. Preview: https://reui.io/docs/components/base/frame */
-export function DashboardFramePanel({
-  title,
-  description,
-  actions,
-  children,
-  className,
-  contentClassName,
-}: {
-  title?: string
-  description?: string
-  actions?: ReactNode
-  children: ReactNode
-  className?: string
-  contentClassName?: string
-}) {
-  return (
-    <FrameSection
-      title={title}
-      description={description}
-      actions={actions}
-      className={cn('h-full', className)}
-      contentClassName={cn(panelCardContentFlushClassName, contentClassName)}
-    >
-      {children}
-    </FrameSection>
-  )
-}

apps/web/src/components/dashboard/dashboard-kpi-grid.tsx

@@ -3,8 +3,6 @@ import {
   Boxes,
   ListChecks,
   Network,
-  ServerCog,
-  Share2,
 } from 'lucide-react'
 import type { ReactNode } from 'react'
 
@@ -16,6 +14,11 @@ import type { JobRow, ModuleRow, PeerRow, SpeakerRow } from '@/types/api'
 
 type KpiCard = KpiStatItem & { icon: ReactNode }
 
+function ratioPercent(part: number, total: number): number | undefined {
+  if (total <= 0) return undefined
+  return Math.round((part / total) * 100)
+}
+
 function buildKpis({
   modules,
   peers,
@@ -40,17 +43,34 @@ function buildKpis({
   ).length
   const offlineSpeakers = Math.max(0, speakers.length - network.speakersOnline)
   const riskCount = network.peersMismatch + failedJobs + offlineSpeakers
+  const disabledModules = Math.max(0, modules.length - enabledModules)
 
   return [
     {
       id: 'modules',
       icon: <Boxes aria-hidden />,
       iconClassName: 'text-primary',
-      value: loading ? '—' : `${enabledModules}/${modules.length || 0}`,
+      value: loading ? '—' : enabledModules,
       label: 'Модули активны',
+      progress: loading ? undefined : ratioPercent(enabledModules, modules.length),
       footer: (
-        <Badge variant="primary-light" size="sm">
-          {loading ? '…' : `${modules.length} всего`}
+        <Badge
+          variant={
+            loading || modules.length === 0
+              ? 'outline'
+              : disabledModules === 0
+                ? 'success-light'
+                : 'warning-light'
+          }
+          size="sm"
+        >
+          {loading
+            ? '…'
+            : modules.length === 0
+              ? 'нет модулей'
+              : disabledModules === 0
+                ? 'все активны'
+                : `${disabledModules} выкл`}
         </Badge>
       ),
     },
@@ -60,6 +80,7 @@ function buildKpis({
       iconClassName: 'text-info',
       value: loading || bgpPct === null ? '—' : `${bgpPct}%`,
       label: 'BGP готовность',
+      progress: loading || bgpPct === null ? undefined : bgpPct,
       footer: (
         <Badge
           variant={
@@ -73,34 +94,9 @@ function buildKpis({
         >
           {loading || bgpPct === null
             ? 'нет включённых пиров'
-            : `${network.peersEstablished} установлено`}
-        </Badge>
-      ),
-    },
-    {
-      id: 'peers',
-      icon: <Share2 aria-hidden />,
-      iconClassName: 'text-success',
-      value: loading ? '—' : `${network.peersEstablished}/${peersEnabled}`,
-      label: 'Пиры установлены',
-      footer: (
-        <Badge variant="success-light" size="sm">
-          {loading ? '…' : `${network.peersTotal} в каталоге`}
-        </Badge>
-      ),
-    },
-    {
-      id: 'speakers',
-      icon: <ServerCog aria-hidden />,
-      iconClassName: 'text-warning',
-      value: loading ? '—' : `${network.speakersOnline}/${network.speakersTotal}`,
-      label: 'Спикеры в сети',
-      footer: (
-        <Badge
-          variant={network.speakersOnline === network.speakersTotal ? 'success-light' : 'warning-light'}
-          size="sm"
-        >
-          {loading ? '…' : 'в сети'}
+            : bgpPct >= 90
+              ? 'сессии в норме'
+              : `${network.peersEstablished} установлено`}
         </Badge>
       ),
     },
@@ -112,7 +108,7 @@ function buildKpis({
       label: 'Активные задачи',
       footer: (
         <Badge variant={running > 0 ? 'info-light' : 'outline'} size="sm">
-          {loading ? '…' : `${jobs.length} в выборке`}
+          {loading ? '…' : running > 0 ? 'выполняются' : 'очередь пуста'}
         </Badge>
       ),
     },

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

@@ -1,117 +0,0 @@
-import { useMemo, useState } from 'react'
-import { Link, useNavigate } from '@tanstack/react-router'
-import { BoxesIcon, PlusIcon, SearchIcon } from 'lucide-react'
-
-import { CategoryBadge } from '@/components/category-badge'
-import { DataGridNameCell } from '@/components/data-grid-cell'
-import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
-import {
-  ResourcePage,
-  createTextFilterQuery,
-  type DataGridColumnDef,
-} from '@/components/reui-kit'
-import { Button } from '@evobgp/ui/components/button'
-import { moduleTypeRu } from '@/lib/ui-labels'
-import type { ModuleRow } from '@/types/api'
-
-const MODULE_TABS = [
-  { id: 'all', label: 'Все' },
-  { id: 'enabled', label: 'Вкл' },
-  { id: 'disabled', label: 'Выкл' },
-]
-
-const filterFields: FilterField[] = [
-  {
-    id: 'search',
-    label: 'Поиск',
-    icon: <SearchIcon className="size-3.5" aria-hidden />,
-    type: 'text',
-    placeholder: 'Поиск модулей…',
-  },
-]
-
-function getFilterFieldValue(item: ModuleRow, field: string): unknown {
-  if (field === 'search') {
-    return `${item.name} ${item.type} ${moduleTypeRu(item.type)}`
-  }
-  return undefined
-}
-
-function tabFilter(item: ModuleRow, tabId: string): boolean {
-  if (tabId === 'enabled') return item.enabled !== false
-  if (tabId === 'disabled') return item.enabled === false
-  return true
-}
-
-export function DashboardModulesGrid({
-  modules,
-  isLoading = false,
-}: {
-  modules: ModuleRow[]
-  isLoading?: boolean
-}) {
-  const navigate = useNavigate()
-  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
-    createTextFilterQuery('search'),
-  )
-
-  const columns = useMemo<DataGridColumnDef<ModuleRow>[]>(
-    () => [
-      {
-        accessorKey: 'name',
-        id: 'name',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Модуль" />,
-        cell: ({ row }) => <DataGridNameCell icon={BoxesIcon} title={row.original.name} />,
-        minSize: 180,
-        meta: { headerTitle: 'Модуль' },
-      },
-      {
-        accessorKey: 'type',
-        id: 'type',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Тип" />,
-        cell: ({ row }) => <CategoryBadge>{moduleTypeRu(row.original.type)}</CategoryBadge>,
-        meta: { headerTitle: 'Тип' },
-      },
-      {
-        accessorKey: 'priority',
-        id: 'priority',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Приоритет" />,
-        cell: ({ row }) => (
-          <span className="font-mono text-sm tabular-nums">{row.original.priority}</span>
-        ),
-        size: 88,
-        meta: { headerTitle: 'Приоритет' },
-      },
-    ],
-    [],
-  )
-
-  return (
-    <ResourcePage
-      title="Модули"
-      description="Поиск и быстрый переход к настройке"
-      tabs={MODULE_TABS}
-      tabFilter={tabFilter}
-      filterFields={filterFields}
-      filterQuery={filterQuery}
-      onFilterQueryChange={setFilterQuery}
-      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
-      getFilterFieldValue={getFilterFieldValue}
-      columns={columns}
-      data={modules}
-      getRowId={(row) => row.id}
-      isLoading={isLoading}
-      primaryAction={
-        <Button variant="outline" size="sm" render={<Link to="/modules" search={{ create: true }} />}>
-          <PlusIcon />
-          Создать
-        </Button>
-      }
-      onRowClick={(row) =>
-        void navigate({ to: '/modules/$moduleId', params: { moduleId: row.id } })
-      }
-      emptyState={{ title: 'Нет модулей по выбранным фильтрам.' }}
-    />
-  )
-}

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

@@ -60,8 +60,28 @@ export function DashboardNetworkHealth({
         label: mode === 'peers' ? 'Утилизация пиров' : 'Спикеры в сети',
         percent: loading ? 0 : utilization,
         badge: (
-          <Badge variant="outline" radius="full" className="h-6 px-2 text-[10px]">
-            {loading ? '…' : `${established}/${total}`}
+          <Badge
+            variant={
+              loading || total === 0
+                ? 'outline'
+                : offline === 0
+                  ? 'success-light'
+                  : 'warning-light'
+            }
+            size="sm"
+            radius="full"
+          >
+            {loading
+              ? '…'
+              : total === 0
+                ? 'нет данных'
+                : offline === 0
+                  ? mode === 'peers'
+                    ? 'все установлены'
+                    : 'все в сети'
+                  : mode === 'peers'
+                    ? `${offline} не установлены`
+                    : `${offline} офлайн`}
           </Badge>
         ),
       }}

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

@@ -1,62 +0,0 @@
-import { useMemo } from 'react'
-import { ListTodo } from 'lucide-react'
-
-import { DataGridNameCell } from '@/components/data-grid-cell'
-import { StatusBadge } from '@/components/status-badge'
-import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { FrameDataGrid, type DataGridColumnDef } from '@/components/reui-kit'
-import { jobKindRu } from '@/lib/ui-labels'
-import type { JobRow } from '@/types/api'
-
-export function DashboardRecentJobsGrid({
-  jobs,
-  nameById,
-  isLoading = false,
-}: {
-  jobs: JobRow[]
-  nameById: Map<string, string>
-  isLoading?: boolean
-}) {
-  const data = useMemo(() => jobs.slice(0, 8), [jobs])
-
-  const columns = useMemo<DataGridColumnDef<JobRow>[]>(
-    () => [
-      {
-        accessorKey: 'kind',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
-        cell: ({ row }) => (
-          <DataGridNameCell
-            icon={ListTodo}
-            title={jobKindRu(row.original.kind)}
-            subtitle={
-              row.original.meta?.module_id
-                ? (nameById.get(String(row.original.meta.module_id)) ?? undefined)
-                : undefined
-            }
-          />
-        ),
-        meta: { headerTitle: 'Вид' },
-      },
-      {
-        accessorKey: 'status',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
-        cell: ({ row }) => <StatusBadge status={row.original.status} />,
-        meta: { headerTitle: 'Статус' },
-      },
-    ],
-    [nameById],
-  )
-
-  return (
-    <FrameDataGrid
-      title="Недавние задачи"
-      description="Последние фоновые операции"
-      columns={columns}
-      data={data}
-      rowId={(row) => row.job_id}
-      emptyTitle="Нет задач"
-      pagination={false}
-      isLoading={isLoading}
-    />
-  )
-}

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

@@ -1,55 +0,0 @@
-import { useMemo } from 'react'
-import { GitCommitHorizontal } from 'lucide-react'
-
-import { DataGridMutedCell, DataGridNameCell } from '@/components/data-grid-cell'
-import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { FrameDataGrid, type DataGridColumnDef } from '@/components/reui-kit'
-import type { RevisionRow } from '@/types/api'
-
-export function DashboardRecentRevisionsGrid({
-  revisions,
-  isLoading = false,
-}: {
-  revisions: RevisionRow[]
-  isLoading?: boolean
-}) {
-  const data = useMemo(() => revisions.slice(0, 8), [revisions])
-
-  const columns = useMemo<DataGridColumnDef<RevisionRow>[]>(
-    () => [
-      {
-        id: 'id',
-        accessorFn: (row) => row.id,
-        header: ({ column }) => <DataGridColumnHeader column={column} title="ID" />,
-        cell: ({ row }) => (
-          <DataGridNameCell icon={GitCommitHorizontal} title={`${row.original.id.slice(0, 10)}…`} />
-        ),
-        meta: { headerTitle: 'ID' },
-      },
-      {
-        accessorKey: 'created_at',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Создана" />,
-        cell: ({ row }) => (
-          <DataGridMutedCell>
-            {new Date(row.original.created_at).toLocaleString('ru-RU')}
-          </DataGridMutedCell>
-        ),
-        meta: { headerTitle: 'Создана' },
-      },
-    ],
-    [],
-  )
-
-  return (
-    <FrameDataGrid
-      title="Последние ревизии"
-      description="История конфигураций"
-      columns={columns}
-      data={data}
-      rowId={(row) => row.id}
-      emptyTitle="Нет ревизий"
-      pagination={false}
-      isLoading={isLoading}
-    />
-  )
-}

apps/web/src/components/reui-kit/kpi-stat-grid.tsx

@@ -3,6 +3,7 @@ import { Link } from '@tanstack/react-router'
 
 import { Frame, FramePanel } from '@/components/reui/frame'
 import { Badge } from '@/components/reui/badge'
+import { Progress } from '@evobgp/ui/components/progress'
 import { cn } from '@evobgp/ui/lib/utils'
 import { kpiCols } from './kpi-cols'
 import { IconTile } from '@/components/reui/icon-tile'
@@ -29,6 +30,8 @@ export type KpiStatItem = {
   iconClassName?: string
   variant?: KpiStatVariant
   footer?: ReactNode
+  /** 0–100 completion bar under the value (stats-4). Omit to hide. */
+  progress?: number
 }
 
 /** CFDM-compatible card shape (id required). */
@@ -48,6 +51,17 @@ const VALUE_VARIANT_CLASS: Record<KpiStatVariant, string> = {
   destructive: 'text-destructive',
 }
 
+const PROGRESS_TONE_CLASS: Record<KpiStatVariant, string> = {
+  default: '',
+  warning: '[&_[data-slot=progress-indicator]]:bg-warning',
+  destructive: '[&_[data-slot=progress-indicator]]:bg-destructive',
+}
+
+function clampProgress(value: number): number {
+  if (Number.isNaN(value)) return 0
+  return Math.min(100, Math.max(0, value))
+}
+
 function handleCardKeyDown(onActivate: () => void, event: KeyboardEvent<HTMLDivElement>) {
   if (event.key === 'Enter' || event.key === ' ') {
     event.preventDefault()
@@ -111,6 +125,20 @@ function KpiStatCardBody({ item }: { item: KpiStatItem }) {
         >
           {item.value}
         </div>
+        {item.progress !== undefined ? (
+          <Progress
+            value={clampProgress(item.progress)}
+            className={cn(
+              'mt-1.5 w-full gap-0 **:data-[slot=progress-track]:h-1.5',
+              PROGRESS_TONE_CLASS[valueVariant],
+            )}
+            aria-label={
+              typeof item.label === 'string'
+                ? `${item.label}: ${clampProgress(item.progress)}%`
+                : undefined
+            }
+          />
+        ) : null}
         {footer ? (
           <div className="min-w-0 max-w-full @[20rem]:hidden">{footer}</div>
         ) : null}

apps/web/src/components/reui-kit/ops-dashboard.tsx

@@ -12,7 +12,7 @@ interface OpsDashboardProps {
   /** Slot after KPI (QuickActionGrid). Preview: stats-12 · card-12 */
   afterKpi?: ReactNode
   charts: ReactNode
-  queue: ReactNode
+  queue?: ReactNode
   queueTitle?: string
   queueDescription?: string
   headerActions?: ReactNode
@@ -31,10 +31,12 @@ function OpsDashboardSkeleton() {
       </header>
       <KpiStatGrid cards={[]} isLoading skeletonCount={4} />
       <div className="flex min-w-0 flex-col gap-4">
-        <Skeleton className="h-64 w-full rounded-xl" />
-        <Skeleton className="h-64 w-full rounded-xl" />
+        <Skeleton className="h-40 w-full rounded-xl" />
+        <div className="grid min-w-0 grid-cols-1 gap-4 @5xl:grid-cols-2">
+          <Skeleton className="h-56 w-full rounded-xl" />
+          <Skeleton className="h-56 w-full rounded-xl" />
+        </div>
       </div>
-      <Skeleton className="h-48 w-full rounded-xl" />
     </div>
   )
 }
@@ -76,15 +78,17 @@ export function OpsDashboard({
         {charts}
       </section>
 
-      <section aria-label={queueTitle} className="flex min-w-0 flex-col gap-4">
-        <div className="flex min-w-0 flex-col gap-1">
-          <h2 className="text-sm font-semibold tracking-tight">{queueTitle}</h2>
-          {queueDescription ? (
-            <p className="text-muted-foreground max-w-prose text-sm">{queueDescription}</p>
-          ) : null}
-        </div>
-        {queue}
-      </section>
+      {queue ? (
+        <section aria-label={queueTitle} className="flex min-w-0 flex-col gap-4">
+          <div className="flex min-w-0 flex-col gap-1">
+            <h2 className="text-sm font-semibold tracking-tight">{queueTitle}</h2>
+            {queueDescription ? (
+              <p className="text-muted-foreground max-w-prose text-sm">{queueDescription}</p>
+            ) : null}
+          </div>
+          {queue}
+        </section>
+      ) : null}
     </div>
   )
 }

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

@@ -4,24 +4,17 @@ import { RefreshCw } from 'lucide-react'
 import { useState } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
-import { Skeleton } from '@evobgp/ui/components/skeleton'
 
-import { DashboardActivityTimeline } from '@/components/dashboard/dashboard-activity-timeline'
 import { buildDashboardKpiCards } from '@/components/dashboard/dashboard-kpi-grid'
-import { DashboardModulesGrid } from '@/components/dashboard/dashboard-modules-grid'
 import { DashboardNetworkHealth } from '@/components/dashboard/dashboard-network-health'
 import { DashboardOperationsBreakdown } from '@/components/dashboard/dashboard-operations-breakdown'
 import { DashboardQuickLinks } from '@/components/dashboard/dashboard-quick-links'
-import { DashboardRecentJobsGrid } from '@/components/dashboard/dashboard-recent-jobs-grid'
-import { DashboardRecentRevisionsGrid } from '@/components/dashboard/dashboard-recent-revisions-grid'
 import { OpsDashboard } from '@/components/reui-kit'
-import { chartPanelGridClassName, dashboardMainSidebarClassName } from '@/lib/ui-surface'
+import { chartPanelGridClassName } from '@/lib/ui-surface'
 import {
-  moduleNameById,
   overviewJobsQueryOptions,
   overviewModulesQueryOptions,
   overviewPeersQueryOptions,
-  overviewRevisionsQueryOptions,
   overviewSpeakersQueryOptions,
 } from '@/queries/overview'
 import { settingsQueryOptions } from '@/queries/settings'
@@ -36,11 +29,12 @@ function parseShowQuickActions(value: unknown): boolean {
 }
 
 /**
- * Dashboard — OpsDashboard kit (KPI → QuickActions → modules → activity/health → queue).
- * Charts slot is a vertical stack: modules stay full-width; activity shares a row
- * with BGP widgets only at @5xl (container), never nested 8+4 inside a 2-col parent.
+ * Dashboard — KPI infographic + Quick Actions + charts (no list duplicates).
  * @see https://reui.io/preview/base/dashboard-1
  * @see https://reui.io/preview/base/stats-12
+ * @see https://reui.io/preview/base/stats-4
+ * @see https://reui.io/preview/base/card-12
+ * @see https://reui.io/preview/base/chart-27
  */
 function DashboardComponent() {
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
@@ -52,14 +46,13 @@ function DashboardComponent() {
       overviewModulesQueryOptions(),
       overviewPeersQueryOptions(),
       overviewSpeakersQueryOptions(),
-      overviewRevisionsQueryOptions(),
       overviewJobsQueryOptions(),
     ],
   })
 
-  const [modulesQ, peersQ, speakersQ, revisionsQ, jobsQ] = results
+  const [modulesQ, peersQ, speakersQ, jobsQ] = results
   const initialLoading =
-    modulesQ.isLoading || peersQ.isLoading || speakersQ.isLoading || revisionsQ.isLoading || jobsQ.isLoading
+    modulesQ.isLoading || peersQ.isLoading || speakersQ.isLoading || jobsQ.isLoading
   const refreshing = results.some((r) => r.isFetching && !r.isLoading)
 
   if (!lastUpdated && !initialLoading && results.every((r) => r.isSuccess || r.isError)) {
@@ -74,11 +67,7 @@ function DashboardComponent() {
   const modules = modulesQ.data?.items ?? []
   const peers = peersQ.data?.items ?? []
   const speakers = speakersQ.data?.items ?? []
-  const revisions = revisionsQ.data?.items ?? []
   const jobs = jobsQ.data?.items ?? []
-  const nameById = moduleNameById(modules)
-
-  const activityLoading = refreshing && jobs.length === 0 && revisions.length === 0
   const kpiCards = buildDashboardKpiCards({ modules, peers, speakers, jobs })
 
   return (
@@ -99,38 +88,18 @@ function DashboardComponent() {
       isLoading={initialLoading}
       afterKpi={showQuickActions ? <DashboardQuickLinks /> : null}
       charts={
-        <>
-          <div className="min-w-0">
-            <DashboardModulesGrid modules={modules} isLoading={refreshing} />
-          </div>
-          <div className={dashboardMainSidebarClassName}>
-            <DashboardActivityTimeline
-              jobs={jobs}
-              revisions={revisions}
-              peers={peers}
-              speakers={speakers}
-            />
-            <div className="grid min-w-0 items-start gap-4">
-              <DashboardNetworkHealth peers={peers} speakers={speakers} jobs={jobs} />
-              <DashboardOperationsBreakdown jobs={jobs} modules={modules} />
-            </div>
-          </div>
-        </>
-      }
-      queueTitle="Задачи и ревизии"
-      queueDescription="Последние фоновые операции и история конфигураций"
-      queue={
         <div className={chartPanelGridClassName}>
-            {activityLoading ? (
-              <Skeleton className="m-4 h-24 w-auto" />
-            ) : (
-              <DashboardRecentJobsGrid jobs={jobs.slice(0, 8)} nameById={nameById} isLoading={refreshing} />
-            )}
-            {activityLoading ? (
-              <Skeleton className="m-4 h-24 w-auto" />
-            ) : (
-              <DashboardRecentRevisionsGrid revisions={revisions} isLoading={refreshing} />
-            )}
+          <DashboardNetworkHealth
+            peers={peers}
+            speakers={speakers}
+            jobs={jobs}
+            loading={refreshing && peers.length === 0 && speakers.length === 0}
+          />
+          <DashboardOperationsBreakdown
+            jobs={jobs}
+            modules={modules}
+            loading={refreshing && jobs.length === 0 && modules.length === 0}
+          />
         </div>
       }
     />