feat(web): панель и статистика по доскам макета

Заголовок страницы как на досках (20px), панель: быстрые действия, график и таблицы «Агенты» и «Требует внимания» в раскладке MikrotikManager (новый SimpleGrid). Статистика: пояснение, KPI с подсказками и линейные вкладки «Активность» и «Samples».

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

apps/web/src/components/page-header.tsx

@@ -6,17 +6,15 @@ interface PageHeaderProps {
   actions?: ReactNode
 }
 
-/** Page-level section header — etalon EvoBGP / Domains list. */
+/** Заголовок страницы как на досках макета: название 20px, описание 14px muted, действия справа. */
 export function PageHeader({ title, description, actions }: PageHeaderProps) {
   return (
-    <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+    <header className="flex min-w-0 flex-wrap items-end justify-between gap-3">
-      <div className="flex flex-col gap-px">
+      <div className="flex min-w-0 flex-col gap-0.5">
-        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+        <h1 className="text-xl font-semibold tracking-[-0.01em]">{title}</h1>
-        {description ? (
+        {description ? <p className="text-muted-foreground text-sm text-pretty">{description}</p> : null}
-          <p className="text-muted-foreground text-sm">{description}</p>
-        ) : null}
-      </div>
-      {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
       </div>
+      {actions ? <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div> : null}
+    </header>
   )
 }

apps/web/src/components/portal/bits.tsx

@@ -432,7 +432,7 @@ export function PageTabsList({ children }: { children: ReactNode }) {
 
 export function PageTab({ value, label, count }: { value: string; label: string; count?: number | string }) {
   return (
-    <TabsTrigger value={value} className="gap-1.5 px-4 text-sm">
+    <TabsTrigger value={value} className="flex-none gap-1.5 px-4 text-sm">
       {label}
       {count !== undefined ? <span className="text-muted-foreground font-mono text-xs font-normal">{count}</span> : null}
     </TabsTrigger>

apps/web/src/components/portal/data-page-layout.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps } from 'react'
+import type { DataGrid } from '@/components/reui/data-grid/data-grid'
+
+type GridProps = ComponentProps<typeof DataGrid>
+
+export const DATA_GRID_CELL_PAD = 'py-3'
+export const DATA_GRID_CELL_PAD_FIRST = 'pl-5 py-3'
+export const DATA_GRID_CELL_PAD_LAST = 'pr-4 py-3'
+
+export const DATA_GRID_LAYOUT: NonNullable<GridProps['tableLayout']> = {
+  rowBorder: true,
+  headerBackground: true,
+  headerBorder: true,
+  columnsResizable: false,
+}
+
+export const DATA_GRID_CLASS_NAMES: NonNullable<GridProps['tableClassNames']> = {
+  headerRow: 'border-b border-border',
+  bodyRow: 'group/row',
+}
+
+export const DATA_GRID_CONTAINER_CLASS = 'w-full rounded-none border-0'
+
+/** Отступы ячейки по положению колонки: первая — pl-5, последняя — pr-4. */
+export function cellPad(index: number, count: number) {
+  if (index === 0) return DATA_GRID_CELL_PAD_FIRST
+  if (index === count - 1) return DATA_GRID_CELL_PAD_LAST
+  return DATA_GRID_CELL_PAD
+}

apps/web/src/components/reui-kit/ops-dashboard.tsx

@@ -1,11 +1,4 @@
 import type { ReactNode } from 'react'
-import {
-  Frame,
-  FrameDescription,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
 import { Skeleton } from '@evofw/ui/components/skeleton'
 import { KpiStatGrid, type KpiStatCard } from './kpi-stat-grid'
 
@@ -22,7 +15,7 @@ interface OpsDashboardProps {
 
 /** Denser stack for KPI / charts / queue. PageHeader lives outside via PageShell. */
 const rootClassName =
-  'text-foreground @container flex w-full flex-col gap-2 md:gap-3'
+  'text-foreground @container flex w-full flex-col gap-5'
 
 function OpsDashboardSkeleton() {
   return (
@@ -58,22 +51,12 @@ export function OpsDashboard({
 
       <section
         aria-label="Аналитика"
-        className="grid min-w-0 items-start gap-2 @3xl:grid-cols-2"
+        className="flex min-w-0 flex-col gap-5"
       >
         {charts}
       </section>
 
-      <section aria-label="Требуют внимания">
+      <section aria-label="Требуют внимания">{queue}</section>
-        <Frame dense spacing="sm" className="w-full">
-          <FrameHeader>
-            <FrameTitle>Требуют внимания</FrameTitle>
-            <FrameDescription>
-              Pending-агенты, ошибки apply и списки с last_error
-            </FrameDescription>
-          </FrameHeader>
-          <FramePanel>{queue}</FramePanel>
-        </Frame>
-      </section>
     </div>
   )
 }

apps/web/src/components/reui-kit/simple-grid.tsx

@@ -0,0 +1,79 @@
+import { useMemo, useState, type ReactNode } from 'react'
+import {
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type SortingState,
+} from '@tanstack/react-table'
+
+import { DataGrid } from '@/components/reui/data-grid/data-grid'
+import { DataGridScrollArea } from '@/components/reui/data-grid/data-grid-scroll-area'
+import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
+import { Frame, FrameDescription, FrameHeader, FramePanel, FrameTitle } from '@/components/reui/frame'
+import { DATA_GRID_CLASS_NAMES, DATA_GRID_LAYOUT } from '@/components/portal/data-page-layout'
+
+/**
+ * Блок-таблица доски: Frame с заголовком, описанием и действиями, ниже таблица в раскладке MikrotikManager.
+ * Без поиска и пагинации — для коротких срезов («Первые 8», «Требует внимания»).
+ */
+export function SimpleGrid<T extends object>({
+  title,
+  description,
+  actions,
+  columns,
+  data,
+  getRowId,
+  onRowClick,
+  emptyMessage = 'Нет записей.',
+  footer,
+}: {
+  title: string
+  description?: string
+  actions?: ReactNode
+  columns: ColumnDef<T, unknown>[]
+  data: T[]
+  getRowId: (row: T) => string
+  onRowClick?: (row: T) => void
+  emptyMessage?: string
+  footer?: ReactNode
+}) {
+  const [sorting, setSorting] = useState<SortingState>([])
+  const state = useMemo(() => ({ sorting }), [sorting])
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId,
+    state,
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  })
+
+  return (
+    <DataGrid
+      table={table}
+      recordCount={data.length}
+      emptyMessage={emptyMessage}
+      onRowClick={onRowClick}
+      tableLayout={{ ...DATA_GRID_LAYOUT, dense: false, headerSticky: false, width: 'fixed' }}
+      tableClassNames={DATA_GRID_CLASS_NAMES}
+    >
+      <Frame dense spacing="sm" className="w-full min-w-0">
+        <FrameHeader className="flex-row items-start justify-between gap-3">
+          <div className="flex min-w-0 flex-col gap-px">
+            <FrameTitle className="text-balance">{title}</FrameTitle>
+            {description ? <FrameDescription className="text-xs text-pretty">{description}</FrameDescription> : null}
+          </div>
+          {actions ? <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div> : null}
+        </FrameHeader>
+        <FramePanel className="overflow-hidden p-0 shadow-none!">
+          <DataGridScrollArea>
+            <DataGridTable />
+          </DataGridScrollArea>
+          {footer ? <div className="text-muted-foreground border-t px-5 py-3 text-xs">{footer}</div> : null}
+        </FramePanel>
+      </Frame>
+    </DataGrid>
+  )
+}

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

@@ -1,41 +1,27 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
+import { BanIcon, CheckCircle2Icon, ListIcon, ServerIcon } from 'lucide-react'
+import type { ColumnDef } from '@tanstack/react-table'
 import {
-  ServerIcon,
-  BanIcon,
-  CheckCircle2Icon,
-  ListIcon,
-} from 'lucide-react'
-import {
-  PageHeader,
-  PageShell,
   OpsDashboard,
+  PageShell,
   QuickActionGrid,
   type KpiStatCard,
   type QuickActionItem,
 } from '@/components/reui-kit'
-import {
+import { SimpleGrid } from '@/components/reui-kit/simple-grid'
-  Frame,
+import { PageHead } from '@/components/portal/bits'
-  FrameHeader,
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-  FramePanel,
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-  FrameTitle,
+import { StatusBadge } from '@/components/status-badge'
-} from '@/components/reui/frame'
+import { Button } from '@evofw/ui/components/button'
-import { Badge } from '@/components/reui/badge'
+import { dashboardQueryOptions, agentsQueryOptions, settingsQueryOptions } from '@/queries'
-import {
-  Item,
-  ItemContent,
-  ItemGroup,
-  ItemTitle,
-} from '@evofw/ui/components/item'
-import {
-  dashboardQueryOptions,
-  agentsQueryOptions,
-  settingsQueryOptions,
-} from '@/queries'
 import { AgentsFleetChart } from '@/components/agents/agents-fleet-chart'
 import { agentTrafficDropped } from '@/components/agents/agent-traffic'
+import { platformLabel } from '@/components/agents/agent-platform-icon'
 import { UpdatedAtLabel } from '@/components/updated-at-label'
+import { formatNumber, formatRelativeTime } from '@/lib/format'
 import type { Agent } from '@evofw/shared'
 
 export const Route = createFileRoute('/_auth/')({
@@ -44,7 +30,77 @@ export const Route = createFileRoute('/_auth/')({
 
 const EMPTY_AGENTS: Agent[] = []
 
+type Attention = { id: string; agent: Agent; kind: 'pending' | 'error'; message: string; when: string | null | undefined }
+
+const agentColumns: ColumnDef<Agent>[] = [
+  {
+    id: 'name',
+    accessorFn: (a) => a.name,
+    header: ({ column }) => <DataGridColumnHeader column={column} title="Агент" />,
+    cell: ({ row }) => (
+      <DataGridPrimaryCell title={row.original.name} subtitle={platformLabel(row.original.platform)} />
+    ),
+    meta: { headerTitle: 'Агент' },
+  },
+  {
+    id: 'status',
+    accessorFn: (a) => a.status,
+    header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
+    cell: ({ row }) => <StatusBadge status={row.original.status} />,
+    meta: { headerTitle: 'Статус' },
+  },
+  {
+    id: 'dropped',
+    accessorFn: (a) => agentTrafficDropped(a),
+    header: ({ column }) => <DataGridColumnHeader column={column} title="Заблокировано" />,
+    cell: ({ row }) =>
+      row.original.status === 'approved' ? (
+        <span className="tabular-nums">↓{formatNumber(agentTrafficDropped(row.original))}</span>
+      ) : (
+        <span className="text-muted-foreground">—</span>
+      ),
+    meta: { headerTitle: 'Заблокировано' },
+  },
+]
+
+const attentionColumns: ColumnDef<Attention>[] = [
+  {
+    id: 'name',
+    accessorFn: (r) => r.agent.name,
+    header: ({ column }) => <DataGridColumnHeader column={column} title="Объект" />,
+    cell: ({ row }) => <DataGridPrimaryCell title={row.original.agent.name} subtitle="Агент" />,
+    meta: { headerTitle: 'Объект' },
+  },
+  {
+    id: 'message',
+    accessorFn: (r) => r.message,
+    header: ({ column }) => <DataGridColumnHeader column={column} title="Сообщение" />,
+    cell: ({ row }) => <span className="text-sm">{row.original.message}</span>,
+    meta: { headerTitle: 'Сообщение' },
+  },
+  {
+    id: 'status',
+    accessorFn: (r) => r.kind,
+    header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
+    cell: ({ row }) =>
+      row.original.kind === 'error' ? (
+        <StatusBadge status="error" label="Ошибка" />
+      ) : (
+        <StatusBadge status="pending" label="Ожидает" />
+      ),
+    meta: { headerTitle: 'Статус' },
+  },
+  {
+    id: 'when',
+    accessorFn: (r) => r.when ?? '',
+    header: ({ column }) => <DataGridColumnHeader column={column} title="Когда" />,
+    cell: ({ row }) => <span className="text-muted-foreground text-xs">{formatRelativeTime(row.original.when)}</span>,
+    meta: { headerTitle: 'Когда' },
+  },
+]
+
 function DashboardPage() {
+  const navigate = useNavigate()
   const dash = useQuery(dashboardQueryOptions())
   const agents = useQuery(agentsQueryOptions())
   const settingsQ = useQuery(settingsQueryOptions())
@@ -53,15 +109,18 @@ function DashboardPage() {
   const items = agents.data?.items ?? EMPTY_AGENTS
   const showQuickActions = settingsQ.data?.show_quick_actions !== 'false'
 
-  const pending = useMemo(
-    () => items.filter((a) => a.status === 'pending'),
-    [items],
-  )
-  const applyErrors = useMemo(
-    () => items.filter((a) => a.last_apply_error),
-    [items],
-  )
   const previewAgents = useMemo(() => items.slice(0, 8), [items])
+  const attention = useMemo<Attention[]>(
+    () => [
+      ...items
+        .filter((a) => a.last_apply_error)
+        .map<Attention>((a) => ({ id: `err-${a.id}`, agent: a, kind: 'error', message: a.last_apply_error ?? '', when: a.last_apply_at })),
+      ...items
+        .filter((a) => a.status === 'pending')
+        .map<Attention>((a) => ({ id: `pend-${a.id}`, agent: a, kind: 'pending', message: 'Ожидает одобрения', when: a.created_at })),
+    ],
+    [items],
+  )
 
   const kpiCards: KpiStatCard[] = useMemo(
     () => [
@@ -81,8 +140,8 @@ function DashboardPage() {
         hint: 'сумма counters',
         to: '/stats',
         icon: <BanIcon aria-hidden />,
-        iconClassName: 'text-warning',
+        iconClassName: 'text-destructive',
-        variant: 'warning',
+        variant: 'destructive',
       },
       {
         id: 'accepted',
@@ -97,6 +156,7 @@ function DashboardPage() {
         id: 'lists',
         label: 'Списки IP',
         value: d?.lists_total ?? '—',
+        hint: 'ручные, JSON и EvoBGP',
         to: '/lists',
         icon: <ListIcon aria-hidden />,
         iconClassName: 'text-primary',
@@ -107,133 +167,53 @@ function DashboardPage() {
 
   const quickActions: QuickActionItem[] = useMemo(
     () => [
-      {
+      { id: 'agents', title: 'Агенты', description: 'Подключение и одобрение агентов', to: '/agents', icon: <ServerIcon aria-hidden />, iconClassName: 'text-info' },
-        id: 'agents',
+      { id: 'lists', title: 'Списки', description: 'Блок-листы и источники', to: '/lists', icon: <ListIcon aria-hidden />, iconClassName: 'text-primary' },
-        title: 'Агенты',
+      { id: 'rules', title: 'Правила', description: 'Политика блокировки', to: '/rules', icon: <BanIcon aria-hidden />, iconClassName: 'text-warning' },
-        description: 'Подключение и одобрение агентов',
-        to: '/agents',
-        icon: <ServerIcon aria-hidden />,
-        iconClassName: 'text-info',
-      },
-      {
-        id: 'lists',
-        title: 'Списки',
-        description: 'Блок-листы и источники',
-        to: '/lists',
-        icon: <ListIcon aria-hidden />,
-        iconClassName: 'text-primary',
-      },
-      {
-        id: 'rules',
-        title: 'Правила',
-        description: 'Политика блокировки',
-        to: '/rules',
-        icon: <BanIcon aria-hidden />,
-        iconClassName: 'text-warning',
-      },
     ],
     [],
   )
 
   return (
     <PageShell>
-      <PageHeader
+      <PageHead
         title="Панель управления"
-        description="Обзор агентов и пакетной статистики"
+        sub="Обзор агентов и пакетной статистики"
         actions={<UpdatedAtLabel updatedAt={dash.dataUpdatedAt} />}
       />
       <OpsDashboard
         isLoading={dash.isLoading}
         kpiCards={kpiCards}
-        afterKpi={
+        afterKpi={showQuickActions ? <QuickActionGrid actions={quickActions} /> : undefined}
-          showQuickActions ? (
-            <QuickActionGrid actions={quickActions} />
-          ) : undefined
-        }
         charts={
           <>
             <AgentsFleetChart />
-            <Frame dense spacing="sm">
+            <SimpleGrid
-              <FrameHeader>
+              title="Агенты"
-                <FrameTitle>Агенты</FrameTitle>
+              description="Первые 8 · клик открывает карточку агента"
-              </FrameHeader>
+              columns={agentColumns}
-              <FramePanel>
+              data={previewAgents}
-                {previewAgents.length === 0 ? (
+              getRowId={(a) => a.id}
-                  <p className="text-muted-foreground text-sm">Нет агентов</p>
+              onRowClick={(a) => void navigate({ to: '/agents', search: { agent: a.id, view: 'cards' } })}
-                ) : (
+              emptyMessage="Нет агентов"
-                  <ItemGroup className="gap-2">
+            />
-                    {previewAgents.map((a) => (
-                      <Item key={a.id} variant="outline" size="sm">
-                        <ItemContent className="flex flex-row items-center justify-between gap-2">
-                          <ItemTitle className="truncate font-medium">
-                            <Link
-                              to="/agents"
-                              search={{ agent: a.id, view: 'cards' }}
-                              className="hover:underline"
-                            >
-                              {a.name}
-                            </Link>
-                          </ItemTitle>
-                          <div className="flex items-center gap-2">
-                            <Badge
-                              variant={
-                                a.status === 'approved'
-                                  ? 'success-light'
-                                  : a.status === 'pending'
-                                    ? 'warning-light'
-                                    : 'secondary'
-                              }
-                              size="sm"
-                            >
-                              {a.status}
-                            </Badge>
-                            <span className="text-muted-foreground text-xs tabular-nums">
-                              ↓{agentTrafficDropped(a)}
-                            </span>
-                          </div>
-                        </ItemContent>
-                      </Item>
-                    ))}
-                  </ItemGroup>
-                )}
-              </FramePanel>
-            </Frame>
           </>
         }
         queue={
-          <div className="flex flex-col gap-2">
+          <SimpleGrid
-            {pending.length === 0 && applyErrors.length === 0 ? (
+            title="Требует внимания"
-              <p className="text-muted-foreground text-sm">
+            description="Ожидают одобрения и ошибки применения политики"
-                Нет проблем, требующих внимания
+            actions={
-              </p>
+              <Button variant="outline" render={<Link to="/agents" search={{ view: "cards" }} />} nativeButton={false}>
-            ) : null}
+                Открыть агентов
-            {pending.map((a) => (
+              </Button>
-              <div
+            }
-                key={a.id}
+            columns={attentionColumns}
-                className="flex items-center justify-between gap-2 text-sm"
+            data={attention}
-              >
+            getRowId={(r) => r.id}
-                <span>
+            onRowClick={(r) => void navigate({ to: '/agents', search: { agent: r.agent.id, view: 'cards' } })}
-                  Pending: <strong>{a.name}</strong>
+            emptyMessage="Нет проблем, требующих внимания"
-                </span>
+          />
-                <Link
-                  to="/agents"
-                  search={{ agent: a.id, view: 'cards' }}
-                  className="underline-offset-4 hover:underline"
-                >
-                  Открыть
-                </Link>
-              </div>
-            ))}
-            {applyErrors.map((a) => (
-              <div key={`err-${a.id}`} className="text-sm">
-                <span className="text-destructive font-medium">{a.name}</span>
-                <span className="text-muted-foreground">
-                  {' '}
-                  — {a.last_apply_error}
-                </span>
-              </div>
-            ))}
-          </div>
         }
       />
     </PageShell>

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

@@ -21,6 +21,8 @@ import {
   FramePanel,
   FrameTitle,
 } from '@/components/reui/frame'
+import { PageTab, PageTabsList, SignalAlert } from '@/components/portal/bits'
+import { Tabs, TabsContent } from '@evofw/ui/components/tabs'
 import { UpdatedAtLabel } from '@/components/updated-at-label'
 import { dashboardQueryOptions, recentStatsQueryOptions } from '@/queries'
 import { formatNumber, formatStampDateTime } from '@/lib/format'
@@ -133,14 +135,16 @@ function StatsPage() {
     {
       id: 'd',
       label: 'Заблокировано (сумма)',
+      hint: 'пакетов · сумма пиков',
       value: dash.data?.packets_dropped ?? 0,
       icon: <BanIcon aria-hidden />,
-      iconClassName: 'text-warning',
+      iconClassName: 'text-destructive',
-      variant: 'warning',
+      variant: 'destructive',
     },
     {
       id: 'a',
       label: 'Пропущено (сумма)',
+      hint: 'пакетов · сумма пиков',
       value: dash.data?.packets_accepted ?? 0,
       icon: <CheckCircle2Icon aria-hidden />,
       iconClassName: 'text-success',
@@ -148,6 +152,7 @@ function StatsPage() {
     {
       id: 'o',
       label: 'Агентов онлайн',
+      hint: `из ${dash.data?.agents_approved ?? 0} одобренных`,
       value: dash.data?.agents_online ?? 0,
       icon: <ServerIcon aria-hidden />,
       iconClassName: 'text-info',
@@ -225,11 +230,20 @@ function StatsPage() {
     <PageShell>
       <PageHeader
         title="Статистика"
-        description="История apply-report counters"
+        description="История apply-report counters · заблокированный и пропущенный трафик агентов"
         actions={<UpdatedAtLabel updatedAt={stats.dataUpdatedAt} />}
       />
+      <SignalAlert tone="in" title="Как считаются значения.">
+        Счётчики агентов смешанной семантики (накопительные и сбросные): суммирование сэмплов дало бы двойной счёт,
+        поэтому за час берём максимум наблюдавшегося уровня.
+      </SignalAlert>
       <KpiStatGrid cards={kpiCards} isLoading={dash.isLoading} />
-
+      <Tabs defaultValue="activity" className="min-w-0 gap-4">
+        <PageTabsList>
+          <PageTab value="activity" label="Активность" />
+          <PageTab value="samples" label="Samples" count={rows.length} />
+        </PageTabsList>
+        <TabsContent value="activity" className="min-w-0">
           <Frame dense spacing="sm">
             <FrameHeader>
               <FrameTitle>Активность по часам (пик за час)</FrameTitle>
@@ -265,7 +279,8 @@ function StatsPage() {
               )}
             </FramePanel>
           </Frame>
-
+        </TabsContent>
+        <TabsContent value="samples" className="min-w-0">
           <ResourcePage
             title="Samples"
             hideHeader
@@ -284,6 +299,8 @@ function StatsPage() {
               description: 'Агенты ещё не отправили apply-report.',
             }}
           />
+        </TabsContent>
+      </Tabs>
     </PageShell>
   )
 }