refactor: integrate PanelCard and enhance dashboard components for improved layout

Refactored multiple dashboard components to utilize the new PanelCard for better organization and presentation. Updated the DashboardFramePanel, DashboardQuickLinks, and DashboardOperationsBreakdown components to streamline layouts and enhance user experience. Removed deprecated components and improved loading states in various sections, ensuring a cohesive interface throughout the application.

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

@@ -1,7 +1,8 @@
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { Plus } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
+import { Tabs, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
 
 import { DataGridCard } from '@/components/data-grid-shell'
 import { NetworkPeersGrid } from '@/components/network/network-peers-grid'
@@ -10,6 +11,8 @@ import { QueryState } from '@/components/query-state'
 import { TableSkeleton } from '@/components/skeletons'
 import type { PeerRow, SpeakerRow } from '@/types/api'
 
+type PeerTab = 'all' | 'established' | 'pending' | 'disabled'
+
 interface NetworkPeersCardProps {
   items: PeerRow[]
   speakers: SpeakerRow[]
@@ -19,6 +22,24 @@ interface NetworkPeersCardProps {
   onRetry: () => void
 }
 
+function filterPeers(items: PeerRow[], tab: PeerTab): PeerRow[] {
+  if (tab === 'all') return items
+  if (tab === 'disabled') return items.filter((p) => p.enabled === false)
+  const enabled = items.filter((p) => p.enabled !== false)
+  if (tab === 'established') return enabled.filter((p) => p.session_state === 'Established')
+  return enabled.filter((p) => p.session_state !== 'Established')
+}
+
+function tabCounts(items: PeerRow[]) {
+  const enabled = items.filter((p) => p.enabled !== false)
+  return {
+    all: items.length,
+    established: enabled.filter((p) => p.session_state === 'Established').length,
+    pending: enabled.filter((p) => p.session_state !== 'Established').length,
+    disabled: items.length - enabled.length,
+  }
+}
+
 export function NetworkPeersCard({
   items,
   speakers,
@@ -28,6 +49,9 @@ export function NetworkPeersCard({
   onRetry,
 }: NetworkPeersCardProps) {
   const [dialogOpen, setDialogOpen] = useState(false)
+  const [tab, setTab] = useState<PeerTab>('all')
+  const counts = useMemo(() => tabCounts(items), [items])
+  const filtered = useMemo(() => filterPeers(items, tab), [items, tab])
 
   return (
     <>
@@ -41,14 +65,24 @@ export function NetworkPeersCard({
           </Button>
         }
       >
+        <div className="border-b px-5 py-3">
+          <Tabs value={tab} onValueChange={(v) => setTab(v as PeerTab)}>
+            <TabsList>
+              <TabsTrigger value="all">Все ({counts.all})</TabsTrigger>
+              <TabsTrigger value="established">Established ({counts.established})</TabsTrigger>
+              <TabsTrigger value="pending">Ожидание ({counts.pending})</TabsTrigger>
+              <TabsTrigger value="disabled">Выключены ({counts.disabled})</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
         <QueryState
-          data={items}
+          data={filtered}
           isLoading={isLoading}
           isError={isError}
           error={error}
-          empty={items.length === 0}
-          emptyTitle="Нет пиров"
-          emptyDescription="Добавьте первого BGP-соседа для установки сессии."
+          empty={filtered.length === 0}
+          emptyTitle="Нет пиров в выборке"
+          emptyDescription="Измените фильтр или добавьте BGP-соседа."
           skeleton={<TableSkeleton rows={6} cols={4} />}
           onRetry={onRetry}
         >
@@ -58,11 +92,7 @@ export function NetworkPeersCard({
         </QueryState>
       </DataGridCard>
 
-      <PeerFormDialog
-        open={dialogOpen}
-        onOpenChange={setDialogOpen}
-        speakers={speakers}
-      />
+      <PeerFormDialog open={dialogOpen} onOpenChange={setDialogOpen} speakers={speakers} />
     </>
   )
 }