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/access/access-api-keys-grid.tsx

@@ -1,16 +1,17 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { RefreshCw, Trash2 } from 'lucide-react'
 import { useMemo } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
 
-import { DataGridShell } from '@/components/data-grid-shell'
-import { Badge } from '@/components/reui/badge'
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { formatApiKeyDate } from '@/lib/access/api-key-labels'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { ApiKey } from '@/types/api'
 
 export function AccessApiKeysGrid({
@@ -33,16 +34,14 @@ export function AccessApiKeysGrid({
       {
         accessorKey: 'name',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
-        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.name} accent="primary" />,
         meta: { headerTitle: 'Имя' },
       },
       {
         accessorKey: 'role',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Роль" />,
         cell: ({ row }) => (
-          <Badge variant="outline" className="font-mono text-xs">
-            {row.original.role}
-          </Badge>
+          <CategoryBadge className="font-mono text-xs">{row.original.role}</CategoryBadge>
         ),
         meta: { headerTitle: 'Роль' },
       },
@@ -71,9 +70,7 @@ export function AccessApiKeysGrid({
         accessorFn: (row) => row.expires_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Истекает" />,
         cell: ({ row }) => (
-          <span className="text-sm text-muted-foreground">
-            {formatApiKeyDate(row.original.expires_at)}
-          </span>
+          <DataGridMutedCell>{formatApiKeyDate(row.original.expires_at)}</DataGridMutedCell>
         ),
         meta: { headerTitle: 'Истекает' },
       },
@@ -82,9 +79,7 @@ export function AccessApiKeysGrid({
         accessorFn: (row) => row.last_used_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Последнее использование" />,
         cell: ({ row }) => (
-          <span className="text-sm text-muted-foreground">
-            {formatApiKeyDate(row.original.last_used_at)}
-          </span>
+          <DataGridMutedCell>{formatApiKeyDate(row.original.last_used_at)}</DataGridMutedCell>
         ),
         meta: { headerTitle: 'Последнее использование' },
       },
@@ -140,19 +135,23 @@ export function AccessApiKeysGrid({
     [onRevoke, onRotate, revokePending, rotatePending],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    ...createClientDataGridOptions<ApiKey>(),
+    getSearchText: (row) =>
+      `${row.name} ${row.role} ${row.prefix} ${row.revoked_at ? 'отозван' : 'активен'}`,
     getRowId: (row) => row.id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={items.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет ключей"
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск API-ключей…"
     />
   )
 }

apps/web/src/components/badge-tabs.tsx

@@ -0,0 +1,69 @@
+import type { ComponentProps, ReactNode } from 'react'
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import { cn } from '@evobgp/ui/lib/utils'
+
+import { Badge } from '@/components/reui/badge'
+
+export type BadgeTabItem = {
+  value: string
+  label: string
+  count?: number
+  badgeVariant?: ComponentProps<typeof Badge>['variant']
+  icon?: ReactNode
+}
+
+interface BadgeTabsProps {
+  items: BadgeTabItem[]
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  children: ReactNode
+  className?: string
+  listClassName?: string
+  contentClassName?: string
+}
+
+/** Underline tabs with optional badge counts (ReUI c-tabs-7 pattern). */
+export function BadgeTabs({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  children,
+  className,
+  listClassName,
+  contentClassName,
+}: BadgeTabsProps) {
+  return (
+    <Tabs
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+      className={cn('w-full', className)}
+    >
+      <TabsList
+        variant="line"
+        className={cn(
+          'mb-4 w-full justify-start gap-6',
+          listClassName,
+        )}
+      >
+        {items.map((item) => (
+          <TabsTrigger key={item.value} value={item.value} className="gap-2">
+            {item.icon}
+            {item.label}
+            {item.count !== undefined ? (
+              <Badge variant={item.badgeVariant ?? 'primary-light'} size="sm">
+                {item.count}
+              </Badge>
+            ) : null}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      <div className={cn('w-full min-w-0', contentClassName)}>{children}</div>
+    </Tabs>
+  )
+}
+
+export { TabsContent }

apps/web/src/components/category-badge.tsx

@@ -0,0 +1,50 @@
+import type { ComponentProps, ReactNode } from 'react'
+
+import { Badge } from '@/components/reui/badge'
+
+type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>
+
+const TONE_VARIANT: Record<string, BadgeVariant> = {
+  neutral: 'outline',
+  info: 'info-light',
+  warning: 'warning-light',
+  success: 'success-light',
+}
+
+export function ModeBadge({
+  enabled,
+  onLabel = 'включён',
+  offLabel = 'выключен',
+  className,
+}: {
+  enabled: boolean
+  onLabel?: string
+  offLabel?: string
+  className?: string
+}) {
+  return enabled ? (
+    <Badge variant="success-light" size="sm" radius="full" className={className}>
+      {onLabel}
+    </Badge>
+  ) : (
+    <Badge variant="secondary" size="sm" radius="full" className={className}>
+      {offLabel}
+    </Badge>
+  )
+}
+
+export function CategoryBadge({
+  children,
+  tone = 'neutral',
+  className,
+}: {
+  children: ReactNode
+  tone?: keyof typeof TONE_VARIANT
+  className?: string
+}) {
+  return (
+    <Badge variant={TONE_VARIANT[tone]} size="sm" radius="full" className={className}>
+      {children}
+    </Badge>
+  )
+}

apps/web/src/components/dashboard/dashboard-recent-jobs-grid.tsx

@@ -1,21 +1,14 @@
-import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import { DataGridShell } from '@/components/data-grid-shell'
+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 { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { JobRow } from '@/types/api'
 
-function StatusText({ status }: { status: string }) {
-  const cls =
-    status === 'succeeded'
-      ? 'text-success'
-      : status === 'failed' || status === 'cancelled'
-        ? 'text-destructive'
-        : 'text-muted-foreground'
-  return <span className={`text-xs font-medium ${cls}`}>{status}</span>
-}
-
 export function DashboardRecentJobsGrid({
   jobs,
   nameById,
@@ -33,42 +26,52 @@ export function DashboardRecentJobsGrid({
         accessorKey: 'kind',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
         cell: ({ row }) => (
-          <div className="min-w-0">
-            <div className="truncate font-mono text-xs text-muted-foreground">{row.original.kind}</div>
-            {row.original.meta?.module_id ? (
-              <div className="truncate text-xs">
-                {nameById.get(String(row.original.meta.module_id)) ?? ''}
-              </div>
-            ) : null}
-          </div>
+          <DataGridPrimaryCell
+            title={row.original.kind}
+            accent="mono"
+            subtitle={
+              row.original.meta?.module_id
+                ? (nameById.get(String(row.original.meta.module_id)) ?? undefined)
+                : undefined
+            }
+          />
         ),
         meta: { headerTitle: 'Вид' },
       },
       {
         accessorKey: 'status',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
-        cell: ({ row }) => <StatusText status={row.original.status} />,
+        cell: ({ row }) => <StatusBadge status={row.original.status} />,
         meta: { headerTitle: 'Статус' },
       },
     ],
     [nameById],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data,
     columns,
-    getCoreRowModel: getCoreRowModel(),
+    getSearchText: (row) => {
+      const moduleName = row.meta?.module_id
+        ? (nameById.get(String(row.meta.module_id)) ?? '')
+        : ''
+      return `${row.kind} ${row.status} ${moduleName}`
+    },
     getRowId: (row) => row.job_id,
+    pageSize: 8,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={data.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет задач"
       showPagination={false}
       tableLayout={DATA_GRID_DENSE_LAYOUT}
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск задач…"
     />
   )
 }

apps/web/src/components/dashboard/dashboard-recent-revisions-grid.tsx

@@ -1,9 +1,11 @@
-import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { RevisionRow } from '@/types/api'
 
 export function DashboardRecentRevisionsGrid({
@@ -22,9 +24,7 @@ export function DashboardRecentRevisionsGrid({
         accessorFn: (row) => row.id,
         header: ({ column }) => <DataGridColumnHeader column={column} title="ID" />,
         cell: ({ row }) => (
-          <span className="truncate font-mono text-xs text-muted-foreground">
-            {row.original.id.slice(0, 10)}…
-          </span>
+          <DataGridPrimaryCell title={`${row.original.id.slice(0, 10)}…`} accent="mono" />
         ),
         meta: { headerTitle: 'ID' },
       },
@@ -32,9 +32,9 @@ export function DashboardRecentRevisionsGrid({
         accessorKey: 'created_at',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Создана" />,
         cell: ({ row }) => (
-          <span className="text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {new Date(row.original.created_at).toLocaleString('ru-RU')}
-          </span>
+          </DataGridMutedCell>
         ),
         meta: { headerTitle: 'Создана' },
       },
@@ -42,21 +42,25 @@ export function DashboardRecentRevisionsGrid({
     [],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data,
     columns,
-    getCoreRowModel: getCoreRowModel(),
+    getSearchText: (row) => row.id,
     getRowId: (row) => row.id,
+    pageSize: 8,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={data.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет ревизий"
       showPagination={false}
       tableLayout={DATA_GRID_DENSE_LAYOUT}
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск ревизий…"
     />
   )
 }

apps/web/src/components/data-grid-cell.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react'
+
+import { cn } from '@evobgp/ui/lib/utils'
+
+const ACCENT_CLASS = {
+  primary: 'font-medium text-primary',
+  default: 'font-medium text-foreground',
+  mono: 'font-mono text-sm text-primary',
+} as const
+
+export function DataGridPrimaryCell({
+  title,
+  subtitle,
+  accent = 'default',
+  className,
+}: {
+  title: ReactNode
+  subtitle?: ReactNode
+  accent?: keyof typeof ACCENT_CLASS
+  className?: string
+}) {
+  return (
+    <div className={cn('flex min-w-0 flex-col gap-0.5', className)}>
+      <span className={cn('truncate', ACCENT_CLASS[accent])}>{title}</span>
+      {subtitle ? (
+        <span className="truncate text-xs text-muted-foreground">{subtitle}</span>
+      ) : null}
+    </div>
+  )
+}
+
+export function DataGridMutedCell({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <span className={cn('whitespace-nowrap text-xs text-muted-foreground', className)}>
+      {children}
+    </span>
+  )
+}

apps/web/src/components/data-grid-shell.tsx

@@ -3,6 +3,7 @@ import type { Table } from '@tanstack/react-table'
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
 
+import { DataGridToolbar } from '@/components/data-grid-toolbar'
 import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
 import { DataGrid, DataGridContainer } from '@/components/reui/data-grid/data-grid'
 import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
@@ -75,3 +76,36 @@ export function DataGridCard({ title, description, actions, children, className
     </Card>
   )
 }
+
+interface DataGridSectionProps<TData extends object> extends DataGridShellProps<TData> {
+  searchValue: string
+  onSearchChange: (value: string) => void
+  searchPlaceholder?: string
+  toolbarFilters?: ReactNode
+  toolbarActions?: ReactNode
+  beforeGrid?: ReactNode
+}
+
+export function DataGridSection<TData extends object>({
+  searchValue,
+  onSearchChange,
+  searchPlaceholder,
+  toolbarFilters,
+  toolbarActions,
+  beforeGrid,
+  ...shellProps
+}: DataGridSectionProps<TData>) {
+  return (
+    <>
+      <DataGridToolbar
+        searchValue={searchValue}
+        onSearchChange={onSearchChange}
+        searchPlaceholder={searchPlaceholder}
+        filters={toolbarFilters}
+        actions={toolbarActions}
+      />
+      {beforeGrid}
+      <DataGridShell {...shellProps} />
+    </>
+  )
+}

apps/web/src/components/data-grid-toolbar.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react'
+
+import { Field } from '@evobgp/ui/components/field'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from '@evobgp/ui/components/input-group'
+import { ListFilterIcon, SearchIcon, XIcon } from 'lucide-react'
+
+interface DataGridToolbarProps {
+  searchValue: string
+  onSearchChange: (value: string) => void
+  searchPlaceholder?: string
+  filters?: ReactNode
+  actions?: ReactNode
+  className?: string
+}
+
+/** Search row for data grids (ReUI c-input-group-37 pattern). */
+export function DataGridToolbar({
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = 'Поиск…',
+  filters,
+  actions,
+  className,
+}: DataGridToolbarProps) {
+  return (
+    <div className={`flex flex-wrap items-center gap-2 border-b px-3 py-3 ${className ?? ''}`}>
+      <Field className="min-w-[200px] flex-1">
+        <InputGroup>
+          <InputGroupAddon align="inline-start">
+            <SearchIcon aria-hidden="true" />
+          </InputGroupAddon>
+          <InputGroupInput
+            placeholder={searchPlaceholder}
+            value={searchValue}
+            onChange={(event) => onSearchChange(event.target.value)}
+            aria-label={searchPlaceholder}
+          />
+          <InputGroupAddon align="inline-end" className="gap-1">
+            {searchValue.length > 0 ? (
+              <InputGroupButton
+                aria-label="Очистить поиск"
+                size="icon-xs"
+                variant="ghost"
+                onClick={() => onSearchChange('')}
+              >
+                <XIcon aria-hidden="true" />
+              </InputGroupButton>
+            ) : null}
+            {filters ? (
+              filters
+            ) : (
+              <InputGroupButton
+                variant="ghost"
+                size="xs"
+                className="pointer-events-none gap-1.5 opacity-0"
+                aria-hidden="true"
+                tabIndex={-1}
+              >
+                <ListFilterIcon className="size-3.5" />
+              </InputGroupButton>
+            )}
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+    </div>
+  )
+}

apps/web/src/components/directories/directories-communities-grid.tsx

@@ -1,11 +1,11 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import { Badge } from '@evobgp/ui/components/badge'
-
-import { DataGridShell } from '@/components/data-grid-shell'
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { BgpCommunity } from '@/types/api'
 
 export function DirectoriesCommunitiesGrid({
@@ -20,39 +20,44 @@ export function DirectoriesCommunitiesGrid({
       {
         accessorKey: 'title',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
-        cell: ({ row }) => <span className="font-medium">{row.original.title}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.title} accent="primary" />,
         meta: { headerTitle: 'Название' },
       },
       {
         accessorKey: 'community',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Значение" />,
-        cell: ({ row }) => <span className="font-mono text-xs">{row.original.community}</span>,
+        cell: ({ row }) => (
+          <DataGridPrimaryCell title={row.original.community} accent="mono" />
+        ),
         meta: { headerTitle: 'Значение' },
       },
       {
         id: 'type',
         enableSorting: false,
         header: 'Тип',
-        cell: () => <Badge variant="outline">community</Badge>,
+        cell: () => <CategoryBadge>community</CategoryBadge>,
         meta: { headerTitle: 'Тип' },
       },
     ],
     [],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    ...createClientDataGridOptions<BgpCommunity>(),
+    getSearchText: (row) => `${row.title} ${row.community}`,
     getRowId: (row) => row.id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={items.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет сообществ"
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск сообществ…"
     />
   )
 }

apps/web/src/components/directories/directories-doh-grid.tsx

@@ -1,11 +1,11 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import { Badge } from '@evobgp/ui/components/badge'
-
-import { DataGridShell } from '@/components/data-grid-shell'
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { DohProfile } from '@/types/api'
 
 export function DirectoriesDohGrid({
@@ -21,39 +21,48 @@ export function DirectoriesDohGrid({
         id: 'name',
         accessorFn: (row) => row.name ?? row.url,
         header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
-        cell: ({ row }) => <span className="font-medium">{row.original.name ?? row.original.url}</span>,
+        cell: ({ row }) => (
+          <DataGridPrimaryCell
+            title={row.original.name ?? row.original.url}
+            subtitle={row.original.name ? row.original.url : undefined}
+            accent="primary"
+          />
+        ),
         meta: { headerTitle: 'Название' },
       },
       {
         accessorKey: 'url',
         header: ({ column }) => <DataGridColumnHeader column={column} title="URL" />,
-        cell: ({ row }) => <span className="font-mono text-xs">{row.original.url}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.url} accent="mono" />,
         meta: { headerTitle: 'URL' },
       },
       {
         id: 'default',
         enableSorting: false,
         header: 'По умолчанию',
-        cell: () => <Badge variant="outline">—</Badge>,
+        cell: () => <CategoryBadge>—</CategoryBadge>,
         meta: { headerTitle: 'По умолчанию' },
       },
     ],
     [],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    ...createClientDataGridOptions<DohProfile>(),
+    getSearchText: (row) => `${row.name ?? ''} ${row.url}`,
     getRowId: (row) => row.id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={items.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет DoH профилей"
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск DoH профилей…"
     />
   )
 }

apps/web/src/components/examples/c-input-group-37.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import { useState } from "react"
+
+import { Checkbox } from "@evobgp/ui/components/checkbox"
+import { Field } from "@evobgp/ui/components/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@evobgp/ui/components/input-group"
+import { Label } from "@evobgp/ui/components/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@evobgp/ui/components/popover"
+import { SearchIcon, XIcon, ListFilterIcon } from "lucide-react"
+
+const statuses = ["Pending", "Shipped", "Cancelled"] as const
+
+type Status = (typeof statuses)[number]
+
+function toggleStatus(values: Status[], value: Status) {
+  return values.includes(value)
+    ? values.filter((item) => item !== value)
+    : [...values, value]
+}
+
+export function Pattern() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedStatuses, setSelectedStatuses] = useState<Status[]>([])
+
+  return (
+    <Field className="max-w-sm">
+      <InputGroup>
+        <InputGroupAddon align="inline-start">
+          <SearchIcon aria-hidden="true" />
+        </InputGroupAddon>
+
+        <InputGroupInput
+          placeholder="Search orders..."
+          value={searchQuery}
+          onChange={(event) => setSearchQuery(event.target.value)}
+        />
+
+        <InputGroupAddon align="inline-end" className="gap-1">
+          {searchQuery.length > 0 ? (
+            <InputGroupButton
+              aria-label="Clear search"
+              size="icon-xs"
+              variant="ghost"
+              onClick={() => setSearchQuery("")}
+            >
+              <XIcon aria-hidden="true" />
+            </InputGroupButton>
+          ) : null}
+
+          <Popover>
+            <PopoverTrigger
+              render={
+                <InputGroupButton
+                  variant="ghost"
+                  size="xs"
+                  className="gap-1.5"
+                  aria-label="Filter order status"
+                />
+              }
+            >
+              <ListFilterIcon className="size-3.5" aria-hidden="true" />
+              Status
+              {selectedStatuses.length > 0 ? (
+                <span className="text-muted-foreground tabular-nums">
+                  {selectedStatuses.length}
+                </span>
+              ) : null}
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-40 p-3">
+              <div className="flex flex-col gap-2">
+                {statuses.map((status) => (
+                  <div key={status} className="flex items-center gap-2.5">
+                    <Checkbox
+                      id={`order-status-${status}`}
+                      checked={selectedStatuses.includes(status)}
+                      onCheckedChange={() =>
+                        setSelectedStatuses((previous) =>
+                          toggleStatus(previous, status)
+                        )
+                      }
+                    />
+                    <Label
+                      htmlFor={`order-status-${status}`}
+                      className="text-sm font-normal"
+                    >
+                      {status}
+                    </Label>
+                  </div>
+                ))}
+              </div>
+            </PopoverContent>
+          </Popover>
+        </InputGroupAddon>
+      </InputGroup>
+    </Field>
+  )
+}

apps/web/src/components/examples/c-tabs-6.tsx

@@ -0,0 +1,46 @@
+import { Card, CardContent } from "@evobgp/ui/components/card"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@evobgp/ui/components/tabs"
+import { LayoutDashboardIcon, BarChart3Icon, SettingsIcon } from "lucide-react"
+
+export function Pattern() {
+  return (
+    <div className="flex w-full max-w-md flex-col gap-6">
+      <Tabs defaultValue="overview">
+        <TabsList className="w-full">
+          <TabsTrigger value="overview">
+            <LayoutDashboardIcon className="size-4" />
+            Overview
+          </TabsTrigger>
+          <TabsTrigger value="analytics">
+            <BarChart3Icon className="size-4" />
+            Analytics
+          </TabsTrigger>
+          <TabsTrigger value="settings">
+            <SettingsIcon className="size-4" />
+            Settings
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">
+          <Card>
+            <CardContent>Overview dashboard content goes here.</CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="analytics">
+          <Card>
+            <CardContent>Analytics charts and metrics.</CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="settings">
+          <Card>
+            <CardContent>Application settings and preferences.</CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

apps/web/src/components/examples/c-tabs-7.tsx

@@ -0,0 +1,61 @@
+import { Badge } from "@/components/reui/badge"
+
+import { Card, CardContent } from "@evobgp/ui/components/card"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@evobgp/ui/components/tabs"
+
+export function Pattern() {
+  return (
+    <div className="flex w-full max-w-md flex-col gap-6">
+      <Tabs defaultValue="inbox">
+        <TabsList variant="line" className="mb-3.5 w-full">
+          <TabsTrigger value="inbox" className="gap-2">
+            Inbox
+            <Badge variant="primary-light" size="sm">
+              12
+            </Badge>
+          </TabsTrigger>
+          <TabsTrigger value="drafts" className="gap-2">
+            Drafts
+            <Badge variant="info-light" size="sm">
+              3
+            </Badge>
+          </TabsTrigger>
+          <TabsTrigger value="sent" className="gap-2">
+            Sent
+          </TabsTrigger>
+          <TabsTrigger value="spam" className="gap-2">
+            Spam
+            <Badge variant="destructive-light" size="sm">
+              24
+            </Badge>
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="inbox">
+          <Card>
+            <CardContent>12 unread messages in your inbox.</CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="drafts">
+          <Card>
+            <CardContent>3 drafts waiting to be sent.</CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="sent">
+          <Card>
+            <CardContent>All sent messages appear here.</CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="spam">
+          <Card>
+            <CardContent>24 spam messages detected.</CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

apps/web/src/components/firewall/firewall-clients-grid.tsx

@@ -1,13 +1,14 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
 
-import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { FirewallClient } from '@/types/api'
 
 function formatPacketCount(value?: number | null): string | null {
@@ -42,12 +43,11 @@ export function FirewallClientsGrid({
         accessorKey: 'name',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
         cell: ({ row }) => (
-          <div>
-            <div className="font-medium">{row.original.name}</div>
-            <div className="text-muted-foreground text-xs">
-              {row.original.hostname || row.original.token_prefix}
-            </div>
-          </div>
+          <DataGridPrimaryCell
+            title={row.original.name}
+            subtitle={row.original.hostname || row.original.token_prefix}
+            accent="primary"
+          />
         ),
         meta: { headerTitle: 'Имя' },
       },
@@ -62,7 +62,7 @@ export function FirewallClientsGrid({
         accessorFn: (row) => row.last_seen_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Last seen" />,
         cell: ({ row }) => (
-          <span className="text-xs">{row.original.last_seen_at?.slice(0, 19) ?? '—'}</span>
+          <DataGridMutedCell>{row.original.last_seen_at?.slice(0, 19) ?? '—'}</DataGridMutedCell>
         ),
         sortingFn: (a, b) => {
           const av = a.original.last_seen_at ?? ''
@@ -173,19 +173,23 @@ export function FirewallClientsGrid({
     [approvePending, onApprove, onReject, rejectPending],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: clients,
     columns,
-    ...createClientDataGridOptions<FirewallClient>(),
+    getSearchText: (row) =>
+      `${row.name} ${row.hostname ?? ''} ${row.token_prefix} ${row.status ?? ''}`,
     getRowId: (row) => row.id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={clients.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage={emptyTitle}
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск клиентов…"
     />
   )
 }

apps/web/src/components/firewall/firewall-rules-grid.tsx

@@ -1,13 +1,13 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
 
-import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import { communityLabel } from '@/lib/modules/helpers'
 import type { BgpCommunity, FirewallRule } from '@/types/api'
 
@@ -100,19 +100,23 @@ export function FirewallRulesGrid({
     [communities, deletePending, onDelete],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: rules,
     columns,
-    ...createClientDataGridOptions<FirewallRule>(),
+    getSearchText: (row) =>
+      `${row.priority} ${row.action} ${row.comment ?? ''} ${communityLabel(row.community_id, communities)}`,
     getRowId: (row) => row.id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={rules.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage={emptyTitle}
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск правил…"
     />
   )
 }

apps/web/src/components/modules/module-entries-grid.tsx

@@ -1,14 +1,16 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { Pencil, Trash2 } from 'lucide-react'
 import { useMemo } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
 
-import { DataGridShell } from '@/components/data-grid-shell'
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { formatDateTime } from '@/lib/modules/display'
 import { communityLabel } from '@/lib/modules/helpers'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type {
   AsEntry,
   BgpCommunity,
@@ -68,7 +70,7 @@ export function ModuleEntriesGrid({
             <DataGridColumnHeader column={column as never} title="FQDN" />
           ),
           cell: ({ row }: { row: { original: DomainEntry } }) => (
-            <span className="font-mono text-sm">{row.original.fqdn}</span>
+            <DataGridPrimaryCell title={row.original.fqdn} accent="mono" />
           ),
         },
         {
@@ -102,7 +104,7 @@ export function ModuleEntriesGrid({
             <DataGridColumnHeader column={column as never} title="Префикс (CIDR)" />
           ),
           cell: ({ row }: { row: { original: IpRangeEntry } }) => (
-            <span className="font-mono text-sm">{row.original.prefix}</span>
+            <DataGridPrimaryCell title={row.original.prefix} accent="mono" />
           ),
         },
         {
@@ -136,14 +138,14 @@ export function ModuleEntriesGrid({
             <DataGridColumnHeader column={column as never} title="URL" />
           ),
           cell: ({ row }: { row: { original: CdnSource } }) => (
-            <span className="max-w-xs truncate font-mono text-xs">{row.original.url}</span>
+            <DataGridPrimaryCell title={row.original.url} accent="mono" className="max-w-xs" />
           ),
         },
         {
           accessorKey: 'source_kind',
           header: 'Тип',
           cell: ({ row }: { row: { original: CdnSource } }) => (
-            <span className="text-sm">{row.original.source_kind}</span>
+            <CategoryBadge>{row.original.source_kind}</CategoryBadge>
           ),
         },
         {
@@ -162,9 +164,7 @@ export function ModuleEntriesGrid({
             <DataGridColumnHeader column={column as never} title="Обновлено" />
           ),
           cell: ({ row }: { row: { original: CdnSource } }) => (
-            <span className="text-xs text-muted-foreground">
-              {formatDateTime(row.original.last_refreshed_at)}
-            </span>
+            <DataGridMutedCell>{formatDateTime(row.original.last_refreshed_at)}</DataGridMutedCell>
           ),
         },
         {
@@ -231,19 +231,27 @@ export function ModuleEntriesGrid({
   type RowType = DomainEntry | IpRangeEntry | CdnSource | AsEntry
   const data = rows as unknown as RowType[]
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data,
     columns: columns as ColumnDef<RowType>[],
-    ...createClientDataGridOptions<RowType>(),
+    getSearchText: (row) => {
+      const r = row as Record<string, unknown>
+      return Object.values(r)
+        .filter((v) => typeof v === 'string' || typeof v === 'number')
+        .join(' ')
+    },
     getRowId: (row) => row.id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={data.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет записей"
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск записей…"
     />
   )
 }

apps/web/src/components/modules/modules-list-grid.tsx

@@ -1,13 +1,13 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useNavigate } from '@tanstack/react-router'
 import { Boxes } from 'lucide-react'
 import { useMemo } from 'react'
 
-import { DataGridShell } from '@/components/data-grid-shell'
-import { Badge } from '@/components/reui/badge'
+import { CategoryBadge, ModeBadge } from '@/components/category-badge'
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { TruncatedText } from '@/components/truncated-text'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { ModuleRow } from '@/types/api'
 
 export function ModulesListGrid({
@@ -26,8 +26,8 @@ export function ModulesListGrid({
         header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
-            <Boxes className="size-4 text-muted-foreground" />
-            <TruncatedText className="max-w-[280px] font-medium">{row.original.name}</TruncatedText>
+            <Boxes className="size-4 shrink-0 text-muted-foreground" />
+            <DataGridPrimaryCell title={row.original.name} accent="primary" className="max-w-[280px]" />
           </div>
         ),
         meta: { headerTitle: 'Название' },
@@ -35,7 +35,7 @@ export function ModulesListGrid({
       {
         accessorKey: 'type',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Тип" />,
-        cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
+        cell: ({ row }) => <CategoryBadge>{row.original.type}</CategoryBadge>,
         meta: { headerTitle: 'Тип' },
       },
       {
@@ -50,12 +50,7 @@ export function ModulesListGrid({
         id: 'enabled',
         accessorFn: (row) => (row.enabled ? 'enabled' : 'disabled'),
         header: ({ column }) => <DataGridColumnHeader column={column} title="Состояние" />,
-        cell: ({ row }) =>
-          row.original.enabled ? (
-            <Badge variant="success">включён</Badge>
-          ) : (
-            <Badge variant="secondary">выключен</Badge>
-          ),
+        cell: ({ row }) => <ModeBadge enabled={row.original.enabled} />,
         meta: { headerTitle: 'Состояние' },
       },
       {
@@ -63,11 +58,11 @@ export function ModulesListGrid({
         accessorFn: (row) => row.last_refreshed_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Обновлено" />,
         cell: ({ row }) => (
-          <span className="text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {row.original.last_refreshed_at
               ? new Date(row.original.last_refreshed_at).toLocaleString('ru-RU')
               : '—'}
-          </span>
+          </DataGridMutedCell>
         ),
         sortingFn: (a, b) => {
           const av = a.original.last_refreshed_at ?? ''
@@ -80,19 +75,22 @@ export function ModulesListGrid({
     [],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    ...createClientDataGridOptions<ModuleRow>(),
+    getSearchText: (row) => `${row.name} ${row.type} ${row.enabled ? 'включён' : 'выключен'}`,
     getRowId: (row) => row.id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={items.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет модулей"
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск модулей…"
       onRowClick={(row) => void navigate({ to: '/modules/$moduleId', params: { moduleId: row.id } })}
     />
   )

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

@@ -1,12 +1,12 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+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 { DataGridShell } from '@/components/data-grid-shell'
+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 { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { ReadyStatus } from '@/queries/monitoring'
 
 const READY_CHECK_ICONS: Record<string, typeof Database> = {
@@ -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: 'Статус' },
       },
@@ -103,21 +97,23 @@ export function MonitoringReadyGrid({
     [],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data,
     columns,
-    ...createClientDataGridOptions<ReadyCheckRow>({
-      initialState: { pagination: { pageSize: 20 } },
-    }),
+    getSearchText: (row) => `${row.label} ${row.subtitle ?? ''} ${row.statusLabel}`,
     getRowId: (row) => row.id,
+    pageSize: 20,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={data.length}
+      recordCount={filteredCount}
       showPagination={false}
       emptyMessage="Нет проверок"
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск проверок…"
     />
   )
 }

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

@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import { Plus } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { DataGridCard } from '@/components/data-grid-shell'
+import { NetworkPeersGrid } from '@/components/network/network-peers-grid'
+import { PeerFormDialog } from '@/components/network/peer-form-dialog'
+import { QueryState } from '@/components/query-state'
+import { TableSkeleton } from '@/components/skeletons'
+import type { PeerRow, SpeakerRow } from '@/types/api'
+
+interface NetworkPeersCardProps {
+  items: PeerRow[]
+  speakers: SpeakerRow[]
+  isLoading: boolean
+  isError: boolean
+  error: unknown
+  onRetry: () => void
+}
+
+export function NetworkPeersCard({
+  items,
+  speakers,
+  isLoading,
+  isError,
+  error,
+  onRetry,
+}: NetworkPeersCardProps) {
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  return (
+    <>
+      <DataGridCard
+        title="Пиры"
+        description="BGP-соседи и привязка к спикерам"
+        actions={
+          <Button size="sm" type="button" onClick={() => setDialogOpen(true)}>
+            <Plus />
+            Добавить пира
+          </Button>
+        }
+      >
+        <QueryState
+          data={items}
+          isLoading={isLoading}
+          isError={isError}
+          error={error}
+          empty={items.length === 0}
+          emptyTitle="Нет пиров"
+          emptyDescription="Добавьте первого BGP-соседа для установки сессии."
+          skeleton={<TableSkeleton rows={6} cols={4} />}
+          onRetry={onRetry}
+        >
+          {(data) => (
+            <NetworkPeersGrid items={data} isLoading={isLoading && data.length > 0} />
+          )}
+        </QueryState>
+      </DataGridCard>
+
+      <PeerFormDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        speakers={speakers}
+      />
+    </>
+  )
+}

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

@@ -1,11 +1,12 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import { DataGridShell } from '@/components/data-grid-shell'
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
-import { Badge } from '@/components/reui/badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { PeerRow } from '@/types/api'
 
 export function NetworkPeersGrid({
@@ -22,14 +23,20 @@ export function NetworkPeersGrid({
         accessorFn: (row) => row.name ?? row.neighbor,
         header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
         cell: ({ row }) => (
-          <span className="font-medium">{row.original.name ?? row.original.neighbor}</span>
+          <DataGridPrimaryCell
+            title={row.original.name ?? row.original.neighbor}
+            subtitle={row.original.name ? row.original.neighbor : undefined}
+            accent="primary"
+          />
         ),
         meta: { headerTitle: 'Имя' },
       },
       {
         accessorKey: 'neighbor',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Neighbor" />,
-        cell: ({ row }) => <span className="font-mono text-xs">{row.original.neighbor}</span>,
+        cell: ({ row }) => (
+          <DataGridPrimaryCell title={row.original.neighbor} accent="mono" />
+        ),
         meta: { headerTitle: 'Neighbor' },
       },
       {
@@ -47,9 +54,7 @@ export function NetworkPeersGrid({
           <div className="flex items-center gap-1">
             <StatusBadge status={row.original.session_state} />
             {row.original.session_mismatch ? (
-              <Badge variant="warning" className="ml-1">
-                mismatch
-              </Badge>
+              <CategoryBadge tone="warning">mismatch</CategoryBadge>
             ) : null}
           </div>
         ),
@@ -59,19 +64,23 @@ export function NetworkPeersGrid({
     [],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    ...createClientDataGridOptions<PeerRow>(),
+    getSearchText: (row) =>
+      `${row.name ?? ''} ${row.neighbor} ${row.remote_asn ?? ''} ${row.session_state ?? ''}`,
     getRowId: (row) => row.id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={items.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет пиров"
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск пиров…"
     />
   )
 }

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

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+import { Plus } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { DataGridCard } from '@/components/data-grid-shell'
+import { NetworkSpeakersGrid } from '@/components/network/network-speakers-grid'
+import { SpeakerFormDialog } from '@/components/network/speaker-form-dialog'
+import { QueryState } from '@/components/query-state'
+import { TableSkeleton } from '@/components/skeletons'
+import type { SpeakerRow } from '@/types/api'
+
+interface NetworkSpeakersCardProps {
+  items: SpeakerRow[]
+  isLoading: boolean
+  isError: boolean
+  error: unknown
+  onRetry: () => void
+}
+
+export function NetworkSpeakersCard({
+  items,
+  isLoading,
+  isError,
+  error,
+  onRetry,
+}: NetworkSpeakersCardProps) {
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  return (
+    <>
+      <DataGridCard
+        title="Спикеры"
+        description="BIRD-агенты на нодах tenant"
+        actions={
+          <Button size="sm" type="button" onClick={() => setDialogOpen(true)}>
+            <Plus />
+            Добавить спикера
+          </Button>
+        }
+      >
+        <QueryState
+          data={items}
+          isLoading={isLoading}
+          isError={isError}
+          error={error}
+          empty={items.length === 0}
+          emptyTitle="Нет спикеров"
+          emptyDescription="Добавьте первого BIRD-агента на ноде."
+          skeleton={<TableSkeleton rows={6} cols={4} />}
+          onRetry={onRetry}
+        >
+          {(data) => (
+            <NetworkSpeakersGrid items={data} isLoading={isLoading && data.length > 0} />
+          )}
+        </QueryState>
+      </DataGridCard>
+
+      <SpeakerFormDialog open={dialogOpen} onOpenChange={setDialogOpen} />
+    </>
+  )
+}

apps/web/src/components/network/network-speakers-grid.tsx

@@ -1,11 +1,13 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import { DataGridShell } from '@/components/data-grid-shell'
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
 import { Badge } from '@/components/reui/badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { SpeakerRow } from '@/types/api'
 
 export function NetworkSpeakersGrid({
@@ -20,13 +22,15 @@ export function NetworkSpeakersGrid({
       {
         accessorKey: 'endpoint',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Endpoint" />,
-        cell: ({ row }) => <span className="font-mono text-xs">{row.original.endpoint}</span>,
+        cell: ({ row }) => (
+          <DataGridPrimaryCell title={row.original.endpoint} accent="mono" />
+        ),
         meta: { headerTitle: 'Endpoint' },
       },
       {
         accessorKey: 'role',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Роль" />,
-        cell: ({ row }) => <Badge variant="outline">{row.original.role}</Badge>,
+        cell: ({ row }) => <CategoryBadge>{row.original.role}</CategoryBadge>,
         meta: { headerTitle: 'Роль' },
       },
       {
@@ -37,7 +41,7 @@ export function NetworkSpeakersGrid({
           const live = row.original.live
           if (live?.agent_ok === true) return <StatusBadge status="ok" label="online" />
           if (live?.agent_ok === false) return <StatusBadge status="error" label="offline" />
-          return <Badge variant="outline">—</Badge>
+          return <Badge variant="outline" size="sm" radius="full">—</Badge>
         },
         meta: { headerTitle: 'Agent' },
       },
@@ -60,19 +64,23 @@ export function NetworkSpeakersGrid({
     [],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    ...createClientDataGridOptions<SpeakerRow>(),
+    getSearchText: (row) =>
+      `${row.endpoint} ${row.role} ${row.agent_domain ?? ''} ${row.node_ipv4 ?? ''}`,
     getRowId: (row) => row.id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={items.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет спикеров"
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск спикеров…"
     />
   )
 }

apps/web/src/components/network/peer-form-dialog.tsx

@@ -0,0 +1,175 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { Button } from '@evobgp/ui/components/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@evobgp/ui/components/dialog'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+import { Checkbox } from '@evobgp/ui/components/checkbox'
+
+import { LoadingButton } from '@/components/loading-button'
+import { SelectField } from '@/components/select-field'
+import { useCreatePeerMutation, useUpdatePeerMutation } from '@/queries/network'
+import type { BgpPeerCreate, PeerRow, SpeakerRow } from '@/types/api'
+
+interface PeerFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  speakers: SpeakerRow[]
+  editTarget?: PeerRow | null
+}
+
+function speakerLabel(s: SpeakerRow): string {
+  if (s.role === 'master') {
+    const host = s.agent_domain ?? s.endpoint
+    return host ? `CP · ${host}` : 'CP (master)'
+  }
+  return s.agent_domain ?? s.endpoint ?? `${s.id.slice(0, 8)}…`
+}
+
+export function PeerFormDialog({
+  open,
+  onOpenChange,
+  speakers,
+  editTarget = null,
+}: PeerFormDialogProps) {
+  const createMutation = useCreatePeerMutation()
+  const updateMutation = useUpdatePeerMutation()
+  const saving = createMutation.isPending || updateMutation.isPending
+
+  const [name, setName] = useState('')
+  const [neighbor, setNeighbor] = useState('')
+  const [remoteAsn, setRemoteAsn] = useState('')
+  const [bgpSpeakerId, setBgpSpeakerId] = useState<string | null>(null)
+  const [enabled, setEnabled] = useState(true)
+
+  useEffect(() => {
+    if (!open) return
+    if (editTarget) {
+      setName(editTarget.name ?? '')
+      setNeighbor(editTarget.neighbor)
+      setRemoteAsn(String(editTarget.remote_asn ?? ''))
+      setBgpSpeakerId(editTarget.bgp_speaker_id ?? null)
+      setEnabled(editTarget.enabled !== false)
+    } else {
+      setName('')
+      setNeighbor('')
+      setRemoteAsn('')
+      setBgpSpeakerId(null)
+      setEnabled(true)
+    }
+  }, [editTarget, open])
+
+  const speakerItems = [
+    { value: '', label: 'Все спикеры' },
+    ...speakers.map((s) => ({ value: s.id, label: speakerLabel(s) })),
+  ]
+
+  async function save() {
+    if (!neighbor.trim()) {
+      toast.error('Укажите адрес соседа')
+      return
+    }
+    const asn = Number(remoteAsn)
+    if (!asn || asn <= 0) {
+      toast.error('Remote ASN должен быть больше 0')
+      return
+    }
+    const body: BgpPeerCreate = {
+      name: name.trim() || undefined,
+      neighbor: neighbor.trim(),
+      remote_asn: asn,
+      bgp_speaker_id: bgpSpeakerId || null,
+      enabled,
+    }
+    try {
+      if (editTarget) {
+        await updateMutation.mutateAsync({ id: editTarget.id, body })
+      } else {
+        await createMutation.mutateAsync(body)
+      }
+      onOpenChange(false)
+    } catch {
+      // toast in mutation
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{editTarget ? 'Редактировать пира' : 'Новый пир'}</DialogTitle>
+          <DialogDescription>BGP-сосед для установки сессии</DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-4 py-2">
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="peer-name">Имя пира (опционально)</Label>
+            <Input
+              id="peer-name"
+              placeholder="Core-RTR-1"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="peer-neighbor">Адрес соседа</Label>
+            <Input
+              id="peer-neighbor"
+              placeholder="192.0.2.1"
+              value={neighbor}
+              onChange={(e) => setNeighbor(e.target.value)}
+              required
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="peer-asn">Remote ASN</Label>
+            <Input
+              id="peer-asn"
+              type="number"
+              placeholder="65000"
+              value={remoteAsn}
+              onChange={(e) => setRemoteAsn(e.target.value)}
+              required
+            />
+          </div>
+          <SelectField
+            id="peer-speaker"
+            label="Спикер (опционально)"
+            items={speakerItems}
+            value={bgpSpeakerId ?? ''}
+            onValueChange={(v) => setBgpSpeakerId(v || null)}
+            placeholder="Все спикеры"
+          />
+          <div className="flex flex-row items-center justify-between gap-4 rounded-lg border border-border bg-muted/30 p-3">
+            <div className="grid min-w-0 flex-1 gap-1 pr-2">
+              <Label htmlFor="peer-enabled">Включён</Label>
+              <p className="text-xs text-muted-foreground">
+                Выключенный пир не попадает в конфиг BIRD до следующей ревизии.
+              </p>
+            </div>
+            <Checkbox
+              id="peer-enabled"
+              checked={enabled}
+              onCheckedChange={(v) => setEnabled(v === true)}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
+            Отмена
+          </Button>
+          <LoadingButton type="button" loading={saving} onClick={save}>
+            {editTarget ? 'Сохранить' : 'Создать'}
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

apps/web/src/components/network/speaker-form-dialog.tsx

@@ -0,0 +1,169 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { Button } from '@evobgp/ui/components/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@evobgp/ui/components/dialog'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+
+import { LoadingButton } from '@/components/loading-button'
+import { SelectField } from '@/components/select-field'
+import { useCreateSpeakerMutation } from '@/queries/network'
+import type { BgpSpeakerCreate } from '@/types/api'
+
+interface SpeakerFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+function parseIpv4FromEndpoint(ep: string): string {
+  try {
+    const u = ep.includes('://') ? new URL(ep) : new URL(`https://${ep}`)
+    const host = u.hostname
+    if (/^\d{1,3}(\.\d{1,3}){3}$/.test(host)) return host
+  } catch {
+    /* ignore */
+  }
+  return ''
+}
+
+function buildMetaJson(agentDomain: string, nodeIpv4: string, bgpSource: string): string {
+  const meta: Record<string, string> = {}
+  if (agentDomain.trim()) meta.agent_domain = agentDomain.trim()
+  if (nodeIpv4.trim()) meta.node_ipv4 = nodeIpv4.trim()
+  if (bgpSource.trim()) meta.bird_bgp_source_ipv4 = bgpSource.trim()
+  return JSON.stringify(meta)
+}
+
+export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps) {
+  const createMutation = useCreateSpeakerMutation()
+
+  const [endpoint, setEndpoint] = useState('')
+  const [role, setRole] = useState('replica')
+  const [agentDomain, setAgentDomain] = useState('')
+  const [nodeIpv4, setNodeIpv4] = useState('')
+  const [bgpSourceIpv4, setBgpSourceIpv4] = useState('')
+  const [bgpSourceManual, setBgpSourceManual] = useState(false)
+
+  useEffect(() => {
+    if (!open) return
+    setEndpoint('')
+    setRole('replica')
+    setAgentDomain('')
+    setNodeIpv4('')
+    setBgpSourceIpv4('')
+    setBgpSourceManual(false)
+  }, [open])
+
+  function handleEndpointChange(value: string) {
+    setEndpoint(value)
+    const ip = parseIpv4FromEndpoint(value)
+    if (ip && !nodeIpv4) {
+      handleNodeIpv4Change(ip)
+    }
+  }
+
+  function handleNodeIpv4Change(value: string) {
+    setNodeIpv4(value)
+    if (!bgpSourceManual) {
+      setBgpSourceIpv4(value)
+    }
+  }
+
+  async function save() {
+    const ep =
+      endpoint.trim() || (agentDomain.trim() ? `https://${agentDomain.trim()}` : '')
+    if (!ep) {
+      toast.error('Укажите endpoint или agent domain')
+      return
+    }
+    const body: BgpSpeakerCreate = {
+      endpoint: ep,
+      role: role.trim() || 'replica',
+      meta_json: buildMetaJson(agentDomain, nodeIpv4, bgpSourceIpv4),
+    }
+    try {
+      await createMutation.mutateAsync(body)
+      onOpenChange(false)
+    } catch {
+      // toast in mutation
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Новый спикер</DialogTitle>
+          <DialogDescription>BIRD-агент на ноде реплики или control plane</DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-4 py-2">
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="speaker-endpoint">Endpoint</Label>
+            <Input
+              id="speaker-endpoint"
+              placeholder="https://node.example.com:8443"
+              value={endpoint}
+              onChange={(e) => handleEndpointChange(e.target.value)}
+            />
+          </div>
+          <SelectField
+            id="speaker-role"
+            label="Роль"
+            items={[
+              { value: 'replica', label: 'replica' },
+              { value: 'master', label: 'master (CP)' },
+            ]}
+            value={role}
+            onValueChange={(v) => setRole(v ?? 'replica')}
+          />
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="speaker-agent-domain">Agent domain</Label>
+            <Input
+              id="speaker-agent-domain"
+              placeholder="bird-agent.example.com"
+              value={agentDomain}
+              onChange={(e) => setAgentDomain(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="speaker-node-ipv4">Node IPv4</Label>
+            <Input
+              id="speaker-node-ipv4"
+              placeholder="203.0.113.10"
+              value={nodeIpv4}
+              onChange={(e) => handleNodeIpv4Change(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="speaker-bgp-source">BGP source IPv4</Label>
+            <Input
+              id="speaker-bgp-source"
+              placeholder="203.0.113.10"
+              value={bgpSourceIpv4}
+              onChange={(e) => {
+                setBgpSourceManual(true)
+                setBgpSourceIpv4(e.target.value)
+              }}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
+            Отмена
+          </Button>
+          <LoadingButton type="button" loading={createMutation.isPending} onClick={save}>
+            Создать
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

apps/web/src/components/operations/operations-jobs-grid.tsx

@@ -1,27 +1,19 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useMutation } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
 
-import { DataGridShell } from '@/components/data-grid-shell'
+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 { apiMutate } from '@/lib/api-client'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
 import type { JobRow } from '@/types/api'
 import type { QueryClient } from '@tanstack/react-query'
 
-function StatusBadgeColored({ status }: { status: string }) {
-  const cls =
-    status === 'succeeded'
-      ? 'text-success'
-      : status === 'failed' || status === 'cancelled'
-        ? 'text-destructive'
-        : 'text-info'
-  return <span className={`text-sm font-medium ${cls}`}>{status}</span>
-}
-
 export function OperationsJobsGrid({
   items,
   nameById,
@@ -48,22 +40,29 @@ export function OperationsJobsGrid({
         accessorKey: 'kind',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
         cell: ({ row }) => (
-          <div className="flex flex-col gap-0.5">
-            <span className="font-medium">{row.original.kind}</span>
-            {row.original.meta?.module_id ? (
-              <span className="text-xs text-muted-foreground">
-                {nameById.get(String(row.original.meta.module_id)) ??
-                  String(row.original.meta.module_id)}
-              </span>
-            ) : null}
-          </div>
+          <DataGridPrimaryCell
+            title={row.original.kind}
+            accent="mono"
+            subtitle={
+              row.original.meta?.module_id
+                ? (nameById.get(String(row.original.meta.module_id)) ??
+                  String(row.original.meta.module_id))
+                : undefined
+            }
+          />
         ),
         meta: { headerTitle: 'Вид' },
       },
       {
         accessorKey: 'status',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
-        cell: ({ row }) => <StatusBadgeColored status={row.original.status} />,
+        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: 'Статус' },
       },
       {
@@ -71,11 +70,11 @@ export function OperationsJobsGrid({
         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: 'Создана' },
       },
@@ -84,11 +83,11 @@ export function OperationsJobsGrid({
         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: 'Завершена' },
       },
@@ -113,19 +112,27 @@ export function OperationsJobsGrid({
     [cancelMutation, nameById],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    ...createClientDataGridOptions<JobRow>(),
+    getSearchText: (row) => {
+      const moduleName = row.meta?.module_id
+        ? (nameById.get(String(row.meta.module_id)) ?? String(row.meta.module_id))
+        : ''
+      return `${row.kind} ${row.status} ${row.job_id} ${moduleName}`
+    },
     getRowId: (row) => row.job_id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={items.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет задач"
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск задач…"
     />
   )
 }

apps/web/src/components/operations/operations-revisions-grid.tsx

@@ -1,4 +1,4 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useMutation } from '@tanstack/react-query'
 import { RefreshCw } from 'lucide-react'
 import { useMemo } from 'react'
@@ -6,11 +6,12 @@ import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
 
-import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import { apiMutate } from '@/lib/api-client'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
 import type { RevisionRow } from '@/types/api'
 import type { QueryClient } from '@tanstack/react-query'
 
@@ -40,7 +41,7 @@ export function OperationsRevisionsGrid({
         accessorFn: (row) => row.id,
         header: ({ column }) => <DataGridColumnHeader column={column} title="ID" />,
         cell: ({ row }) => (
-          <span className="font-mono text-xs">{row.original.id.slice(0, 12)}…</span>
+          <DataGridPrimaryCell title={`${row.original.id.slice(0, 12)}…`} accent="mono" />
         ),
         meta: { headerTitle: 'ID' },
       },
@@ -48,9 +49,9 @@ export function OperationsRevisionsGrid({
         accessorKey: 'created_at',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Создана" />,
         cell: ({ row }) => (
-          <span className="text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {new Date(row.original.created_at).toLocaleString('ru-RU')}
-          </span>
+          </DataGridMutedCell>
         ),
         meta: { headerTitle: 'Создана' },
       },
@@ -87,19 +88,22 @@ export function OperationsRevisionsGrid({
     [rollbackMutation],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    ...createClientDataGridOptions<RevisionRow>(),
+    getSearchText: (row) => `${row.id} ${row.materialized_prefix_count}`,
     getRowId: (row) => row.id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={items.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет ревизий"
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск ревизий…"
     />
   )
 }

apps/web/src/components/reui/badge.tsx

@@ -5,7 +5,11 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@evobgp/ui/lib/utils"
 
 const badgeVariants = cva(
-  "relative inline-flex shrink-0 items-center justify-center w-fit border border-transparent font-medium whitespace-nowrap outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3",
+  [
+    "relative inline-flex shrink-0 items-center justify-center w-fit border border-transparent font-medium whitespace-nowrap outline-none transition-shadow",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3",
+  ],
   {
     variants: {
       variant: {
@@ -19,19 +23,19 @@ const badgeVariants = cva(
         focus: "bg-focus text-focus-foreground",
         invert: "bg-invert text-invert-foreground",
         "primary-light":
-          "bg-primary/10 border-none text-primary dark:bg-primary/20",
+          "border-primary/10 bg-primary/10 text-primary dark:border-primary/25 dark:bg-primary/15 dark:text-primary",
         "warning-light":
-          "bg-warning/10 border-none text-warning-foreground dark:bg-warning/20",
+          "border-warning/15 bg-warning/10 text-warning-foreground dark:border-warning/25 dark:bg-warning/15 dark:text-warning",
         "success-light":
-          "bg-success/10 border-none text-success-foreground dark:bg-success/20",
+          "border-success/15 bg-success/10 text-success-foreground dark:border-success/25 dark:bg-success/15 dark:text-success",
         "info-light":
-          "bg-info/10 border-none text-info-foreground dark:bg-info/20",
+          "border-info/15 bg-info/10 text-info-foreground dark:border-info/25 dark:bg-info/15 dark:text-info",
         "destructive-light":
-          "bg-destructive/10 border-none text-destructive-foreground dark:bg-destructive/20",
+          "border-destructive/15 bg-destructive/10 text-destructive-foreground dark:border-destructive/25 dark:bg-destructive/15 dark:text-destructive",
         "invert-light":
-          "bg-invert/10 border-none text-foreground dark:bg-invert/20",
+          "border-invert/15 bg-invert/10 text-foreground dark:border-invert/45 dark:bg-invert/35 dark:text-invert-foreground",
         "focus-light":
-          "bg-focus/10 border-none text-focus-foreground dark:bg-focus/20",
+          "border-focus/15 bg-focus/10 text-focus-foreground dark:border-focus/25 dark:bg-focus/15 dark:text-focus",
         "primary-outline":
           "bg-background border-border text-primary dark:bg-input/30",
         "warning-outline":
@@ -54,7 +58,7 @@ const badgeVariants = cva(
         lg: "px-1.5 py-0.5 text-xs h-5.5 min-w-5.5 gap-1",
         xl: "px-2 py-0.75 text-sm h-6 min-w-6 gap-1.5",
       },
-      /** `default`: per-theme radius. `full`: max radius per theme (Lyra stays `rounded-none`). */
+      /** `default`: active style radius. `full`: pill radius. */
       radius: {
         default:
           "rounded-sm",

apps/web/src/components/schedule/schedule-jobs-grid.tsx

@@ -1,11 +1,11 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import { Badge } from '@evobgp/ui/components/badge'
-
-import { DataGridShell } from '@/components/data-grid-shell'
+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 { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { JobRow } from '@/types/api'
 
 export function ScheduleJobsGrid({
@@ -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: 'Завершена' },
       },
@@ -82,19 +76,22 @@ export function ScheduleJobsGrid({
     [],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    ...createClientDataGridOptions<JobRow>(),
+    getSearchText: (row) => `${row.kind} ${row.status} ${row.error ?? ''}`,
     getRowId: (row) => row.job_id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={items.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет задач"
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск задач…"
     />
   )
 }

apps/web/src/components/schedule/schedule-modules-grid.tsx

@@ -1,13 +1,13 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { RefreshCw } from 'lucide-react'
 import { useMemo } from 'react'
 
-import { Badge } from '@evobgp/ui/components/badge'
-
-import { DataGridShell } from '@/components/data-grid-shell'
+import { CategoryBadge, ModeBadge } from '@/components/category-badge'
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { LoadingButton } from '@/components/loading-button'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { ModuleRow } from '@/types/api'
 
 export function ScheduleModulesGrid({
@@ -26,13 +26,13 @@ export function ScheduleModulesGrid({
       {
         accessorKey: 'name',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Модуль" />,
-        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.name} accent="primary" />,
         meta: { headerTitle: 'Модуль' },
       },
       {
         accessorKey: 'type',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Тип" />,
-        cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
+        cell: ({ row }) => <CategoryBadge>{row.original.type}</CategoryBadge>,
         meta: { headerTitle: 'Тип' },
       },
       {
@@ -52,11 +52,11 @@ export function ScheduleModulesGrid({
         accessorFn: (row) => row.last_refreshed_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Обновлено" />,
         cell: ({ row }) => (
-          <span className="whitespace-nowrap text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {row.original.last_refreshed_at
               ? new Date(row.original.last_refreshed_at).toLocaleString('ru-RU')
               : '—'}
-          </span>
+          </DataGridMutedCell>
         ),
         meta: { headerTitle: 'Обновлено' },
       },
@@ -64,12 +64,9 @@ export function ScheduleModulesGrid({
         id: 'enabled',
         accessorFn: (row) => (row.enabled ? 'on' : 'off'),
         header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
-        cell: ({ row }) =>
-          row.original.enabled ? (
-            <Badge variant="default">Вкл</Badge>
-          ) : (
-            <Badge variant="secondary">Выкл</Badge>
-          ),
+        cell: ({ row }) => (
+          <ModeBadge enabled={row.original.enabled} onLabel="Вкл" offLabel="Выкл" />
+        ),
         meta: { headerTitle: 'Статус' },
       },
       {
@@ -95,19 +92,22 @@ export function ScheduleModulesGrid({
     [onRefresh, refreshing],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    ...createClientDataGridOptions<ModuleRow>(),
+    getSearchText: (row) => `${row.name} ${row.type} ${row.enabled ? 'вкл' : 'выкл'}`,
     getRowId: (row) => row.id,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={items.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет модулей"
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск модулей…"
     />
   )
 }

apps/web/src/components/settings/settings-kv-grid.tsx

@@ -1,9 +1,10 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridSection } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 
 export interface SettingsKvRow {
   id: string | number
@@ -23,35 +24,37 @@ export function SettingsKvGrid({
       {
         accessorKey: 'key',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Ключ" />,
-        cell: ({ row }) => <span className="font-mono text-xs">{row.original.key}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.key} accent="mono" />,
         meta: { headerTitle: 'Ключ' },
       },
       {
         accessorKey: 'value',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Значение" />,
-        cell: ({ row }) => <span className="font-mono text-xs">{row.original.value}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.value} accent="mono" />,
         meta: { headerTitle: 'Значение' },
       },
     ],
     [],
   )
 
-  const table = useReactTable({
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    ...createClientDataGridOptions<SettingsKvRow>({
-      initialState: { pagination: { pageSize: 25 } },
-    }),
+    getSearchText: (row) => `${row.key} ${row.value}`,
     getRowId: (row) => String(row.id),
+    pageSize: 25,
   })
 
   return (
-    <DataGridShell
+    <DataGridSection
       table={table}
-      recordCount={items.length}
+      recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет дополнительных настроек"
       showPagination={items.length > 10}
+      searchValue={globalFilter}
+      onSearchChange={setGlobalFilter}
+      searchPlaceholder="Поиск настроек…"
     />
   )
 }

apps/web/src/components/status-badge.tsx

@@ -1,35 +1,71 @@
 import type { ComponentProps } from 'react'
 
+import { cn } from '@evobgp/ui/lib/utils'
+
 import { Badge } from '@/components/reui/badge'
 
 type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>
 
 const STATUS_VARIANT: Record<string, BadgeVariant> = {
-  active: 'success',
-  ok: 'success',
-  paid: 'success',
-  established: 'success',
-  succeeded: 'success',
-  healthy: 'success',
-  paused: 'secondary',
-  disabled: 'secondary',
+  active: 'success-light',
+  ok: 'success-light',
+  paid: 'success-light',
+  established: 'success-light',
+  succeeded: 'success-light',
+  healthy: 'success-light',
+  approved: 'success-light',
+  accept: 'success-light',
+  paused: 'invert-light',
+  disabled: 'invert-light',
   archived: 'outline',
-  error: 'destructive',
-  failed: 'destructive',
-  running: 'info',
-  queued: 'info',
-  overdue: 'warning',
-  stale: 'warning',
-  warning: 'warning',
-  mismatch: 'warning',
-  pending: 'warning',
-  approved: 'success',
-  revoked: 'destructive',
-  block: 'destructive',
-  accept: 'success',
+  error: 'destructive-light',
+  failed: 'destructive-light',
+  revoked: 'destructive-light',
+  block: 'destructive-light',
+  cancelled: 'destructive-light',
+  running: 'info-light',
+  queued: 'info-light',
+  overdue: 'warning-light',
+  stale: 'warning-light',
+  warning: 'warning-light',
+  mismatch: 'warning-light',
+  pending: 'warning-light',
 }
 
-export function StatusBadge({ status, label }: { status: string; label?: string }) {
-  const variant = STATUS_VARIANT[status.toLowerCase()] ?? 'outline'
-  return <Badge variant={variant}>{label ?? status}</Badge>
+const DOT_COLOR: Record<string, string> = {
+  'success-light': 'bg-success',
+  'info-light': 'bg-info',
+  'warning-light': 'bg-warning',
+  'destructive-light': 'bg-destructive',
+  'invert-light': 'bg-muted-foreground',
+  outline: 'bg-muted-foreground',
+}
+
+export function jobStatusVariant(status: string): BadgeVariant {
+  return STATUS_VARIANT[status.toLowerCase()] ?? 'outline'
+}
+
+export function StatusBadge({
+  status,
+  label,
+  hint,
+  className,
+}: {
+  status: string
+  label?: string
+  hint?: string
+  className?: string
+}) {
+  const variant = jobStatusVariant(status)
+  const dotColor = DOT_COLOR[variant] ?? 'bg-muted-foreground'
+
+  return (
+    <div className={cn('flex flex-col gap-0.5', className)}>
+      <Badge variant={variant} size="sm" radius="full" className="gap-1.5">
+        <span className={cn('size-1.5 shrink-0 rounded-full', dotColor)} aria-hidden />
+        {label ?? status}
+      </Badge>
+      {hint ? <span className="text-xs text-muted-foreground">{hint}</span> : null}
+    </div>
+  )
 }

apps/web/src/hooks/use-client-data-grid.ts

@@ -0,0 +1,61 @@
+import { useMemo, useState } from 'react'
+import {
+  type ColumnDef,
+  type FilterFn,
+  type TableOptions,
+  useReactTable,
+} from '@tanstack/react-table'
+
+import {
+  createClientDataGridOptions,
+  createTextGlobalFilter,
+} from '@/lib/data-grid-defaults'
+
+interface UseClientDataGridOptions<TData extends object> {
+  data: TData[]
+  columns: ColumnDef<TData>[]
+  getSearchText: (row: TData) => string
+  getRowId: (row: TData) => string
+  pageSize?: number
+  tableOptions?: Partial<TableOptions<TData>>
+  globalFilterFn?: FilterFn<TData>
+}
+
+export function useClientDataGrid<TData extends object>({
+  data,
+  columns,
+  getSearchText,
+  getRowId,
+  pageSize = 10,
+  tableOptions,
+  globalFilterFn,
+}: UseClientDataGridOptions<TData>) {
+  const [globalFilter, setGlobalFilter] = useState('')
+
+  const filterFn = useMemo(
+    () => globalFilterFn ?? createTextGlobalFilter(getSearchText),
+    [getSearchText, globalFilterFn],
+  )
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: { globalFilter },
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: filterFn,
+    ...createClientDataGridOptions<TData>({
+      initialState: { pagination: { pageSize } },
+      ...tableOptions,
+    }),
+    getRowId,
+  })
+
+  const filteredCount = table.getFilteredRowModel().rows.length
+
+  return {
+    table,
+    globalFilter,
+    setGlobalFilter,
+    filteredCount,
+  }
+}

apps/web/src/lib/data-grid-defaults.ts

@@ -1,7 +1,9 @@
 import {
   getCoreRowModel,
+  getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  type FilterFn,
   type TableOptions,
 } from '@tanstack/react-table'
 
@@ -28,14 +30,31 @@ export const DATA_GRID_DENSE_LAYOUT: NonNullable<DataGridProps<object>['tableLay
   dense: true,
 }
 
+export function createTextGlobalFilter<TData extends object>(
+  getSearchText: (row: TData) => string,
+): FilterFn<TData> {
+  return (row, _columnId, filterValue) => {
+    const query = String(filterValue ?? '')
+      .toLowerCase()
+      .trim()
+    if (!query) return true
+    return getSearchText(row.original).toLowerCase().includes(query)
+  }
+}
+
 export function createClientDataGridOptions<TData extends object>(
   overrides?: Partial<TableOptions<TData>>,
 ): Pick<
   TableOptions<TData>,
-  'getCoreRowModel' | 'getSortedRowModel' | 'getPaginationRowModel' | 'initialState'
+  | 'getCoreRowModel'
+  | 'getFilteredRowModel'
+  | 'getSortedRowModel'
+  | 'getPaginationRowModel'
+  | 'initialState'
 > {
   return {
     getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     initialState: { pagination: { pageSize: 10 } },

apps/web/src/queries/network.ts

@@ -1,6 +1,18 @@
-import { queryOptions } from '@tanstack/react-query'
-import { apiJSON } from '@/lib/api-client'
-import type { BirdStatus, PeersResponse, SpeakersResponse } from '@/types/api'
+import { queryOptions, useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+import { apiJSON, apiMutate } from '@/lib/api-client'
+import type {
+  BgpPeerCreate,
+  BgpPeerPatch,
+  BgpSpeakerCreate,
+  BgpSpeakerPatch,
+  BirdStatus,
+  PeerRow,
+  PeersResponse,
+  SpeakerRow,
+  SpeakersResponse,
+} from '@/types/api'
 
 export const NETWORK_AUTO_REFRESH_MS = 30_000
 
@@ -34,3 +46,86 @@ export function networkBirdQueryOptions() {
     staleTime: 15_000,
   })
 }
+
+function invalidateNetwork(qc: ReturnType<typeof useQueryClient>) {
+  void qc.invalidateQueries({ queryKey: networkKeys.all })
+  void qc.invalidateQueries({ queryKey: ['overview'] })
+}
+
+export function useCreatePeerMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (body: BgpPeerCreate) =>
+      apiMutate<PeerRow>('/v1/peers', 'POST', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('Пир создан')
+      invalidateNetwork(qc)
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось создать пира'),
+  })
+}
+
+export function useUpdatePeerMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, body }: { id: string; body: BgpPeerPatch }) =>
+      apiMutate<PeerRow>(`/v1/peers/${id}`, 'PATCH', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('Пир обновлён')
+      invalidateNetwork(qc)
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось обновить пира'),
+  })
+}
+
+export function useDeletePeerMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) =>
+      apiMutate(`/v1/peers/${id}`, 'DELETE', undefined, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('Пир удалён')
+      invalidateNetwork(qc)
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось удалить пира'),
+  })
+}
+
+export function useCreateSpeakerMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (body: BgpSpeakerCreate) =>
+      apiMutate<SpeakerRow>('/v1/speakers', 'POST', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('Спикер создан')
+      invalidateNetwork(qc)
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось создать спикера'),
+  })
+}
+
+export function useUpdateSpeakerMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, body }: { id: string; body: BgpSpeakerPatch }) =>
+      apiMutate<SpeakerRow>(`/v1/speakers/${id}`, 'PATCH', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('Спикер обновлён')
+      invalidateNetwork(qc)
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось обновить спикера'),
+  })
+}
+
+export function useDeleteSpeakerMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) =>
+      apiMutate(`/v1/speakers/${id}`, 'DELETE', undefined, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('Спикер удалён')
+      invalidateNetwork(qc)
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось удалить спикера'),
+  })
+}

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

@@ -4,8 +4,7 @@ import { BookText, Globe, Info, RefreshCw, Tags } from 'lucide-react'
 
 import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
-
+import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { DataGridCard } from '@/components/data-grid-shell'
 import { DirectoriesCommunitiesGrid } from '@/components/directories/directories-communities-grid'
 import { DirectoriesDohGrid } from '@/components/directories/directories-doh-grid'
@@ -80,13 +79,14 @@ function DirectoriesComponent() {
 
       {loading ? <SectionCardsSkeleton count={3} /> : <SectionCards items={items} />}
 
-      <Tabs defaultValue="communities">
-        <TabsList>
-          <TabsTrigger value="communities">Сообщества BGP</TabsTrigger>
-          <TabsTrigger value="doh">DoH профили</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="communities" className="mt-4">
+      <BadgeTabs
+        defaultValue="communities"
+        items={[
+          { value: 'communities', label: 'Сообщества BGP', count: communities.length },
+          { value: 'doh', label: 'DoH профили', count: dohProfiles.length, badgeVariant: 'info-light' },
+        ]}
+      >
+        <TabsContent value="communities" className="mt-0">
           <DataGridCard
             title="Сообщества BGP"
             description="Теги для префиксов в фильтрах BIRD"
@@ -111,7 +111,7 @@ function DirectoriesComponent() {
           </DataGridCard>
         </TabsContent>
 
-        <TabsContent value="doh" className="mt-4">
+        <TabsContent value="doh" className="mt-0">
           <DataGridCard title="DoH профили" description="Резолверы DNS-over-HTTPS для доменных модулей">
             <QueryState
               data={dohProfiles}
@@ -132,7 +132,7 @@ function DirectoriesComponent() {
             </QueryState>
           </DataGridCard>
         </TabsContent>
-      </Tabs>
+      </BadgeTabs>
     </div>
   )
 }

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

@@ -9,8 +9,7 @@ import { Button } from '@evobgp/ui/components/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
-
+import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { FirewallClientsGrid } from '@/components/firewall/firewall-clients-grid'
 import { FirewallRulesGrid } from '@/components/firewall/firewall-rules-grid'
 import { PageHeader } from '@/components/page-header'
@@ -185,14 +184,20 @@ function FirewallPage() {
         </CardContent>
       </Card>
 
-      <Tabs defaultValue="clients">
-        <TabsList>
-          <TabsTrigger value="clients">Клиенты ({activeClients.length})</TabsTrigger>
-          <TabsTrigger value="rules">Правила ({rules.length})</TabsTrigger>
-          <TabsTrigger value="requests">Запросы ({pending.length})</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="clients" className="mt-4">
+      <BadgeTabs
+        defaultValue="clients"
+        items={[
+          { value: 'clients', label: 'Клиенты', count: activeClients.length },
+          { value: 'rules', label: 'Правила', count: rules.length, badgeVariant: 'info-light' },
+          {
+            value: 'requests',
+            label: 'Запросы',
+            count: pending.length,
+            badgeVariant: pending.length > 0 ? 'warning-light' : 'primary-light',
+          },
+        ]}
+      >
+        <TabsContent value="clients" className="mt-0">
           <QueryState
             data={clientsQ.data}
             isLoading={clientsQ.isLoading}
@@ -214,7 +219,7 @@ function FirewallPage() {
           </QueryState>
         </TabsContent>
 
-        <TabsContent value="rules" className="mt-4 space-y-4">
+        <TabsContent value="rules" className="mt-0 space-y-4">
           <div className="flex flex-wrap items-end gap-3">
             <div className="space-y-1">
               <Label>Действие</Label>
@@ -281,7 +286,7 @@ function FirewallPage() {
           </QueryState>
         </TabsContent>
 
-        <TabsContent value="requests" className="mt-4">
+        <TabsContent value="requests" className="mt-0">
           <QueryState
             data={clientsQ.data}
             isLoading={clientsQ.isLoading}
@@ -303,7 +308,7 @@ function FirewallPage() {
             )}
           </QueryState>
         </TabsContent>
-      </Tabs>
+      </BadgeTabs>
     </div>
   )
 }

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

@@ -3,12 +3,11 @@ import { useQuery } from '@tanstack/react-query'
 import { Activity, AlertTriangle, Bird, Database, HeartPulse, Info, ListTodo, RefreshCw } from 'lucide-react'
 
 import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
-import { Badge } from '@evobgp/ui/components/badge'
 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'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
-
+import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
+import { StatusBadge } from '@/components/status-badge'
 import {
   DashboardOperationsFlowCard,
   MonitoringHealthCard,
@@ -41,6 +40,7 @@ export const Route = createFileRoute('/_auth/monitoring')({
 
 function MonitoringComponent() {
   const search = useSearch({ from: '/_auth/monitoring' })
+  const navigate = Route.useNavigate()
   const healthQ = useQuery(monitoringHealthQueryOptions())
   const readyQ = useQuery(monitoringReadyQueryOptions())
   const versionQ = useQuery(monitoringVersionQueryOptions())
@@ -92,14 +92,18 @@ function MonitoringComponent() {
         }
       />
 
-      <Tabs defaultValue={search.tab}>
-        <TabsList>
-          <TabsTrigger value="system">Система</TabsTrigger>
-          <TabsTrigger value="postgres">PostgreSQL</TabsTrigger>
-          <TabsTrigger value="runtime-logs">Файловые логи</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="system" className="mt-4 flex flex-col gap-6">
+      <BadgeTabs
+        value={search.tab}
+        onValueChange={(tab) =>
+          navigate({ search: { tab: tab as 'system' | 'postgres' | 'runtime-logs' } })
+        }
+        items={[
+          { value: 'system', label: 'Система' },
+          { value: 'postgres', label: 'PostgreSQL' },
+          { value: 'runtime-logs', label: 'Файловые логи' },
+        ]}
+      >
+        <TabsContent value="system" className="mt-0 flex flex-col gap-6">
           {analyticsLoading ? (
             <AnalyticsDashboardSkeleton />
           ) : (
@@ -195,7 +199,7 @@ function MonitoringComponent() {
                         <li key={job.job_id} className="rounded-lg border px-3 py-2 text-sm">
                           <div className="flex items-start justify-between gap-2">
                             <p className="font-medium">{job.kind}</p>
-                            <Badge variant="destructive">{job.status}</Badge>
+                            <StatusBadge status={job.status} />
                           </div>
                           {job.error ? (
                             <p className="mt-1 text-xs text-muted-foreground">
@@ -259,7 +263,7 @@ function MonitoringComponent() {
           </div>
         </TabsContent>
 
-        <TabsContent value="postgres" className="mt-4">
+        <TabsContent value="postgres" className="mt-0">
           <Card>
             <CardHeader>
               <CardTitle className="text-base">PostgreSQL</CardTitle>
@@ -278,7 +282,7 @@ function MonitoringComponent() {
           </Card>
         </TabsContent>
 
-        <TabsContent value="runtime-logs" className="mt-4">
+        <TabsContent value="runtime-logs" className="mt-0">
           <Card>
             <CardHeader>
               <CardTitle className="text-base">Файловые логи</CardTitle>
@@ -296,7 +300,7 @@ function MonitoringComponent() {
             </CardContent>
           </Card>
         </TabsContent>
-      </Tabs>
+      </BadgeTabs>
     </div>
   )
 }

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

@@ -4,15 +4,14 @@ 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 { Info, RefreshCw } from 'lucide-react'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
 
 import {
   DashboardNetworkCapacityCard,
   NetworkOverviewAnalyticsCard,
 } from '@/components/analytics'
-import { DataGridCard } from '@/components/data-grid-shell'
-import { NetworkPeersGrid } from '@/components/network/network-peers-grid'
-import { NetworkSpeakersGrid } from '@/components/network/network-speakers-grid'
+import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
+import { NetworkPeersCard } from '@/components/network/network-peers-card'
+import { NetworkSpeakersCard } from '@/components/network/network-speakers-card'
 import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
 import { TableSkeleton } from '@/components/skeletons'
@@ -30,6 +29,7 @@ export const Route = createFileRoute('/_auth/network')({
 
 function NetworkComponent() {
   const search = useSearch({ from: '/_auth/network' })
+  const navigate = Route.useNavigate()
   const peersQ = useQuery({ ...networkPeersQueryOptions(), refetchInterval: 30_000 })
   const speakersQ = useQuery({ ...networkSpeakersQueryOptions(), refetchInterval: 30_000 })
   const birdQ = useQuery({ ...networkBirdQueryOptions(), refetchInterval: 30_000 })
@@ -68,15 +68,23 @@ function NetworkComponent() {
         </AlertDescription>
       </Alert>
 
-      <Tabs defaultValue={search.tab}>
-        <TabsList>
-          <TabsTrigger value="overview">Обзор</TabsTrigger>
-          <TabsTrigger value="peers">Пиры ({peers.length})</TabsTrigger>
-          <TabsTrigger value="speakers">Спикеры ({speakers.length})</TabsTrigger>
-          <TabsTrigger value="control-plane">Control plane</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="overview" className="mt-4">
+      <BadgeTabs
+        value={search.tab}
+        onValueChange={(tab) =>
+          navigate({
+            search: {
+              tab: tab as 'overview' | 'peers' | 'speakers' | 'control-plane',
+            },
+          })
+        }
+        items={[
+          { value: 'overview', label: 'Обзор' },
+          { value: 'peers', label: 'Пиры', count: peers.length },
+          { value: 'speakers', label: 'Спикеры', count: speakers.length, badgeVariant: 'info-light' },
+          { value: 'control-plane', label: 'Control plane' },
+        ]}
+      >
+        <TabsContent value="overview" className="mt-0">
           <div className="grid gap-4 lg:grid-cols-2">
             <NetworkOverviewAnalyticsCard
               peers={peers}
@@ -110,51 +118,28 @@ function NetworkComponent() {
           </Card>
         </TabsContent>
 
-        <TabsContent value="peers" className="mt-4">
-          <DataGridCard title="Пиры">
-            <QueryState
-              data={peers}
-              isLoading={peersQ.isLoading}
-              isError={peersQ.isError}
-              error={peersQ.error}
-              empty={peers.length === 0}
-              emptyTitle="Нет пиров"
-              skeleton={<TableSkeleton rows={6} cols={4} />}
-              onRetry={() => peersQ.refetch()}
-            >
-              {(items) => (
-                <NetworkPeersGrid
-                  items={items}
-                  isLoading={peersQ.isFetching && !peersQ.isLoading}
-                />
-              )}
-            </QueryState>
-          </DataGridCard>
+        <TabsContent value="peers" className="mt-0">
+          <NetworkPeersCard
+            items={peers}
+            speakers={speakers}
+            isLoading={peersQ.isLoading}
+            isError={peersQ.isError}
+            error={peersQ.error}
+            onRetry={() => peersQ.refetch()}
+          />
         </TabsContent>
 
-        <TabsContent value="speakers" className="mt-4">
-          <DataGridCard title="Спикеры">
-            <QueryState
-              data={speakers}
-              isLoading={speakersQ.isLoading}
-              isError={speakersQ.isError}
-              error={speakersQ.error}
-              empty={speakers.length === 0}
-              emptyTitle="Нет спикеров"
-              skeleton={<TableSkeleton rows={6} cols={4} />}
-              onRetry={() => speakersQ.refetch()}
-            >
-              {(items) => (
-                <NetworkSpeakersGrid
-                  items={items}
-                  isLoading={speakersQ.isFetching && !speakersQ.isLoading}
-                />
-              )}
-            </QueryState>
-          </DataGridCard>
+        <TabsContent value="speakers" className="mt-0">
+          <NetworkSpeakersCard
+            items={speakers}
+            isLoading={speakersQ.isLoading}
+            isError={speakersQ.isError}
+            error={speakersQ.error}
+            onRetry={() => speakersQ.refetch()}
+          />
         </TabsContent>
 
-        <TabsContent value="control-plane" className="mt-4">
+        <TabsContent value="control-plane" className="mt-0">
           <Card>
             <CardHeader className="border-b py-3">
               <CardTitle className="text-base">Настройки Control Plane (BIRD)</CardTitle>
@@ -165,7 +150,7 @@ function NetworkComponent() {
             </CardContent>
           </Card>
         </TabsContent>
-      </Tabs>
+      </BadgeTabs>
     </div>
   )
 }

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

@@ -7,10 +7,9 @@ import { useState, useMemo } from 'react'
 import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@evobgp/ui/components/card'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
-
-import { OperationsAnalyticsCard } from '@/components/analytics'
+import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { DataGridCard } from '@/components/data-grid-shell'
+import { OperationsAnalyticsCard } from '@/components/analytics'
 import { SelectMenu } from '@/components/select-field'
 import { OperationsJobsGrid } from '@/components/operations/operations-jobs-grid'
 import { OperationsRevisionsGrid } from '@/components/operations/operations-revisions-grid'
@@ -34,6 +33,7 @@ export const Route = createFileRoute('/_auth/operations')({
 
 function OperationsComponent() {
   const search = useSearch({ from: '/_auth/operations' })
+  const navigate = Route.useNavigate()
   const qc = useQueryClient()
 
   const revisionsQ = useQuery(operationsRevisionsQueryOptions())
@@ -134,14 +134,18 @@ function OperationsComponent() {
         <OperationsAnalyticsCard jobs={jobs} revisions={revisions} />
       )}
 
-      <Tabs defaultValue={search.tab}>
-        <TabsList>
-          <TabsTrigger value="revisions">Ревизии ({revisions.length})</TabsTrigger>
-          <TabsTrigger value="diff">Сравнение</TabsTrigger>
-          <TabsTrigger value="jobs">Задачи ({jobs.length})</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="revisions" className="mt-4">
+      <BadgeTabs
+        value={search.tab}
+        onValueChange={(tab) =>
+          navigate({ search: { tab: tab as 'revisions' | 'diff' | 'jobs' } })
+        }
+        items={[
+          { value: 'revisions', label: 'Ревизии', count: revisions.length },
+          { value: 'diff', label: 'Сравнение' },
+          { value: 'jobs', label: 'Задачи', count: jobs.length, badgeVariant: 'info-light' },
+        ]}
+      >
+        <TabsContent value="revisions" className="mt-0">
           <DataGridCard title="История ревизий">
             <QueryState
               data={revisions}
@@ -163,11 +167,11 @@ function OperationsComponent() {
           </DataGridCard>
         </TabsContent>
 
-        <TabsContent value="diff" className="mt-4">
+        <TabsContent value="diff" className="mt-0">
           <DiffTab revisions={revisions} />
         </TabsContent>
 
-        <TabsContent value="jobs" className="mt-4">
+        <TabsContent value="jobs" className="mt-0">
           <DataGridCard title="Задачи">
             <QueryState
               data={jobs}
@@ -189,7 +193,7 @@ function OperationsComponent() {
             </QueryState>
           </DataGridCard>
         </TabsContent>
-      </Tabs>
+      </BadgeTabs>
     </div>
   )
 }

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

@@ -6,8 +6,7 @@ import { useState } from 'react'
 
 import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
-
+import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { DataGridCard } from '@/components/data-grid-shell'
 import { ScheduleJobsGrid } from '@/components/schedule/schedule-jobs-grid'
 import { ScheduleModulesGrid } from '@/components/schedule/schedule-modules-grid'
@@ -138,12 +137,20 @@ function JobsTabs({ jobs, loading }: { jobs: JobRow[]; loading: boolean }) {
   )
 
   return (
-    <Tabs defaultValue="all">
-      <TabsList className="m-3 mb-0">
-        <TabsTrigger value="all">Все ({jobs.length})</TabsTrigger>
-        <TabsTrigger value="refresh">Обновление ({refresh.length})</TabsTrigger>
-        <TabsTrigger value="failed">С ошибкой ({failed.length})</TabsTrigger>
-      </TabsList>
+    <BadgeTabs
+      defaultValue="all"
+      listClassName="mx-3 mb-0 w-auto"
+      items={[
+        { value: 'all', label: 'Все', count: jobs.length },
+        { value: 'refresh', label: 'Обновление', count: refresh.length, badgeVariant: 'info-light' },
+        {
+          value: 'failed',
+          label: 'С ошибкой',
+          count: failed.length,
+          badgeVariant: failed.length > 0 ? 'destructive-light' : 'primary-light',
+        },
+      ]}
+    >
       <TabsContent value="all" className="mt-0">
         <ScheduleJobsGrid items={jobs} isLoading={loading} />
       </TabsContent>
@@ -153,6 +160,6 @@ function JobsTabs({ jobs, loading }: { jobs: JobRow[]; loading: boolean }) {
       <TabsContent value="failed" className="mt-0">
         <ScheduleJobsGrid items={failed} isLoading={loading} />
       </TabsContent>
-    </Tabs>
+    </BadgeTabs>
   )
 }

apps/web/src/routes/_auth/tenant-settings.tsx

@@ -8,11 +8,8 @@ import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
-
+import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { SelectField } from '@/components/select-field'
-
-
 import { SettingsKvGrid } from '@/components/settings/settings-kv-grid'
 import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
@@ -60,6 +57,7 @@ const BIRD_LABELS: Record<BirdSettingKey, string> = {
 
 function TenantSettingsComponent() {
   const search = useSearch({ from: '/_auth/tenant-settings' })
+  const navigate = Route.useNavigate()
   const settingsQ = useQuery(settingsQueryOptions())
   const qc = useQueryClient()
 
@@ -114,15 +112,21 @@ function TenantSettingsComponent() {
         </AlertDescription>
       </Alert>
 
-      <Tabs defaultValue={search.tab}>
-        <TabsList>
-          <TabsTrigger value="bird">BIRD</TabsTrigger>
-          <TabsTrigger value="revision">Ревизии</TabsTrigger>
-          <TabsTrigger value="runtime-logs">Файловые логи</TabsTrigger>
-          <TabsTrigger value="additional">Дополнительно</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="bird" className="mt-4">
+      <BadgeTabs
+        value={search.tab}
+        onValueChange={(tab) =>
+          navigate({
+            search: { tab: tab as 'bird' | 'revision' | 'runtime-logs' | 'additional' },
+          })
+        }
+        items={[
+          { value: 'bird', label: 'BIRD' },
+          { value: 'revision', label: 'Ревизии' },
+          { value: 'runtime-logs', label: 'Файловые логи' },
+          { value: 'additional', label: 'Дополнительно' },
+        ]}
+      >
+        <TabsContent value="bird" className="mt-0">
           <Card>
             <CardHeader>
               <CardTitle>BIRD control plane</CardTitle>
@@ -175,7 +179,7 @@ function TenantSettingsComponent() {
           </Card>
         </TabsContent>
 
-        <TabsContent value="revision" className="mt-4">
+        <TabsContent value="revision" className="mt-0">
           <Card>
             <CardHeader>
               <CardTitle>Ревизии</CardTitle>
@@ -222,7 +226,7 @@ function TenantSettingsComponent() {
           </Card>
         </TabsContent>
 
-        <TabsContent value="runtime-logs" className="mt-4">
+        <TabsContent value="runtime-logs" className="mt-0">
           <Card>
             <CardHeader>
               <CardTitle>Файловые логи</CardTitle>
@@ -313,7 +317,7 @@ function TenantSettingsComponent() {
           </Card>
         </TabsContent>
 
-        <TabsContent value="additional" className="mt-4">
+        <TabsContent value="additional" className="mt-0">
           <Card>
             <CardHeader>
               <CardTitle>Дополнительные параметры</CardTitle>
@@ -342,7 +346,7 @@ function TenantSettingsComponent() {
             </CardContent>
           </Card>
         </TabsContent>
-      </Tabs>
+      </BadgeTabs>
     </div>
   )
 }

packages/ui/src/components/checkbox.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
 
 import { cn } from "@evobgp/ui/lib/utils"

packages/ui/src/components/tabs.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
 import { cva, type VariantProps } from "class-variance-authority"
 
@@ -13,10 +11,10 @@ function Tabs({
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      orientation={orientation}
       data-orientation={orientation}
       className={cn(
-        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        "group/tabs flex gap-2",
+        orientation === "horizontal" ? "flex-col" : "flex-row",
         className
       )}
       {...props}
@@ -25,7 +23,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:h-auto data-[variant=line]:rounded-none data-[variant=line]:border-b data-[variant=line]:border-border data-[variant=line]:bg-transparent data-[variant=line]:p-0",
   {
     variants: {
       variant: {
@@ -60,9 +58,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
       data-slot="tabs-trigger"
       className={cn(
         "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:h-auto group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:border-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:px-0 group-data-[variant=line]/tabs-list:pb-3 group-data-[variant=line]/tabs-list:pt-1 group-data-[variant=line]/tabs-list:shadow-none",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:group-data-[variant=line]/tabs-list:after:bottom-0 group-data-[orientation=horizontal]/tabs:group-data-[variant=line]/tabs-list:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100 group-data-[variant=line]/tabs-list:data-active:after:z-10",
         className
       )}
       {...props}