From 26a96bc82455857371967dfa2d3ee9e3051156b1 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 17 Jul 2026 18:37:00 +0700
Subject: [PATCH] refactor: update KPI components for improved layout and
 clarity

Revised the KpiStatGrid and KpiStatCardBody components to enhance the layout and presentation of KPI tiles. Updated the documentation to reflect the new horizontal compact hybrid design, ensuring better visual organization with the icon on the left and improved label and value alignment. Adjusted the skeleton loading state for a more cohesive user experience.
---
 .../src/components/reui-kit/kpi-stat-grid.tsx | 31 +++++++++++--------
 docs/ui-design-contract.md                    |  4 +--
 2 files changed, 20 insertions(+), 15 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 1ddc4d2..dd70b21 100644
--- a/apps/web/src/components/reui-kit/kpi-stat-grid.tsx
+++ b/apps/web/src/components/reui-kit/kpi-stat-grid.tsx
@@ -10,7 +10,7 @@ import { Skeleton } from '@evobgp/ui/components/skeleton'
 export type KpiStatVariant = 'default' | 'warning' | 'destructive'
 
 /**
- * KPI tile data — hybrid compact stats-12 (icon + value + label + Badge footer).
+ * KPI tile data — horizontal compact hybrid (icon left + label/Badge + value).
  * @see https://reui.io/preview/base/stats-12
  */
 export type KpiStatItem = {
@@ -90,11 +90,11 @@ function KpiStatCardBody({ item }: { item: KpiStatItem }) {
   const valueVariant = item.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">
       {item.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',
             item.iconClassName ?? DEFAULT_ICON_CLASS,
           )}
         >
@@ -104,7 +104,11 @@ function KpiStatCardBody({ item }: { item: KpiStatItem }) {
         </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">
+          <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',
@@ -113,10 +117,7 @@ function KpiStatCardBody({ item }: { item: KpiStatItem }) {
         >
           {item.value}
         </div>
-        <div className="text-muted-foreground text-sm font-medium">{item.label}</div>
       </div>
-
-      {footer ? <div className="mt-auto w-full">{footer}</div> : null}
     </div>
   )
 }
@@ -203,11 +204,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>
@@ -266,7 +271,7 @@ function KpiStatCardItem({ item }: { item: KpiStatItem }) {
 }
 
 /**
- * Hybrid KPI grid — compact Frame strip.
+ * Hybrid KPI — EvoBGP visual + horizontal compact layout (icon left).
  * 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 9deb1fc..e7c0ead 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 · https://reui.io/preview/base/app-shell-7 |
-| 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 (`settings-7`) | https://reui.io/preview/base/settings-16 · https://reui.io/preview/base/settings-7 |
@@ -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 |