feat: refactor components to enhance UI consistency and functionality

Updated multiple components to improve user interface consistency by replacing traditional badge implementations with the new CategoryBadge and DataGridPrimaryCell components. Enhanced the StatusBadge component to support additional status variants and integrated it across various grids, including AccessApiKeysGrid, DashboardRecentJobsGrid, and OperationsJobsGrid. This refactor streamlines the presentation of data and improves the overall user experience across the application.

apps/web/src/components/monitoring/monitoring-ready-grid.tsx

@@ -2,9 +2,9 @@ import { ColumnDef } from '@tanstack/react-table'
 import { Database, HardDrive, HeartPulse, ListTodo, ShieldCheck } from 'lucide-react'
 import { useMemo } from 'react'
 
-import { Badge } from '@evobgp/ui/components/badge'
-
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
+import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { ReadyStatus } from '@/queries/monitoring'
@@ -20,9 +20,8 @@ interface ReadyCheckRow {
   label: string
   subtitle?: string
   icon: typeof Database
-  ok: boolean
+  status: string
   statusLabel: string
-  variant: 'default' | 'destructive' | 'secondary'
 }
 
 export function MonitoringReadyGrid({
@@ -40,18 +39,16 @@ export function MonitoringReadyGrid({
         label: 'Liveness',
         subtitle: '/v1/health',
         icon: HeartPulse,
-        ok: health?.ok === true,
+        status: health?.ok ? 'ok' : 'error',
         statusLabel: health?.ok ? 'OK' : 'Ошибка',
-        variant: health?.ok ? 'default' : 'destructive',
       },
       {
         id: 'readiness',
         label: 'Readiness',
         subtitle: '/v1/ready',
         icon: ShieldCheck,
-        ok: ready.status === 'ok',
+        status: ready.status === 'ok' ? 'ok' : 'warning',
         statusLabel: ready.status ?? '—',
-        variant: ready.status === 'ok' ? 'default' : 'secondary',
       },
     ]
     for (const key of Object.keys(checks)) {
@@ -61,9 +58,8 @@ export function MonitoringReadyGrid({
         id: key,
         label: key,
         icon: READY_CHECK_ICONS[key] ?? ListTodo,
-        ok,
+        status: ok ? 'ok' : 'error',
         statusLabel: ok ? 'OK' : 'Ошибка',
-        variant: ok ? 'default' : 'destructive',
       })
     }
     return rows
@@ -79,12 +75,10 @@ export function MonitoringReadyGrid({
           return (
             <div className="flex items-center gap-2">
               <Icon className="size-4 shrink-0 text-muted-foreground" />
-              <div>
-                <p className="text-sm font-medium">{row.original.label}</p>
-                {row.original.subtitle ? (
-                  <p className="text-xs text-muted-foreground">{row.original.subtitle}</p>
-                ) : null}
-              </div>
+              <DataGridPrimaryCell
+                title={row.original.label}
+                subtitle={row.original.subtitle}
+              />
             </div>
           )
         },
@@ -95,7 +89,7 @@ export function MonitoringReadyGrid({
         enableSorting: false,
         header: 'Статус',
         cell: ({ row }) => (
-          <Badge variant={row.original.variant}>{row.original.statusLabel}</Badge>
+          <StatusBadge status={row.original.status} label={row.original.statusLabel} />
         ),
         meta: { headerTitle: 'Статус' },
       },