feat(web): enhance UI components and improve documentation

- Updated frontend UI patterns documentation to reflect new components and their usage.
- Enhanced CertKpiCards for better KPI visualization and streamlined data handling.
- Refactored OpsDashboard and ResourcePage for improved layout consistency and loading states.
- Introduced CatalogBoardToggle for better navigation between views in the Groups and Services pages.
- Improved Tabs component styles for better responsiveness and accessibility.

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

.cursor/rules/frontend-ui-patterns.mdc

@@ -35,7 +35,8 @@ apps/web/src/components/  ← shared + domain + layout
     kanban-board.tsx      ← kanban + KanbanBoardSkeleton
     detail-panel.tsx      ← detail: Frame header/metrics
     settings-shell.tsx
-    ops-dashboard.tsx
+    ops-dashboard.tsx     ← KPI card-35 + charts
+  catalog-board-toggle.tsx
   empty-state.tsx
   query-state.tsx
   confirm-dialog.tsx
@@ -52,11 +53,12 @@ apps/web/src/components/  ← shared + domain + layout
 | Элемент | Shared | Primitive |
 |---------|--------|-----------|
 | Page wrapper | `PageShell` | — |
-| List page | `ResourcePage` | ReUI `Frame` + `data-grid` + `filters` + shadcn `Tabs` |
+| List page | `ResourcePage` | ReUI `Frame` + `data-grid` + `filters` + shadcn `Tabs` `variant="line"` |
+| Catalog / Board | `CatalogBoardToggle` + `ResourcePage` / `KanbanBoard` | `?view=board` на `/groups`, `/services` |
 | Kanban | `KanbanBoard` / `KanbanBoardSkeleton` | ReUI `kanban` + `Frame` |
 | Detail | `DetailPanel` | ReUI `Frame` |
 | Settings | `SettingsShell` | — |
-| Dashboard | `OpsDashboard` / `KpiStatGrid` | ReUI `Frame` |
+| Dashboard KPI | `OpsDashboard` / `KpiStatGrid` | ReUI Frame [card-35](https://reui.io/preview/base/card-35) |
 | Empty | `EmptyState` | `Empty` |
 | Loading / Error | `QueryState` / kit skeletons | `Skeleton`, `Alert` |
 | Status | `StatusBadge` | ReUI `Badge` (`success`/`info`/`warning`) |
@@ -76,32 +78,41 @@ apps/web/src/components/  ← shared + domain + layout
 
 Max 1 primary (`default`) на экран; остальные `outline` / `ghost`.
 
-## Line tabs (ResourcePage)
+Toggle «Доска» / «К каталогу» — всегда `outline` в `primaryAction` / `KanbanBoard.toolbarActions` (не отдельный Frame-shell).
 
-Эталон: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2).
+## Line tabs (project standard)
+
+Эталон: [c-tabs-2](https://reui.io/preview/base/components/c-tabs-2) + counted [filtering-2](https://reui.io/preview/base/data-grid-filtering-2).
 
 ```tsx
-<TabsList variant="line" className="h-auto gap-5 bg-transparent p-0">
-  <TabsTrigger
-    value="…"
-    className={cn(
-      'h-auto flex-none gap-2 rounded-none bg-transparent px-0 pb-3 text-sm shadow-none',
-      'text-muted-foreground hover:text-foreground',
-      'data-active:bg-transparent data-active:text-foreground data-active:shadow-none',
-      'dark:data-active:border-transparent dark:data-active:bg-transparent',
-      'after:bottom-0 after:h-0.5',
-    )}
-  >
+<TabsList variant="line" className="gap-5">
+  <TabsTrigger value="…" className="text-muted-foreground hover:text-foreground h-auto gap-2 px-0 pb-3">
     <span>Label</span>
     <span className="bg-muted text-muted-foreground … tabular-nums rounded-md">{count}</span>
   </TabsTrigger>
 </TabsList>
 ```
 
-- Active = яркий текст + **белый underline** (`after:`), без фона/инвертированного badge
-- Count pill всегда `bg-muted` (как в preview)
-- `h-auto` / `flex-none` / `data-active:bg-transparent` — снять клип `h-8` и `dark:bg-input/30` у примитива
+- Примитив: [`packages/ui/.../tabs.tsx`](../../packages/ui/src/components/tabs.tsx) — line = `h-auto`, без `flex-1`, без `dark:data-active:bg-input/30`, underline `after:bottom-0`
+- Active = яркий текст + **foreground underline**, без фона
+- Count pill всегда `bg-muted`
 - Active state — Base UI `data-active`, не Radix `data-[state=active]`
+- Не трогать internals `reui/date-selector`
+
+## Catalog / Board (`/groups`, `/services`)
+
+| Режим | UI | Search |
+|-------|-----|--------|
+| Catalog (default) | `ResourcePage` + primary create | omit / `view=catalog` |
+| Board | `KanbanBoard` DnD | `?view=board` |
+
+- Groups tabs: Все / С доменами / Пустые
+- Services tabs: Все / Включены / Выключены / Без группы
+- DnD только на board; kanban hooks/cards не удалять
+
+## Dashboard KPI
+
+Эталон: [card-35](https://reui.io/preview/base/card-35) — muted **label** + крупный **value** + optional **hint**; клик по карточке через `to` (`Link`), без отдельных hint-links.
 
 ## Sidebar
 
@@ -122,6 +133,8 @@ Max 1 primary (`default`) на экран; остальные `outline` / `ghost
 |------|----------------|
 | Shell | [app-shell-12](https://reui.io/preview/base/app-shell-12) |
 | List + tabs + filters | [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2) |
+| Line tabs | [c-tabs-2](https://reui.io/preview/base/components/c-tabs-2) |
+| KPI | [card-35](https://reui.io/preview/base/card-35) |
 | Login | auth-13 / login-03 |
 
 ## Spacing
@@ -130,7 +143,7 @@ Max 1 primary (`default`) на экран; остальные `outline` / `ghost
 AppShell main: gap-4 md:gap-6, px-4 md:px-6, py-4 md:py-5
 PageShell:     gap-4 md:gap-6
 Title/desc:    gap-px
-Card/Frame grid: gap-4
+Card/Frame grid: gap-4 (dashboard denser: gap-2 md:gap-3)
 FieldGroup:    gap-4
 Item list:     gap-2
 Toolbar / header actions: gap-2
@@ -143,7 +156,7 @@ Tabs list (line): gap-5
 
 Каждый блок: **default, hover, focus, disabled, empty, loading, error**.
 
-- **Loading** — `Skeleton` / `ResourcePage` skeleton / `KanbanBoardSkeleton`, не Spinner на странице
+- **Loading** — `Skeleton` / `ResourcePage` skeleton / `KanbanBoardSkeleton` / `OpsDashboard` skeleton, не Spinner на странице
 - **Empty** — `EmptyState` с CTA
 - **Zero-results** — message внутри DataGrid (+ «Сбросить»)
 - **Error** — `QueryState` / `Alert` + `onRetry`