feat(web): добавить ReUI PRO rules, KpiStatGrid и убрать ModeToggle

Полный комплект frontend-правил, hybrid KPI/QuickAction kit, contract NavUser; удалён мёртвый ModeToggle.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/mode-toggle.tsx

@@ -1,34 +0,0 @@
-import { Moon, Sun } from 'lucide-react'
-import { useTheme } from 'next-themes'
-import { Button } from '@authportal/ui/components/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@authportal/ui/components/dropdown-menu'
-
-export function ModeToggle() {
-  const { setTheme } = useTheme()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger render={<Button variant="ghost" size="icon" />}>
-        <Sun className="size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-        <Moon className="absolute size-5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-        <span className="sr-only">Сменить тему</span>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')}>
-          Светлая
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
-          Тёмная
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
-          Системная
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

apps/web/src/components/reui-kit/index.ts

@@ -0,0 +1,15 @@
+export {
+  KpiStatGrid,
+  KpiStatCard,
+  KpiStatCardTile,
+  kpiStatItemKey,
+  type KpiStatItem,
+  type KpiStatCardData,
+  type KpiStatCard as KpiStatCardType,
+  type KpiStatVariant,
+  type OpsKpiCard,
+} from './kpi-stat-grid'
+export { QuickActionGrid, type QuickActionItem } from './quick-action-grid'
+export type { ResourcePageProps, ResourcePageTab } from './resource-page'
+export { AppSwitcherAdminEditor } from './app-switcher-admin-editor'
+export { UserAccessSheet } from './user-access-sheet'

apps/web/src/components/reui-kit/kpi-cols.ts

@@ -0,0 +1,10 @@
+/** Shared grid column classes for hybrid KPI / Quick Actions tiles. */
+export function kpiCols(count: number): string {
+  if (count <= 1) return 'grid-cols-1'
+  if (count === 2) return 'grid-cols-1 @xl:grid-cols-2'
+  if (count === 3) return 'grid-cols-1 @3xl:grid-cols-3'
+  if (count === 4) return 'grid-cols-1 @3xl:grid-cols-2 @6xl:grid-cols-4'
+  if (count === 5) return 'grid-cols-2 @3xl:grid-cols-3 xl:grid-cols-5'
+  if (count === 6) return 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6'
+  return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
+}

apps/web/src/components/reui-kit/kpi-stat-grid.tsx

@@ -0,0 +1,325 @@
+import type { KeyboardEvent, ReactNode } from 'react'
+import { Link } from '@tanstack/react-router'
+
+import { Frame, FramePanel } from '@/components/reui/frame'
+import { Badge } from '@/components/reui/badge'
+import { cn } from '@authportal/ui/lib/utils'
+import { kpiCols } from './kpi-cols'
+import { Item, ItemMedia } from '@authportal/ui/components/item'
+import { Skeleton } from '@authportal/ui/components/skeleton'
+
+export type KpiStatVariant = 'default' | 'warning' | 'destructive'
+
+/**
+ * KPI tile data — horizontal compact hybrid (icon left + label/Badge + value).
+ * @see https://reui.io/preview/base/stats-12
+ */
+export type KpiStatItem = {
+  id?: string
+  label: ReactNode
+  value: ReactNode
+  hint?: ReactNode
+  to?: string
+  search?: Record<string, unknown>
+  onSelect?: () => void
+  onClick?: () => void
+  selected?: boolean
+  active?: boolean
+  icon?: ReactNode
+  iconClassName?: string
+  variant?: KpiStatVariant
+  footer?: ReactNode
+}
+
+/** CFDM-compatible card shape (id required). */
+export type KpiStatCardData = KpiStatItem & { id: string }
+
+/** @deprecated Use KpiStatCardData */
+export type OpsKpiCard = KpiStatCardData
+
+/** @deprecated Use KpiStatCardData — type alias for CFDM kit parity */
+export type KpiStatCard = KpiStatCardData
+
+const DEFAULT_ICON_CLASS = 'text-muted-foreground [&_svg]:text-current'
+
+const VALUE_VARIANT_CLASS: Record<KpiStatVariant, string> = {
+  default: 'text-foreground',
+  warning: 'text-warning',
+  destructive: 'text-destructive',
+}
+
+function handleCardKeyDown(onActivate: () => void, event: KeyboardEvent<HTMLDivElement>) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    onActivate()
+  }
+}
+
+function resolveActivate(item: KpiStatItem): (() => void) | undefined {
+  return item.onClick ?? item.onSelect
+}
+
+function isSelected(item: KpiStatItem): boolean {
+  return Boolean(item.selected ?? item.active)
+}
+
+function resolveFooter(item: KpiStatItem): ReactNode {
+  if (item.footer) return item.footer
+  if (typeof item.hint === 'string') {
+    return (
+      <Badge variant="outline" size="sm">
+        {item.hint}
+      </Badge>
+    )
+  }
+  if (item.hint) return item.hint
+  return null
+}
+
+function KpiStatCardBody({ item }: { item: KpiStatItem }) {
+  const footer = resolveFooter(item)
+  const valueVariant = item.variant ?? 'default'
+
+  return (
+    <div className="relative z-10 flex h-full items-start gap-3">
+      {item.icon ? (
+        <Item
+          className={cn(
+            'border-background bg-muted flex size-10.5 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
+            item.iconClassName ?? DEFAULT_ICON_CLASS,
+          )}
+        >
+          <ItemMedia variant="icon" className="size-auto">
+            {item.icon}
+          </ItemMedia>
+        </Item>
+      ) : null}
+
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex items-start justify-between gap-2">
+          <div className="text-muted-foreground text-sm font-medium">{item.label}</div>
+          {footer ? <div className="shrink-0">{footer}</div> : null}
+        </div>
+        <div
+          className={cn(
+            'text-2xl leading-none font-bold tabular-nums',
+            VALUE_VARIANT_CLASS[valueVariant],
+          )}
+        >
+          {item.value}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function panelClassName(item: KpiStatItem, className?: string) {
+  const onActivate = resolveActivate(item)
+  const clickable = Boolean(item.to || onActivate)
+  const selected = isSelected(item)
+
+  return cn(
+    'relative isolate flex h-full flex-col',
+    clickable &&
+      'hover:bg-muted/40 focus-within:ring-ring cursor-pointer transition-colors focus-within:ring-2',
+    selected && 'ring-primary/30 bg-muted/30 ring-1',
+    className,
+  )
+}
+
+/** Single KPI tile — used for embedded / standalone contexts. */
+export function KpiStatCardTile({
+  item,
+  embedded = false,
+  className,
+}: {
+  item: KpiStatItem
+  embedded?: boolean
+  className?: string
+}) {
+  const onActivate = resolveActivate(item)
+  const panelClass = panelClassName(item, className)
+
+  let panel: ReactNode
+
+  if (item.to) {
+    panel = (
+      <FramePanel className={panelClass}>
+        <Link to={item.to} search={item.search} className="focus-visible:outline-none">
+          <KpiStatCardBody item={item} />
+        </Link>
+      </FramePanel>
+    )
+  } else if (onActivate) {
+    panel = (
+      <FramePanel
+        className={panelClass}
+        onClick={onActivate}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => handleCardKeyDown(onActivate, e)}
+      >
+        <KpiStatCardBody item={item} />
+      </FramePanel>
+    )
+  } else {
+    panel = (
+      <FramePanel className={panelClass}>
+        <KpiStatCardBody item={item} />
+      </FramePanel>
+    )
+  }
+
+  if (embedded) {
+    return <Frame className="h-full ring-1 ring-foreground/10">{panel}</Frame>
+  }
+
+  return <Frame className="h-full">{panel}</Frame>
+}
+
+/** @deprecated Prefer KpiStatCardTile — kept for existing imports */
+export function KpiStatCard({
+  item,
+  embedded = false,
+  className,
+}: {
+  item: KpiStatItem
+  embedded?: boolean
+  className?: string
+}) {
+  return <KpiStatCardTile item={item} embedded={embedded} className={className} />
+}
+
+function KpiStatGridSkeleton({ count }: { count: number }) {
+  return (
+    <Frame className="@container w-full">
+      <div className={cn('grid gap-2', kpiCols(count))}>
+        {Array.from({ length: count }).map((_, index) => (
+          <FramePanel key={index} className="flex items-start gap-3">
+            <Skeleton className="size-10.5 shrink-0 rounded-lg" />
+            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+              <div className="flex items-center justify-between gap-2">
+                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-4.5 w-14 rounded-full" />
+              </div>
+              <Skeleton className="h-7 w-16" />
+            </div>
+          </FramePanel>
+        ))}
+      </div>
+    </Frame>
+  )
+}
+
+interface KpiStatGridProps {
+  /** EvoBGP primary API */
+  items?: KpiStatItem[]
+  /** CFDM-compatible API */
+  cards?: KpiStatCardData[]
+  isLoading?: boolean
+  emptyMessage?: ReactNode
+  emptyIcon?: ReactNode
+  className?: string
+  skeletonCount?: number
+  /** Wrap each tile in its own Frame (analytics panels). */
+  embedded?: boolean
+  'aria-label'?: string
+}
+
+function KpiStatCardItem({ item }: { item: KpiStatItem }) {
+  const onActivate = resolveActivate(item)
+  const panelClass = panelClassName(item)
+
+  if (item.to) {
+    return (
+      <FramePanel className={panelClass}>
+        <Link to={item.to} search={item.search} className="focus-visible:outline-none">
+          <KpiStatCardBody item={item} />
+        </Link>
+      </FramePanel>
+    )
+  }
+
+  if (onActivate) {
+    return (
+      <FramePanel
+        className={panelClass}
+        onClick={onActivate}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => handleCardKeyDown(onActivate, e)}
+      >
+        <KpiStatCardBody item={item} />
+      </FramePanel>
+    )
+  }
+
+  return (
+    <FramePanel className={panelClass}>
+      <KpiStatCardBody item={item} />
+    </FramePanel>
+  )
+}
+
+/**
+ * Hybrid KPI — EvoBGP visual + horizontal compact layout (icon left).
+ * Preview: https://reui.io/preview/base/stats-12
+ */
+export function KpiStatGrid({
+  items,
+  cards,
+  isLoading = false,
+  emptyMessage,
+  emptyIcon,
+  className,
+  skeletonCount = 4,
+  embedded = false,
+  'aria-label': ariaLabel,
+}: KpiStatGridProps) {
+  if (isLoading) {
+    return <KpiStatGridSkeleton count={skeletonCount} />
+  }
+
+  const list = items ?? cards ?? []
+
+  if (list.length === 0 && (emptyMessage || emptyIcon)) {
+    return (
+      <Frame dense spacing="sm" className={cn('w-full', className)}>
+        <FramePanel className="flex items-center gap-3 p-4">
+          {emptyIcon}
+          {emptyMessage ? (
+            <p className="text-muted-foreground text-sm">{emptyMessage}</p>
+          ) : null}
+        </FramePanel>
+      </Frame>
+    )
+  }
+
+  if (embedded) {
+    return (
+      <section aria-label={ariaLabel} className={cn('@container w-full', className)}>
+        <div className={cn('grid gap-2', kpiCols(list.length || 1))}>
+          {list.map((item, index) => (
+            <KpiStatCardTile key={kpiStatItemKey(item, index)} item={item} embedded />
+          ))}
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <Frame className={cn('@container w-full', className)} aria-label={ariaLabel}>
+      <div className={cn('grid gap-2', kpiCols(list.length || 1))}>
+        {list.map((item, index) => (
+          <KpiStatCardItem key={kpiStatItemKey(item, index)} item={item} />
+        ))}
+      </div>
+    </Frame>
+  )
+}
+
+export function kpiStatItemKey(item: KpiStatItem, index: number): string {
+  if (item.id) return item.id
+  if (typeof item.label === 'string') return item.label
+  return `kpi-${index}`
+}

apps/web/src/components/reui-kit/quick-action-grid.tsx

@@ -0,0 +1,104 @@
+import type { ReactNode } from 'react'
+import { Link } from '@tanstack/react-router'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { Badge } from '@/components/reui/badge'
+import { Item, ItemMedia } from '@authportal/ui/components/item'
+import { cn } from '@authportal/ui/lib/utils'
+import { kpiCols } from './kpi-cols'
+
+export interface QuickActionItem {
+  id: string
+  title: string
+  description: string
+  to: string
+  search?: Record<string, unknown>
+  icon?: ReactNode
+  iconClassName?: string
+}
+
+interface QuickActionGridProps {
+  actions: QuickActionItem[]
+  title?: string
+  description?: string
+  className?: string
+}
+
+const DEFAULT_ICON_CLASS = 'text-muted-foreground [&_svg]:text-current'
+
+function QuickActionBody({ action }: { action: QuickActionItem }) {
+  return (
+    <div className="relative z-10 flex h-full items-start gap-3">
+      {action.icon ? (
+        <Item
+          className={cn(
+            'border-background bg-muted flex size-10.5 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
+            action.iconClassName ?? DEFAULT_ICON_CLASS,
+          )}
+        >
+          <ItemMedia variant="icon" className="size-auto">
+            {action.icon}
+          </ItemMedia>
+        </Item>
+      ) : 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">
+            Перейти
+          </Badge>
+        </div>
+        <p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
+          {action.description}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * KPI-like quick actions strip (horizontal Frame tiles).
+ * Preview: https://reui.io/preview/base/stats-12
+ */
+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) => (
+          <FramePanel
+            key={action.id}
+            className="relative isolate flex h-full flex-col hover:bg-muted/40 focus-within:ring-ring cursor-pointer transition-colors focus-within:ring-2"
+          >
+            <Link
+              to={action.to}
+              search={action.search}
+              className="focus-visible:outline-none"
+              aria-label={`${action.title}: ${action.description}`}
+            >
+              <QuickActionBody action={action} />
+            </Link>
+          </FramePanel>
+        ))}
+      </div>
+    </Frame>
+  )
+}

apps/web/src/components/reui-kit/resource-page.tsx

@@ -1,6 +1,12 @@
 /**
- * Minimal ResourcePage stub for list screens.
- * Full CFDM kit is heavier; auth-portal users list uses Frame + DataGrid inline.
+ * Portal lists compose PageShell + Frame + DataGrid directly.
+ * Types kept for kit parity with ops apps (CFDM / VPS / EvoBGP).
  * Preview: https://reui.io/preview/base/data-grid-filtering-2
  */
-export { PageShell } from '@/components/page-shell'
+export type ResourcePageTab = {
+  id: string
+  label: string
+  count?: number
+}
+
+export type ResourcePageProps = Record<string, never>