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/schedule/schedule-jobs-grid.tsx

@@ -1,9 +1,9 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import { Badge } from '@evobgp/ui/components/badge'
-
+import { DataGridMutedCell, 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 { JobRow } from '@/types/api'
@@ -20,25 +20,19 @@ export function ScheduleJobsGrid({
       {
         accessorKey: 'kind',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
-        cell: ({ row }) => <span className="font-medium">{row.original.kind}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.kind} accent="mono" />,
         meta: { headerTitle: 'Вид' },
       },
       {
         accessorKey: 'status',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
-        cell: ({ row }) => (
-          <Badge
-            variant={
-              row.original.status === 'succeeded'
-                ? 'default'
-                : row.original.status === 'failed'
-                  ? 'destructive'
-                  : 'secondary'
-            }
-          >
-            {row.original.status}
-          </Badge>
-        ),
+        cell: ({ row }) => {
+          const finished = row.original.finished_at
+          const hint = finished
+            ? new Date(finished).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
+            : undefined
+          return <StatusBadge status={row.original.status} hint={hint} />
+        },
         meta: { headerTitle: 'Статус' },
       },
       {
@@ -46,11 +40,11 @@ export function ScheduleJobsGrid({
         accessorFn: (row) => row.created_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Создана" />,
         cell: ({ row }) => (
-          <span className="whitespace-nowrap text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {row.original.created_at
               ? new Date(row.original.created_at).toLocaleString('ru-RU')
               : '—'}
-          </span>
+          </DataGridMutedCell>
         ),
         meta: { headerTitle: 'Создана' },
       },
@@ -59,11 +53,11 @@ export function ScheduleJobsGrid({
         accessorFn: (row) => row.finished_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Завершена" />,
         cell: ({ row }) => (
-          <span className="whitespace-nowrap text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {row.original.finished_at
               ? new Date(row.original.finished_at).toLocaleString('ru-RU')
               : '—'}
-          </span>
+          </DataGridMutedCell>
         ),
         meta: { headerTitle: 'Завершена' },
       },