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/operations/operations-jobs-card.tsx

@@ -0,0 +1,86 @@
+import { useMemo, useState } from 'react'
+
+import { DataGridCard } from '@/components/data-grid-shell'
+import { OperationsJobsGrid } from '@/components/operations/operations-jobs-grid'
+import { QueryState } from '@/components/query-state'
+import { TableSkeleton } from '@/components/skeletons'
+import { Tabs, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import type { JobRow } from '@/types/api'
+import type { QueryClient } from '@tanstack/react-query'
+
+type JobTab = 'all' | 'active' | 'failed' | 'succeeded'
+
+function filterJobs(items: JobRow[], tab: JobTab): JobRow[] {
+  if (tab === 'all') return items
+  if (tab === 'active') return items.filter((j) => j.status === 'running' || j.status === 'queued')
+  if (tab === 'failed')
+    return items.filter((j) => ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()))
+  return items.filter((j) => j.status === 'succeeded')
+}
+
+function tabCounts(items: JobRow[]) {
+  return {
+    all: items.length,
+    active: items.filter((j) => j.status === 'running' || j.status === 'queued').length,
+    failed: items.filter((j) => ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()))
+      .length,
+    succeeded: items.filter((j) => j.status === 'succeeded').length,
+  }
+}
+
+/** data-grid-filtering-1 style jobs card with status tabs. */
+export function OperationsJobsCard({
+  jobs,
+  nameById,
+  qc,
+  isLoading,
+  isError,
+  error,
+  onRetry,
+}: {
+  jobs: JobRow[]
+  nameById: Map<string, string>
+  qc: QueryClient
+  isLoading: boolean
+  isError: boolean
+  error: unknown
+  onRetry: () => void
+}) {
+  const [tab, setTab] = useState<JobTab>('all')
+  const counts = useMemo(() => tabCounts(jobs), [jobs])
+  const filtered = useMemo(() => filterJobs(jobs, tab), [jobs, tab])
+
+  return (
+    <DataGridCard title="Задачи" description="Фильтр по статусу · data-grid-filtering pattern">
+      <div className="border-b px-5 py-3">
+        <Tabs value={tab} onValueChange={(v) => setTab(v as JobTab)}>
+          <TabsList>
+            <TabsTrigger value="all">Все ({counts.all})</TabsTrigger>
+            <TabsTrigger value="active">Активные ({counts.active})</TabsTrigger>
+            <TabsTrigger value="succeeded">Успешные ({counts.succeeded})</TabsTrigger>
+            <TabsTrigger value="failed">Ошибки ({counts.failed})</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+      <QueryState
+        data={filtered}
+        isLoading={isLoading}
+        isError={isError}
+        error={error}
+        empty={filtered.length === 0}
+        emptyTitle="Нет задач в выборке"
+        skeleton={<TableSkeleton rows={6} cols={5} />}
+        onRetry={onRetry}
+      >
+        {(items) => (
+          <OperationsJobsGrid
+            items={items}
+            nameById={nameById}
+            qc={qc}
+            isLoading={isLoading && items.length > 0}
+          />
+        )}
+      </QueryState>
+    </DataGridCard>
+  )
+}