feat(reui): update ReUI components and documentation to reflect 20 building blocks
Docker / build (push) Failing after 19s
Docker / build (push) Failing after 19s
- Expanded the ReUI skill description to include 20 free building blocks. - Updated references in various documentation files to reflect the new count of components. - Enhanced the data-grid documentation to specify the use of TanStack Table v9. - Added new component details, including the icon-tile, and clarified usage instructions across multiple files. This update improves clarity and ensures that all references are consistent with the latest component offerings.
This commit is contained in:
@@ -0,0 +1,69 @@
|
||||
---
|
||||
name: MM ReUI Dashboard
|
||||
overview: Wave D — /dashboard и /traffic: **hybrid KpiStatGrid** (EvoBGP DNA) + OpsDashboard + QuickActionGrid + Frame charts.
|
||||
todos:
|
||||
- id: dashboard-ops
|
||||
content: "Dashboard: StatCard → hybrid KpiStatGrid + OpsDashboard"
|
||||
status: pending
|
||||
- id: traffic-frame
|
||||
content: "Traffic: hybrid KpiStatGrid + Frame charts"
|
||||
status: pending
|
||||
- id: qa-grid
|
||||
content: QuickActionGrid (sibling hybrid DNA)
|
||||
status: pending
|
||||
isProject: false
|
||||
---
|
||||
|
||||
# Wave D — Dashboard & overview
|
||||
|
||||
Родитель: [MM ReUI Master](mm_reui_master_b80dbef6.plan.md). Зависимости: **A** (hybrid kit), **B** (эталон).
|
||||
|
||||
## Цель
|
||||
|
||||
Убрать hand-roll `StatCard` (Card). KPI = **hybrid как в старых apps**.
|
||||
|
||||
## KPI (MUST)
|
||||
|
||||
- `/dashboard` и `/traffic`: только `KpiStatGrid` hybrid ([stats-12](https://reui.io/preview/base/stats-12))
|
||||
- Удалить локальный `StatCard` / Card metric grids
|
||||
- NEVER: SectionCards, sparkline-inside-Card как KPI shell (sparkline может быть *внутри* hybrid tile через kit API, не отдельный Card KPI)
|
||||
- Quick Actions: только `QuickActionGrid` (sibling hybrid), не Button/Card grid
|
||||
|
||||
## Routes
|
||||
|
||||
| Route | ~LOC | Работа |
|
||||
|-------|------|--------|
|
||||
| `/dashboard` | ~926 | `StatCard` → **hybrid** `KpiStatGrid`; `OpsDashboard`; Frame probes |
|
||||
| `/traffic` | ~1020 | **hybrid** KPI; Frame charts; semantic tokens |
|
||||
|
||||
## ReUI refs (MCP `surface: frame`)
|
||||
|
||||
- [dashboard-1](https://reui.io/preview/base/dashboard-1)
|
||||
- KPI: **только** [stats-12](https://reui.io/preview/base/stats-12) · QA [card-12](https://reui.io/preview/base/card-12) DNA via kit
|
||||
- Charts: [chart-15](https://reui.io/preview/base/chart-15) adapt (не KPI substitute)
|
||||
- Shell: [app-shell-12](https://reui.io/preview/base/app-shell-12)
|
||||
|
||||
## Ключевые файлы
|
||||
|
||||
- [`app/(main)/dashboard/page.tsx`](c:/Users/shats/Dev/MikrotikManager-3/app/(main)/dashboard/page.tsx)
|
||||
- [`components/dashboard/latency-chart.tsx`](c:/Users/shats/Dev/MikrotikManager-3/components/dashboard/latency-chart.tsx), `bandwidth-chart.tsx`, `internet-path-map.tsx`
|
||||
- [`components/data-grids/dashboard-active-probes-data-grid.tsx`](c:/Users/shats/Dev/MikrotikManager-3/components/data-grids/dashboard-active-probes-data-grid.tsx)
|
||||
- [`app/(main)/traffic/page.tsx`](c:/Users/shats/Dev/MikrotikManager-3/app/(main)/traffic/page.tsx)
|
||||
|
||||
## Порядок секций
|
||||
|
||||
**Hybrid KPI** → QuickActionGrid → charts / path map → attention + probes.
|
||||
`showQuickActions` default true.
|
||||
|
||||
## Инварианты
|
||||
|
||||
- Не менять API fetch
|
||||
- Path map — Frame wrap, не rewrite
|
||||
- Не смешивать Card KPI с Frame
|
||||
|
||||
## DoD
|
||||
|
||||
- [ ] Нет `StatCard`/Card KPI на `/dashboard` и `/traffic`
|
||||
- [ ] Только hybrid `KpiStatGrid` (EvoBGP DNA)
|
||||
- [ ] Charts/path в Frame panels
|
||||
- [ ] lint/build OK
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
name: MM ReUI Foundation
|
||||
overview: "Wave A — foundation: ui-design-contract, kpi-hybrid rule, порт KpiStatGrid (EvoBGP hybrid DNA 1:1), Card→Frame shell, chrome (240px, NavUser)."
|
||||
todos:
|
||||
- id: docs-contract
|
||||
content: ui-design-contract + reui-mcp/kpi-hybrid rules + AGENTS
|
||||
status: pending
|
||||
- id: port-kit
|
||||
content: "Порт reui-kit: KpiStatGrid hybrid DNA 1:1 с EvoBGP"
|
||||
status: pending
|
||||
- id: frame-bridge
|
||||
content: DataPageCard → Frame surface bridge
|
||||
status: pending
|
||||
- id: chrome-240-navuser
|
||||
content: Sidebar 240px + NavUser segmented theme
|
||||
status: pending
|
||||
isProject: false
|
||||
---
|
||||
|
||||
# Wave A — Foundation (MikrotikManager ReUI)
|
||||
|
||||
Родитель: [MM ReUI Master](mm_reui_master_b80dbef6.plan.md). Источники: [Explore MikrotikManager UI](a9e538ec-d664-4bf5-a712-4978beefe057), [ReUI SoT from siblings](97b837f2-382e-4bf9-b0fc-84678deb882c).
|
||||
|
||||
## Цель
|
||||
|
||||
Подготовить инфраструктуру ReUI PRO **без** массовой миграции страниц. После Wave A любой экран переводится на Frame + **hybrid KPI** (`KpiStatGrid`) по шаблону старых apps.
|
||||
|
||||
## KPI hybrid (закладывается здесь)
|
||||
|
||||
- Порт `KpiStatGrid` **байт-в-байт DNA** с EvoBGP (horizontal compact: icon `size-10.5` `bg-muted` + label/Badge + value ± variant)
|
||||
- Preview: [stats-12](https://reui.io/preview/base/stats-12) · rule `kpi-hybrid.mdc` в MM
|
||||
- **NEVER** в kit: SectionCards, vertical-only stats, Card KPI wrappers
|
||||
- Волны B–G только **потребляют** этот kit — не рисуют свои KPI
|
||||
|
||||
## Scope
|
||||
|
||||
### 1. Документы и rules
|
||||
|
||||
- Создать [`docs/ui-design-contract.md`](c:/Users/shats/Dev/MikrotikManager-3/docs/ui-design-contract.md) — адапт семейного контракта под пути MM (`components/reui`, `components/reui-kit`, `@/components/ui`, Next App Router); секция KPI = hybrid only
|
||||
- Cursor rules: `reui-mcp.mdc`, **`kpi-hybrid.mdc`** (копия семейного MUST/NEVER); обновить [`next-shadcn-production.mdc`](c:/Users/shats/Dev/MikrotikManager-3/.cursor/rules/next-shadcn-production.mdc)
|
||||
- Секция ReUI + KPI hybrid в [`AGENTS.md`](c:/Users/shats/Dev/MikrotikManager-3/AGENTS.md)
|
||||
|
||||
### 2. Kit port (SoT = EvoBGP)
|
||||
|
||||
Создать `components/reui-kit/`:
|
||||
|
||||
| Component | Источник |
|
||||
|-----------|----------|
|
||||
| **`KpiStatGrid`** | EvoBGP `kpi-stat-grid.tsx` — **hybrid DNA 1:1**, импорты → `@/components/ui/*` |
|
||||
| `QuickActionGrid` | EvoBGP sibling hybrid DNA (не Card grid) |
|
||||
| `ResourcePage` | Frame + tabs + Filters + DataGrid |
|
||||
| `OpsDashboard` | **hybrid** KPI strip + afterKpi + charts slot |
|
||||
| `DetailPanel` | Frame sections (+ Metrics → KpiStatGrid) |
|
||||
| `SettingsShell` | Next nested layout / local nav (не TanStack Outlet) |
|
||||
| `filter-utils` | apply/clear Filters |
|
||||
|
||||
`"use client"` на всех kit-компонентах с хуками (`rsc: true` в MM).
|
||||
|
||||
### 3. Surface bridge
|
||||
|
||||
- [`DataPageCard`](c:/Users/shats/Dev/MikrotikManager-3/components/data-page-card.tsx): заменить внутренний `Card` на ReUI `Frame`/`FramePanel` **или** ввести `DataPageFrame` + deprecate Card-shell (совместимый API `children`/`className`, чтобы Wave B+ меняли минимум)
|
||||
- Сохранить [`DataGridShell`](c:/Users/shats/Dev/MikrotikManager-3/components/data-grids/shared/data-grid-shell.tsx) как есть
|
||||
|
||||
### 4. Chrome
|
||||
|
||||
- [`components/ui/sidebar.tsx`](c:/Users/shats/Dev/MikrotikManager-3/components/ui/sidebar.tsx): `SIDEBAR_WIDTH` `16rem` → **`240px`**
|
||||
- [`app-sidebar.tsx`](c:/Users/shats/Dev/MikrotikManager-3/components/app-sidebar.tsx): подключить [`NavUser`](c:/Users/shats/Dev/MikrotikManager-3/components/nav-user.tsx) с segmented theme (убрать demo Sparkles/Billing); убрать дублирующий theme toggle из footer если переезжает в NavUser
|
||||
- Search: оставить ⌘K (не Search pill в header)
|
||||
- **AppsMenu / auth-portal / SystemMonitor — вне scope** (см. master)
|
||||
|
||||
### 5. MCP / CLI hygiene
|
||||
|
||||
- `user-reui` `get_project_context` + `surface: frame` на будущих задачах
|
||||
- При add PRO blocks: `npx shadcn@latest add @reui/<name> --dry-run` перед overwrite существующих `components/reui/*`
|
||||
- Preview refs: [app-shell-12](https://reui.io/preview/base/app-shell-12), **[stats-12](https://reui.io/preview/base/stats-12)** (hybrid KPI)
|
||||
|
||||
## Out of scope
|
||||
|
||||
Миграция `app/(main)/*/page.tsx` (кроме smoke-проверки, что Frame-bridge не ломает layout).
|
||||
|
||||
## DoD
|
||||
|
||||
- [ ] `docs/ui-design-contract.md` + `kpi-hybrid.mdc` на месте
|
||||
- [ ] `KpiStatGrid` markup совпадает с EvoBGP (diff только imports)
|
||||
- [ ] `components/reui-kit/*` собирается, импорты `@/components/ui`
|
||||
- [ ] List shell = Frame (не Card)
|
||||
- [ ] Sidebar 240px + NavUser theme
|
||||
- [ ] `npm run lint` / `npm run build` без регрессий от foundation
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
name: MM ReUI Lists Medium
|
||||
overview: "Wave C — medium CRUD: Frame + **hybrid KpiStatGrid** (EvoBGP DNA) на communities/wg/vxlan/containers/gre/backups/certificates."
|
||||
todos:
|
||||
- id: c1-small-crud
|
||||
content: "communities/wg/vxlan/containers: hybrid KPI + Frame"
|
||||
status: pending
|
||||
- id: c2-tunnels-certs
|
||||
content: "gre/backups/certificates: hybrid KPI + Frame"
|
||||
status: pending
|
||||
isProject: false
|
||||
---
|
||||
|
||||
# Wave C — Medium CRUD lists
|
||||
|
||||
Родитель: [MM ReUI Master](mm_reui_master_b80dbef6.plan.md). Зависимость: **Wave B** (эталон hybrid KPI).
|
||||
|
||||
## Цель
|
||||
|
||||
Тиражировать `/servers`: Frame shell + **hybrid KPI** на medium CRUD.
|
||||
|
||||
## KPI (MUST)
|
||||
|
||||
- Любой metric strip на этих routes → только `KpiStatGrid` hybrid ([stats-12](https://reui.io/preview/base/stats-12))
|
||||
- Замена существующих `Card` KPI grids — без исключений
|
||||
- NEVER: StatCard, SectionCards, vertical-only, raw emerald
|
||||
|
||||
## Routes (priority)
|
||||
|
||||
| Route | ~LOC | Паттерн |
|
||||
|-------|------|---------|
|
||||
| `/communities` | ~268 | Card KPI → **hybrid** `KpiStatGrid`; Frame + CommunitiesDataGrid |
|
||||
| `/wireguard` | ~256 | То же + peers detail |
|
||||
| `/vxlan` | ~250 | То же |
|
||||
| `/containers` | ~435 | Card list → DataGrid/Frame tiles; KPI → **hybrid** |
|
||||
| `/gre` | ~778 | Dual grids + **hybrid** KPI strip |
|
||||
| `/backups` | ~752 | **hybrid** KPI + DataGrid + Stepper |
|
||||
| `/certificates` | ~779 | **hybrid** KPI + DataGrid + Stepper |
|
||||
|
||||
Split PR: C1 / C2 при необходимости.
|
||||
|
||||
## Refs
|
||||
|
||||
- KPI: **только** [stats-12](https://reui.io/preview/base/stats-12) via kit
|
||||
- Lists: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2)
|
||||
- Stepper — reuse
|
||||
|
||||
## DoD
|
||||
|
||||
- [ ] Нет Card как ops shell
|
||||
- [ ] Все KPI-полосы — hybrid `KpiStatGrid` (как EvoBGP)
|
||||
- [ ] Визуально = `/servers`
|
||||
- [ ] lint/build OK
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
name: MM ReUI Lists Simple
|
||||
overview: Wave B — /servers и simple lists на Frame + **hybrid KpiStatGrid** (EvoBGP DNA) + ResourcePage.
|
||||
todos:
|
||||
- id: servers-etalon
|
||||
content: "/servers: Frame + hybrid KpiStatGrid (не Card KPI)"
|
||||
status: pending
|
||||
- id: simple-lists
|
||||
content: domains / asns / ip-ranges / releases
|
||||
status: pending
|
||||
- id: loading-skeleton
|
||||
content: loading.tsx skeleton под hybrid KPI + Frame
|
||||
status: pending
|
||||
- id: rules-etalon
|
||||
content: Закрепить Frame+/servers hybrid KPI как эталон
|
||||
status: pending
|
||||
isProject: false
|
||||
---
|
||||
|
||||
# Wave B — Etalon + simple lists
|
||||
|
||||
Родитель: [MM ReUI Master](mm_reui_master_b80dbef6.plan.md). Зависимость: **Wave A** (hybrid `KpiStatGrid` в kit).
|
||||
|
||||
## Цель
|
||||
|
||||
Сделать `/servers` эталоном ReUI PRO: Frame shell + **hybrid KPI** как в EvoBGP/vps/CFDM.
|
||||
|
||||
## KPI (MUST)
|
||||
|
||||
- Метрики на `/servers` (всего / онлайн / JH+Exit / Home) → **только** `KpiStatGrid` hybrid
|
||||
- Preview: [stats-12](https://reui.io/preview/base/stats-12)
|
||||
- Удалить `grid … Card` KPI strip; **запрещены** StatCard / SectionCards / vertical stats
|
||||
- Name-cells в grid: hybrid icon tile (`bg-muted` + semantic text)
|
||||
|
||||
## Routes
|
||||
|
||||
| Route | ~LOC | Работа |
|
||||
|-------|------|--------|
|
||||
| `/servers` | ~724 | **Эталон:** **hybrid** `KpiStatGrid`; Frame; toolbar+Filters+`ServersDataGrid`; Sheet+Stepper без редизайна |
|
||||
| `/domains` | ~98 | Frame + DataGrid (+ empty); KPI — только если появятся метрики → hybrid |
|
||||
| `/asns` | ~98 | То же |
|
||||
| `/ip-ranges` | ~99 | То же |
|
||||
| `/releases` | ~97 | Frame/settings-lite; без KPI, если нет метрик |
|
||||
|
||||
## ReUI refs
|
||||
|
||||
- List: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2) · [data-grid-filtering-1](https://reui.io/preview/base/data-grid-filtering-1)
|
||||
- KPI: **только** [stats-12](https://reui.io/preview/base/stats-12) hybrid via kit
|
||||
- Empty: [empty-state-12](https://reui.io/preview/base/empty-state-12)
|
||||
- Forms sheet: [form-7](https://reui.io/preview/base/form-7)
|
||||
|
||||
MCP: `search`/`get_block`/`validate_usage` с `surface: "frame"`.
|
||||
|
||||
## Ключевые файлы
|
||||
|
||||
- [`app/(main)/servers/page.tsx`](c:/Users/shats/Dev/MikrotikManager-3/app/(main)/servers/page.tsx)
|
||||
- [`components/data-grids/servers-data-grid.tsx`](c:/Users/shats/Dev/MikrotikManager-3/components/data-grids/servers-data-grid.tsx)
|
||||
- [`app/(main)/loading.tsx`](c:/Users/shats/Dev/MikrotikManager-3/app/(main)/loading.tsx) — skeleton под Frame + hybrid KPI
|
||||
- [`lib/data-filters/server-filter-fields.ts`](c:/Users/shats/Dev/MikrotikManager-3/lib/data-filters/server-filter-fields.ts)
|
||||
|
||||
## Правила
|
||||
|
||||
- Не менять API CRUD / poll / test connection
|
||||
- После миграции: `ma-ui-guardian` / `next-shadcn-production` — эталон = Frame + hybrid KPI `/servers`
|
||||
|
||||
## DoD
|
||||
|
||||
- [ ] `/servers`: нет Card KPI; только hybrid `KpiStatGrid`
|
||||
- [ ] domains/asns/ip-ranges на Frame+DataGrid
|
||||
- [ ] loading skeleton согласован с hybrid strip
|
||||
- [ ] UI Guardian сверка с новым эталоном
|
||||
- [ ] lint/build OK
|
||||
@@ -0,0 +1,167 @@
|
||||
---
|
||||
name: MM ReUI Master
|
||||
overview: Мастер-план поэтапного перевода MikrotikManager-3 на ReUI PRO (surface Frame + kit), без смены Next.js/API. DataGrid уже на ReUI — фокус на Frame, hybrid KPI, shell chrome и волнах экранов через отдельные подпланы.
|
||||
todos:
|
||||
- id: wave-a
|
||||
content: "Подплан A: Foundation (contract, kit, Frame shell, chrome)"
|
||||
status: pending
|
||||
- id: wave-b
|
||||
content: "Подплан B: /servers эталон + simple lists"
|
||||
status: pending
|
||||
- id: wave-c
|
||||
content: "Подплан C: medium CRUD lists"
|
||||
status: pending
|
||||
- id: wave-d
|
||||
content: "Подплан D: dashboard + traffic"
|
||||
status: pending
|
||||
- id: wave-e
|
||||
content: "Подплан E: network ops giants"
|
||||
status: pending
|
||||
- id: wave-f
|
||||
content: "Подплан F: settings / alerts / system"
|
||||
status: pending
|
||||
- id: wave-g
|
||||
content: "Подплан G: map / terminal / uptime / optimizer"
|
||||
status: pending
|
||||
isProject: false
|
||||
---
|
||||
|
||||
# MikrotikManager → ReUI PRO (мастер-план)
|
||||
|
||||
## Вердикт
|
||||
|
||||
Проект **уже на полпути**: `base-nova`, `@reui` registry, `REUI_LICENSE_KEY`, MCP/`reui` skill, ~33 domain DataGrid на ReUI. Главный разрыв с ops-contract (EvoBGP/vps/CFDM): **shell списков = shadcn Card** ([`DataPageCard`](c:/Users/shats/Dev/MikrotikManager-3/components/data-page-card.tsx)), **Frame не используется**, **нет `reui-kit`**, KPI — hand-roll Card. Стек остаётся **Next.js 16 App Router** (не Vite monorepo).
|
||||
|
||||
## Зафиксированные решения
|
||||
|
||||
| Решение | Выбор |
|
||||
|---------|--------|
|
||||
| Surface lock | `frame` (не Card) |
|
||||
| Runtime | Next.js 16 + `@/components/ui` + `@/components/reui` |
|
||||
| Kit SoT | Порт DNA из EvoBGP (`KpiStatGrid`, `QuickActionGrid`, `ResourcePage`, `OpsDashboard`, `SettingsShell`, `DetailPanel`) → `components/reui-kit/` |
|
||||
| **KPI (все волны)** | **Только hybrid** как в EvoBGP / vps / CFDM / EvoFirewall / auth-portal: `reui-kit/KpiStatGrid` (DNA [stats-12](https://reui.io/preview/base/stats-12)). Markup 1:1 с EvoBGP — менять только import path |
|
||||
| API / UX behavior | Без изменений контрактов ([`docs/refactor-baseline.md`](c:/Users/shats/Dev/MikrotikManager-3/docs/refactor-baseline.md)) |
|
||||
| App Switcher / auth-portal | **Вне scope** этой миграции (MM standalone); chrome только выравниваем под contract |
|
||||
| Эталон | `/servers` остаётся эталоном — после Wave A+B **обновляется** под Frame + **hybrid KPI** |
|
||||
|
||||
## Целевая архитектура UI
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
subgraph chrome [App Shell]
|
||||
Sidebar[AppSidebar NavUser theme]
|
||||
Header[PageHeader sticky]
|
||||
end
|
||||
subgraph kit [components/reui-kit]
|
||||
ResourcePage
|
||||
KpiStatGrid
|
||||
QuickActionGrid
|
||||
OpsDashboard
|
||||
SettingsShell
|
||||
DetailPanel
|
||||
end
|
||||
subgraph reui [components/reui]
|
||||
Frame
|
||||
DataGrid
|
||||
Filters
|
||||
Badge
|
||||
Stepper
|
||||
end
|
||||
subgraph pages [app main routes]
|
||||
RoutePages[page.tsx domain wiring]
|
||||
end
|
||||
chrome --> pages
|
||||
pages --> kit
|
||||
kit --> reui
|
||||
pages --> DataGrids[components/data-grids]
|
||||
DataGrids --> DataGrid
|
||||
```
|
||||
|
||||
**Замена surface:** `DataPageCard` (Card) → Frame-обёртка (например `DataPageFrame` / `ResourcePage`), без смешивания Card+Frame на ops-экране.
|
||||
|
||||
## KPI hybrid — жёсткий контракт (все подпланы A–G)
|
||||
|
||||
Как в старых ops-apps. SoT markup: EvoBGP `apps/web/src/components/reui-kit/kpi-stat-grid.tsx`. Preview: [stats-12](https://reui.io/preview/base/stats-12). Rule: `kpi-hybrid.mdc`.
|
||||
|
||||
**MUST**
|
||||
|
||||
- Любая KPI-полоса / metric strip → только `components/reui-kit/KpiStatGrid` (через `OpsDashboard` / `DetailPanel.Metrics` при наличии)
|
||||
- Horizontal compact hybrid: icon left `Item` `size-10.5` `bg-muted` + `border-background` + shadow + `ItemMedia` + label/Badge + value ± `variant`
|
||||
- Row icon tiles в data-grid — та же DNA (semantic `text-*` на `bg-muted`)
|
||||
- Quick Actions — только `QuickActionGrid` (sibling hybrid DNA), не Card/Button grid
|
||||
|
||||
**NEVER (ни в одной волне)**
|
||||
|
||||
- `StatCard` / SectionCards / vertical-only KPI / hand-roll Frame/Card KPI grid
|
||||
- `stats-7` / `stats-1` / `card-35` как замена hybrid KPI
|
||||
- Solid brand fill вместо `bg-muted`; raw `bg-emerald-*` / `text-emerald-*`
|
||||
- Копипаст ReUI block KPI в route — только adapt через kit
|
||||
|
||||
Мягкие формулировки «KPI если есть» = **если метрики на экране есть — только hybrid `KpiStatGrid`**, иначе блок не рисуем.
|
||||
|
||||
## Canonical ReUI refs (MCP `surface: frame`)
|
||||
|
||||
| Зона | Block / DNA | Preview |
|
||||
|------|-------------|---------|
|
||||
| Shell | `app-shell-12` (+ monitor/cmdk DNA) | https://reui.io/preview/base/app-shell-12 |
|
||||
| KPI | **hybrid only** stats-12 (EvoBGP SoT) | https://reui.io/preview/base/stats-12 |
|
||||
| Lists | `data-grid-filtering-2` / `data-grid-filtering-1` | https://reui.io/preview/base/data-grid-filtering-2 |
|
||||
| Dashboard | `dashboard-1` | https://reui.io/preview/base/dashboard-1 |
|
||||
| Settings | `settings-16` + `settings-3` | https://reui.io/preview/base/settings-16 |
|
||||
| Empty | `empty-state-12` / shadcn Empty | https://reui.io/preview/base/empty-state-12 |
|
||||
| Forms Sheet | `form-7` DNA | https://reui.io/preview/base/form-7 |
|
||||
|
||||
Docs: https://reui.io/llms.txt · https://reui.io/docs/get-started · https://reui.io/docs/styling · https://reui.io/docs/mcp
|
||||
|
||||
## Workflow на каждую волну (обязательный)
|
||||
|
||||
1. MCP `user-reui`: `search` / `compose_page` / `get_block` / `get_component` с `surface: "frame"`
|
||||
2. CLI из корня MM: `npx shadcn@latest add @reui/<name> --yes` (или `--dry-run` перед overwrite)
|
||||
3. Adapt → `reui-kit` / route; **не** копипаст block в `page.tsx`
|
||||
4. `validate_usage` + `get_audit_checklist`
|
||||
5. Gate: `npm run lint` + визуальная сверка с `/servers` (после его миграции) + `npm run build` на milestone
|
||||
|
||||
## Волны = отдельные подпланы
|
||||
|
||||
Не выполнять всё одним PR. Каждый подплан — свой scope, DoD и PR(ы).
|
||||
|
||||
| ID | Подплан | Scope (кратко) |
|
||||
|----|---------|----------------|
|
||||
| **A** | [Foundation](mm_reui_foundation_8b1c5482.plan.md) | Contract, **kpi-hybrid**, порт hybrid `KpiStatGrid`, Frame shell, chrome |
|
||||
| **B** | [Etalon + simple lists](mm_reui_lists_simple_d9c1b930.plan.md) | `/servers` эталон Frame + **hybrid KPI** + simple lists |
|
||||
| **C** | [CRUD lists medium](mm_reui_lists_medium_1a708596.plan.md) | Medium CRUD: Frame + **hybrid KPI** |
|
||||
| **D** | [Dashboard & overview](mm_reui_dashboard_b54ab10d.plan.md) | `/dashboard` `/traffic`: StatCard → **hybrid** |
|
||||
| **E** | [Network ops](mm_reui_network_ops_e8a979a4.plan.md) | Network giants: Frame + **hybrid KPI** |
|
||||
| **F** | [System](mm_reui_system_9c5741cb.plan.md) | Settings/alerts/…: Frame + **hybrid** где есть метрики |
|
||||
| **G** | [Special surfaces](mm_reui_special_04f7eebc.plan.md) | Map/terminal/uptime/optimizer: Frame + **hybrid KPI** |
|
||||
|
||||
Порядок: **A → B → C → D**, затем **E∥F** (параллельно разными PR), затем **G**.
|
||||
|
||||
## Инварианты
|
||||
|
||||
- Не менять API shape / бизнес-логику backend
|
||||
- Не ломать ReUI DataGrid shell без нужды — переиспользовать [`DataGridShell`](c:/Users/shats/Dev/MikrotikManager-3/components/data-grids/shared/data-grid-shell.tsx)
|
||||
- **KPI: только hybrid `KpiStatGrid` (EvoBGP DNA)** — см. секцию выше; действует на волны B–G
|
||||
- Запрет: Card как ops list shell; hand-roll / Card / SectionCards KPI; `space-y-*`; raw `bg-emerald-*`
|
||||
- Giant pages (>1500 LOC): сначала вынос секций в компоненты, потом Frame — не «big bang rewrite»
|
||||
|
||||
## Документы / rules (часть Wave A)
|
||||
|
||||
- Добавить [`docs/ui-design-contract.md`](c:/Users/shats/Dev/MikrotikManager-3/docs/ui-design-contract.md) (адапт EvoBGP contract под MM paths)
|
||||
- Cursor rules: `reui-mcp.mdc`, `kpi-hybrid.mdc`, обновить `next-shadcn-production.mdc` (эталон после Wave B)
|
||||
- `AGENTS.md` — секция ReUI + команды CLI
|
||||
|
||||
## Риски
|
||||
|
||||
- **PRO license** нужна для premium blocks; free components уже стоят
|
||||
- Overwrite shadcn CLI на существующие `components/reui/*` — всегда `--dry-run` / diff
|
||||
- Giant pages (`alerts` ~3k, `uptime` ~2.7k) — отдельный подплан, иначе регрессии
|
||||
- Theme: сейчас toggle в sidebar footer кастомный → NavUser segmented (contract)
|
||||
|
||||
## Definition of Done (весь продукт)
|
||||
|
||||
- Все ops-экраны на Frame surface; Card только где нужен interactive container внутри, не как page shell
|
||||
- Все KPI-полосы — **hybrid** `KpiStatGrid` (идентично EvoBGP/vps/CFDM/FW); lists через Frame + DataGrid (+ Filters где есть)
|
||||
- `/servers` = актуальный эталон под ReUI PRO
|
||||
- Rules + `ui-design-contract.md` в репо
|
||||
- Lint/build зелёные на milestone после каждой волны
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
name: MM ReUI Network Ops
|
||||
overview: "Wave E — network ops: Frame + **hybrid KpiStatGrid** на filters/firewall/bgp/ospf/recursive (+ хвост C)."
|
||||
todos:
|
||||
- id: e1-bgp-rr
|
||||
content: "E1: recursive-routes + bgp Frame + hybrid KPI"
|
||||
status: pending
|
||||
- id: e2-filters
|
||||
content: "E2: filters extract + Frame + hybrid KPI if any"
|
||||
status: pending
|
||||
- id: e3-firewall
|
||||
content: "E3: firewall Frame + hybrid KPI if any"
|
||||
status: pending
|
||||
- id: e4-ospf
|
||||
content: "E4: ospf hybrid KPI + Frame (+ leftover C)"
|
||||
status: pending
|
||||
isProject: false
|
||||
---
|
||||
|
||||
# Wave E — Network ops
|
||||
|
||||
Родитель: [MM ReUI Master](mm_reui_master_b80dbef6.plan.md). Зависимости: **A+B**; пересечение с **C** без дубля.
|
||||
|
||||
## Цель
|
||||
|
||||
Giant network pages → Frame + kit; метрики только **hybrid KPI**.
|
||||
|
||||
## KPI (MUST)
|
||||
|
||||
- Любые analytics/summary Cards (`/bgp`, `/ospf`, `/firewall`, …) → **hybrid** `KpiStatGrid`
|
||||
- Preview: [stats-12](https://reui.io/preview/base/stats-12)
|
||||
- Если метрик на экране нет — KPI-блок не рисуем; если есть — только hybrid
|
||||
- NEVER: Card KPI grid, SectionCards, stats-7 vertical
|
||||
|
||||
## Routes
|
||||
|
||||
| Route | ~LOC | Стратегия |
|
||||
|-------|------|-----------|
|
||||
| `/filters` | ~1790 | Frame layout; Sheets logic intact; KPI→hybrid если есть |
|
||||
| `/firewall` | ~1725 | Frame panels; rules DataGrid; summary → hybrid |
|
||||
| `/recursive-routes` | ~661 | Frame + DataGrid; KPI→hybrid если есть |
|
||||
| `/bgp` | ~720 | analytics Cards → **hybrid** `KpiStatGrid`; sessions grid |
|
||||
| `/ospf` | ~1270 | Frame tabs + grids; summary → **hybrid** |
|
||||
| `/gre` `/backups` `/certificates` | — | Только если не закрыты C (там тоже hybrid) |
|
||||
|
||||
## Подход
|
||||
|
||||
1. Extract секций
|
||||
2. Card shells → Frame
|
||||
3. KPI → **hybrid** `KpiStatGrid`
|
||||
4. `validate_usage`
|
||||
|
||||
## ReUI refs
|
||||
|
||||
- Lists: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2)
|
||||
- KPI: **только** [stats-12](https://reui.io/preview/base/stats-12)
|
||||
- Frame/DetailPanel docs
|
||||
|
||||
## PR split
|
||||
|
||||
E1 recursive+bgp · E2 filters · E3 firewall · E4 ospf (+ leftover)
|
||||
|
||||
## DoD
|
||||
|
||||
- [ ] Нет Card page shell
|
||||
- [ ] Все metric strips — hybrid `KpiStatGrid`
|
||||
- [ ] API/CRUD без регрессий
|
||||
- [ ] lint/build per PR
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
name: MM ReUI Special
|
||||
overview: "Wave G — special surfaces: Frame chrome; KPI на uptime/optimizer только **hybrid KpiStatGrid** (EvoBGP DNA)."
|
||||
todos:
|
||||
- id: g1-term-opt
|
||||
content: "G1: terminal Frame; optimizer Frame + hybrid KPI"
|
||||
status: pending
|
||||
- id: g2-uptime
|
||||
content: "G2: uptime extract + Frame + hybrid KpiStatGrid"
|
||||
status: pending
|
||||
- id: g3-map
|
||||
content: "G3: network-map Frame chrome (KPI hybrid if any)"
|
||||
status: pending
|
||||
isProject: false
|
||||
---
|
||||
|
||||
# Wave G — Special surfaces
|
||||
|
||||
Родитель: [MM ReUI Master](mm_reui_master_b80dbef6.plan.md). Зависимости: **A+B**.
|
||||
|
||||
## Цель
|
||||
|
||||
Кастом map/CLI без форса DataGrid. Metric strips — **только hybrid KPI** как в старых apps.
|
||||
|
||||
## KPI (MUST)
|
||||
|
||||
- `/uptime`, `/route-optimizer` (и map, если есть summary): Card/Stat KPI → **hybrid** `KpiStatGrid`
|
||||
- Preview: [stats-12](https://reui.io/preview/base/stats-12)
|
||||
- `/terminal`: обычно без KPI-полосы
|
||||
- NEVER: StatCard, SectionCards, vertical-only
|
||||
|
||||
## Routes
|
||||
|
||||
| Route | ~LOC | Стратегия |
|
||||
|-------|------|-----------|
|
||||
| `/network-map` | ~2254 | Frame side panels; canvas без redesign; KPI→hybrid если есть |
|
||||
| `/terminal` | ~552 | Frame CLI; без KPI |
|
||||
| `/uptime` | ~2669 | Extract; **hybrid** `KpiStatGrid`; grids → Frame |
|
||||
| `/route-optimizer` | ~1034 | Frame tabs; Card KPI → **hybrid** |
|
||||
|
||||
## ReUI refs
|
||||
|
||||
- KPI: **только** [stats-12](https://reui.io/preview/base/stats-12)
|
||||
- [dashboard-1](https://reui.io/preview/base/dashboard-1) для uptime overview layout
|
||||
- Lists: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2)
|
||||
|
||||
## PR split
|
||||
|
||||
G1 terminal+optimizer · G2 uptime · G3 network-map
|
||||
|
||||
## Инварианты
|
||||
|
||||
- Не менять map/terminal protocols
|
||||
- Card только как interactive widget, не page shell / не KPI
|
||||
|
||||
## DoD
|
||||
|
||||
- [ ] Нет Card page shell
|
||||
- [ ] uptime/optimizer KPI = hybrid `KpiStatGrid`
|
||||
- [ ] Map/terminal smoke OK
|
||||
- [ ] Final lint/build + contract checklist
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
name: MM ReUI System
|
||||
overview: "Wave F — settings/alerts/data-collection/probes: Frame + SettingsShell; metric strips только **hybrid KpiStatGrid**."
|
||||
todos:
|
||||
- id: f-settings
|
||||
content: settings → SettingsShell + Frame (hybrid KPI if metrics)
|
||||
status: pending
|
||||
- id: f-alerts
|
||||
content: "alerts: extract + Frame; hybrid KPI if metrics"
|
||||
status: pending
|
||||
- id: f-collect-probes
|
||||
content: "data-collection/probes: Frame + hybrid KPI strips"
|
||||
status: pending
|
||||
isProject: false
|
||||
---
|
||||
|
||||
# Wave F — System
|
||||
|
||||
Родитель: [MM ReUI Master](mm_reui_master_b80dbef6.plan.md). Зависимости: **A**; параллельно с **E**.
|
||||
|
||||
## Цель
|
||||
|
||||
System screens на Frame/SettingsShell; любые summary metrics → **hybrid KPI** как в старых apps.
|
||||
|
||||
## KPI (MUST)
|
||||
|
||||
- `/data-collection`, `/probes`, `/alerts` (если есть counters/summary) → только `KpiStatGrid` hybrid
|
||||
- Preview: [stats-12](https://reui.io/preview/base/stats-12)
|
||||
- Settings: обычно rows без KPI-полосы; если появятся — hybrid only
|
||||
- NEVER: Card KPI, SectionCards
|
||||
|
||||
## Routes
|
||||
|
||||
| Route | ~LOC | Паттерн |
|
||||
|-------|------|---------|
|
||||
| `/settings` | ~1586 | SettingsShell + Frame rows; DataGrids в Frame |
|
||||
| `/alerts` | ~2989 | Extract → Frame; summary → **hybrid** если есть |
|
||||
| `/data-collection` | ~1250 | Frame grids; summary Cards → **hybrid** `KpiStatGrid` |
|
||||
| `/probes` | ~1085 | Frame; schedule/speed grids; KPI → **hybrid** |
|
||||
|
||||
## Alerts strategy
|
||||
|
||||
F1 extract · F2 Frame + Badge/Alert · F3 DataGrid; KPI hybrid на F2 если есть метрики.
|
||||
|
||||
## ReUI refs
|
||||
|
||||
- Settings: [settings-16](https://reui.io/preview/base/settings-16) · [settings-3](https://reui.io/preview/base/settings-3)
|
||||
- KPI: **только** [stats-12](https://reui.io/preview/base/stats-12)
|
||||
- Alert: https://reui.io/docs/components/base/alert
|
||||
- Lists: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2)
|
||||
|
||||
## Ключевые файлы
|
||||
|
||||
- [`app/(main)/settings/page.tsx`](c:/Users/shats/Dev/MikrotikManager-3/app/(main)/settings/page.tsx)
|
||||
- [`app/(main)/alerts/page.tsx`](c:/Users/shats/Dev/MikrotikManager-3/app/(main)/alerts/page.tsx)
|
||||
- [`app/(main)/data-collection/page.tsx`](c:/Users/shats/Dev/MikrotikManager-3/app/(main)/data-collection/page.tsx)
|
||||
- [`app/(main)/probes/page.tsx`](c:/Users/shats/Dev/MikrotikManager-3/app/(main)/probes/page.tsx)
|
||||
|
||||
## DoD
|
||||
|
||||
- [ ] Settings на SettingsShell/Frame
|
||||
- [ ] Alerts extract + Frame; API engine без изменений
|
||||
- [ ] data-collection/probes: Frame + **hybrid** KPI где были Card metrics
|
||||
- [ ] lint/build per sub-PR
|
||||
Reference in New Issue
Block a user