feat(dashboard): собрать ops-дашборд на ReUI Frame с живыми данными

Co-authored-by: Cursor <cursoragent@cursor.com>

components/dashboard/dashboard-events-timeline.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import Link from "next/link"
+import {
+  Timeline,
+  TimelineContent,
+  TimelineDate,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineSeparator,
+  TimelineTitle,
+} from "@/components/reui/timeline"
+import { Alert, AlertDescription, AlertTitle } from "@/components/reui/alert"
+import { cn } from "@/lib/utils"
+import type { EventItem } from "@mmapp/contracts/events"
+
+function formatEventAge(iso: string): string {
+  const ts = Date.parse(iso)
+  if (!Number.isFinite(ts)) return "—"
+  const diffMs = Math.max(0, Date.now() - ts)
+  const minutes = Math.floor(diffMs / 60_000)
+  if (minutes < 1) return "сейчас"
+  if (minutes < 60) return `${minutes}м`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}ч`
+  const days = Math.floor(hours / 24)
+  return `${days}д`
+}
+
+const LEVEL_DOT: Record<EventItem["level"], string> = {
+  critical: "border-destructive bg-destructive/20 group-data-completed/timeline-item:border-destructive",
+  warning: "border-warning bg-warning/20 group-data-completed/timeline-item:border-warning",
+  info: "border-info bg-info/20 group-data-completed/timeline-item:border-info",
+}
+
+/**
+ * Compact activity timeline.
+ * Preview: https://reui.io/preview/base/timeline-3
+ * Docs: https://reui.io/docs/components/base/timeline
+ */
+export function DashboardEventsTimeline({
+  events,
+  loading,
+  error,
+}: {
+  events: EventItem[]
+  loading?: boolean
+  error?: string | null
+}) {
+  if (loading && events.length === 0) {
+    return <p className="text-muted-foreground px-5 py-6 text-sm">Загрузка событий…</p>
+  }
+  if (error && events.length === 0) {
+    return (
+      <div className="px-5 py-4">
+        <Alert variant="destructive">
+          <AlertTitle>События недоступны</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      </div>
+    )
+  }
+  if (events.length === 0) {
+    return (
+      <p className="text-muted-foreground px-5 py-6 text-sm">
+        Событий пока нет.{" "}
+        <Link href="/alerts" className="underline underline-offset-2">
+          Оповещения
+        </Link>
+      </p>
+    )
+  }
+
+  return (
+    <Timeline defaultValue={events.length} className="px-5 py-4">
+      {events.map((event, index) => (
+        <TimelineItem key={event.id} step={index + 1}>
+          <TimelineHeader>
+            <TimelineSeparator />
+            <TimelineDate>{formatEventAge(event.createdAt)}</TimelineDate>
+            <TimelineTitle className="text-[13px] leading-tight">{event.title}</TimelineTitle>
+            <TimelineIndicator className={cn(LEVEL_DOT[event.level])} />
+          </TimelineHeader>
+          <TimelineContent className="text-xs leading-snug">{event.message}</TimelineContent>
+        </TimelineItem>
+      ))}
+    </Timeline>
+  )
+}