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.

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">
+          <FramePanel key={index} className="flex items-start gap-3">
-            <Skeleton className="size-10.5 rounded-lg" />
+            <Skeleton className="size-10.5 shrink-0 rounded-lg" />
-            <Skeleton className="h-7 w-14" />
+            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
-            <Skeleton className="h-4 w-20" />
+              <div className="flex items-center justify-between gap-2">
-            <Skeleton className="mt-auto h-4.5 w-16 rounded-full" />
+                <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({

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 |