From cd616c7a035364ce798033880517e03d5dfb60a0 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 17 Jul 2026 18:36:51 +0700
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=D1=83=D0=BB=D1=83=D1=87=D1=88?=
 =?UTF-8?q?=D0=B8=D1=82=D1=8C=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BA=D1=83=20=D0=B8=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20?=
 =?UTF-8?q?KPI=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=B5=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Обновлены компоненты KpiStatCardBody и KpiStatGridSkeleton для улучшения визуального представления и компоновки. Изменены классы CSS для более компактного и адаптивного отображения, добавлены новые элементы для лучшей организации информации. Обновлена документация для отражения изменений в дизайне KPI карточек.
---
 .../src/components/reui-kit/kpi-stat-grid.tsx | 29 +++++++++++--------
 docs/ui-design-contract.md                    |  4 +--
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/reui-kit/kpi-stat-grid.tsx b/apps/web/src/components/reui-kit/kpi-stat-grid.tsx
index 64582e2..121215c 100644
--- a/apps/web/src/components/reui-kit/kpi-stat-grid.tsx
+++ b/apps/web/src/components/reui-kit/kpi-stat-grid.tsx
@@ -71,11 +71,11 @@ function KpiStatCardBody({ card }: { card: KpiStatCard }) {
   const valueVariant = card.variant ?? 'default'
 
   return (
-    <div className="relative z-10 flex h-full flex-col items-start gap-3">
+    <div className="relative z-10 flex h-full items-start gap-3">
       {card.icon ? (
         <Item
           className={cn(
-            'border-background bg-muted flex size-10.5 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
+            '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',
             card.iconClassName ?? DEFAULT_ICON_CLASS,
           )}
         >
@@ -85,7 +85,11 @@ function KpiStatCardBody({ card }: { card: KpiStatCard }) {
         </Item>
       ) : null}
 
-      <div className="flex flex-col gap-0.5">
+      <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-muted-foreground text-sm font-medium">{card.label}</span>
+          {footer ? <div className="shrink-0">{footer}</div> : null}
+        </div>
         <span
           className={cn(
             'text-2xl leading-none font-bold tabular-nums',
@@ -94,10 +98,7 @@ function KpiStatCardBody({ card }: { card: KpiStatCard }) {
         >
           {card.value}
         </span>
-        <span className="text-muted-foreground text-sm font-medium">{card.label}</span>
       </div>
-
-      {footer ? <div className="mt-auto w-full">{footer}</div> : null}
     </div>
   )
 }
@@ -147,11 +148,15 @@ function KpiStatGridSkeleton({ count }: { count: number }) {
     <Frame className="@container w-full">
       <div className={cn('grid gap-2', kpiCols(count))}>
         {Array.from({ length: count }).map((_, index) => (
-          <FramePanel key={index} className="flex flex-col gap-3">
-            <Skeleton className="size-10.5 rounded-lg" />
-            <Skeleton className="h-7 w-14" />
-            <Skeleton className="h-4 w-20" />
-            <Skeleton className="mt-auto h-4.5 w-16 rounded-full" />
+          <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>
@@ -160,7 +165,7 @@ function KpiStatGridSkeleton({ count }: { count: number }) {
 }
 
 /**
- * Hybrid KPI grid — compact stats-12 Frame strip.
+ * Hybrid KPI — EvoBGP visual (colored icon + Badge) + horizontal compact layout.
  * Preview: https://reui.io/preview/base/stats-12
  */
 export function KpiStatGrid({
diff --git a/docs/ui-design-contract.md b/docs/ui-design-contract.md
index 771b329..dfcca0d 100644
--- a/docs/ui-design-contract.md
+++ b/docs/ui-design-contract.md
@@ -18,7 +18,7 @@ Ops / list / dashboard / detail / settings — только **Frame**, не shad
 | Зона | Block | Preview |
 |------|-------|---------|
 | Shell | `app-shell-12` (+ cmdk/monitor где нужно) | https://reui.io/preview/base/app-shell-12 |
-| KPI | hybrid `stats-12` (compact Frame strip: colored icon → value ± variant → label → Badge footer) | https://reui.io/preview/base/stats-12 |
+| KPI | horizontal compact hybrid (icon left + label/Badge + value ± variant; EvoBGP visual) | https://reui.io/preview/base/stats-12 |
 | Dashboard | `dashboard-1` | https://reui.io/preview/base/dashboard-1 |
 | Lists | `data-grid-filtering-2` | https://reui.io/preview/base/data-grid-filtering-2 |
 | Settings | `settings-16` + SettingRow | https://reui.io/preview/base/settings-16 |
@@ -31,7 +31,7 @@ Ops / list / dashboard / detail / settings — только **Frame**, не shad
 | Component | Role |
 |-----------|------|
 | `ResourcePage` | Frame + line tabs + Filters + DataGrid |
-| `KpiStatGrid` | hybrid compact stats-12 KPI tiles (`variant`, Badge footer) |
+| `KpiStatGrid` | horizontal compact hybrid KPI tiles (`variant`, Badge) |
 | `OpsDashboard` | KPI + charts + attention queue |
 | `SettingsShell` | settings nav + Outlet |
 | `DetailPanel` | detail Frame sections |