From 57dcf306f31fb770f6577e3c165b75d076b32717 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 19 May 2026 12:01:11 +0700
Subject: [PATCH] web(ui): migrate dashboard, schedule, monitoring to ui
 patterns

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/src/routes/+page.svelte            | 21 +++++--------
 web/src/routes/monitoring/+page.svelte | 43 ++++++++++----------------
 web/src/routes/schedule/+page.svelte   | 34 +++++++++-----------
 3 files changed, 40 insertions(+), 58 deletions(-)

diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index f40ed23..dbffdea 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -17,6 +17,7 @@ const resolve = (path: string) => path as any;
 	import Clock from '@lucide/svelte/icons/clock';
 	import ArrowRight from '@lucide/svelte/icons/arrow-right';
 	import LayoutDashboard from '@lucide/svelte/icons/layout-dashboard';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
 
 	let healthy = $state<boolean | null>(null);
 	let modules = $state(0);
@@ -133,19 +134,13 @@ const resolve = (path: string) => path as any;
 	]);
 </script>
 
-<div class="space-y-6">
-	<div class="flex items-start gap-3">
-		<div
-			class="bg-primary/10 text-primary flex size-11 shrink-0 items-center justify-center rounded-xl"
-			aria-hidden="true"
-		>
-			<LayoutDashboard class="size-6" />
-		</div>
-		<div class="min-w-0">
-			<h1 class="text-2xl font-semibold tracking-tight">Обзор</h1>
-			<p class="text-muted-foreground mt-1 text-sm">Состояние панели управления EvoBGP.</p>
-		</div>
-	</div>
+<div class="flex flex-col gap-6">
+	<PageHeader
+		title="Обзор"
+		description="Состояние панели управления EvoBGP."
+		icon={LayoutDashboard}
+		iconClass="bg-primary/10 text-primary"
+	/>
 
 	<!-- Health -->
 	<Card>
diff --git a/web/src/routes/monitoring/+page.svelte b/web/src/routes/monitoring/+page.svelte
index 1353be5..c289518 100644
--- a/web/src/routes/monitoring/+page.svelte
+++ b/web/src/routes/monitoring/+page.svelte
@@ -12,6 +12,7 @@
 	import Server from '@lucide/svelte/icons/server';
 	import Hash from '@lucide/svelte/icons/hash';
 	import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
 
 	type ReadyStatus = { status: string; checks?: Record<string, unknown> };
 	type VersionInfo = { version?: string; git_sha?: string; build_time?: string; [k: string]: unknown };
@@ -136,32 +137,22 @@
 	onMount(load);
 </script>
 
-<div class="space-y-6">
-	<div class="flex items-start justify-between gap-4">
-		<div class="flex min-w-0 items-start gap-3">
-			<div
-				class="bg-info/15 text-info flex size-11 shrink-0 items-center justify-center rounded-xl"
-				aria-hidden="true"
-			>
-				<Gauge class="size-6" />
-			</div>
-			<div class="min-w-0">
-				<h1 class="text-2xl font-semibold tracking-tight">Мониторинг</h1>
-				<p class="text-muted-foreground mt-1 text-sm">
-					Состояние API, BGP и задач для быстрой диагностики инцидентов.
-				</p>
-				{#if lastUpdated}
-					<p class="text-muted-foreground mt-1 text-xs">
-						Обновлено: {lastUpdated.toLocaleTimeString('ru-RU')}
-					</p>
-				{/if}
-			</div>
-		</div>
-		<Button variant="outline" size="sm" onclick={load} disabled={loading}>
-			<RefreshCw class={loading ? 'animate-spin' : ''} />
-			Обновить
-		</Button>
-	</div>
+<div class="flex flex-col gap-6">
+	<PageHeader
+		title="Мониторинг"
+		description={lastUpdated
+			? `Состояние API, BGP и задач. Обновлено: ${lastUpdated.toLocaleTimeString('ru-RU')}`
+			: 'Состояние API, BGP и задач для быстрой диагностики инцидентов.'}
+		icon={Gauge}
+		iconClass="bg-info/15 text-info"
+	>
+		{#snippet actions()}
+			<Button variant="outline" size="sm" onclick={load} disabled={loading}>
+				<RefreshCw class={loading ? 'animate-spin' : ''} />
+				Обновить
+			</Button>
+		{/snippet}
+	</PageHeader>
 
 	<div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
 		<Card class="border-l-4 border-l-chart-1 bg-chart-1/5 shadow-sm">
diff --git a/web/src/routes/schedule/+page.svelte b/web/src/routes/schedule/+page.svelte
index 13ffde6..09e84e7 100644
--- a/web/src/routes/schedule/+page.svelte
+++ b/web/src/routes/schedule/+page.svelte
@@ -16,6 +16,7 @@
 	import { toast } from 'svelte-sonner';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 	import CalendarClock from '@lucide/svelte/icons/calendar-clock';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
 	import { jobStatusRu, moduleTypeRu } from '$lib/ui-labels.js';
 	import { jobKindTitle } from '$lib/operations/job-kind-label.js';
 
@@ -80,25 +81,20 @@
 	const failedJobsCount = $derived(jobs.filter((j) => j.status === 'failed').length);
 </script>
 
-<div class="space-y-6">
-	<div class="flex items-start justify-between gap-4">
-		<div class="flex min-w-0 items-start gap-3">
-			<div
-				class="bg-chart-4/15 text-chart-4 flex size-11 shrink-0 items-center justify-center rounded-xl"
-				aria-hidden="true"
-			>
-				<CalendarClock class="size-6" />
-			</div>
-			<div class="min-w-0">
-				<h1 class="text-2xl font-semibold tracking-tight">Расписание и задачи</h1>
-				<p class="text-muted-foreground mt-1 text-sm">Интервалы обновления модулей и ручной запуск обновления.</p>
-			</div>
-		</div>
-		<Button variant="outline" size="sm" onclick={load} disabled={loading}>
-			<RefreshCw class={loading ? 'animate-spin' : ''} />
-			Обновить
-		</Button>
-	</div>
+<div class="flex flex-col gap-6">
+	<PageHeader
+		title="Расписание и задачи"
+		description="Интервалы обновления модулей и ручной запуск обновления."
+		icon={CalendarClock}
+		iconClass="bg-chart-4/15 text-chart-4"
+	>
+		{#snippet actions()}
+			<Button variant="outline" size="sm" onclick={load} disabled={loading}>
+				<RefreshCw class={loading ? 'animate-spin' : ''} />
+				Обновить
+			</Button>
+		{/snippet}
+	</PageHeader>
 
 	<div class="grid gap-3 sm:grid-cols-3">
 		<Card class="p-4">