fix(web): KPI в DetailPanel через KpiStatGrid hybrid (stats-12)

Отдельные карточки с icon tile, крупным value и Badge hint — как на дашборде. Списки, агенты, правила.

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

apps/web/src/components/reui-kit/detail-panel.tsx

@@ -6,13 +6,23 @@ import {
   FramePanel,
   FrameTitle,
 } from '@/components/reui/frame'
+import {
+  KpiStatGrid,
+  type KpiStatCard,
+  type KpiStatVariant,
+} from '@/components/reui-kit/kpi-stat-grid'
 import { cn } from '@evofw/ui/lib/utils'
 
 export interface DetailMetricCard {
   id: string
   icon: ReactNode
   label: string
+  /** Primary numeric / text value (shown large). */
   description: string
+  /** Outline badge on the right (hybrid KPI). */
+  hint?: string
+  iconClassName?: string
+  variant?: KpiStatVariant
   footer?: ReactNode
 }
 
@@ -22,7 +32,11 @@ interface DetailPanelProps {
 }
 
 function DetailPanelRoot({ children, className }: DetailPanelProps) {
-  return <div className={cn('flex flex-col gap-4 md:gap-6', className)}>{children}</div>
+  return (
+    <div className={cn('flex flex-col gap-4 md:gap-6', className)}>
+      {children}
+    </div>
+  )
 }
 
 interface DetailPanelHeaderProps {
@@ -53,34 +67,29 @@ function DetailPanelHeader({
           </div>
         ) : null}
       </FrameHeader>
-      {children ? <FramePanel className="flex flex-col gap-4">{children}</FramePanel> : null}
+      {children ? (
+        <FramePanel className="flex flex-col gap-4">{children}</FramePanel>
+      ) : null}
     </Frame>
   )
 }
 
 /**
- * Compact KPI strip — stats-7 pattern (single Frame, divided cells).
+ * Hybrid KPI cards — KpiStatGrid / stats-12.
- * Preview: https://reui.io/preview/base/stats-7
+ * Preview: https://reui.io/preview/base/stats-12
  */
 function DetailPanelMetrics({ cards }: { cards: DetailMetricCard[] }) {
-  return (
+  const kpiCards: KpiStatCard[] = cards.map((card) => ({
-    <Frame dense spacing="sm" className="w-full">
+    id: card.id,
-      <FramePanel className="grid grid-cols-1 divide-y p-0 sm:grid-cols-3 sm:divide-x sm:divide-y-0">
+    label: card.label,
-        {cards.map((card) => (
+    value: card.description,
-          <div key={card.id} className="flex flex-col gap-1.5 px-4 py-3">
+    icon: card.icon,
-            <div className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium [&_svg]:size-3.5">
+    iconClassName: card.iconClassName,
-              {card.icon}
+    hint: card.hint,
-              <span>{card.label}</span>
+    variant: card.variant,
-            </div>
+    footer: card.footer,
-            <p className="text-foreground text-xl font-semibold tracking-tight tabular-nums">
+  }))
-              {card.description}
+  return <KpiStatGrid cards={kpiCards} />
-            </p>
-            {card.footer}
-          </div>
-        ))}
-      </FramePanel>
-    </Frame>
-  )
 }
 
 function DetailPanelSection({

apps/web/src/routes/_auth/agents/$id.tsx

@@ -226,24 +226,31 @@ function AgentDetailPage() {
             {
               id: 'dropped',
               icon: <BanIcon aria-hidden />,
+              iconClassName: 'text-warning',
               label: 'Dropped',
               description: String(a.last_apply_packets_dropped ?? 0),
+              hint: 'сумма counters',
+              variant: 'warning',
             },
             {
               id: 'accepted',
               icon: <CheckCircle2Icon aria-hidden />,
+              iconClassName: 'text-success',
               label: 'Accepted',
               description: String(a.last_apply_packets_accepted ?? 0),
+              hint: 'сумма counters',
             },
             {
               id: 'kernel',
               icon: <CpuIcon aria-hidden />,
+              iconClassName: 'text-info',
               label: 'Kernel',
               description: a.last_apply_kernel_method ?? '—',
             },
             {
               id: 'apply',
               icon: <ClockIcon aria-hidden />,
+              iconClassName: 'text-primary',
               label: 'Last apply',
               description: a.last_apply_at ?? '—',
             },

apps/web/src/routes/_auth/lists/index.tsx

@@ -82,7 +82,7 @@ type ListItem = {
  * Lists — master-detail (ReUI PRO composition).
  * Catalog: https://reui.io/preview/base/list-9
  * Entries: https://reui.io/preview/base/data-grid-filtering-2
- * KPI: https://reui.io/preview/base/stats-7
+ * KPI: https://reui.io/preview/base/stats-12 (KpiStatGrid hybrid)
  * Sheet: https://reui.io/preview/base/sheet-1 · sheet-8
  * Empty: https://reui.io/preview/base/empty-state-12
  */
@@ -461,27 +461,38 @@ function ListsPage() {
                   {
                     id: 'count',
                     icon: <HashIcon aria-hidden />,
+                    iconClassName: 'text-info',
                     label: 'Записей',
                     description: String(entryItems.length),
+                    hint: manual ? 'ручной список' : 'внешний источник',
                   },
                   {
                     id: 'type',
                     icon: <TagIcon aria-hidden />,
+                    iconClassName: 'text-primary',
                     label: 'Источник',
                     description:
+                      detail.type === 'json_url'
+                        ? 'JSON'
+                        : detail.type === 'evobgp_community'
+                          ? 'EvoBGP'
+                          : 'Ручной',
+                    hint:
                       detail.type === 'json_url'
                         ? 'JSON по URL'
                         : detail.type === 'evobgp_community'
-                          ? 'EvoBGP community'
+                          ? 'community prefixes'
-                          : 'Ручной',
+                          : 'IP / CIDR / домен / список',
                   },
                   {
                     id: 'cidrs',
                     icon: <RefreshCwIcon aria-hidden />,
+                    iconClassName: 'text-success',
                     label: 'CIDR в политике',
                     description: String(
                       detail.entry_count ?? detail.entries.length,
                     ),
+                    hint: 'materialized',
                   },
                 ]}
               />

apps/web/src/routes/_auth/rules/$setId.tsx

@@ -410,20 +410,25 @@ function PolicySetDetailPage() {
             {
               id: 'rules',
               icon: <ShieldIcon aria-hidden />,
+              iconClassName: 'text-info',
               label: 'Правила',
               description: String(set.rules_count ?? rules.length),
             },
             {
               id: 'agents',
               icon: <UsersIcon aria-hidden />,
+              iconClassName: 'text-primary',
               label: 'Агенты',
               description: String(set.agents_count ?? assignedIds.length),
+              hint: 'назначено',
             },
             {
               id: 'status',
               icon: <ListIcon aria-hidden />,
+              iconClassName: set.enabled ? 'text-success' : 'text-muted-foreground',
               label: 'Статус',
               description: set.enabled ? 'Включён' : 'Выключен',
+              hint: set.enabled ? 'active' : 'disabled',
             },
           ]}
         />