From 53420b49a1e6e236e959ed2953387d9a1a8d420e Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 23 Oct 2026 19:47:08 +0700
Subject: [PATCH] feat(web): dashboard modules grid and activity feed as on
 mockup boards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Заголовки страниц приведены к доскам (20px). На панели добавлены таблица первых 5 модулей и лента активности по последним задачам.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/page-header.tsx | 19 ++++++++----------
 apps/web/src/routes/_auth/dashboard.tsx | 26 +++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/page-header.tsx b/apps/web/src/components/page-header.tsx
index c50feeb..0b19a96 100644
--- a/apps/web/src/components/page-header.tsx
+++ b/apps/web/src/components/page-header.tsx
@@ -2,22 +2,19 @@ import type { ReactNode } from 'react'
 
 interface PageHeaderProps {
   title: string
-  description?: string
+  description?: ReactNode
   actions?: ReactNode
 }
 
+/** Заголовок страницы как на досках макета: название 20px, описание 14px muted, действия справа. */
 export function PageHeader({ title, description, actions }: PageHeaderProps) {
   return (
-    <div className="flex min-w-0 flex-col gap-2 md:flex-row md:items-start md:justify-between">
-      <div className="flex min-w-0 flex-col gap-1">
-        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
-        {description ? (
-          <p className="text-muted-foreground max-w-prose text-sm break-words">{description}</p>
-        ) : null}
+    <header className="flex min-w-0 flex-wrap items-end justify-between gap-3">
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <h1 className="text-xl font-semibold tracking-[-0.01em]">{title}</h1>
+        {description ? <p className="text-muted-foreground text-sm text-pretty">{description}</p> : null}
       </div>
-      {actions ? (
-        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div>
-      ) : null}
-    </div>
+      {actions ? <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div> : null}
+    </header>
   )
 }
diff --git a/apps/web/src/routes/_auth/dashboard.tsx b/apps/web/src/routes/_auth/dashboard.tsx
index a7d36db..2920043 100644
--- a/apps/web/src/routes/_auth/dashboard.tsx
+++ b/apps/web/src/routes/_auth/dashboard.tsx
@@ -9,6 +9,10 @@ import { buildDashboardKpiCards } from '@/components/dashboard/dashboard-kpi-gri
 import { DashboardNetworkHealth } from '@/components/dashboard/dashboard-network-health'
 import { DashboardOperationsBreakdown } from '@/components/dashboard/dashboard-operations-breakdown'
 import { DashboardQuickLinks } from '@/components/dashboard/dashboard-quick-links'
+import { ModulesListGrid } from '@/components/modules/modules-list-grid'
+import { ActivityFeed } from '@/components/portal/canvas-blocks'
+import { fmtWhen } from '@/components/portal/format'
+import type { Tone } from '@/components/portal/tone'
 import { OpsDashboard } from '@/components/reui-kit'
 import { chartPanelGridClassName } from '@/lib/ui-surface'
 import {
@@ -69,6 +73,18 @@ function DashboardComponent() {
   const speakers = speakersQ.data?.items ?? []
   const jobs = jobsQ.data?.items ?? []
   const kpiCards = buildDashboardKpiCards({ modules, peers, speakers, jobs })
+  const activity = jobs.slice(0, 4).map((j) => {
+    const failed = ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase())
+    const running = j.status === 'running' || j.status === 'queued'
+    const tone: Tone = failed ? 'er' : running ? 'in' : 'ok'
+    return {
+      t: fmtWhen(j.finished_at ?? j.started_at ?? j.created_at),
+      title: j.kind,
+      text: j.error ?? `Статус: ${j.status}`,
+      label: failed ? 'Error' : running ? 'Running' : 'Info',
+      tone,
+    }
+  })
 
   return (
     <OpsDashboard
@@ -87,6 +103,16 @@ function DashboardComponent() {
       kpiCards={kpiCards}
       isLoading={initialLoading}
       afterKpi={showQuickActions ? <DashboardQuickLinks /> : null}
+      queue={
+        <div className="flex min-w-0 flex-col gap-5">
+          <ModulesListGrid items={modules.slice(0, 5)} isLoading={modulesQ.isLoading} title="Модули" />
+          {activity.length > 0 ? (
+            <ActivityFeed title="Активность" description="Последние события плоскости управления" items={activity} />
+          ) : null}
+        </div>
+      }
+      queueTitle=""
+      queueDescription=""
       charts={
         <div className={chartPanelGridClassName}>
           <DashboardNetworkHealth