refactor: update dialog components and enhance UI consistency

Refactored ConfirmDialog and FormDrawer components to improve layout and user experience. Integrated new DrawerActionsFooter for better action handling in dialogs. Updated styles for consistency across components, including adjustments to the skeletons and analytics card layouts. Removed deprecated alert components from various routes to streamline the codebase and enhance clarity in the UI.

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

@@ -1,8 +1,7 @@
 import { createFileRoute, useSearch } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { Activity, AlertTriangle, Bird, Database, HeartPulse, Info, ListTodo, RefreshCw } from 'lucide-react'
+import { Activity, AlertTriangle, Bird, RefreshCw } from 'lucide-react'
 
-import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
 import { Separator } from '@evobgp/ui/components/separator'
@@ -22,7 +21,6 @@ import {
   monitoringHealthQueryOptions,
   monitoringReadyQueryOptions,
   monitoringVersionQueryOptions,
-  type ReadyStatus,
   type VersionInfo,
 } from '@/queries/monitoring'
 import { networkBirdQueryOptions } from '@/queries/network'
@@ -84,7 +82,13 @@ function MonitoringComponent() {
     <div className="flex flex-col gap-6">
       <PageHeader
         title="Мониторинг"
-        description="Состояние API, BGP и задач для диагностики инцидентов"
+        description={`Состояние API, BGP и задач для диагностики инцидентов${
+          versionText !== '—'
+            ? ` · версия ${versionText}${
+                versionQ.data?.git_sha ? ` (${versionQ.data.git_sha.slice(0, 8)})` : ''
+              }`
+            : ''
+        }`}
         actions={
           <Button variant="outline" size="sm" onClick={refetchAll} disabled={refreshing}>
             <RefreshCw className={refreshing ? 'animate-spin' : ''} />
@@ -118,17 +122,6 @@ function MonitoringComponent() {
             </div>
           )}
 
-          <Alert className="border-muted bg-muted/30">
-            <Info className="size-4" />
-            <AlertTitle className="text-sm">
-              Версия API: {versionText}
-              {versionQ.data?.git_sha ? ` · ${versionQ.data.git_sha.slice(0, 8)}` : ''}
-            </AlertTitle>
-            <AlertDescription className="text-xs">
-              {overallHint({ health: healthQ.data, jobsFailed: failed })}
-            </AlertDescription>
-          </Alert>
-
           <div className="grid gap-4 lg:grid-cols-2">
             <DataGridCard
               title="Доступность и готовность"
@@ -225,37 +218,27 @@ function MonitoringComponent() {
                 </CardTitle>
                 <CardDescription>Короткая шпаргалка для triage</CardDescription>
               </CardHeader>
-              <CardContent className="space-y-3">
-                <Alert>
-                  <HeartPulse className="size-4" />
-                  <AlertTitle>API недоступен</AlertTitle>
-                  <AlertDescription>
-                    Если <code className="text-xs">/v1/health</code> возвращает ошибку — проверьте процесс
-                    API и его логи.
-                  </AlertDescription>
-                </Alert>
-                <Alert>
-                  <Database className="size-4" />
-                  <AlertTitle>Readiness не «Готов»</AlertTitle>
-                  <AlertDescription>
-                    Сначала <code className="text-xs">postgres</code>, затем{' '}
-                    <code className="text-xs">store</code> и <code className="text-xs">jobs</code> в checks.
-                  </AlertDescription>
-                </Alert>
-                <Alert>
-                  <Bird className="size-4" />
-                  <AlertTitle>Низкий ratio BGP</AlertTitle>
-                  <AlertDescription>
-                    Проверьте <code className="text-xs">/v1/bird/status</code>, затем состояние пиров в Сети.
-                  </AlertDescription>
-                </Alert>
-                <Alert>
-                  <ListTodo className="size-4" />
-                  <AlertTitle>Ошибки задач</AlertTitle>
-                  <AlertDescription>
-                    Откройте Операции и проверьте последние неуспешные jobs.
-                  </AlertDescription>
-                </Alert>
+              <CardContent>
+                <ul className="space-y-3 text-sm text-muted-foreground">
+                  <li>
+                    <span className="font-medium text-foreground">API недоступен.</span> Если{' '}
+                    <code className="text-xs">/v1/health</code> возвращает ошибку — проверьте процесс API и
+                    его логи.
+                  </li>
+                  <li>
+                    <span className="font-medium text-foreground">Readiness не «Готов».</span> Сначала{' '}
+                    <code className="text-xs">postgres</code>, затем <code className="text-xs">store</code>{' '}
+                    и <code className="text-xs">jobs</code> в checks.
+                  </li>
+                  <li>
+                    <span className="font-medium text-foreground">Низкий ratio BGP.</span> Проверьте{' '}
+                    <code className="text-xs">/v1/bird/status</code>, затем состояние пиров в Сети.
+                  </li>
+                  <li>
+                    <span className="font-medium text-foreground">Ошибки задач.</span> Откройте Операции и
+                    проверьте последние неуспешные jobs.
+                  </li>
+                </ul>
               </CardContent>
             </Card>
           </div>
@@ -265,18 +248,11 @@ function MonitoringComponent() {
           <Card>
             <CardHeader>
               <CardTitle className="text-base">PostgreSQL</CardTitle>
-              <CardDescription>Статус соединения и пул</CardDescription>
+              <CardDescription>
+                Статус соединения и пул. PostgreSQL отображается в readiness-проверке на вкладке «Система»
+                (check <code className="text-xs">postgres</code>).
+              </CardDescription>
             </CardHeader>
-            <CardContent>
-              <Alert>
-                <Database className="size-4" />
-                <AlertTitle>Статус готовности</AlertTitle>
-                <AlertDescription>
-                  PostgreSQL-соединение отображается в readiness-проверке на вкладке «Система» (check{' '}
-                  <code className="text-xs">postgres</code>).
-                </AlertDescription>
-              </Alert>
-            </CardContent>
           </Card>
         </TabsContent>
 
@@ -284,18 +260,11 @@ function MonitoringComponent() {
           <Card>
             <CardHeader>
               <CardTitle className="text-base">Файловые логи</CardTitle>
-              <CardDescription>Логи API и pipeline</CardDescription>
+              <CardDescription>
+                Логи API и pipeline настраиваются переменной <code className="text-xs">EVOBGP_LOG_*</code> и
+                управляются в tenant-settings.
+              </CardDescription>
             </CardHeader>
-            <CardContent>
-              <Alert>
-                <Info className="size-4" />
-                <AlertTitle>Логи на сервере</AlertTitle>
-                <AlertDescription>
-                  Файловые логи настраиваются переменной <code className="text-xs">EVOBGP_LOG_*</code> и
-                  управляются tenant-settings на странице «Настройки BIRD».
-                </AlertDescription>
-              </Alert>
-            </CardContent>
           </Card>
         </TabsContent>
       </BadgeTabs>
@@ -317,18 +286,6 @@ function formatVersion(version?: VersionInfo | null): string {
   return version.version ?? version.app ?? '—'
 }
 
-interface OverallInput {
-  health?: { ok?: boolean } | null
-  ready?: ReadyStatus | null
-  jobsFailed: number
-}
-
-function overallHint(input: OverallInput): string {
-  if (!input.health?.ok) return 'API недоступен или возвращает ошибку'
-  if (input.jobsFailed > 0) return `Есть провальные задачи (${input.jobsFailed})`
-  return 'Все системы работают в штатном режиме'
-}
-
 function BirdSummary({ bird }: { bird: import('@/types/api').BirdStatus }) {
   if (!bird.birdc_configured) {
     return (