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