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

Co-authored-by: Cursor <[email protected]>
2026-09-08 15:13:27 +07:00
parent 5f2b4e2d40
commit 36c5305db7
10 changed files with 1580 additions and 917 deletions
@@ -0,0 +1,93 @@
+"use client"
+
+import type { ReactNode } from "react"
+import type { LucideIcon } from "lucide-react"
+import { Badge } from "@/components/reui/badge"
+import {
+  Frame,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+import { IconTile } from "@/components/reui/icon-tile"
+import { cn } from "@/lib/utils"
+
+/**
+ * Sibling Frame columns for dashboard attention queue.
+ * Preview: https://reui.io/preview/base/dashboard-1 · https://reui.io/preview/base/stats-12
+ * Docs: https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/icon-tile · https://reui.io/docs/components/base/badge
+ */
+export interface AttentionQueueColumn {
+  id: string
+  title: string
+  icon: LucideIcon
+  iconClassName?: string
+  count: number
+  countVariant?: "destructive" | "warning" | "secondary" | "destructive-light" | "warning-light"
+  emptyTitle: string
+  emptyDescription: string
+  emptyAction?: ReactNode
+  children: ReactNode
+}
+
+interface AttentionQueueProps {
+  columns: AttentionQueueColumn[]
+  className?: string
+}
+
+const DEFAULT_ICON_CLASS = "text-muted-foreground [&_svg]:text-current"
+
+export function AttentionQueue({ columns, className }: AttentionQueueProps) {
+  return (
+    <div
+      className={cn(
+        "@container grid min-w-0 items-start gap-2 @3xl:grid-cols-3",
+        className,
+      )}
+    >
+      {columns.map((column) => {
+        const Icon = column.icon
+        const isEmpty = column.count === 0
+        return (
+          <Frame key={column.id} dense spacing="sm" className="min-w-0 w-full">
+            <FrameHeader>
+              <div className="flex min-w-0 items-center gap-2">
+                <IconTile
+                  variant="elevated"
+                  size="sm"
+                  className={cn(DEFAULT_ICON_CLASS, column.iconClassName)}
+                  aria-hidden="true"
+                >
+                  <Icon />
+                </IconTile>
+                <FrameTitle className="min-w-0 truncate">{column.title}</FrameTitle>
+                {column.count > 0 ? (
+                  <Badge
+                    size="sm"
+                    variant={column.countVariant ?? "secondary"}
+                    className="tabular-nums"
+                  >
+                    {column.count}
+                  </Badge>
+                ) : null}
+              </div>
+            </FrameHeader>
+            <FramePanel className="min-w-0">
+              {isEmpty ? (
+                <div className="flex min-h-24 flex-col items-start justify-center gap-1 py-3">
+                  <p className="text-sm font-medium">{column.emptyTitle}</p>
+                  <p className="text-muted-foreground text-xs leading-relaxed">
+                    {column.emptyDescription}
+                  </p>
+                  {column.emptyAction ? <div className="pt-1">{column.emptyAction}</div> : null}
+                </div>
+              ) : (
+                column.children
+              )}
+            </FramePanel>
+          </Frame>
+        )
+      })}
+    </div>
+  )
+}
@@ -3,3 +3,7 @@ export type { CodeExportFormat, CodeExportSheetProps } from "./code-export-sheet
 export { KpiStatGrid, KpiStatCardTile, kpiStatItemKey } from "./kpi-stat-grid"
 export type { KpiStatItem, KpiStatCardData, KpiStatVariant } from "./kpi-stat-grid"
 export { kpiCols } from "./kpi-cols"
+export { QuickActionGrid } from "./quick-action-grid"
+export type { QuickActionItem } from "./quick-action-grid"
+export { AttentionQueue } from "./attention-queue"
+export type { AttentionQueueColumn } from "./attention-queue"
@@ -0,0 +1,161 @@
+"use client"
+
+import type { KeyboardEvent, ReactNode } from "react"
+import Link from "next/link"
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+import { Badge } from "@/components/reui/badge"
+import { IconTile } from "@/components/reui/icon-tile"
+import { cn } from "@/lib/utils"
+import { kpiCols } from "./kpi-cols"
+
+type QuickActionBase = {
+  id: string
+  title: string
+  description: string
+  icon?: ReactNode
+  iconClassName?: string
+  badge?: string
+  disabled?: boolean
+}
+
+export type QuickActionItem = QuickActionBase &
+  (
+    | { href: string; onClick?: never }
+    | { onClick: () => void; href?: never }
+  )
+
+interface QuickActionGridProps {
+  actions: QuickActionItem[]
+  title?: string
+  description?: string
+  className?: string
+}
+
+const DEFAULT_ICON_CLASS = "text-muted-foreground [&_svg]:text-current"
+
+function resolveBadge(action: QuickActionItem): string {
+  if (action.badge) return action.badge
+  return action.onClick ? "Выполнить" : "Перейти"
+}
+
+function handleActionKeyDown(onActivate: () => void, event: KeyboardEvent<HTMLDivElement>) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault()
+    onActivate()
+  }
+}
+
+function QuickActionBody({ action }: { action: QuickActionItem }) {
+  return (
+    <div className="relative z-10 flex h-full items-start gap-3">
+      {action.icon ? (
+        <IconTile
+          variant="elevated"
+          aria-hidden="true"
+          className={cn("size-10.5", action.iconClassName ?? DEFAULT_ICON_CLASS)}
+        >
+          {action.icon}
+        </IconTile>
+      ) : null}
+
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex items-start justify-between gap-2">
+          <span className="text-foreground text-sm font-medium">{action.title}</span>
+          <Badge variant="outline" size="sm" className="shrink-0">
+            {resolveBadge(action)}
+          </Badge>
+        </div>
+        <p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
+          {action.description}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function panelClassName(disabled?: boolean) {
+  return cn(
+    "relative isolate flex h-full flex-col transition-colors",
+    disabled
+      ? "cursor-not-allowed opacity-60"
+      : "hover:bg-muted/40 focus-within:ring-ring cursor-pointer focus-within:ring-2",
+  )
+}
+
+/**
+ * KPI-like quick actions strip (horizontal Frame tiles).
+ * Preview: https://reui.io/preview/base/stats-12 · https://reui.io/preview/base/card-12
+ * Docs: https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/icon-tile
+ */
+export function QuickActionGrid({
+  actions,
+  title = "Быстрые действия",
+  description,
+  className,
+}: QuickActionGridProps) {
+  if (actions.length === 0) return null
+
+  return (
+    <Frame dense spacing="sm" className={cn("@container w-full", className)}>
+      {(title || description) && (
+        <FrameHeader>
+          {title ? <FrameTitle>{title}</FrameTitle> : null}
+          {description ? <FrameDescription>{description}</FrameDescription> : null}
+        </FrameHeader>
+      )}
+      <div className={cn("grid gap-2", kpiCols(actions.length))}>
+        {actions.map((action) => {
+          const label = `${action.title}: ${action.description}`
+
+          if ("href" in action && action.href) {
+            return (
+              <FramePanel key={action.id} className={panelClassName(action.disabled)}>
+                {action.disabled ? (
+                  <div aria-disabled aria-label={label}>
+                    <QuickActionBody action={action} />
+                  </div>
+                ) : (
+                  <>
+                    <QuickActionBody action={action} />
+                    <Link
+                      href={action.href}
+                      className="absolute inset-0 z-20 focus-visible:outline-none"
+                      aria-label={label}
+                    />
+                  </>
+                )}
+              </FramePanel>
+            )
+          }
+
+          const onClick = action.onClick
+          const onActivate = () => {
+            if (action.disabled || !onClick) return
+            onClick()
+          }
+
+          return (
+            <FramePanel
+              key={action.id}
+              className={panelClassName(action.disabled)}
+              role="button"
+              tabIndex={action.disabled ? -1 : 0}
+              aria-disabled={action.disabled || undefined}
+              aria-label={label}
+              onClick={onActivate}
+              onKeyDown={(e) => handleActionKeyDown(onActivate, e)}
+            >
+              <QuickActionBody action={action} />
+            </FramePanel>
+          )
+        })}
+      </div>
+    </Frame>
+  )
+}
@@ -70,63 +70,72 @@ export function TrafficRxTxChart({
  rx,
  tx,
  range = "1h",
+  embedded = false,
 }: {
  rx: number[]
  tx: number[]
  range?: string
+  /** Skip outer Frame when already inside OpsPanel / Frame. */
+  embedded?: boolean
 }) {
  const rangeMinutes = TRAFFIC_RANGE_MINUTES[range] ?? 60
  const data = toChartData(rx, tx, rangeMinutes)
  const tickEvery = Math.max(1, Math.ceil(data.length / 6))

+  const chart = (
+    <div className="flex flex-col gap-4">
+      <ChartContainer config={chartConfig} className="-ms-4 aspect-auto h-[220px] w-full">
+        <LineChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
+          <CartesianGrid
+            strokeDasharray="4 8"
+            vertical={false}
+            stroke="var(--border)"
+          />
+          <XAxis
+            dataKey="time"
+            axisLine={false}
+            tickLine={false}
+            tick={{ fontSize: 11 }}
+            tickMargin={10}
+            interval={tickEvery - 1}
+          />
+          <YAxis
+            axisLine={false}
+            tickLine={false}
+            tick={{ fontSize: 11 }}
+            tickFormatter={(v: number) => fmtRate(Number(v))}
+            tickMargin={8}
+            width={72}
+          />
+          <ChartTooltip content={<CustomTooltip />} />
+          <Line
+            dataKey="rx"
+            type="monotone"
+            stroke="var(--chart-rx)"
+            strokeWidth={2}
+            dot={false}
+          />
+          <Line
+            dataKey="tx"
+            type="monotone"
+            stroke="var(--chart-tx)"
+            strokeWidth={2}
+            dot={false}
+          />
+        </LineChart>
+      </ChartContainer>
+      <div className="mb-1 flex items-center justify-center gap-6">
+        <ChartLegendItem label="RX (входящий)" color="var(--chart-rx)" />
+        <ChartLegendItem label="TX (исходящий)" color="var(--chart-tx)" />
+      </div>
+    </div>
+  )
+
+  if (embedded) return chart
+
  return (
    <Frame className="w-full">
-      <FramePanel className="flex flex-col gap-6">
-        <ChartContainer config={chartConfig} className="-ms-4 aspect-auto h-[220px] w-full">
-          <LineChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
-            <CartesianGrid
-              strokeDasharray="4 8"
-              vertical={false}
-              stroke="var(--border)"
-            />
-            <XAxis
-              dataKey="time"
-              axisLine={false}
-              tickLine={false}
-              tick={{ fontSize: 11 }}
-              tickMargin={10}
-              interval={tickEvery - 1}
-            />
-            <YAxis
-              axisLine={false}
-              tickLine={false}
-              tick={{ fontSize: 11 }}
-              tickFormatter={(v: number) => fmtRate(Number(v))}
-              tickMargin={8}
-              width={72}
-            />
-            <ChartTooltip content={<CustomTooltip />} />
-            <Line
-              dataKey="rx"
-              type="monotone"
-              stroke="var(--chart-rx)"
-              strokeWidth={2}
-              dot={false}
-            />
-            <Line
-              dataKey="tx"
-              type="monotone"
-              stroke="var(--chart-tx)"
-              strokeWidth={2}
-              dot={false}
-            />
-          </LineChart>
-        </ChartContainer>
-        <div className="mb-1 flex items-center justify-center gap-6">
-          <ChartLegendItem label="RX (входящий)" color="var(--chart-rx)" />
-          <ChartLegendItem label="TX (исходящий)" color="var(--chart-tx)" />
-        </div>
-      </FramePanel>
+      <FramePanel className="flex flex-col gap-6">{chart}</FramePanel>
    </Frame>
  )
 }