feat: refactor components to utilize DataGridCard for improved UI consistency

Updated various components including AccessApiKeysCard, FirewallClientsGrid, FirewallRulesGrid, ModuleEntriesSection, and DirectoriesComponent to replace traditional card and table structures with the new DataGridCard component. This change enhances the user interface by providing a more consistent layout and improved loading states. Additionally, integrated QueryState for better handling of loading and error scenarios across these components, streamlining the overall user experience.

.agents/skills/shadcn-react/SKILL.md

@@ -0,0 +1,119 @@
+---
+name: shadcn-react
+description: Управление shadcn/ui (React) + ReUI компонентами в EvoBGP — registry, CLI, импорты, матрица выбора. Использовать при любых UI-задачах в apps/web/ или packages/ui/ (новые экраны, компоненты, формы, data-grid, filters и др.).
+---
+
+# shadcn/ui (React) + ReUI в EvoBGP
+
+EvoBGP использует **React 19 + shadcn/ui (base-nova) + ReUI** (`style: base-nova`, не Radix). Источники правды: MCP `plugin-shadcn-shadcn` + [ui.shadcn.com/docs](https://ui.shadcn.com/docs/components) + [reui.io/docs](https://reui.io/docs/components/base/).
+
+См. `.cursor/rules/web-shadcn.mdc` (основные правила) и `.cursor/rules/context7-stack.mdc` (Context7 ID стека).
+
+## Порядок UI-задачи (строго)
+
+0. **Codegraph** `codegraph_explore` — найти существующие реализации и shared-обёртки.
+1. **MCP `plugin-shadcn-shadcn`** — `get_project_registries` (должны быть `@shadcn` и `@reui`).
+2. **`search_items_in_registries`** — компонент/block/example:
+   - shadcn primitives/blocks → omit `registries` или `["@shadcn"]`
+   - Data Grid, Filters, Stepper, Kanban, Autocomplete и др. → `registries: ["@reui"]`
+3. **`get_item_examples_from_registries`** — полный код примера перед JSX.
+4. **`get_add_command_for_items`** — точная CLI-команда `pnpm dlx shadcn@latest add ...`.
+5. Выполнить add **из `apps/web`** (не из корня монорепо, не из `packages/ui`).
+6. **CLI docs (обязательно):**
+   - `@shadcn/*` → `cd apps/web && pnpm dlx shadcn@latest docs <component>` — [ui.shadcn.com/docs/components](https://ui.shadcn.com/docs/components)
+   - `@reui/*` → [ReUI docs](https://reui.io/docs/components/base/<name>) + [llms.txt](https://reui.io/llms.txt)
+7. Сверить examples из MCP с API из docs CLI — реализовать только после совпадения.
+8. Адаптировать под TanStack Router / Query → `apps/web/src/`.
+9. **`get_audit_checklist`** — перед merge PR.
+
+## Размещение и импорты
+
+| Слой | Путь | Импорт |
+|------|------|--------|
+| shadcn primitives | `packages/ui/src/components/` | `@evobgp/ui/components/*` |
+| ReUI enterprise | `apps/web/src/components/reui/` | `@/components/reui/*` |
+| Проектные обёртки | `apps/web/src/components/` | `@/components/<name>` |
+
+```bash
+cd apps/web
+pnpm dlx shadcn@latest add button          # @shadcn primitive → packages/ui/src/components/
+pnpm dlx shadcn@latest add @reui/data-grid # ReUI enterprise → apps/web/src/components/reui/
+```
+
+## Матрица выбора shadcn vs ReUI
+
+| Задача | Registry | Импорт |
+|--------|----------|--------|
+| Button, Card, Sheet, Field, Sidebar | `@shadcn` | `@evobgp/ui/components/*` |
+| Blocks (sidebar-07, dashboard-01) | `@shadcn` | blocks → `apps/web/src/components/` |
+| Data Grid (sort, pagination, virtual) | `@reui` | `@/components/reui/data-grid/*` → обёртка `DataGridCard` |
+| Мультифильтры | `@reui` | `@/components/reui/filters` |
+| Number field со stepper | `@reui` | `@/components/reui/number-field` |
+| Autocomplete | `@reui` | `@/components/reui/autocomplete` → `AutoCompleteInput` |
+| Date selector / range | `@reui` | `@/components/reui/date-selector` |
+| Semantic badge (success/info/warning) | `@reui` | `@/components/reui/badge` или `StatusBadge` |
+
+**Простые списки** — shadcn `Table`. **Сложные data-списки** — ReUI data-grid (через `DataGridCard`), не shadcn Data Table.
+
+## Уже установленные shared-обёртки
+
+В `apps/web/src/components/`:
+- `PageHeader`, `PageShell` — заголовки и обёртки страниц
+- `QueryState` — обёртка loading/error/empty для TanStack Query
+- `EmptyState` — пустые списки
+- `ConfirmDialog` — подтверждения (не `window.confirm`)
+- `LoadingButton` — кнопка с loading-состоянием
+- `StatusBadge` — статусные бейджи
+- `SectionCards` — сетка KPI-карточек
+- `Skeletons` (`TableSkeleton`, `SectionCardsSkeleton`) — скелетоны
+- `TruncatedText` — текст с тултипом
+- `ModeToggle` — переключатель темы
+
+Перед созданием новой обёртки — проверить существующие через Codegraph.
+
+## Уже установленные ReUI-компоненты
+
+В `apps/web/src/components/reui/`:
+- `autocomplete`, `badge`, `data-grid/*`, `date-selector`, `filters`, `number-field`
+
+Перед добавлением дубликата — проверить Codegraph и существующие обёртки.
+
+## Зависимости (только `apps/web`, не `packages/ui`)
+
+| npm-пакет | ReUI-компоненты |
+|-----------|-----------------|
+| `@tanstack/react-table` | data-grid |
+| `@tanstack/react-virtual` | data-grid (virtual) |
+| `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/modifiers`, `@dnd-kit/utilities` | data-grid dnd, sortable, kanban |
+| `date-fns`, `react-day-picker` | date-selector |
+
+После `shadcn add @reui/...` — проверить, что CLI добавил недостающие deps в `apps/web/package.json`.
+
+## Semantic tokens (Styling)
+
+ReUI расширяет тему shadcn токенами `--success`, `--info`, `--warning`, `--destructive-foreground`, `--invert` — уже в `packages/ui/src/styles/globals.css`.
+
+- Badge/Alert: `variant="success"` / `"info"` / `"warning"` — не `bg-emerald-*`
+- Базовая тема: `pnpm dlx shadcn@latest apply b2fA --only theme`
+- ReUI-токены: по [Styling guide](https://reui.io/docs/styling); не править `globals.css` вручную без сверки с docs
+
+## Запрещено
+
+- Писать UI по памяти, не проверив MCP
+- Копипаст с ui.shadcn.com без examples/add из MCP
+- Самописные примитивы, если есть item в registry
+- Пропускать MCP «потому что компонент простой»
+- Класть ReUI в `packages/ui` или импортировать как `@evobgp/ui`
+- Radix-варианты (`/docs/components/radix/...`) — только Base UI
+- Raw Tailwind-цвета вместо ReUI semantic `variant`
+- Использовать Tabler/Bootstrap/Material UI
+
+## Чеклист перед завершением UI-задачи
+
+- [ ] MCP search (с правильным registry) + examples
+- [ ] `shadcn add <name>` (или `@reui/<name>`) из `apps/web`
+- [ ] Импорты: `@evobgp/ui/components/*` для shadcn, `@/components/reui/*` для ReUI
+- [ ] Зависимости в `apps/web/package.json`
+- [ ] `pnpm --filter @evobgp/web run typecheck` — exit 0
+- [ ] `pnpm --filter @evobgp/web run lint` — exit 0
+- [ ] `pnpm --filter @evobgp/web run build` — exit 0

.codegraph/daemon.pid

@@ -1,6 +1,6 @@
 {
-  "pid": 44608,
+  "pid": 39884,
   "version": "0.9.9",
   "socketPath": "\\\\.\\pipe\\codegraph-97b92efdcc5351da",
-  "startedAt": 1781240018712
+  "startedAt": 1783489774882
 }

.cursor/plans/evobgp_→_react+shadcn_ui+reui_99d7c4ae.plan.md

@@ -0,0 +1,345 @@
+---
+name: EvoBGP → React+shadcn/ui+ReUI
+overview: "Big-bang миграция web UI EvoBGP с SvelteKit+Svelte5 на React 19 + Vite + TanStack Router/Query + shadcn/ui (Base UI, base-nova) + ReUI registry, идентично эталону vps-tracker. Структура — pnpm workspaces monorepo (apps/web + packages/ui как @evobgp/ui). Скоуп: только фронтенд; Go-бэкенд, OpenAPI, nginx, compose и bake-конфиги сохраняются с минимальной правкой путей сборки. Старый web/ заменяется полностью; перенос доменных экранов идёт по одному роуту через MCP-shadcn с проверкой по docs."
+todos:
+  - id: "1"
+    content: "Этап 0: Установить MCP в workspace EvoBGP (plugin-shadcn-shadcn с @reui, plugin-context7, cursor-ide-browser) — скопировать .cursor/mcp.json из vps-tracker"
+    status: pending
+  - id: "2"
+    content: "Этап 1: Архивировать web/ → web-legacy-svelte/, зафиксировать инвентарь 13 роутов и компонентов"
+    status: pending
+  - id: "3"
+    content: "Этап 2: Создать pnpm workspaces монорепо — pnpm-workspace.yaml, корневой package.json, tsconfig.base.json, .npmrc, .nvmrc"
+    status: pending
+  - id: "4"
+    content: "Этап 3: Создать packages/ui (@evobgp/ui) — package.json, components.json (base-nova + @reui), src/styles/globals.css (копия vps-tracker), lib/utils.ts, hooks/use-mobile.ts"
+    status: pending
+  - id: "5"
+    content: "Этап 4: Добавить shadcn-примитивы в packages/ui через MCP+CLI (33 компонента идентично vps-tracker)"
+    status: pending
+  - id: "6"
+    content: "Этап 5: Создать apps/web каркас — package.json (@evobgp/web), components.json, tsconfig, vite.config.ts (TanStackRouterPlugin+react+tailwindcss, alias @ и @evobgp/ui/*, proxy /v1)"
+    status: pending
+  - id: "7"
+    content: "Этап 6: React-инициализация — main.tsx (StrictMode→ThemeProvider→QC→Router+Toaster), lib/queryClient.ts, lib/router.ts (Register augmentation), routes/__root.tsx, theme-provider.tsx, index.html"
+    status: pending
+  - id: "8"
+    content: "Этап 7: Перенос app-shell (sidebar-07) и shared-обёрток (PageShell, PageHeader, EmptyState, QueryState, ConfirmDialog, StatusBadge, DataGridCard, FormSheet, FormField, LoadingButton, skeletons) из vps-tracker с адаптацией брендинга"
+    status: pending
+  - id: "9"
+    content: "Этап 8: Перенос API-клиента и типов из legacy — api-client.ts (Bearer localStorage, Idempotency-Key, RFC 9457 Problem, waitForJob, apiPageAll), types/api.ts, queries/* по доменам"
+    status: pending
+  - id: "10"
+    content: "Этап 9: Добавить ReUI enterprise через MCP+CLI — @reui/data-grid, filters, autocomplete, date-selector, number-field, color-picker, badge"
+    status: pending
+  - id: "11"
+    content: "Этап 10.1: Роуты _auth layout + settings (token+theme) + access (session+api-keys) — простые экраны"
+    status: pending
+  - id: "12"
+    content: "Этап 10.2: Роуты index (dashboard KPI+recent) + modules/index (DataGridCard) + modules/$moduleId (детали с cards)"
+    status: pending
+  - id: "13"
+    content: "Этап 10.3: Роуты network (peers/speakers/BIRD tabs, live refetchInterval) + operations (jobs/revisions/diff, waitForJob) + schedule"
+    status: pending
+  - id: "14"
+    content: "Этап 10.4: Роуты directories (communities/DoH) + monitoring (bird/postgres/runtime) + tenant-settings + редиректы peers→network, revisions→operations"
+    status: pending
+  - id: "15"
+    content: "Этап 11: Обновить deploy/docker/evobgp-web/Dockerfile (pnpm+corepack, COPY apps/web + packages, dist вместо build); nginx.conf НЕ трогать; проверить bake"
+    status: pending
+  - id: "16"
+    content: "Этап 12: Обновить .gitea/workflows/ci.yaml web job (pnpm, tsc --noEmit, eslint, build) + path-filter apps/web/** + packages/ui/**"
+    status: pending
+  - id: "17"
+    content: "Этап 13: Cursor rules — удалить web-shadcn.mdc; скопировать shadcn-mcp/reui-mcp/frontend-* из vps-tracker; обновить engineering.mdc (DEP-04, TEST-04, DOC-SYNC) и context7-stack.mdc; создать .agents/skills/{shadcn,reui}"
+    status: pending
+  - id: "18"
+    content: "Этап 14: Финал — pnpm build без ошибок, MCP get_audit_checklist, cursor-ide-browser smoke 13 роутов, удалить web-legacy-svelte/, коммит feat(frontend)"
+    status: pending
+isProject: false
+---
+
+# Plan: Миграция EvoBGP web UI на React + shadcn/ui + ReUI
+
+## Контекст
+
+**Цель:** Перевести `web/` EvoBGP с SvelteKit 2.50 + Svelte 5.54 + shadcn-svelte на стек идентичный `vps-tracker/apps/web`:
+- **Стек:** React 19 + Vite 7 + TanStack Router/Query v5 + shadcn/ui (Base UI, `style: base-nova`) + ReUI registry `@reui` + Tailwind v4 monorepo + lucide-react + react-hook-form + Zod + recharts + sonner + next-themes
+- **Структура:** pnpm workspaces monorepo — `apps/web` (SPA) + `packages/ui` (`@evobgp/ui` barrel)
+- **Скоуп:** только frontend. Go-бэкенд (`internal/*`), OpenAPI (`docs/openapi.yaml`), compose/bake/nginx — не трогаются (минимальная правка только путей сборки в Dockerfile)
+- **Стратегия:** big-bang. Старый `web/` архивируется в `web-legacy-svelte/` и удаляется в финале. Рабочий UI создаётся с нуля
+- **Эталон:** `c:\Users\shats\Dev\vps-tracker\apps\web\` + `c:\Users\shats\Dev\vps-tracker\packages\ui\`
+
+**Инвентарь существующего EvoBGP web** (из исследования):
+- 13 роутов SvelteKit: `/`, `/modules`, `/modules/[id]`, `/network` (+редирект `/peers`), `/operations` (+редирект `/revisions`), `/monitoring`, `/schedule`, `/directories`, `/access`, `/tenant-settings`, `/settings`
+- ~130 доменных `.svelte`-компонентов в `web/src/lib/components/{modules,network,operations,monitoring,tenant-settings,access,...}`
+- API-клиент `web/src/lib/api/client.ts` + типы `web/src/lib/api/types.ts` (4301 строка OpenAPI, 76 эндпоинтов)
+- Токен в localStorage (`evobgp_api_token`), Bearer, RFC 9457 errors, cursor-пагинация, Idempotency-Key, polling jobs
+- Тема `neutral` в `web/src/routes/layout.css` с semantic tokens `--success/--warning/--info`
+- nginx.conf — SPA fallback `try_files $uri $uri/ /index.html` (нейтрален к фреймворку, не меняется)
+- Сейчас npm (НЕ pnpm), корневого `pnpm-workspace.yaml` нет
+
+**Архитектура после миграции**:
+
+```mermaid
+flowchart TB
+    subgraph EvoBGP[EvoBGP repo root]
+        PWS[pnpm-workspace.yaml]
+        RP[package.json + pnpm-lock.yaml]
+        TSB[tsconfig.base.json]
+        NVM[.nvmrc Node 22]
+        MCP[.cursor/mcp.json]
+        subgraph Apps
+            AW[apps/web — React SPA]
+        end
+        subgraph Packages
+            UI[packages/ui — @evobgp/ui]
+        end
+        Deploy[deploy/ nginx+compose+bake]
+        GoAPI[internal/httpapi — Go API]
+    end
+    AW -->|imports| UI
+    AW -->|/v1 proxy dev| GoAPI
+    Deploy -->|Dockerfile build| AW
+    Deploy -->|nginx /v1 proxy| GoAPI
+    UI -->|globals.css @source| AW
+```
+
+---
+
+## Этапы (последовательность, safe-by-design)
+
+### Этап 0 — MCP environment (предварительный)
+
+Установить MCP-серверы в workspace EvoBGP. Источник: `c:\Users\shats\.cursor\projects\c-Users-shats-Dev-vps-tracker\mcps\` — там работают:
+- `plugin-shadcn-shadcn` (serverName `shadcn`) — даёт инструменты `get_project_registries`, `search_items_in_registries` (с поддержкой `registries: ["@reui"]`), `get_item_examples_from_registries`, `get_add_command_for_items`, `view_items_in_registries`, `list_items_in_registries`, `get_audit_checklist`
+- `plugin-context7-plugin-context7` — docs-lookup React/TanStack/Recharts
+- `cursor-ide-browser` — визуальная проверка UI
+
+Скопировать `.cursor/mcp.json` из vps-tracker → `c:\Users\shats\Dev\EvoBGP\.cursor\mcp.json`. Enable серверы в Cursor Settings. ReUI MCP и codegraph — **не существуют как отдельные MCP** (исследовано); ReUI доступен **через** `plugin-shadcn-shadcn` с `registries: ["@reui"]`.
+
+### Этап 1 — Подготовка
+
+1. **Зафиксировать инвентарь**: список 13 роутов + ~130 компонентов + API-клиент + типы. Не удалять пока ничего.
+2. **Архивировать старый стек**: `web/` → `web-legacy-svelte/`. Оставить до финала как референс при переносе экранов.
+
+### Этап 2 — Монорепо-каркас
+
+Корневые файлы:
+
+- `pnpm-workspace.yaml`: `packages: ['apps/*', 'packages/*']`
+- Корневой `package.json`: `{"private": true, "scripts": {"dev": "pnpm --filter @evobgp/web dev", "build": "pnpm --filter @evobgp/web build", "lint": "pnpm -r lint"}}`. Существующий корневой `package.json` (semantic-release/commitlint) — слить в один или оставить как `package.release.json` (решить по ходу).
+- `tsconfig.base.json`: `strict: true`, `target: ES2022`, `moduleResolution: bundler`, `jsx: react-jsx`, `paths: {"@/*": ["./apps/web/src/*"], "@evobgp/ui/components/*": ["./packages/ui/src/components/*"], "@evobgp/ui/hooks/*": ["./packages/ui/src/hooks/*"], "@evobgp/ui/lib/utils": ["./packages/ui/src/lib/utils.ts"]}`
+- `.npmrc`: `engine-strict=true`
+- `.nvmrc`: `22` (приводим к единой версии с Dockerfile)
+- `.gitignore`: добавить `node_modules/`, `dist/`, `routeTree.gen.ts` (опц.)
+
+### Этап 3 — `packages/ui` (@evobgp/ui)
+
+Структура полностью повторяет `c:\Users\shats\Dev\vps-tracker\packages\ui\`:
+
+- `packages/ui/package.json`:
+  - `name: "@evobgp/ui"`
+  - `exports`: `./components/*`, `./hooks/*`, `./lib/utils`, `./globals.css`
+  - `dependencies`: `@base-ui/react`, `class-variance-authority`, `clsx`, `cmdk`, `date-fns`, `lucide-react`, `next-themes`, `react-day-picker`, `recharts`, `sonner`, `tailwind-merge`
+  - `peerDependencies`: `react`, `react-dom` (19)
+- `packages/ui/components.json` (точная копия vps-tracker с заменой `@cfdm` → `@evobgp`):
+  ```json
+  {
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "base-nova",
+    "rsc": false,
+    "tsx": true,
+    "tailwind": {"config": "", "css": "src/styles/globals.css", "baseColor": "neutral", "cssVariables": true},
+    "iconLibrary": "lucide",
+    "registries": {"@reui": "https://reui.io/r/{style}/{name}.json"},
+    "aliases": {"components": "@evobgp/ui/components", "utils": "@evobgp/ui/lib/utils", "hooks": "@evobgp/ui/hooks", "lib": "@evobgp/ui/lib", "ui": "@evobgp/ui/components"}
+  }
+  ```
+- `packages/ui/src/styles/globals.css`: **точная копия** `c:\Users\shats\Dev\vps-tracker\packages\ui\src\styles\globals.css` (Tailwind v4 + `tw-animate-css` + `@source "../"` + `@source "../../../apps/web/src"` + `:root`/`.dark` со всеми oklch-токенами + ReUI semantic tokens `--success/--info/--warning/--destructive-foreground/--invert/--focus` + chart-1..5 + sidebar-* + `@theme inline` + `@layer base`)
+- `packages/ui/src/lib/utils.ts`: `cn()` через `clsx` + `tailwind-merge`
+- `packages/ui/src/hooks/use-mobile.ts`
+
+### Этап 4 — shadcn-примитивы через MCP
+
+Перед каждым `add` — обязательно через MCP:
+1. `search_items_in_registries` → `get_item_examples_from_registries` → `get_add_command_for_items`
+2. CLI `pnpm dlx shadcn@latest docs <component>` сверка с [ui.shadcn.com/docs/components](https://ui.shadcn.com/docs/components)
+
+Компоненты (идентично набору `vps-tracker/packages/ui/src/components/`):
+```
+button button-group card input textarea label select checkbox field
+separator scroll-area table badge tabs dialog alert-dialog sheet popover
+dropdown-menu tooltip breadcrumb sidebar skeleton sonner spinner alert
+command kbd calendar slider chart input-group input-otp toggle
+```
+Команда: `cd apps/web && pnpm dlx shadcn@latest add button card input ...` (CLI пишет в `packages/ui/src/components/` через aliases).
+
+Применение темы: `pnpm dlx shadcn@latest apply b2fA --only theme -y` (обновит `:root`/`.dark` в `globals.css`).
+
+### Этап 5 — `apps/web` каркас
+
+- `apps/web/package.json` (`@evobgp/web`): deps из `vps-tracker/apps/web/package.json` с заменой `@cfdm/*` → `@evobgp/*`:
+  - `react`, `react-dom` 19
+  - `@tanstack/react-router`, `@tanstack/react-router-devtools`, `@tanstack/react-query`, `@tanstack/react-query-devtools`, `@tanstack/react-table`, `@tanstack/react-virtual`
+  - `@hookform/resolvers`, `react-hook-form`, `zod` (v3 для совместимости с RHF-resolvers — как в vps-tracker)
+  - `class-variance-authority`, `cmdk`, `date-fns`, `lucide-react`, `next-themes`, `react-day-picker`, `recharts`, `sonner`
+  - `@dnd-kit/core`, `@dnd-kit/modifiers`, `@dnd-kit/sortable`, `@dnd-kit/utilities`
+  - devDeps: `@tailwindcss/vite`, `@tanstack/router-plugin`, `@types/react`, `@types/react-dom`, `@vitejs/plugin-react`, `happy-dom`, `tailwindcss`, `tw-animate-css`, `typescript`, `vite`, `vitest`
+- `apps/web/components.json` (алиасы web-side: `@/components`, `@/hooks`, `@/lib`, `utils: @evobgp/ui/lib/utils`, `ui: @evobgp/ui/components`; registries `@reui`; css `../../packages/ui/src/styles/globals.css`)
+- `apps/web/vite.config.ts` (точная копия vps-tracker с заменой `@cfdm` → `@evobgp`): плагины `TanStackRouterPlugin({ target: 'react', autoCodeSplitting: true })` → `react()` → `tailwindcss()`; alias `@`, `@evobgp/ui/*`; server port 5173, proxy `/v1` и `/metrics` → `http://127.0.0.1:8080`
+- `apps/web/tsconfig.json` extends `../../tsconfig.base.json`
+- `apps/web/index.html` (#root, anti-FOUC тема-скрипт `evobgp-theme`)
+
+### Этап 6 — React-инициализация
+
+Точная копия vps-tracker с заменой путей:
+
+- `apps/web/src/main.tsx`: `StrictMode → ThemeProvider → QueryClientProvider → RouterProvider + <Toaster richColors position="top-right" />`, единственный `import '@evobgp/ui/globals.css'`
+- `apps/web/src/lib/queryClient.ts`: `staleTime: 60_000, retry: 1, refetchOnWindowFocus: false`
+- `apps/web/src/lib/router.ts`: `createRouter({ routeTree, context, defaultPreload: 'intent', scrollRestoration: true })` + `declare module '@tanstack/react-router'` Register
+- `apps/web/src/components/theme-provider.tsx`: next-themes `attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange`
+- `apps/web/src/routes/__root.tsx`: `createRootRouteWithContext<{ queryClient }>` + `<AppShell><Outlet /></AppShell>`
+
+### Этап 7 — Перенос app-shell и shared-обёрток
+
+Перенести из `vps-tracker/apps/web/src/components/` с адаптацией брендинга/навигации:
+- `layout/app-shell.tsx` (block sidebar-07, `SidebarProvider → Sidebar collapsible="icon" → SidebarHeader/SidebarContent(navGroups)/SidebarFooter + SidebarInset(header sticky h-16 backdrop-blur + SidebarTrigger + Breadcrumb + actions + main)`). `render={<Link to={item.to} />}` — **Base UI render-prop, не Radix asChild**. Навигация подставляется под EvoBGP-экраны.
+- `mode-toggle.tsx`, `page-shell.tsx`, `page-header.tsx`, `empty-state.tsx`, `query-state.tsx`, `confirm-dialog.tsx`, `status-badge.tsx`, `section-cards.tsx`, `form-sheet.tsx`, `form-field.tsx`, `loading-button.tsx`, `skeletons.tsx`
+- `data-grid-card.tsx` (обёртка над `@reui/data-grid`) — полная копия с типизированным `DataGridCardProps<TData>`
+
+### Этап 8 — API-клиент и типы (перенос из legacy)
+
+- `apps/web/src/lib/api-client.ts`: перенос логики из `web-legacy-svelte/src/lib/api/client.ts`:
+  - `TOKEN_STORAGE_KEY = 'evobgp_api_token'`
+  - `mergeHeaders`: Accept JSON + Bearer из localStorage
+  - `apiFetch`, `apiJSON<T>`, `apiMutate<T>` с auto-Idempotency-Key
+  - `parseResponse<T>`: 204/205→undefined, ошибки → `ApiError` с RFC 9457 Problem
+  - `waitForJob(jobId, opts?)`: poll `GET /v1/jobs/{id}` каждые 400ms
+  - `apiPageAll<T>`: cursor-пагинация (`items`/`next_cursor`/`has_more`)
+- `apps/web/src/types/api.ts`: перенос всех типов из `web-legacy-svelte/src/lib/api/types.ts` (`ModuleRow`, `BgpPeer`, `SpeakerRow`, `RevisionRow`, `JobRow`, `AuthSession`, `ApiKey`, `PostgresOverview`, etc.)
+- `apps/web/src/queries/` — по доменам: `auth.ts`, `modules.ts`, `network.ts`, `operations.ts`, `monitoring.ts`, `directories.ts`, `access.ts`, `settings.ts` (queryOptions + key factories)
+
+### Этап 9 — ReUI enterprise-компоненты
+
+Через MCP `search_items_in_registries` с `registries: ["@reui"]` → `get_item_examples` → `get_add_command`:
+```bash
+cd apps/web
+pnpm dlx shadcn@latest add @reui/data-grid
+pnpm dlx shadcn@latest add @reui/filters
+pnpm dlx shadcn@latest add @reui/autocomplete
+pnpm dlx shadcn@latest add @reui/date-selector
+pnpm dlx shadcn@latest add @reui/number-field
+pnpm dlx shadcn@latest add @reui/color-picker
+pnpm dlx shadcn@latest add @reui/badge
+```
+Документация для `@reui/*`: [reui.io/docs/components/base/](https://reui.io/docs/components/base) + [llms.txt](https://reui.io/llms.txt) — **не** ui.shadcn.com для ReUI.
+
+Ложатся в `apps/web/src/components/reui/` (НЕ в packages/ui). Post-add: импорты shadcn-примитивов внутри ReUI → `@evobgp/ui/components/*`. Проверить что `@tanstack/react-table`, `@tanstack/react-virtual`, `@dnd-kit/*`, `date-fns`, `react-day-picker` попали в `apps/web/package.json`.
+
+### Этап 10 — Реализация 13 роутов (поэтапно)
+
+Каждый роут — отдельная подзадача. Порядок от простого к сложному (позволяет рано верифицировать стек):
+
+| # | Файл (TanStack file-based) | Что делает | Источник (legacy) |
+|---|---|---|---|
+| 1 | `routes/_auth.tsx` + `_auth.tsx` layout | auth guard (токен в localStorage) | `routes/+layout.ts` |
+| 2 | `routes/_auth/settings.tsx` | API-токен + тема (свет/тёмн/сист) | `routes/settings/+page.svelte` |
+| 3 | `routes/_auth/access.tsx` | `GET /v1/auth/session` + список API-ключей | `routes/access/+page.svelte` |
+| 4 | `routes/index.tsx` | dashboard: KPI + recent jobs/revisions + network status | `routes/+page.svelte` |
+| 5 | `routes/_auth/modules/index.tsx` | список модулей (DataGridCard) | `routes/modules/+page.svelte` |
+| 6 | `routes/_auth/modules/$moduleId.tsx` | детали модуля (cards: AS/Cdn/Domain/IpRange) | `routes/modules/[moduleId]/+page.svelte` |
+| 7 | `routes/_auth/network.tsx` | peers + speakers + BIRD settings (tabs) | `routes/network/+page.svelte` |
+| 8 | `routes/_auth/operations.tsx` | jobs + revisions + diff (tabs, waitForJob) | `routes/operations/+page.svelte` |
+| 9 | `routes/_auth/schedule.tsx` | refresh jobs (tabs all/refresh/failed) | `routes/schedule/+page.svelte` |
+| 10 | `routes/_auth/directories.tsx` | BGP communities + DoH profiles (tabs) | `routes/directories/+page.svelte` |
+| 11 | `routes/_auth/monitoring.tsx` | bird status + version + postgres + runtime logs | `routes/monitoring/+page.svelte` |
+| 12 | `routes/_auth/tenant-settings.tsx` | настройки BIRD/ревизий/runtime (tabs) | `routes/tenant-settings/+page.svelte` |
+| 13 | редиректы | `/peers`→`/network`, `/revisions`→`/operations?tab=revisions` | `routes/peers`, `routes/revisions` |
+
+Для каждого роута: MCP-shadcn search+examples → `pnpm dlx shadcn@latest docs <name>` сверка с [ui.shadcn.com/docs/components](https://ui.shadcn.com/docs/components) → ReUI для data-grid/filters → композиция @evobgp/ui + DataGridCard; логика переносится из соответствующего `+page.svelte` (но на TanStack Query вместо инлайн fetch). Live-данные (network, monitoring) — `refetchInterval` вместо кастомного `setInterval`.
+
+### Этап 11 — Инфраструктура деплоя
+
+**Минимальные правки (compose/bake не трогать):**
+
+`deploy/docker/evobgp-web/Dockerfile` (3 стадии → 3 стадии):
+- `deps`: установить pnpm (corepack), `COPY pnpm-workspace.yaml package.json apps/web/package.json packages/ui/package.json ./` + `COPY apps/web/ apps/web/` + `COPY packages/ packages/` → `pnpm install --frozen-lockfile`
+- `build`: `COPY . .` → `pnpm --filter @evobgp/web build`
+- `web`: `COPY --from=web-artifacts /app/apps/web/dist /usr/share/nginx/html` (вместо `/web/build`)
+
+`deploy/docker/evobgp-web/nginx.conf` — **не меняется** (SPA fallback совместим).
+
+`deploy/docker/docker-bake.hcl` — проверить что target `web-build` корректно прокидывает контекст.
+
+### Этап 12 — CI/CD
+
+`.gitea/workflows/ci.yaml`, job `web` (строки 164-181):
+- `actions/setup-node@v4` → `node-version: "22"`, `cache: pnpm`, `cache-dependency-path: pnpm-lock.yaml`
+- Добавить `pnpm install` (через corepack)
+- Заменить `npm run check` → `pnpm --filter @evobgp/web exec tsc --noEmit`
+- Заменить `npm run lint` → `pnpm --filter @evobgp/web lint` (eslint)
+- Добавить `pnpm --filter @evobgp/web build` (раньше проверялось только в Docker)
+
+Job `changes` — path-filter `web/*` → `apps/web/**` + `packages/ui/**` (расширить globs).
+
+### Этап 13 — Cursor rules + skills
+
+**Удалить** (Svelte-специфика):
+- `.cursor/rules/web-shadcn.mdc` (WEB-01..WEB-19 — всё про shadcn-svelte)
+
+**Скопировать из vps-tracker `.cursor/rules/`** (с заменой `@cfdm` → `@evobgp`, `Vps*` → `EvoBgp*`):
+- `shadcn-mcp.mdc`, `reui-mcp.mdc`, `shadcn-ui-production.mdc`, `frontend-shadcn.mdc`, `frontend-monorepo.mdc`, `frontend-ui-patterns.mdc`, `vite-tanstack-frontend.mdc`
+
+**Обновить** `engineering.mdc`:
+- `DEP-04`: «shadcn-svelte/bits-ui» → «shadcn/ui React (Base UI) + ReUI registry»
+- `TEST-04`: `npm run check` → `pnpm --filter @evobgp/web exec tsc --noEmit`; `npm run lint` → eslint
+- `DOC-SYNC-06/07`: `shadcn-svelte.com` → `ui.shadcn.com/docs` + `reui.io/docs`
+
+**Обновить** `context7-stack.mdc` Web UI таблица: убрать svelte/sveltekit/bits-ui/formsnap/`@lucide/svelte`; добавить React 19, TanStack Router/Query/Table/Virtual, ReUI llms.txt, `lucide-react`.
+
+**Создать** `c:\Users\shats\Dev\EvoBGP\.agents\skills\` (сейчас не существует):
+- `shadcn/SKILL.md` — скопировать из cloudflare-domain-manager
+- `reui/SKILL.md` — скопировать из cloudflare-domain-manager, заменить обёртки под EvoBGP (`DataGridCard`, `NetworkFiltersToolbar`)
+
+### Этап 14 — Финальная проверка и очистка
+
+1. `pnpm install && pnpm --filter @evobgp/web build` без ошибок
+2. MCP `get_audit_checklist` — пройти по чек-листу
+3. `cursor-ide-browser` smoke-тест всех 13 роутов (login через dev-токен, навигация, CRUD, dark/light toggle)
+4. Удалить `web-legacy-svelte/`
+5. Проверить что compose поднимается (`docker compose --profile reference up`)
+6. Коммит на main (gitflow по `.cursor/rules/conventional-commits.mdc`): `feat(frontend): миграция web UI на React + shadcn/ui + ReUI`
+
+---
+
+## Цитаты ключевых файлов эталона
+
+- Конфиги: [apps/web/components.json](c:\Users\shats\Dev\vps-tracker\apps\web\components.json), [packages/ui/components.json](c:\Users\shats\Dev\vps-tracker\packages\ui\components.json)
+- Стили: [packages/ui/src/styles/globals.css](c:\Users\shats\Dev\vps-tracker\packages\ui\src\styles\globals.css)
+- Инициализация: [apps/web/src/main.tsx](c:\Users\shats\Dev\vps-tracker\apps\web\src\main.tsx), [lib/queryClient.ts](c:\Users\shats\Dev\vps-tracker\apps\web\src\lib\queryClient.ts), [lib/router.ts](c:\Users\shats\Dev\vps-tracker\apps\web\src\lib\router.ts)
+- Layout: [components/layout/app-shell.tsx](c:\Users\shats\Dev\vps-tracker\apps\web\src\components\layout\app-shell.tsx)
+- Vite: [apps/web/vite.config.ts](c:\Users\shats\Dev\vps-tracker\apps\web\vite.config.ts)
+- ReUI обёртка: [components/data-grid-card.tsx](c:\Users\shats\Dev\vps-tracker\apps\web\src\components\data-grid-card.tsx)
+- API-клиент legacy: [web/src/lib/api/client.ts](c:\Users\shats\Dev\EvoBGP\web\src\lib\api\client.ts), [web/src/lib/api/types.ts](c:\Users\shats\Dev\EvoBGP\web\src\lib\api\types.ts)
+
+## Документация
+
+- [shadcn/ui Installation](https://ui.shadcn.com/docs/installation)
+- [shadcn/ui Components](https://ui.shadcn.com/docs/components)
+- [shadcn/ui Monorepo](https://ui.shadcn.com/docs/monorepo)
+- [shadcn/ui MCP Server](https://ui.shadcn.com/docs/mcp)
+- [ReUI Get Started](https://reui.io/docs/get-started)
+- [ReUI Styling](https://reui.io/docs/styling)
+- [ReUI MCP](https://reui.io/docs/mcp)
+- [ReUI llms.txt](https://reui.io/llms.txt)
+
+## Риски и митигация
+
+| Риск | Митигация |
+|---|---|
+| Big-bang = длинное окно неработающего UI в dev | Этапы 3-9 делаются параллельно с рабочим `web-legacy-svelte/`; переключение атомарно в финале |
+| ReUI на React 19 / Base UI может иметь breaking changes | MCP `get_item_examples` + dry-run `--dry-run` перед add |
+| OpenAPI drift (типы в legacy vs контракт) | Типы переносятся как есть (frontend-only scope); Zod-схемы по желанию позже |
+| npm → pnpm меняет lock-файлы и CI | Пункт 12 явно покрывает CI; corepack в Dockerfile |
+| 13 роутов = большой объём работы | Этап 10 разбит по сложности; можно остановиться после базовых и продолжить инкрементально |

.cursor/rules/context7-stack.mdc

@@ -32,23 +32,28 @@ alwaysApply: true
 
 ---
 
-## Web UI (`web/`)
+## Web UI (`apps/web/` + `packages/ui/`)
 
 | Библиотека | Context7 ID | Версия в проекте | Когда |
 |------------|-------------|------------------|-------|
-| Svelte | `/websites/svelte_dev` | ^5.54 | runes, компоненты, реактивность |
-| SvelteKit | `/sveltejs/kit` | ^2.50 | routing, `load`, adapters, SSR |
+| React | `/facebook/react` | ^19.2 | hooks, components, JSX |
+| TanStack Router | `/tanstack/router` | ^1.130 | file-based routes, `createFileRoute`, `useSearch`, `Link` |
+| TanStack Query | `/tanstack/query` | ^5.90 | `useQuery`, `useMutation`, `queryOptions`, invalidation |
+| TanStack Table | `/websites/tanstack_table` | ^8.21 | data-grid колонки, сортировка (ReUI) |
+| TanStack Virtual | `/tanstack/virtual` | ^3.14 | виртуализация списков (ReUI data-grid) |
 | Vite | `/vitejs/vite/v7.3.1` | ^7.3.1 | dev server, build, plugins |
 | TypeScript | `/microsoft/typescript/v5.9.3` | ^5.9.3 | типы, strict, tsconfig |
 | Tailwind CSS | `/tailwindlabs/tailwindcss.com` | ^4.1 | v4, `@tailwindcss/vite`, утилиты |
-| shadcn-svelte | `/websites/shadcn-svelte` | CLI | примитивы `ui/core`, theming |
-| Bits UI | `/llmstxt/bits-ui_llms_txt` | ^2.17 | headless-примитивы под shadcn |
-| sveltekit-superforms | `/ciscoheat/sveltekit-superforms` | ^2.30 | формы, server actions |
-| Formsnap | `/svecosystem/formsnap` | ^2.0 | доступные поля форм |
-| Zod | `/websites/zod_dev_v4` | ^4.4 | схемы валидации |
-| TanStack Table | `/websites/tanstack_table` | table-core ^8.21 | `AppDataTable`, колонки, сортировка |
+| shadcn/ui (React) | MCP `plugin-shadcn-shadcn` + https://ui.shadcn.com/docs | base-nova | примитивы `@evobgp/ui/components/*` |
+| ReUI | https://reui.io/llms.txt + MCP с `registries: ["@reui"]` | registry | enterprise: data-grid, filters, autocomplete |
+| react-hook-form | `/react-hook-form` | ^7.60 | формы, controller |
+| Zod | `/websites/zod_dev_v4` | ^3.25 / ^4 (apps/web) | схемы валидации |
+| recharts | `/recharts/recharts` | 3.8.0 | графики через shadcn `Chart` |
+| next-themes | `/pacocoursey/next-themes` | ^0.4 | dark/light theme provider |
+| sonner | `/emilkowalski/sonner` | ^1.7 | toast notifications |
+| lucide-react | `/lucide-icons/lucide` | ^0.468 | иконки |
 
-UI-правила репозитория: `.cursor/rules/web-shadcn.mdc` (shadcn-svelte docs — первичный источник для компонентов).
+UI-правила репозитория: `.cursor/rules/web-shadcn.mdc` (MCP + shadcn/ui React docs — первичный источник для компонентов).
 
 ---
 
@@ -77,12 +82,14 @@ UI-правила репозитория: `.cursor/rules/web-shadcn.mdc` (shadcn
 1. **Контракт HTTP** — `docs/openapi.yaml` (не Context7).
 2. **Context7** — синтаксис и API библиотек из таблицы.
 3. **Локальные docs** — `docs/`, `web/README.md`, `AGENTS.md`.
-4. **Официальный сайт** — BIRD: https://bird.network.cz/?get_doc (если Context7 не покрыл кейс).
+4. **Официальный сайт** — BIRD: https://bird.nic.cz/?get_doc (если Context7 не покрыл кейс).
 
 ## Примеры запросов
 
 ```
-/docs /websites/svelte_dev runes $state $derived
+/docs /facebook/react hooks useState useEffect
+/docs /tanstack/router createFileRoute useSearch Link
+/docs /tanstack/query useQuery useMutation queryOptions
 /docs /golang/go/go1_24_6 net/http ServeMux pattern matching
 /docs /websites/pkg_go_dev_github_com_jackc_pgx_v5 pool acquire rows
 /docs /llmstxt/bird_xmsl_dev_llms_txt filter bgp import

.cursor/rules/engineering.mdc

@@ -94,8 +94,8 @@ alwaysApply: true
 **DEP-03** | MUST | Миграции схемы — пары `.up.sql`/`.down.sql` для **postgres** и **sqlite**, синхронная нумерация.
 *Проверка:* `migrations/postgres/`, `migrations/sqlite/`.
 
-**DEP-04** | MUST | Web UI-библиотеки — только экосистема shadcn-svelte/bits-ui (см. `web-shadcn.mdc`).
-*Проверка:* `web/package.json` review.
+**DEP-04** | MUST | Web UI-библиотеки — только экосистема shadcn/ui (React) + ReUI (см. `web-shadcn.mdc`).
+*Проверка:* `apps/web/package.json`, `packages/ui/package.json` review.
 
 ---
 
@@ -123,7 +123,7 @@ alwaysApply: true
 **TEST-03** | MUST | Новые BIRD-сценарии в `internal/birdfmt/testdata/scenarios/*/bird.conf` + `bird -p`.
 *Проверка:* CI job `bird2`.
 
-**TEST-04** | MUST | Изменения `web/` — локально **`npm run check` и `npm run lint`** (обе команды, exit 0); CI job `web` в `.gitea/workflows/ci.yaml`. Агент: при fail lint — `npx prettier --write` затем повтор. Только `check` не заменяет `lint`.
+**TEST-04** | MUST | Изменения `apps/web/**` или `packages/ui/**` — локально **`pnpm --filter @evobgp/web run typecheck`, `lint`, `build`** (все три команды, exit 0); CI job `web` в `.gitea/workflows/ci.yaml`.
 *Проверка:* CI job `web`; `.cursor/rules/web-shadcn.mdc` WEB-19.
 
 **TEST-05** | MUST | Изменения OpenAPI — `npx @redocly/cli lint docs/openapi.yaml`.
@@ -207,13 +207,13 @@ alwaysApply: true
 | OpenAPI / problem+json | `docs/openapi.yaml`, RFC 9457 |
 | Svelte / Kit | https://svelte.dev/docs , https://kit.svelte.dev/docs |
 | shadcn-svelte | https://shadcn-svelte.com/docs |
-| BIRD 2 | https://bird.network.cz/?get_doc |
+| BIRD 2 | https://bird.nic.cz/?get_doc |
 | Prometheus Go | https://pkg.go.dev/github.com/prometheus/client_golang |
 
 **DOC-SYNC-01** | MUST | Новый API библиотеки — сверка версии в `go.mod`/`package.json` с официальной документацией.
 **DOC-SYNC-02** | NEVER | Устаревшие примеры (Svelte 4 `export let`, deprecated pgx).
 **DOC-SYNC-03** | MUST | Конфликт docs: **OpenAPI (HTTP)** → **код** → обзорные `docs/`; `.cursor/plans/` не контракт.
-**DOC-SYNC-04** | MUST | Сомнения по Svelte — Svelte MCP / `npm run check`.
+**DOC-SYNC-04** | MUST | Сомнения по React/shadcn/ReUI — MCP `plugin-shadcn-shadcn` + `pnpm --filter @evobgp/web run typecheck`.
 **DOC-SYNC-05** | MUST | BIRD — официальная документация BIRD2 + `networking-bird.mdc` + `go test ./internal/birdfmt/...`.
 
 Приоритет при сомнениях — **официальные источники**, не блоги и не «память модели».
@@ -230,7 +230,7 @@ alwaysApply: true
 go vet ./...
 go test ./... -race -count=1
 npx @redocly/cli lint docs/openapi.yaml
-# web: cd web; npm run check; npm run lint  (или scripts/lint-web.ps1)
+# web: pnpm --filter @evobgp/web run typecheck; pnpm --filter @evobgp/web run lint; pnpm --filter @evobgp/web run build
 # go fmt/lint: gofmt -w <files>; scripts/lint-go.ps1 (gofmt + vet + golangci-lint)
 # birdfmt: go test ./internal/birdfmt/... -count=1
 ```

.cursor/rules/networking-bird.mdc

@@ -23,7 +23,7 @@ alwaysApply: false
 | Параметры BIRD tenant | Global settings: `bird_router_id`, `bird_local_asn`, … (`docs/manual.md`) |
 | BGP peers | `BGPPeer` + `ParsePeerNeighbor` |
 
-**BIRD2 docs:** https://bird.network.cz/?get_doc
+**BIRD2 docs:** https://bird.nic.cz/?get_doc
 
 ---
 
@@ -199,7 +199,7 @@ alwaysApply: false
 
 ## Documentation Sync
 
-**DOC-SYNC-05** | MUST | BIRD — https://bird.network.cz/?get_doc
+**DOC-SYNC-05** | MUST | BIRD — https://bird.nic.cz/?get_doc
 **DOC-SYNC-08** | MUST | BGP policy — RFC 4271, 4760, 7454 + BIRD docs + `birdfmt`
 **DOC-SYNC-09** | MUST | CIDR — https://pkg.go.dev/net/netip ; примеры — RFC 5737, 3849
 

.cursor/rules/web-shadcn.mdc

@@ -1,126 +1,131 @@
 ---
-description: EvoBGP WebUI — shadcn-svelte, Svelte 5, слои ui/core|patterns|app
+description: EvoBGP WebUI — React 19, shadcn/ui (base-nova), ReUI, TanStack Router/Query
 globs:
-  - web/**
+  - apps/web/**
+  - packages/ui/**
 alwaysApply: false
 ---
 
-# Web UI — shadcn-svelte
+# Web UI — React + shadcn/ui + ReUI
 
-**Источник правды:** https://shadcn-svelte.com/docs (не React shadcn/ui, не Legacy Docs).
+**Источники правды:**
+- shadcn/ui React: https://ui.shadcn.com/docs/components
+- ReUI Base UI: https://reui.io/docs/components/base/<name>
+- ReUI llms.txt: https://reui.io/llms.txt
+- MCP `plugin-shadcn-shadcn` (registries: `@shadcn`, `@reui`) — перед любой UI-задачей
 
-Общие правила Go/API: `.cursor/rules/engineering.mdc`. Локальная карта: `web/README.md`.
+Общие правила Go/API: `.cursor/rules/engineering.mdc`. Стек ID: `.cursor/rules/context7-stack.mdc`.
 
 ## Слои UI
 
 | Слой | Путь | Назначение |
 |------|------|------------|
-| Примитивы | `src/lib/ui/core/` | shadcn-svelte (только CLI `add`) |
-| Паттерны | `src/lib/ui/patterns/` | FormField, AppDataTable, ConfirmDialog, EmptyState |
-| App chrome | `src/lib/ui/app/` | Layout, PageHeader, `notify` |
-| Legacy | `src/lib/components/ui/` | Re-export; **не добавлять новые файлы** |
+| shadcn-примитивы | `packages/ui/src/components/` | output `shadcn add` (не трогать под кейс) |
+| ReUI enterprise | `apps/web/src/components/reui/` | output `shadcn add @reui/*` |
+| Shared обёртки | `apps/web/src/components/` | PageHeader, QueryState, ConfirmDialog, StatusBadge, SectionCards, LoadingButton |
+| Роуты | `apps/web/src/routes/` | TanStack Router (file-based) |
 
-Тема: `src/routes/layout.css`, `src/lib/ui/app/tokens.md`. CLI из `web/`: `npx shadcn-svelte@latest add <component> -y -o`.
-
----
+Тема: `packages/ui/src/styles/globals.css`. CLI из `apps/web`: `pnpm dlx shadcn@latest add <component>`.
 
 ## Правила
 
-**WEB-01** | MUST | Перед новым UI — проверить https://shadcn-svelte.com/docs/components; использовать компонент, не HTML+CSS с нуля.
-*Rationale:* Open Code + единый дизайн.
-*Проверка:* review; нет голых `<button class=…>`.
+**WEB-01** | MUST | Перед новым UI — MCP `plugin-shadcn-shadcn`: `search_items_in_registries` → `get_item_examples_from_registries` → `get_add_command_for_items`. Только после — JSX.
+*Rationale:* единый источник правды и API.
+*Проверка:* review; нет самописных примитивов, если есть registry item.
 
-**WEB-02** | MUST | Отсутствующий примитив — `npx shadcn-svelte@latest add <component> -y -o` → `src/lib/ui/core/`.
-*Rationale:* Distribution через CLI и `components.json`.
-*Проверка:* файлы только в `ui/core`.
+**WEB-02** | MUST | Отсутствующий shadcn-примитив — `pnpm dlx shadcn@latest add <component>` (из `apps/web`). ReUI — `pnpm dlx shadcn@latest add @reui/<name>`.
+*Проверка:* файлы в `packages/ui/src/components/` (для shadcn) или `apps/web/src/components/reui/` (для ReUI).
 
-**WEB-03** | NEVER | Альтернативные UI-kit'ы (Material, Vuetify, DaisyUI-only без shadcn-примитива).
-*Проверка:* `package.json` review.
+**WEB-03** | NEVER | Альтернативные UI-kit'ы (Material, Vuetify, Tabler, Bootstrap утилиты).
+*Проверка:* `apps/web/package.json` review.
 
-**WEB-04** | MUST | Комозиция по docs: все sub-компоненты (`DialogHeader`, `TableRow`, `Field`, …).
-*Проверка:* сверка со страницей компонента в docs.
+**WEB-04** | MUST | Композиция по docs: использовать под-компоненты (`CardHeader`, `TableRow`, `TabsList`, …).
+*Проверка:* сверка с shadcn/ReUI docs.
 
-**WEB-05** | MUST | Формы — Formsnap + `sveltekit-superforms`; UI в `ui/patterns/form`, не ad-hoc валидация на странице.
-*Проверка:* https://shadcn-svelte.com/docs/components/form
+**WEB-05** | MUST | Формы — `react-hook-form` + Zod; через `FormField`/`Form` обёртки.
+*Проверка:* https://ui.shadcn.com/docs/components/form
 
-**WEB-06** | MUST | Таблицы — Data Table + `@tanstack/table-core`; на страницах — `AppDataTable` из patterns.
-*Проверка:* https://shadcn-svelte.com/docs/components/data-table
+**WEB-06** | MUST | Сложные data-списки — ReUI `DataGridCard` (ReUI data-grid, не shadcn Data Table). Простые списки — shadcn `Table`.
+*Проверка:* `@/components/reui/data-grid` или `@evobgp/ui/components/table`.
 
-**WEB-07** | MUST | Toast — Sonner через `notify` из `ui/app/toast.js`.
-*Проверка:* https://shadcn-svelte.com/docs/components/sonner
+**WEB-07** | MUST | Toast — `sonner` (`Toaster` в `main.tsx`); `toast.success/error/message` из `sonner`.
+*Проверка:* https://ui.shadcn.com/docs/components/sonner
 
-**WEB-08** | MUST | Иконки — `@lucide/svelte` (`components.json` → `iconLibrary: lucide`).
-*Проверка:* imports.
+**WEB-08** | MUST | Иконки — `lucide-react` (`components.json` → `iconLibrary: lucide`).
+*Проверка:* imports; нет `@tabler/icons-react`, `@lucide/svelte`.
 
-**WEB-09** | MUST | Цвета — CSS-переменные `layout.css` и токены `tokens.md`; не hex/rgb на страницах.
-*Проверка:* grep `#[0-9a-f]{3,6}` в `routes/`.
+**WEB-09** | MUST | Цвета — CSS-переменные `globals.css` и ReUI semantic токены (`variant="success"/"info"/"warning"`); не hex/rgb на страницах.
+*Проверка:* grep `#[0-9a-f]{3,6}` в `apps/web/src/routes/`.
 
-**WEB-10** | SHOULD | Кастомизация — правка `ui/core` (Open Code), не `!important` поверх API.
+**WEB-10** | SHOULD | Кастомизация — правка `packages/ui`/`reui` (Open Code), не `!important` поверх API.
+
+**WEB-11** | MUST | `apps/web/src/routes/**` — композиция `@evobgp/ui/components/*` + `@/components/*` + `@/components/reui/*`; не копировать целые примитивы в route.
 *Проверка:* review.
 
-**WEB-11** | MUST | `routes/**` — композиция `ui/core` + `ui/patterns` + `ui/app`; не копировать целые примитивы shadcn в route.
+**WEB-12** | NEVER | Примеры Svelte/SvelteKit, Tabler, Bootstrap — без адаптации под текущий React-стек.
+*Проверка:* `pnpm --filter @evobgp/web run typecheck`.
+
+**WEB-13** | MUST | Реактивность — React 19 (`useState`, `useEffect`, TanStack Query/Router хуки); не Svelte runes, не `export let`.
+*Проверка:* `pnpm --filter @evobgp/web run typecheck`.
+
+**WEB-14** | SHOULD | Нетривиальный UI — прочитать страницу компонента shadcn/ReUI (props, a11y).
+
+**WEB-15** | MUST | Сомнения — MCP `plugin-shadcn-shadcn` + shadcn CLI docs + `pnpm --filter @evobgp/web run typecheck`.
+
+**WEB-16** | MUST | Подтверждение удаления — `ConfirmDialog` из `@/components/confirm-dialog`, не `window.confirm`.
+
+**WEB-17** | MUST | Пустые списки — `EmptyState` или через `QueryState` с `emptyTitle`.
 *Проверка:* review.
 
-**WEB-12** | NEVER | Примеры React shadcn/ui или Svelte 4 Legacy без адаптации под https://shadcn-svelte.com/docs/migration/svelte-5
-*Проверка:* `npm run check`.
+**WEB-18** | SHOULD | Повторяемая комбинация core (≥2 раза) — вынести в `apps/web/src/components/`.
 
-**WEB-13** | MUST | Реактивность — Svelte 5 runes (`$state`, `$derived`, `$effect`); не `export let` для локального state страниц.
-*Проверка:* `npm run check`; Svelte MCP.
-
-**WEB-14** | SHOULD | Нетривиальный UI — прочитать страницу компонента (props, a11y).
-*Проверка:* PR description.
-
-**WEB-15** | MUST | Сомнения — https://shadcn-svelte.com/llms.txt , Svelte MCP, `npm run check`.
-*Проверка:* локально.
-
-**WEB-19** | MUST | **После любого изменения `web/**`** — перед завершением задачи агент **обязан** выполнить в `web/`:
+**WEB-19** | MUST | **После любого изменения `apps/web/**` или `packages/ui/**`** — перед завершением задачи агент **обязан**:
 ```powershell
-npm run check
-npm run lint
+pnpm --filter @evobgp/web run typecheck
+pnpm --filter @evobgp/web run lint
+pnpm --filter @evobgp/web run build
 ```
-Если `npm run lint` падает (Prettier) — **сначала** `npx prettier --write <изменённые файлы>` или `npx prettier --write .`, затем снова `npm run check` и `npm run lint`. Не сдавать PR/ответ, пока обе команды не exit 0.
-*Rationale:* CI job `web` = `check` + `prettier --check`; `svelte-check` не ловит форматирование.
-*Проверка:* CI job `web`; pre-commit hook `prettier-web`.
+Все три команды должны exit 0. Не сдавать PR/ответ, пока все три не пройдут.
+*Rationale:* CI job `web` = typecheck + lint + build.
+*Проверка:* CI job `web`.
 
-**WEB-16** | MUST | Подтверждение удаления — `ConfirmDialog` из patterns, не `window.confirm`.
-*Проверка:* review.
+**WEB-20** | MUST | Роутинг — TanStack Router (file-based `apps/web/src/routes/`); типобезопасные `createFileRoute`, `useSearch`, `Link`. Не `react-router-dom`.
+*Проверка:* `tsr generate` в `build`/`typecheck` скриптах.
 
-**WEB-17** | MUST | Пустые списки — `EmptyState` из patterns.
-*Проверка:* review.
+**WEB-21** | MUST | Data fetching — TanStack Query (`useQuery`, `useMutation`, `queryOptions`); query-key factories в `apps/web/src/queries/`. Mutations invalidate keys, не refetch вручную.
+*Проверка:* review `queries/*.ts`.
 
-**WEB-18** | SHOULD | Повторяемая комбинация core (≥2 раза) — вынести в `ui/patterns/`.
-*Проверка:* review.
+**WEB-22** | MUST | Legacy Svelte — в `web-legacy-svelte/` (archive). Не использовать импорты оттуда в новом коде; только как референс при миграции роутов.
 
 ---
 
 ## Documentation Sync (Web)
 
-**DOC-SYNC-06** | MUST | UI — первично https://shadcn-svelte.com/docs; при конфликте с блогами/Stack Overflow побеждает официальная страница компонента.
-**DOC-SYNC-07** | MUST | Перед `add` — сверить Installation/Theming с `web/components.json` и `src/routes/layout.css`.
+**DOC-SYNC-06** | MUST | UI — первично MCP + shadcn/ui docs (React) + ReUI docs (Base UI); при конфликте с блогами/Stack Overflow побеждает официальная страница.
+**DOC-SYNC-07** | MUST | Перед `add` — сверить Installation/Theming с `apps/web/components.json`, `packages/ui/components.json` и `packages/ui/src/styles/globals.css`.
 
-Tailwind v4: https://shadcn-svelte.com/docs/migration/tailwind-v4
+Tailwind v4 + base-nova: https://ui.shadcn.com/docs/migration/tailwind-v4
+ReUI semantic tokens: https://reui.io/docs/styling
 
 ---
 
 ## Enforcement
 
-**Обязательный финальный шаг агента при правках `web/**`:** `npm run check` **и** `npm run lint` (см. **WEB-19**). Только `check` недостаточно.
+**Обязательный финальный шаг агента при правках `apps/web/**` или `packages/ui/**`** (см. **WEB-19**):
 
 ```powershell
-cd web
-npm run check
-npm run lint
-# при warn/fail lint:
-npx prettier --write .
-npm run check
-npm run lint
+pnpm --filter @evobgp/web run typecheck
+pnpm --filter @evobgp/web run lint
+pnpm --filter @evobgp/web run build
 ```
 
-**PR checklist `web/**`:**
-- [ ] `npm run check` — exit 0
-- [ ] `npm run lint` (prettier --check) — exit 0
-- [ ] `ui/core` / `ui/patterns`, не дубли примитивов
-- [ ] Новые примитивы через shadcn CLI
+**PR checklist `apps/web/**` / `packages/ui/**`:**
+- [ ] `pnpm --filter @evobgp/web run typecheck` — exit 0
+- [ ] `pnpm --filter @evobgp/web run lint` — exit 0
+- [ ] `pnpm --filter @evobgp/web run build` — exit 0
+- [ ] shadcn-примитивы в `packages/ui/src/components/`, ReUI в `apps/web/src/components/reui/`
+- [ ] Новые примитивы через shadcn CLI (`@shadcn` или `@reui`)
+- [ ] Импорты: `@evobgp/ui/components/*` для shadcn, `@/components/reui/*` для ReUI
 - [ ] Ссылка на docs компонента (если новый паттерн)
 
-**CI:** job `web` — `npm run check` + `npm run lint`.
+**CI:** job `web` — `typecheck` + `lint` + `build`.

.cursor/settings.json

@@ -1,10 +1,19 @@
 {
   "plugins": {
-    "svelte": {
+    "shadcn": {
+      "enabled": true
+    },
+    "context7-plugin": {
       "enabled": true
     },
     "claude-plugins-official/gopls-lsp": {
       "enabled": true
+    },
+    "claude-plugins-official/typescript-lsp": {
+      "enabled": true
+    },
+    "svelte": {
+      "enabled": false
     }
   }
 }

.cursor/skills/context7-evobgp/SKILL.md

@@ -9,7 +9,7 @@ description: Context7 lookup для стека EvoBGP — использоват
 
 ## Workflow
 
-1. Определи область: `internal/` (Go), `web/` (Svelte), `docs/openapi.yaml`, `birdfmt`/`pipeline` (BIRD), `deploy/compose` (Docker).
+1. Определи область: `internal/` (Go), `apps/web/` + `packages/ui/` (React + shadcn/ui + ReUI), `docs/openapi.yaml`, `birdfmt`/`pipeline` (BIRD), `deploy/compose` (Docker).
 2. Найди строку в таблице `context7-stack.mdc`.
 3. Вызови `query-docs` с `libraryId` из таблицы и полным вопросом пользователя.
 4. `resolve-library-id` — только если библиотеки нет в таблице или нужна другая major-версия.
@@ -18,14 +18,17 @@ description: Context7 lookup для стека EvoBGP — использоват
 
 | Задача | libraryId |
 |--------|-----------|
-| Svelte 5 runes | `/websites/svelte_dev` |
-| SvelteKit load/forms | `/sveltejs/kit` |
-| shadcn-svelte компонент | `/websites/shadcn-svelte` |
+| React 19 hooks | `/facebook/react` |
+| TanStack Router | `/tanstack/router` |
+| TanStack Query | `/tanstack/query` |
+| shadcn/ui (React) | MCP `plugin-shadcn-shadcn` + https://ui.shadcn.com/docs |
+| ReUI Base UI | https://reui.io/llms.txt + MCP с `registries: ["@reui"]` |
 | pgx pool/query | `/websites/pkg_go_dev_github_com_jackc_pgx_v5` |
 | Go net/http | `/golang/go/go1_24_6` |
 | OpenAPI lint | `/redocly/redocly-cli` |
 | BIRD config | `/llmstxt/bird_xmsl_dev_llms_txt` |
 | Tailwind v4 | `/tailwindlabs/tailwindcss.com` |
-| Zod 4 schema | `/websites/zod_dev_v4` |
+| Zod schema | `/websites/zod_dev_v4` |
+| recharts | `/recharts/recharts` |
 
 Полный список и версии — в `context7-stack.mdc`.

.gitea/workflows/ci.yaml

@@ -98,9 +98,9 @@ jobs:
                 openapi=true
                 go=true
                 ;;
-              web/README.md|web/components.json)
+              apps/web/README.md|apps/web/components.json|packages/ui/components.json)
                 ;;
-              web/*)
+              apps/web/*|packages/ui/*|packages/shared/*)
                 web=true
                 ;;
               deploy/bird/*)
@@ -126,7 +126,7 @@ jobs:
               docs/*)
                 go=true
                 ;;
-              package.json|package-lock.json|.releaserc.json)
+              package.json|package-lock.json|pnpm-lock.yaml|pnpm-workspace.yaml|.releaserc.json)
                 full_pipeline=true
                 ;;
               *)
@@ -169,16 +169,16 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "20"
-          cache: npm
-          cache-dependency-path: web/package-lock.json
-      - name: npm ci, check, lint
+          node-version: "22"
+      - name: Enable pnpm via corepack
+        run: corepack enable
+      - name: pnpm install, typecheck, lint, build
         run: |
           set -euxo pipefail
-          cd web
-          npm ci
-          npm run check
-          npm run lint
+          pnpm install --frozen-lockfile
+          pnpm --filter @evobgp/web run typecheck
+          pnpm --filter @evobgp/web run lint
+          pnpm --filter @evobgp/web run build
 
   # ---------------------------------------------------------------------------
   go:

.gitignore

@@ -1,6 +1,13 @@
-# Root npm (semantic-release, commitlint) — npm ci in CI, never commit deps
+# Root npm/pnpm (semantic-release, commitlint, workspaces) — never commit deps
 node_modules/
 
+# Vite / TS build output
+apps/web/dist/
+packages/*/dist/
+
+# TanStack Router auto-generated route tree
+apps/web/src/routeTree.gen.ts
+
 # Generated by deploy/docker/write-bake-override.sh (CI/local bake)
 deploy/docker/docker-bake.override.hcl
 

.nvmrc

@@ -0,0 +1 @@
+22

AGENTS.md

@@ -4,10 +4,10 @@
 
 ## С чего начать (минимум чтения)
 
-0. **Инженерные правила** — при изменении кода следовать [.cursor/rules/engineering.mdc](.cursor/rules/engineering.mdc); для `web/` — [.cursor/rules/web-shadcn.mdc](.cursor/rules/web-shadcn.mdc); для `birdfmt` / `pipeline` / BIRD — [.cursor/rules/networking-bird.mdc](.cursor/rules/networking-bird.mdc). **Context7 (документация библиотек)** — закреплённые ID стека: [.cursor/rules/context7-stack.mdc](.cursor/rules/context7-stack.mdc); скилл [.cursor/skills/context7-evobgp/SKILL.md](.cursor/skills/context7-evobgp/SKILL.md).
+0. **Инженерные правила** — при изменении кода следовать [.cursor/rules/engineering.mdc](.cursor/rules/engineering.mdc); для `apps/web/` + `packages/ui/` — [.cursor/rules/web-shadcn.mdc](.cursor/rules/web-shadcn.mdc); для `birdfmt` / `pipeline` / BIRD — [.cursor/rules/networking-bird.mdc](.cursor/rules/networking-bird.mdc). **Context7 (документация библиотек)** — закреплённые ID стека: [.cursor/rules/context7-stack.mdc](.cursor/rules/context7-stack.mdc); скилл [.cursor/skills/context7-evobgp/SKILL.md](.cursor/skills/context7-evobgp/SKILL.md).
 1. **[docs/README.md](docs/README.md)** — оглавление и роли читателя.
 2. **[docs/architecture.md](docs/architecture.md)** — компоненты `cmd/`, карта `internal/`, потоки данных (одного этого файла обычно достаточно для ориентации).
-3. Задача-специфично: [docs/api.md](docs/api.md), [docs/access.md](docs/access.md), [web/README.md](web/README.md) — только если меняете API, доступ или фронт.
+3. Задача-специфично: [docs/api.md](docs/api.md), [docs/access.md](docs/access.md) — только если меняете API или доступ.
 
 Источник правды по HTTP-контракту: **[docs/openapi.yaml](docs/openapi.yaml)**. Не дублируйте длинные фрагменты спецификации в ответах — ссылайтесь на путь и тег/операцию.
 
@@ -57,14 +57,18 @@
 
 Пользовательская документация в `docs/` — преимущественно на русском. Комментарии и имена в коде — в существующем стиле репозитория.
 
-## Svelte / фронтенд
+## Frontend (React + shadcn/ui + ReUI)
 
-При правках `web/**/*.svelte` или Svelte-модулей следуйте [.cursor/rules/web-shadcn.mdc](.cursor/rules/web-shadcn.mdc) (**WEB-19**): перед завершением задачи **обязательно**:
+При правках `apps/web/**` или `packages/ui/**` следуйте [.cursor/rules/web-shadcn.mdc](.cursor/rules/web-shadcn.mdc) (**WEB-19**): перед завершением задачи **обязательно**:
 
 ```powershell
-cd web
-npm run check
-npm run lint
+pnpm --filter @evobgp/web run typecheck
+pnpm --filter @evobgp/web run lint
+pnpm --filter @evobgp/web run build
 ```
 
-Если `lint` падает — `npx prettier --write .` и повторить обе команды. CI job `web` не пропускает без этого.
+Все три команды должны exit 0. CI job `web` не пропускает без этого.
+
+Стек: React 19, TanStack Router/Query, shadcn/ui (base-nova, registry `@shadcn` + `@reui`), Tailwind v4, lucide-react. Legacy Svelte — в `web-legacy-svelte/` (архив, только референс при миграции).
+
+UI-задачи начинаются с MCP `plugin-shadcn-shadcn` (search → examples → add command), затем CLI `pnpm dlx shadcn@latest add ...` из `apps/web`. См. также [.cursor/rules/context7-stack.mdc](.cursor/rules/context7-stack.mdc) для Context7 ID стека.

apps/web/components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "registries": {
+    "@reui": "https://reui.io/r/{style}/{name}.json"
+  },
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@evobgp/ui/lib/utils",
+    "ui": "@evobgp/ui/components"
+  }
+}

apps/web/eslint.config.js

@@ -0,0 +1,36 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import globals from 'globals'
+
+export default tseslint.config(
+  { ignores: ['dist', 'src/routeTree.gen.ts'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      'prefer-const': 'off',
+    },
+  },
+  {
+    files: ['src/components/reui/**/*.{ts,tsx}'],
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'off',
+      'react-hooks/exhaustive-deps': 'off',
+    },
+  },
+)

apps/web/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="ru" class="">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <title>EvoBGP</title>
+    <script>
+      // Anti-FOUC: apply persisted theme before paint (matches next-themes attribute="class")
+      try {
+        var t = localStorage.getItem('evobgp-theme');
+        var m = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        var dark = t === 'dark' || (!t || t === 'system') && m;
+        if (dark) document.documentElement.classList.add('dark');
+      } catch (e) {}
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/web/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@evobgp/web",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsr generate && tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsr generate && tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.0.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@evobgp/ui": "workspace:*",
+    "@hookform/resolvers": "^3.10.0",
+    "@tanstack/react-query": "^5.90.2",
+    "@tanstack/react-query-devtools": "^5.90.2",
+    "@tanstack/react-router": "^1.130.2",
+    "@tanstack/react-router-devtools": "^1.130.2",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.14.4",
+    "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.468.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.0",
+    "react-day-picker": "^10.0.1",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.60.0",
+    "recharts": "3.8.0",
+    "sonner": "^1.7.0",
+    "zod": "^3.25.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@tanstack/router-plugin": "^1.130.0",
+    "@tanstack/router-cli": "^1.130.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.0.0",
+    "@eslint/js": "^9.0.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.0",
+    "globals": "^15.0.0",
+    "typescript-eslint": "^8.0.0",
+    "happy-dom": "^18.0.0",
+    "tailwindcss": "^4.1.0",
+    "tw-animate-css": "^1.0.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.3.1",
+    "vitest": "^3.0.0"
+  }
+}

apps/web/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="7" fill="#0f172a"/>
+  <text x="16" y="22" font-family="ui-sans-serif,system-ui,sans-serif" font-size="18" font-weight="700" fill="#f8fafc" text-anchor="middle">B</text>
+</svg>

apps/web/src/components/access/access-api-keys-card.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react'
+import { Plus, RefreshCw } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { AccessApiKeysGrid } from '@/components/access/access-api-keys-grid'
+import { DataGridCard } from '@/components/data-grid-shell'
+import { ApiKeyCreateDialog } from '@/components/access/api-key-create-dialog'
+import { ApiKeyTokenDialog } from '@/components/access/api-key-token-dialog'
+import { QueryState } from '@/components/query-state'
+import { TableSkeleton } from '@/components/skeletons'
+import { useRevokeApiKeyMutation, useRotateApiKeyMutation } from '@/queries/api-keys'
+import type { ApiKey, ApiKeyCreated } from '@/types/api'
+
+interface AccessApiKeysCardProps {
+  items: ApiKey[]
+  isLoading: boolean
+  isError: boolean
+  error: unknown
+  onRetry: () => void
+}
+
+export function AccessApiKeysCard({
+  items,
+  isLoading,
+  isError,
+  error,
+  onRetry,
+}: AccessApiKeysCardProps) {
+  const [createOpen, setCreateOpen] = useState(false)
+  const [tokenDialogOpen, setTokenDialogOpen] = useState(false)
+  const [revealedToken, setRevealedToken] = useState('')
+
+  const revoke = useRevokeApiKeyMutation()
+  const rotate = useRotateApiKeyMutation()
+
+  function showToken(created: ApiKeyCreated) {
+    setRevealedToken(created.token)
+    setTokenDialogOpen(true)
+  }
+
+  function handleRotated(id: string) {
+    rotate.mutate(id, {
+      onSuccess: (created) => showToken(created),
+    })
+  }
+
+  return (
+    <>
+      <DataGridCard
+        title="API-ключи"
+        description="Управление ключами tenant. Полный токен показывается только при создании и ротации."
+        actions={
+          <>
+            <Button size="sm" variant="outline" type="button" onClick={onRetry} disabled={isLoading}>
+              <RefreshCw className={isLoading ? 'animate-spin' : ''} />
+              Обновить
+            </Button>
+            <Button size="sm" type="button" onClick={() => setCreateOpen(true)}>
+              <Plus />
+              Создать
+            </Button>
+          </>
+        }
+      >
+        <QueryState
+          data={items}
+          isLoading={isLoading}
+          isError={isError}
+          error={error}
+          empty={items.length === 0}
+          emptyTitle="Нет ключей"
+          emptyDescription="Создайте API-ключ для автоматизации или отдельного доступа."
+          skeleton={<TableSkeleton rows={4} cols={6} />}
+          onRetry={onRetry}
+        >
+          {(data) => (
+            <AccessApiKeysGrid
+              items={data}
+              isLoading={isLoading}
+              onRotate={handleRotated}
+              onRevoke={(id) => revoke.mutate(id)}
+              rotatePending={rotate.isPending}
+              revokePending={revoke.isPending}
+            />
+          )}
+        </QueryState>
+      </DataGridCard>
+
+      <ApiKeyCreateDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        onCreated={showToken}
+      />
+
+      <ApiKeyTokenDialog
+        open={tokenDialogOpen}
+        token={revealedToken}
+        onOpenChange={setTokenDialogOpen}
+      />
+    </>
+  )
+}

apps/web/src/components/access/access-api-keys-grid.tsx

@@ -0,0 +1,158 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { RefreshCw, Trash2 } from 'lucide-react'
+import { useMemo } from 'react'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { Badge } from '@/components/reui/badge'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { StatusBadge } from '@/components/status-badge'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { formatApiKeyDate } from '@/lib/access/api-key-labels'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { ApiKey } from '@/types/api'
+
+export function AccessApiKeysGrid({
+  items,
+  isLoading = false,
+  onRotate,
+  onRevoke,
+  rotatePending = false,
+  revokePending = false,
+}: {
+  items: ApiKey[]
+  isLoading?: boolean
+  onRotate: (id: string) => void
+  onRevoke: (id: string) => void
+  rotatePending?: boolean
+  revokePending?: boolean
+}) {
+  const columns = useMemo<ColumnDef<ApiKey>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
+        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
+        meta: { headerTitle: 'Имя' },
+      },
+      {
+        accessorKey: 'role',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Роль" />,
+        cell: ({ row }) => (
+          <Badge variant="outline" className="font-mono text-xs">
+            {row.original.role}
+          </Badge>
+        ),
+        meta: { headerTitle: 'Роль' },
+      },
+      {
+        accessorKey: 'prefix',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Префикс" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">{row.original.prefix}…</span>
+        ),
+        meta: { headerTitle: 'Префикс' },
+      },
+      {
+        id: 'status',
+        enableSorting: false,
+        header: 'Статус',
+        cell: ({ row }) =>
+          row.original.revoked_at ? (
+            <StatusBadge status="error" label="отозван" />
+          ) : (
+            <StatusBadge status="active" label="активен" />
+          ),
+        meta: { headerTitle: 'Статус' },
+      },
+      {
+        id: 'expires_at',
+        accessorFn: (row) => row.expires_at ?? '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Истекает" />,
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground">
+            {formatApiKeyDate(row.original.expires_at)}
+          </span>
+        ),
+        meta: { headerTitle: 'Истекает' },
+      },
+      {
+        id: 'last_used_at',
+        accessorFn: (row) => row.last_used_at ?? '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Последнее использование" />,
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground">
+            {formatApiKeyDate(row.original.last_used_at)}
+          </span>
+        ),
+        meta: { headerTitle: 'Последнее использование' },
+      },
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: () => null,
+        cell: ({ row }) => {
+          const k = row.original
+          return (
+            <div className="flex gap-1">
+              <ConfirmDialog
+                trigger={
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    type="button"
+                    title="Ротировать"
+                    disabled={!!k.revoked_at || rotatePending}
+                  >
+                    <RefreshCw className="size-3.5" />
+                  </Button>
+                }
+                title="Ротировать ключ?"
+                description="Старый токен перестанет работать сразу."
+                confirmLabel="Ротировать"
+                onConfirm={() => onRotate(k.id)}
+              />
+              <ConfirmDialog
+                trigger={
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    type="button"
+                    className="text-destructive"
+                    disabled={!!k.revoked_at || revokePending}
+                    title="Отозвать"
+                  >
+                    <Trash2 className="size-3.5" />
+                  </Button>
+                }
+                title="Отозвать API-ключ?"
+                description={`${k.name} (${k.prefix}…)`}
+                confirmLabel="Отозвать"
+                destructive
+                onConfirm={() => onRevoke(k.id)}
+              />
+            </div>
+          )
+        },
+      },
+    ],
+    [onRevoke, onRotate, revokePending, rotatePending],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<ApiKey>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет ключей"
+    />
+  )
+}

apps/web/src/components/access/api-key-create-dialog.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { Button } from '@evobgp/ui/components/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@evobgp/ui/components/dialog'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@evobgp/ui/components/select'
+
+import { LoadingButton } from '@/components/loading-button'
+import { API_KEY_ROLE_ITEMS } from '@/lib/access/api-key-labels'
+import { useCreateApiKeyMutation } from '@/queries/api-keys'
+import type { ApiKeyCreate, ApiKeyCreated, ApiKeyRole } from '@/types/api'
+
+interface ApiKeyCreateDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onCreated: (created: ApiKeyCreated) => void
+}
+
+export function ApiKeyCreateDialog({ open, onOpenChange, onCreated }: ApiKeyCreateDialogProps) {
+  const createMutation = useCreateApiKeyMutation()
+  const [name, setName] = useState('')
+  const [role, setRole] = useState<ApiKeyRole>('editor')
+  const [expiresLocal, setExpiresLocal] = useState('')
+
+  useEffect(() => {
+    if (!open) return
+    setName('')
+    setRole('editor')
+    setExpiresLocal('')
+  }, [open])
+
+  function handleOpenChange(next: boolean) {
+    onOpenChange(next)
+  }
+
+  async function save() {
+    if (!name.trim()) {
+      toast.error('Укажите имя')
+      return
+    }
+    const body: ApiKeyCreate = {
+      name: name.trim(),
+      role,
+    }
+    if (expiresLocal.trim()) {
+      const d = new Date(expiresLocal)
+      if (Number.isNaN(d.getTime())) {
+        toast.error('Некорректная дата истечения')
+        return
+      }
+      body.expires_at = d.toISOString()
+    }
+    try {
+      const created = await createMutation.mutateAsync(body)
+      onOpenChange(false)
+      onCreated(created)
+    } catch {
+      // toast handled in mutation
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Новый API-ключ</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-4 py-2">
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="key-name">Имя</Label>
+            <Input
+              id="key-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="CI / оператор UI"
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="key-role">Роль</Label>
+            <Select
+              items={[...API_KEY_ROLE_ITEMS]}
+              value={role}
+              onValueChange={(v) => v && setRole(v as ApiKeyRole)}
+            >
+              <SelectTrigger id="key-role" className="w-full">
+                <SelectValue placeholder="Выберите роль" />
+              </SelectTrigger>
+              <SelectContent>
+                {API_KEY_ROLE_ITEMS.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="key-expires">Истекает (опционально)</Label>
+            <Input
+              id="key-expires"
+              type="datetime-local"
+              value={expiresLocal}
+              onChange={(e) => setExpiresLocal(e.target.value)}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)}>
+            Отмена
+          </Button>
+          <LoadingButton onClick={save} loading={createMutation.isPending}>
+            Создать
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

apps/web/src/components/access/api-key-token-dialog.tsx

@@ -0,0 +1,51 @@
+import { Copy } from 'lucide-react'
+import { toast } from 'sonner'
+
+import { Button } from '@evobgp/ui/components/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@evobgp/ui/components/dialog'
+
+interface ApiKeyTokenDialogProps {
+  open: boolean
+  token: string
+  onOpenChange: (open: boolean) => void
+}
+
+export function ApiKeyTokenDialog({ open, token, onOpenChange }: ApiKeyTokenDialogProps) {
+  async function copyToken() {
+    if (!token) return
+    try {
+      await navigator.clipboard.writeText(token)
+      toast.success('Скопировано')
+    } catch {
+      toast.error('Не удалось скопировать')
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Сохраните токен</DialogTitle>
+          <DialogDescription>
+            Он больше не будет показан. Скопируйте в безопасное хранилище.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="break-all rounded-md border bg-muted/40 p-3 font-mono text-xs">{token}</div>
+        <DialogFooter>
+          <Button variant="outline" onClick={copyToken}>
+            <Copy />
+            Копировать
+          </Button>
+          <Button onClick={() => onOpenChange(false)}>Готово</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

apps/web/src/components/confirm-dialog.tsx

@@ -0,0 +1,53 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@evobgp/ui/components/alert-dialog'
+import type { ReactElement, ReactNode } from 'react'
+
+interface ConfirmDialogProps {
+  trigger: ReactElement
+  title: string
+  description?: ReactNode
+  confirmLabel?: string
+  cancelLabel?: string
+  destructive?: boolean
+  onConfirm: () => void
+}
+
+export function ConfirmDialog({
+  trigger,
+  title,
+  description,
+  confirmLabel = 'Подтвердить',
+  cancelLabel = 'Отмена',
+  destructive,
+  onConfirm,
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger render={trigger} />
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description ? <AlertDialogDescription>{description}</AlertDialogDescription> : null}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{cancelLabel}</AlertDialogCancel>
+          <AlertDialogAction
+            variant={destructive ? 'destructive' : 'default'}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

apps/web/src/components/dashboard/dashboard-network-panel.tsx

@@ -0,0 +1,38 @@
+import { aggregateNetworkMetrics } from '@/queries/overview'
+import type { PeerRow, SpeakerRow } from '@/types/api'
+
+function Row({ label, value, variant = 'default' }: { label: string; value: string; variant?: 'default' | 'warning' }) {
+  return (
+    <div className="flex items-center justify-between gap-2 px-1 text-sm">
+      <span className="text-muted-foreground">{label}</span>
+      <span
+        className={
+          variant === 'warning'
+            ? 'font-medium text-warning-foreground tabular-nums'
+            : 'font-medium tabular-nums'
+        }
+      >
+        {value}
+      </span>
+    </div>
+  )
+}
+
+export function DashboardNetworkPanel({
+  peers,
+  speakers,
+}: {
+  peers: PeerRow[]
+  speakers: SpeakerRow[]
+}) {
+  const m = aggregateNetworkMetrics(peers, speakers)
+  return (
+    <div className="flex flex-col gap-2 p-3">
+      <Row label="Пиры Established" value={`${m.peersEstablished} / ${m.peersEnabled}`} />
+      <Row label="Спикеры online" value={`${m.speakersOnline} / ${m.speakersTotal}`} />
+      {m.peersMismatch > 0 ? (
+        <Row label="Mismatches" value={String(m.peersMismatch)} variant="warning" />
+      ) : null}
+    </div>
+  )
+}

apps/web/src/components/dashboard/dashboard-quick-actions.tsx

@@ -0,0 +1,41 @@
+import { Link } from '@tanstack/react-router'
+import { Gauge, Network, Play, Plus, Share2, Tags } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+import { FrameFooter } from '@/components/reui/frame'
+
+export function DashboardQuickActions() {
+  return (
+    <FrameFooter className="flex flex-wrap gap-2">
+      <Button variant="outline" size="sm" type="button" render={<Link to="/modules" />}>
+        <Plus className="size-4" />
+        Создать модуль
+      </Button>
+      <Button variant="outline" size="sm" type="button" render={<Link to="/directories" />}>
+        <Tags className="size-4" />
+        Добавить community
+      </Button>
+      <Button variant="outline" size="sm" type="button" render={<Link to="/network" search={{ tab: 'overview' }} />}>
+        <Network className="size-4" />
+        Сеть
+      </Button>
+      <Button variant="outline" size="sm" type="button" render={<Link to="/network" search={{ tab: 'peers' }} />}>
+        <Share2 className="size-4" />
+        Добавить пира
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        type="button"
+        render={<Link to="/operations" search={{ tab: 'revisions' }} />}
+      >
+        <Play className="size-4" />
+        Деплой (Apply)
+      </Button>
+      <Button variant="outline" size="sm" type="button" render={<Link to="/monitoring" search={{ tab: 'system' }} />}>
+        <Gauge className="size-4" />
+        Мониторинг
+      </Button>
+    </FrameFooter>
+  )
+}

apps/web/src/components/dashboard/dashboard-recent-jobs-grid.tsx

@@ -0,0 +1,74 @@
+import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
+import type { JobRow } from '@/types/api'
+
+function StatusText({ status }: { status: string }) {
+  const cls =
+    status === 'succeeded'
+      ? 'text-success'
+      : status === 'failed' || status === 'cancelled'
+        ? 'text-destructive'
+        : 'text-muted-foreground'
+  return <span className={`text-xs font-medium ${cls}`}>{status}</span>
+}
+
+export function DashboardRecentJobsGrid({
+  jobs,
+  nameById,
+  isLoading = false,
+}: {
+  jobs: JobRow[]
+  nameById: Map<string, string>
+  isLoading?: boolean
+}) {
+  const data = useMemo(() => jobs.slice(0, 8), [jobs])
+
+  const columns = useMemo<ColumnDef<JobRow>[]>(
+    () => [
+      {
+        accessorKey: 'kind',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
+        cell: ({ row }) => (
+          <div className="min-w-0">
+            <div className="truncate font-mono text-xs text-muted-foreground">{row.original.kind}</div>
+            {row.original.meta?.module_id ? (
+              <div className="truncate text-xs">
+                {nameById.get(String(row.original.meta.module_id)) ?? ''}
+              </div>
+            ) : null}
+          </div>
+        ),
+        meta: { headerTitle: 'Вид' },
+      },
+      {
+        accessorKey: 'status',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
+        cell: ({ row }) => <StatusText status={row.original.status} />,
+        meta: { headerTitle: 'Статус' },
+      },
+    ],
+    [nameById],
+  )
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => row.job_id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={data.length}
+      isLoading={isLoading}
+      emptyMessage="Нет задач"
+      showPagination={false}
+      tableLayout={DATA_GRID_DENSE_LAYOUT}
+    />
+  )
+}

apps/web/src/components/dashboard/dashboard-recent-revisions-grid.tsx

@@ -0,0 +1,62 @@
+import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
+import type { RevisionRow } from '@/types/api'
+
+export function DashboardRecentRevisionsGrid({
+  revisions,
+  isLoading = false,
+}: {
+  revisions: RevisionRow[]
+  isLoading?: boolean
+}) {
+  const data = useMemo(() => revisions.slice(0, 8), [revisions])
+
+  const columns = useMemo<ColumnDef<RevisionRow>[]>(
+    () => [
+      {
+        id: 'id',
+        accessorFn: (row) => row.id,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="ID" />,
+        cell: ({ row }) => (
+          <span className="truncate font-mono text-xs text-muted-foreground">
+            {row.original.id.slice(0, 10)}…
+          </span>
+        ),
+        meta: { headerTitle: 'ID' },
+      },
+      {
+        accessorKey: 'created_at',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Создана" />,
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground">
+            {new Date(row.original.created_at).toLocaleString('ru-RU')}
+          </span>
+        ),
+        meta: { headerTitle: 'Создана' },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={data.length}
+      isLoading={isLoading}
+      emptyMessage="Нет ревизий"
+      showPagination={false}
+      tableLayout={DATA_GRID_DENSE_LAYOUT}
+    />
+  )
+}

apps/web/src/components/data-grid-shell.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react'
+import type { Table } from '@tanstack/react-table'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+
+import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
+import { DataGrid, DataGridContainer } from '@/components/reui/data-grid/data-grid'
+import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
+import {
+  DATA_GRID_PAGINATION_RU,
+  DATA_GRID_TABLE_LAYOUT,
+} from '@/lib/data-grid-defaults'
+
+interface DataGridShellProps<TData extends object> {
+  table: Table<TData>
+  recordCount: number
+  isLoading?: boolean
+  emptyMessage?: ReactNode
+  showPagination?: boolean
+  tableLayout?: typeof DATA_GRID_TABLE_LAYOUT
+  className?: string
+  onRowClick?: (row: TData) => void
+}
+
+export function DataGridShell<TData extends object>({
+  table,
+  recordCount,
+  isLoading = false,
+  emptyMessage,
+  showPagination = true,
+  tableLayout = DATA_GRID_TABLE_LAYOUT,
+  className,
+  onRowClick,
+}: DataGridShellProps<TData>) {
+  return (
+    <DataGrid
+      table={table}
+      recordCount={recordCount}
+      isLoading={isLoading}
+      emptyMessage={emptyMessage}
+      tableLayout={tableLayout}
+      className={className}
+      onRowClick={onRowClick}
+    >
+      <DataGridContainer>
+        <DataGridTable />
+      </DataGridContainer>
+      {showPagination ? <DataGridPagination {...DATA_GRID_PAGINATION_RU} /> : null}
+    </DataGrid>
+  )
+}
+
+interface DataGridCardProps {
+  title?: string
+  description?: string
+  actions?: ReactNode
+  children: ReactNode
+  className?: string
+}
+
+export function DataGridCard({ title, description, actions, children, className }: DataGridCardProps) {
+  const hasHeader = Boolean(title || description || actions)
+  return (
+    <Card className={className ?? 'gap-0'}>
+      {hasHeader ? (
+        <CardHeader className="flex flex-row items-center justify-between border-b py-3">
+          <div className="flex flex-col gap-0.5">
+            {title ? <CardTitle className="text-base">{title}</CardTitle> : null}
+            {description ? <CardDescription>{description}</CardDescription> : null}
+          </div>
+          {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+        </CardHeader>
+      ) : null}
+      <CardContent className="p-0">{children}</CardContent>
+    </Card>
+  )
+}

apps/web/src/components/directories/directories-communities-grid.tsx

@@ -0,0 +1,58 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import { Badge } from '@evobgp/ui/components/badge'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { BgpCommunity } from '@/types/api'
+
+export function DirectoriesCommunitiesGrid({
+  items,
+  isLoading = false,
+}: {
+  items: BgpCommunity[]
+  isLoading?: boolean
+}) {
+  const columns = useMemo<ColumnDef<BgpCommunity>[]>(
+    () => [
+      {
+        accessorKey: 'title',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
+        cell: ({ row }) => <span className="font-medium">{row.original.title}</span>,
+        meta: { headerTitle: 'Название' },
+      },
+      {
+        accessorKey: 'community',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Значение" />,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.community}</span>,
+        meta: { headerTitle: 'Значение' },
+      },
+      {
+        id: 'type',
+        enableSorting: false,
+        header: 'Тип',
+        cell: () => <Badge variant="outline">community</Badge>,
+        meta: { headerTitle: 'Тип' },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<BgpCommunity>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет сообществ"
+    />
+  )
+}

apps/web/src/components/directories/directories-doh-grid.tsx

@@ -0,0 +1,59 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import { Badge } from '@evobgp/ui/components/badge'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { DohProfile } from '@/types/api'
+
+export function DirectoriesDohGrid({
+  items,
+  isLoading = false,
+}: {
+  items: DohProfile[]
+  isLoading?: boolean
+}) {
+  const columns = useMemo<ColumnDef<DohProfile>[]>(
+    () => [
+      {
+        id: 'name',
+        accessorFn: (row) => row.name ?? row.url,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
+        cell: ({ row }) => <span className="font-medium">{row.original.name ?? row.original.url}</span>,
+        meta: { headerTitle: 'Название' },
+      },
+      {
+        accessorKey: 'url',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="URL" />,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.url}</span>,
+        meta: { headerTitle: 'URL' },
+      },
+      {
+        id: 'default',
+        enableSorting: false,
+        header: 'По умолчанию',
+        cell: () => <Badge variant="outline">—</Badge>,
+        meta: { headerTitle: 'По умолчанию' },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<DohProfile>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет DoH профилей"
+    />
+  )
+}

apps/web/src/components/empty-state.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react'
+import { cn } from '@evobgp/ui/lib/utils'
+
+interface EmptyStateProps {
+  title: string
+  description?: string
+  icon?: ReactNode
+  action?: ReactNode
+  className?: string
+}
+
+export function EmptyState({ title, description, icon, action, className }: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-8 text-center',
+        className,
+      )}
+    >
+      {icon ? <div className="text-muted-foreground">{icon}</div> : null}
+      <div className="flex flex-col gap-1">
+        <p className="text-sm font-medium">{title}</p>
+        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {action ? <div className="mt-2">{action}</div> : null}
+    </div>
+  )
+}

apps/web/src/components/firewall/firewall-clients-grid.tsx

@@ -0,0 +1,191 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { StatusBadge } from '@/components/status-badge'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { FirewallClient } from '@/types/api'
+
+function formatPacketCount(value?: number | null): string | null {
+  if (value == null || value <= 0) return null
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}k`
+  return String(value)
+}
+
+export interface FirewallClientsGridProps {
+  clients: FirewallClient[]
+  isLoading?: boolean
+  onApprove: (id: string) => void
+  onReject: (id: string) => void
+  approvePending?: boolean
+  rejectPending?: boolean
+  emptyTitle?: string
+}
+
+export function FirewallClientsGrid({
+  clients,
+  isLoading = false,
+  onApprove,
+  onReject,
+  approvePending = false,
+  rejectPending = false,
+  emptyTitle = 'Нет клиентов',
+}: FirewallClientsGridProps) {
+  const columns = useMemo<ColumnDef<FirewallClient>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
+        cell: ({ row }) => (
+          <div>
+            <div className="font-medium">{row.original.name}</div>
+            <div className="text-muted-foreground text-xs">
+              {row.original.hostname || row.original.token_prefix}
+            </div>
+          </div>
+        ),
+        meta: { headerTitle: 'Имя' },
+      },
+      {
+        accessorKey: 'status',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
+        cell: ({ row }) => <StatusBadge status={row.original.status} />,
+        meta: { headerTitle: 'Статус' },
+      },
+      {
+        id: 'last_seen_at',
+        accessorFn: (row) => row.last_seen_at ?? '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Last seen" />,
+        cell: ({ row }) => (
+          <span className="text-xs">{row.original.last_seen_at?.slice(0, 19) ?? '—'}</span>
+        ),
+        sortingFn: (a, b) => {
+          const av = a.original.last_seen_at ?? ''
+          const bv = b.original.last_seen_at ?? ''
+          return av.localeCompare(bv)
+        },
+        meta: { headerTitle: 'Last seen' },
+      },
+      {
+        id: 'apply',
+        enableSorting: false,
+        header: 'Apply',
+        cell: ({ row }) => {
+          const c = row.original
+          return (
+            <span className="text-xs">
+              {c.last_apply_status ?? '—'}
+              {c.last_apply_prefix_count != null ? ` (${c.last_apply_prefix_count})` : ''}
+            </span>
+          )
+        },
+        meta: { headerTitle: 'Apply' },
+      },
+      {
+        id: 'packets',
+        enableSorting: false,
+        header: 'Пакеты',
+        cell: ({ row }) => {
+          const dropped = formatPacketCount(row.original.last_apply_packets_dropped)
+          const accepted = formatPacketCount(row.original.last_apply_packets_accepted)
+          if (!dropped && !accepted) {
+            return <span className="text-muted-foreground text-xs">—</span>
+          }
+          return (
+            <span className="text-muted-foreground text-xs">
+              {dropped ? <span className="text-destructive">↓{dropped}</span> : null}
+              {dropped && accepted ? ' · ' : null}
+              {accepted ? <span className="text-success">↑{accepted}</span> : null}
+            </span>
+          )
+        },
+        meta: { headerTitle: 'Пакеты' },
+      },
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: () => null,
+        cell: ({ row }) => {
+          const c = row.original
+          return (
+            <div className="flex justify-end gap-2">
+              {c.status === 'pending' ? (
+                <>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    type="button"
+                    disabled={approvePending}
+                    onClick={() => onApprove(c.id)}
+                  >
+                    Одобрить
+                  </Button>
+                  <ConfirmDialog
+                    trigger={
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        type="button"
+                        className="text-destructive"
+                        disabled={rejectPending}
+                      >
+                        Отклонить
+                      </Button>
+                    }
+                    title="Отклонить запрос?"
+                    description={`${c.name}${c.hostname ? ` (${c.hostname})` : ''} — запись будет удалена, токен перестанет работать.`}
+                    confirmLabel="Отклонить"
+                    destructive
+                    onConfirm={() => onReject(c.id)}
+                  />
+                </>
+              ) : null}
+              {c.status === 'approved' ? (
+                <ConfirmDialog
+                  trigger={
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      type="button"
+                      className="text-destructive"
+                      disabled={rejectPending}
+                    >
+                      Удалить
+                    </Button>
+                  }
+                  title="Удалить клиент?"
+                  description={`${c.name} — запись будет удалена, blocklist и токен перестанут работать.`}
+                  confirmLabel="Удалить"
+                  destructive
+                  onConfirm={() => onReject(c.id)}
+                />
+              ) : null}
+            </div>
+          )
+        },
+      },
+    ],
+    [approvePending, onApprove, onReject, rejectPending],
+  )
+
+  const table = useReactTable({
+    data: clients,
+    columns,
+    ...createClientDataGridOptions<FirewallClient>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={clients.length}
+      isLoading={isLoading}
+      emptyMessage={emptyTitle}
+    />
+  )
+}

apps/web/src/components/firewall/firewall-rules-grid.tsx

@@ -0,0 +1,118 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { StatusBadge } from '@/components/status-badge'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import { communityLabel } from '@/lib/modules/helpers'
+import type { BgpCommunity, FirewallRule } from '@/types/api'
+
+export interface FirewallRulesGridProps {
+  rules: FirewallRule[]
+  communities: BgpCommunity[]
+  isLoading?: boolean
+  onDelete: (id: string) => void
+  deletePending?: boolean
+  emptyTitle?: string
+}
+
+export function FirewallRulesGrid({
+  rules,
+  communities,
+  isLoading = false,
+  onDelete,
+  deletePending = false,
+  emptyTitle = 'Нет правил — blocklist пуст (default accept).',
+}: FirewallRulesGridProps) {
+  const columns = useMemo<ColumnDef<FirewallRule>[]>(
+    () => [
+      {
+        accessorKey: 'priority',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="#" />,
+        cell: ({ row }) => row.original.priority,
+        meta: { headerTitle: '#' },
+      },
+      {
+        accessorKey: 'action',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Действие" />,
+        cell: ({ row }) => (
+          <StatusBadge status={row.original.action} label={row.original.action} />
+        ),
+        meta: { headerTitle: 'Действие' },
+      },
+      {
+        id: 'community',
+        enableSorting: false,
+        header: 'Community',
+        cell: ({ row }) => (
+          <span className="text-sm">
+            {row.original.community_id
+              ? communityLabel(row.original.community_id, communities)
+              : 'Все'}
+          </span>
+        ),
+        meta: { headerTitle: 'Community' },
+      },
+      {
+        accessorKey: 'comment',
+        enableSorting: false,
+        header: 'Комментарий',
+        cell: ({ row }) => row.original.comment || '—',
+        meta: { headerTitle: 'Комментарий' },
+      },
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: () => null,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <ConfirmDialog
+              trigger={
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  type="button"
+                  className="text-destructive"
+                  disabled={deletePending}
+                >
+                  Удалить
+                </Button>
+              }
+              title="Удалить правило?"
+              description={
+                r.comment
+                  ? `Правило #${r.priority} (${r.action}): ${r.comment}`
+                  : `Правило #${r.priority} (${r.action}) будет удалено.`
+              }
+              confirmLabel="Удалить"
+              destructive
+              onConfirm={() => onDelete(r.id)}
+            />
+          )
+        },
+      },
+    ],
+    [communities, deletePending, onDelete],
+  )
+
+  const table = useReactTable({
+    data: rules,
+    columns,
+    ...createClientDataGridOptions<FirewallRule>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={rules.length}
+      isLoading={isLoading}
+      emptyMessage={emptyTitle}
+    />
+  )
+}

apps/web/src/components/layout/app-shell.tsx

@@ -0,0 +1,174 @@
+import {
+  LayoutDashboard,
+  Boxes,
+  Network,
+  Cog,
+  ListChecks,
+  Activity,
+  Settings,
+  BookText,
+  KeyRound,
+  ServerCog,
+  Shield,
+} from 'lucide-react'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@evobgp/ui/components/sidebar'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@evobgp/ui/components/breadcrumb'
+import { Separator } from '@evobgp/ui/components/separator'
+
+import { Link, useRouterState } from '@tanstack/react-router'
+import type { ComponentType, ReactNode } from 'react'
+
+import { ModeToggle } from '@/components/mode-toggle'
+
+interface NavItem {
+  to: string
+  label: string
+  icon: ComponentType<{ className?: string }>
+}
+
+interface NavGroup {
+  label: string
+  items: NavItem[]
+}
+
+const NAV_GROUPS: NavGroup[] = [
+  {
+    label: 'Обзор',
+    items: [{ to: '/dashboard', label: 'Dashboard', icon: LayoutDashboard }],
+  },
+  {
+    label: 'Маршрутизация',
+    items: [
+      { to: '/modules', label: 'Модули', icon: Boxes },
+      { to: '/network', label: 'Сеть', icon: Network },
+      { to: '/directories', label: 'Справочники', icon: BookText },
+    ],
+  },
+  {
+    label: 'Операции',
+    items: [
+      { to: '/operations', label: 'Операции', icon: Cog },
+      { to: '/firewall', label: 'Firewall', icon: Shield },
+      { to: '/schedule', label: 'Задачи', icon: ListChecks },
+      { to: '/monitoring', label: 'Мониторинг', icon: Activity },
+    ],
+  },
+  {
+    label: 'Система',
+    items: [
+      { to: '/access', label: 'Доступ', icon: KeyRound },
+      { to: '/tenant-settings', label: 'Настройки BIRD', icon: ServerCog },
+      { to: '/settings', label: 'Настройки UI', icon: Settings },
+    ],
+  },
+]
+
+const ALL_NAV_ITEMS = NAV_GROUPS.flatMap((g) => g.items)
+
+const ROUTE_LABELS: Record<string, string> = Object.fromEntries(
+  ALL_NAV_ITEMS.map((i) => [i.to, i.label]),
+)
+
+const PARENT_ROUTE: Record<string, string> = {}
+
+export function AppShell({ children }: { children: ReactNode }) {
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const activeItem =
+    ALL_NAV_ITEMS.find((i) => pathname === i.to || (i.to !== '/' && pathname.startsWith(`${i.to}/`))) ??
+    ALL_NAV_ITEMS[0]
+  const parentTo = PARENT_ROUTE[activeItem.to]
+  const parentLabel = parentTo ? ROUTE_LABELS[parentTo] : null
+
+  return (
+    <SidebarProvider>
+      <Sidebar collapsible="icon">
+        <SidebarHeader>
+          <div className="flex items-center gap-2 px-2 py-1.5">
+            <div className="flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground text-sm font-bold">
+              B
+            </div>
+            <div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
+              <span className="truncate text-sm font-semibold">EvoBGP</span>
+              <span className="truncate text-xs text-muted-foreground">Control Plane</span>
+            </div>
+          </div>
+        </SidebarHeader>
+        <SidebarContent>
+          {NAV_GROUPS.map((group) => (
+            <SidebarGroup key={group.label}>
+              <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => {
+                    const Icon = item.icon
+                    const isActive = pathname === item.to || pathname.startsWith(`${item.to}/`)
+                    return (
+                      <SidebarMenuItem key={item.to}>
+                        <SidebarMenuButton
+                          render={<Link to={item.to} />}
+                          isActive={isActive}
+                          tooltip={item.label}
+                        >
+                          <Icon className="size-4" />
+                          <span>{item.label}</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    )
+                  })}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </SidebarContent>
+        <SidebarFooter />
+      </Sidebar>
+      <SidebarInset>
+        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+          <SidebarTrigger />
+          <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              {parentLabel && parentTo ? (
+                <>
+                  <BreadcrumbItem className="hidden md:block">
+                    <BreadcrumbLink render={<Link to={parentTo} />}>{parentLabel}</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                </>
+              ) : null}
+              <BreadcrumbItem>
+                <BreadcrumbPage>{ROUTE_LABELS[activeItem.to] ?? activeItem.label}</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <div className="ml-auto flex items-center gap-2">
+            <ModeToggle />
+          </div>
+        </header>
+        <main className="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">{children}</main>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

apps/web/src/components/loading-button.tsx

@@ -0,0 +1,19 @@
+import { Button } from '@evobgp/ui/components/button'
+import { Loader2Icon } from 'lucide-react'
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+
+type LoadingButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  loading?: boolean
+  variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link'
+  size?: 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'
+  children: ReactNode
+}
+
+export function LoadingButton({ loading, disabled, children, ...props }: LoadingButtonProps) {
+  return (
+    <Button disabled={disabled || loading} {...props}>
+      {loading ? <Loader2Icon className="animate-spin" data-icon="inline-start" /> : null}
+      {children}
+    </Button>
+  )
+}

apps/web/src/components/mode-toggle.tsx

@@ -0,0 +1,29 @@
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { Button } from '@evobgp/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@evobgp/ui/components/dropdown-menu'
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="ghost" size="icon" />}>
+        <Sun className="size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+        <Moon className="absolute size-5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+        <span className="sr-only">Сменить тему</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>Светлая</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>Тёмная</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>Системная</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

apps/web/src/components/modules/community-select.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from 'react'
+
+import { Label } from '@evobgp/ui/components/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@evobgp/ui/components/select'
+
+import {
+  NONE_OPTION,
+  communityOptionLabel,
+  fromNullableSelect,
+  nullableSelectValue,
+} from '@/lib/modules/helpers'
+import type { BgpCommunity } from '@/types/api'
+
+interface CommunitySelectProps {
+  id?: string
+  label?: string
+  value: string | null
+  onValueChange: (value: string | null) => void
+  communities: BgpCommunity[]
+  nullable?: boolean
+  placeholder?: string
+}
+
+export function CommunitySelect({
+  id,
+  label,
+  value,
+  onValueChange,
+  communities,
+  nullable = false,
+  placeholder = 'Выберите community',
+}: CommunitySelectProps) {
+  const items = useMemo(() => {
+    const communityItems = communities.map((c) => ({
+      value: c.id,
+      label: communityOptionLabel(c),
+    }))
+    if (nullable) {
+      return [{ value: NONE_OPTION, label: 'Не выбрано' }, ...communityItems]
+    }
+    return communityItems
+  }, [communities, nullable])
+
+  const selectValue = nullable ? nullableSelectValue(value) : (value ?? '')
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {label ? <Label htmlFor={id}>{label}</Label> : null}
+      <Select
+        items={items}
+        value={selectValue}
+        onValueChange={(v) => {
+          if (!v) return
+          onValueChange(nullable ? fromNullableSelect(v) : v)
+        }}
+      >
+        <SelectTrigger id={id} className="w-full">
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}

apps/web/src/components/modules/module-as-entry-dialog.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@evobgp/ui/components/dialog'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+
+import { LoadingButton } from '@/components/loading-button'
+import { CommunitySelect } from '@/components/modules/community-select'
+import { ApiError, apiMutate } from '@/lib/api-client'
+import type { AsEntry, AsEntryCreate, AsEntryPatch, BgpCommunity } from '@/types/api'
+
+interface ModuleAsEntryDialogProps {
+  open: boolean
+  moduleId: string
+  edit: AsEntry | null
+  communities: BgpCommunity[]
+  onOpenChange: (open: boolean) => void
+  onSaved: () => void | Promise<void>
+}
+
+export function ModuleAsEntryDialog({
+  open,
+  moduleId,
+  edit,
+  communities,
+  onOpenChange,
+  onSaved,
+}: ModuleAsEntryDialogProps) {
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState<AsEntryCreate>({ asn: 0, community_id: null })
+
+  useEffect(() => {
+    if (!open) return
+    setForm(
+      edit
+        ? { asn: edit.asn, community_id: edit.community_id }
+        : { asn: 0, community_id: null },
+    )
+  }, [open, edit])
+
+  async function save() {
+    const asn = Number(form.asn)
+    if (!Number.isFinite(asn) || asn < 1 || asn > 4294967295) {
+      toast.error('Укажите корректный ASN (1–4294967295)')
+      return
+    }
+    setSaving(true)
+    try {
+      const body: AsEntryCreate | AsEntryPatch = { asn, community_id: form.community_id }
+      if (edit) {
+        await apiMutate(`/v1/modules/${moduleId}/as-entries/${edit.id}`, 'PATCH', body)
+        toast.success('Запись обновлена')
+      } else {
+        await apiMutate(`/v1/modules/${moduleId}/as-entries`, 'POST', body as AsEntryCreate)
+        toast.success('Запись добавлена')
+      }
+      onOpenChange(false)
+      await onSaved()
+    } catch (e) {
+      toast.error(e instanceof ApiError ? e.message : String(e))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{edit ? 'Редактировать запись' : 'Новая AS-запись'}</DialogTitle>
+          <DialogDescription>
+            Номер автономной системы и community для политики анонса.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="as-asn">ASN</Label>
+            <Input
+              id="as-asn"
+              type="number"
+              placeholder="12345"
+              value={form.asn || ''}
+              min={1}
+              max={4294967295}
+              onChange={(e) => setForm((s) => ({ ...s, asn: Number(e.target.value) }))}
+            />
+          </div>
+          <CommunitySelect
+            id="as-comm"
+            label="Community"
+            value={form.community_id ?? null}
+            onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
+            communities={communities}
+            nullable
+          />
+        </div>
+        <DialogFooter>
+          <LoadingButton variant="outline" onClick={() => onOpenChange(false)}>
+            Отмена
+          </LoadingButton>
+          <LoadingButton loading={saving} onClick={() => void save()}>
+            {edit ? 'Сохранить' : 'Добавить'}
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

apps/web/src/components/modules/module-cdn-source-dialog.tsx

@@ -0,0 +1,277 @@
+import { useEffect, useMemo, useState } from 'react'
+import { toast } from 'sonner'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@evobgp/ui/components/dialog'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@evobgp/ui/components/select'
+import { Button } from '@evobgp/ui/components/button'
+
+import { LoadingButton } from '@/components/loading-button'
+import { CommunitySelect } from '@/components/modules/community-select'
+import { ApiError, apiMutate } from '@/lib/api-client'
+import { normalizeCdnSourceKind } from '@/lib/modules/helpers'
+import type { BgpCommunity, CdnPreviewResponse, CdnSource, CdnSourceCreate } from '@/types/api'
+
+const CDN_KIND_ITEMS = [
+  { value: 'plaintext', label: 'plaintext' },
+  { value: 'json', label: 'json' },
+] as const
+
+interface ModuleCdnSourceDialogProps {
+  open: boolean
+  moduleId: string
+  edit: CdnSource | null
+  communities: BgpCommunity[]
+  onOpenChange: (open: boolean) => void
+  onSaved: () => void | Promise<void>
+}
+
+type CdnForm = CdnSourceCreate & { refresh_interval_sec?: number | null }
+
+export function ModuleCdnSourceDialog({
+  open,
+  moduleId,
+  edit,
+  communities,
+  onOpenChange,
+  onSaved,
+}: ModuleCdnSourceDialogProps) {
+  const [saving, setSaving] = useState(false)
+  const [previewLoading, setPreviewLoading] = useState(false)
+  const [previewItems, setPreviewItems] = useState<string[]>([])
+  const [previewTotal, setPreviewTotal] = useState(0)
+  const [previewTruncated, setPreviewTruncated] = useState(false)
+  const [previewError, setPreviewError] = useState<string | null>(null)
+  const [previewOk, setPreviewOk] = useState(false)
+  const [form, setForm] = useState<CdnForm>({
+    url: '',
+    source_kind: 'plaintext',
+    prefix_path: '',
+    community_id: null,
+  })
+
+  const kindItems = useMemo(() => [...CDN_KIND_ITEMS], [])
+
+  function clearPreview() {
+    setPreviewLoading(false)
+    setPreviewItems([])
+    setPreviewTotal(0)
+    setPreviewTruncated(false)
+    setPreviewError(null)
+    setPreviewOk(false)
+  }
+
+  useEffect(() => {
+    if (!open) {
+      clearPreview()
+      return
+    }
+    setForm(
+      edit
+        ? {
+            url: edit.url,
+            source_kind: normalizeCdnSourceKind(edit.source_kind),
+            prefix_path: edit.prefix_path ?? '',
+            community_id: edit.community_id,
+            refresh_interval_sec: edit.refresh_interval_sec,
+          }
+        : { url: '', source_kind: 'plaintext', prefix_path: '', community_id: null },
+    )
+    clearPreview()
+  }, [open, edit])
+
+  async function previewCdn() {
+    const urlTrim = form.url.trim()
+    if (!urlTrim) {
+      toast.error('Укажите URL')
+      return
+    }
+    setPreviewLoading(true)
+    setPreviewError(null)
+    setPreviewOk(false)
+    try {
+      const res = await apiMutate<CdnPreviewResponse>(
+        `/v1/modules/${moduleId}/cdn-sources/preview`,
+        'POST',
+        {
+          url: urlTrim,
+          source_kind: form.source_kind,
+          prefix_path: form.prefix_path?.trim() ?? '',
+        },
+      )
+      setPreviewItems(res.items)
+      setPreviewTotal(res.total)
+      setPreviewTruncated(res.truncated)
+      setPreviewOk(true)
+    } catch (e) {
+      setPreviewError(e instanceof ApiError ? e.message : String(e))
+      setPreviewItems([])
+      setPreviewTotal(0)
+      setPreviewTruncated(false)
+      setPreviewOk(false)
+    } finally {
+      setPreviewLoading(false)
+    }
+  }
+
+  async function save() {
+    const urlTrim = form.url.trim()
+    if (!urlTrim) {
+      toast.error('Укажите URL')
+      return
+    }
+    setSaving(true)
+    try {
+      const body = {
+        ...form,
+        url: urlTrim,
+        source_kind: form.source_kind,
+        prefix_path: form.prefix_path?.trim() ?? '',
+      }
+      if (edit) {
+        await apiMutate(`/v1/modules/${moduleId}/cdn-sources/${edit.id}`, 'PATCH', body)
+        toast.success('Источник обновлён')
+      } else {
+        await apiMutate(`/v1/modules/${moduleId}/cdn-sources`, 'POST', body)
+        toast.success('Источник добавлен')
+      }
+      clearPreview()
+      onOpenChange(false)
+      await onSaved()
+    } catch (e) {
+      toast.error(e instanceof ApiError ? e.message : String(e))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{edit ? 'Редактировать источник' : 'Новый CDN-источник'}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="cdn-url">URL</Label>
+            <Input
+              id="cdn-url"
+              placeholder="https://example.com/list.txt"
+              value={form.url}
+              onChange={(e) => setForm((s) => ({ ...s, url: e.target.value }))}
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="cdn-kind">Тип источника</Label>
+            <Select
+              items={kindItems}
+              value={form.source_kind}
+              onValueChange={(v) => v && setForm((s) => ({ ...s, source_kind: v }))}
+            >
+              <SelectTrigger id="cdn-kind" className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {kindItems.map((item) => (
+                  <SelectItem key={item.value} value={item.value}>
+                    {item.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="cdn-prefix-path">JSON path (prefix_path)</Label>
+            <Input
+              id="cdn-prefix-path"
+              placeholder="напр. prefixes[] или data.items[].cidr"
+              value={form.prefix_path ?? ''}
+              onChange={(e) => setForm((s) => ({ ...s, prefix_path: e.target.value }))}
+            />
+            {form.source_kind === 'json' && !form.prefix_path?.trim() ? (
+              <p className="text-xs text-muted-foreground">
+                Для JSON укажите путь к полям с CIDR; пустой путь может не дать префиксов.
+              </p>
+            ) : null}
+          </div>
+          <CommunitySelect
+            id="cdn-comm"
+            label="Community"
+            value={form.community_id ?? null}
+            onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
+            communities={communities}
+            nullable
+          />
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="cdn-interval">Интервал обновления (сек)</Label>
+            <Input
+              id="cdn-interval"
+              type="number"
+              placeholder="3600"
+              value={form.refresh_interval_sec ?? ''}
+              onChange={(e) =>
+                setForm((s) => ({
+                  ...s,
+                  refresh_interval_sec: e.target.value ? Number(e.target.value) : null,
+                }))
+              }
+            />
+          </div>
+          <div className="flex flex-col gap-2 rounded-lg border border-border p-3">
+            <div className="flex flex-wrap items-center gap-2">
+              <Button
+                type="button"
+                variant="secondary"
+                size="sm"
+                onClick={() => void previewCdn()}
+                disabled={previewLoading}
+              >
+                {previewLoading ? 'Загрузка…' : 'Предпросмотр'}
+              </Button>
+              {previewError ? (
+                <span className="text-sm text-destructive">{previewError}</span>
+              ) : previewOk ? (
+                <span className="text-sm text-muted-foreground">
+                  Всего: {previewTotal}
+                  {previewTruncated ? (
+                    <span className="text-amber-600 dark:text-amber-500"> (обрезано)</span>
+                  ) : null}
+                </span>
+              ) : null}
+            </div>
+            {previewItems.length > 0 ? (
+              <ul className="max-h-48 overflow-y-auto rounded-md border bg-muted/40 p-2 font-mono text-xs">
+                {previewItems.map((item, i) => (
+                  <li key={`${i}-${item}`} className="py-0.5">
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
+        </div>
+        <DialogFooter>
+          <LoadingButton variant="outline" onClick={() => onOpenChange(false)}>
+            Отмена
+          </LoadingButton>
+          <LoadingButton loading={saving} onClick={() => void save()}>
+            {edit ? 'Сохранить' : 'Добавить'}
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

apps/web/src/components/modules/module-domain-entry-dialog.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@evobgp/ui/components/dialog'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+
+import { LoadingButton } from '@/components/loading-button'
+import { CommunitySelect } from '@/components/modules/community-select'
+import { ApiError, apiMutate } from '@/lib/api-client'
+import type { BgpCommunity, DomainEntry, DomainEntryCreate } from '@/types/api'
+
+interface ModuleDomainEntryDialogProps {
+  open: boolean
+  moduleId: string
+  edit: DomainEntry | null
+  communities: BgpCommunity[]
+  onOpenChange: (open: boolean) => void
+  onSaved: () => void | Promise<void>
+}
+
+export function ModuleDomainEntryDialog({
+  open,
+  moduleId,
+  edit,
+  communities,
+  onOpenChange,
+  onSaved,
+}: ModuleDomainEntryDialogProps) {
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState<DomainEntryCreate>({ fqdn: '', community_id: null })
+
+  useEffect(() => {
+    if (!open) return
+    setForm(
+      edit
+        ? { fqdn: edit.fqdn, community_id: edit.community_id }
+        : { fqdn: '', community_id: null },
+    )
+  }, [open, edit])
+
+  async function save() {
+    if (!form.fqdn.trim()) {
+      toast.error('Укажите FQDN')
+      return
+    }
+    setSaving(true)
+    try {
+      const body = { fqdn: form.fqdn.trim(), community_id: form.community_id }
+      if (edit) {
+        await apiMutate(`/v1/modules/${moduleId}/domain-entries/${edit.id}`, 'PATCH', body)
+        toast.success('Домен обновлён')
+      } else {
+        await apiMutate(`/v1/modules/${moduleId}/domain-entries`, 'POST', body)
+        toast.success('Домен добавлен')
+      }
+      onOpenChange(false)
+      await onSaved()
+    } catch (e) {
+      toast.error(e instanceof ApiError ? e.message : String(e))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{edit ? 'Редактировать домен' : 'Новый домен'}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="dom-fqdn">FQDN</Label>
+            <Input
+              id="dom-fqdn"
+              placeholder="example.com"
+              value={form.fqdn}
+              onChange={(e) => setForm((s) => ({ ...s, fqdn: e.target.value }))}
+            />
+          </div>
+          <CommunitySelect
+            id="dom-comm"
+            label="Community"
+            value={form.community_id ?? null}
+            onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
+            communities={communities}
+            nullable
+          />
+        </div>
+        <DialogFooter>
+          <LoadingButton variant="outline" onClick={() => onOpenChange(false)}>
+            Отмена
+          </LoadingButton>
+          <LoadingButton loading={saving} onClick={() => void save()}>
+            {edit ? 'Сохранить' : 'Добавить'}
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

apps/web/src/components/modules/module-entries-grid.tsx

@@ -0,0 +1,251 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { Pencil, Trash2 } from 'lucide-react'
+import { useMemo } from 'react'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { formatDateTime } from '@/lib/modules/display'
+import { communityLabel } from '@/lib/modules/helpers'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type {
+  AsEntry,
+  BgpCommunity,
+  CdnSource,
+  DomainEntry,
+  IpRangeEntry,
+  ModuleRow,
+} from '@/types/api'
+
+type DeleteTarget =
+  | { kind: 'domain'; entry: DomainEntry }
+  | { kind: 'ip-range'; entry: IpRangeEntry }
+  | { kind: 'cdn'; entry: CdnSource }
+  | { kind: 'as'; entry: AsEntry }
+
+function RowActions({ onEdit, onDelete }: { onEdit: () => void; onDelete: () => void }) {
+  return (
+    <div className="flex justify-end gap-1">
+      <Button variant="ghost" size="icon-sm" type="button" onClick={onEdit} aria-label="Редактировать">
+        <Pencil className="size-3.5" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        type="button"
+        className="text-destructive"
+        onClick={onDelete}
+        aria-label="Удалить"
+      >
+        <Trash2 className="size-3.5" />
+      </Button>
+    </div>
+  )
+}
+
+export function ModuleEntriesGrid({
+  mod,
+  rows,
+  communities,
+  onEdit,
+  onDelete,
+  isLoading = false,
+}: {
+  mod: ModuleRow
+  rows: Record<string, unknown>[]
+  communities: BgpCommunity[]
+  onEdit: (target: DeleteTarget) => void
+  onDelete: (target: DeleteTarget) => void
+  isLoading?: boolean
+}) {
+  const columns = useMemo(() => {
+    if (mod.type === 'DOMAINS') {
+      return [
+        {
+          accessorKey: 'fqdn',
+          header: ({ column }: { column: { id: string } }) => (
+            <DataGridColumnHeader column={column as never} title="FQDN" />
+          ),
+          cell: ({ row }: { row: { original: DomainEntry } }) => (
+            <span className="font-mono text-sm">{row.original.fqdn}</span>
+          ),
+        },
+        {
+          id: 'community',
+          header: 'Community',
+          cell: ({ row }: { row: { original: DomainEntry } }) => (
+            <span className="text-sm text-muted-foreground">
+              {communityLabel(row.original.community_id, communities)}
+            </span>
+          ),
+        },
+        {
+          id: 'actions',
+          enableSorting: false,
+          header: () => null,
+          cell: ({ row }: { row: { original: DomainEntry } }) => (
+            <RowActions
+              onEdit={() => onEdit({ kind: 'domain', entry: row.original })}
+              onDelete={() => onDelete({ kind: 'domain', entry: row.original })}
+            />
+          ),
+        },
+      ] as ColumnDef<DomainEntry>[]
+    }
+
+    if (mod.type === 'IP_RANGES') {
+      return [
+        {
+          accessorKey: 'prefix',
+          header: ({ column }: { column: { id: string } }) => (
+            <DataGridColumnHeader column={column as never} title="Префикс (CIDR)" />
+          ),
+          cell: ({ row }: { row: { original: IpRangeEntry } }) => (
+            <span className="font-mono text-sm">{row.original.prefix}</span>
+          ),
+        },
+        {
+          id: 'community',
+          header: 'Community',
+          cell: ({ row }: { row: { original: IpRangeEntry } }) => (
+            <span className="text-sm text-muted-foreground">
+              {communityLabel(row.original.community_id, communities)}
+            </span>
+          ),
+        },
+        {
+          id: 'actions',
+          enableSorting: false,
+          header: () => null,
+          cell: ({ row }: { row: { original: IpRangeEntry } }) => (
+            <RowActions
+              onEdit={() => onEdit({ kind: 'ip-range', entry: row.original })}
+              onDelete={() => onDelete({ kind: 'ip-range', entry: row.original })}
+            />
+          ),
+        },
+      ] as ColumnDef<IpRangeEntry>[]
+    }
+
+    if (mod.type === 'CDN_CIDRS') {
+      return [
+        {
+          accessorKey: 'url',
+          header: ({ column }: { column: { id: string } }) => (
+            <DataGridColumnHeader column={column as never} title="URL" />
+          ),
+          cell: ({ row }: { row: { original: CdnSource } }) => (
+            <span className="max-w-xs truncate font-mono text-xs">{row.original.url}</span>
+          ),
+        },
+        {
+          accessorKey: 'source_kind',
+          header: 'Тип',
+          cell: ({ row }: { row: { original: CdnSource } }) => (
+            <span className="text-sm">{row.original.source_kind}</span>
+          ),
+        },
+        {
+          id: 'community',
+          header: 'Community',
+          cell: ({ row }: { row: { original: CdnSource } }) => (
+            <span className="text-sm text-muted-foreground">
+              {communityLabel(row.original.community_id, communities)}
+            </span>
+          ),
+        },
+        {
+          id: 'last_refreshed_at',
+          accessorFn: (row: CdnSource) => row.last_refreshed_at ?? '',
+          header: ({ column }: { column: { id: string } }) => (
+            <DataGridColumnHeader column={column as never} title="Обновлено" />
+          ),
+          cell: ({ row }: { row: { original: CdnSource } }) => (
+            <span className="text-xs text-muted-foreground">
+              {formatDateTime(row.original.last_refreshed_at)}
+            </span>
+          ),
+        },
+        {
+          id: 'actions',
+          enableSorting: false,
+          header: () => null,
+          cell: ({ row }: { row: { original: CdnSource } }) => (
+            <RowActions
+              onEdit={() => onEdit({ kind: 'cdn', entry: row.original })}
+              onDelete={() => onDelete({ kind: 'cdn', entry: row.original })}
+            />
+          ),
+        },
+      ] as ColumnDef<CdnSource>[]
+    }
+
+    return [
+      {
+        accessorKey: 'asn',
+        header: ({ column }: { column: { id: string } }) => (
+          <DataGridColumnHeader column={column as never} title="ASN" />
+        ),
+        cell: ({ row }: { row: { original: AsEntry } }) => (
+          <span className="font-mono text-sm">{row.original.asn}</span>
+        ),
+      },
+      {
+        accessorKey: 'asn_name',
+        header: 'Имя',
+        cell: ({ row }: { row: { original: AsEntry } }) => (
+          <span className="text-sm">{row.original.asn_name ?? '—'}</span>
+        ),
+      },
+      {
+        accessorKey: 'prefix_count',
+        header: 'Префиксов',
+        cell: ({ row }: { row: { original: AsEntry } }) => (
+          <span className="font-mono text-sm">{row.original.prefix_count ?? '—'}</span>
+        ),
+      },
+      {
+        id: 'community',
+        header: 'Community',
+        cell: ({ row }: { row: { original: AsEntry } }) => (
+          <span className="text-sm text-muted-foreground">
+            {communityLabel(row.original.community_id, communities)}
+          </span>
+        ),
+      },
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: () => null,
+        cell: ({ row }: { row: { original: AsEntry } }) => (
+          <RowActions
+            onEdit={() => onEdit({ kind: 'as', entry: row.original })}
+            onDelete={() => onDelete({ kind: 'as', entry: row.original })}
+          />
+        ),
+      },
+    ] as ColumnDef<AsEntry>[]
+  }, [communities, mod.type, onDelete, onEdit])
+
+  type RowType = DomainEntry | IpRangeEntry | CdnSource | AsEntry
+  const data = rows as unknown as RowType[]
+
+  const table = useReactTable({
+    data,
+    columns: columns as ColumnDef<RowType>[],
+    ...createClientDataGridOptions<RowType>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={data.length}
+      isLoading={isLoading}
+      emptyMessage="Нет записей"
+    />
+  )
+}
+
+export type { DeleteTarget as ModuleEntryDeleteTarget }

apps/web/src/components/modules/module-entries-section.tsx

@@ -0,0 +1,255 @@
+import { useState } from 'react'
+import { Plus } from 'lucide-react'
+import { toast } from 'sonner'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@evobgp/ui/components/alert-dialog'
+import { Button } from '@evobgp/ui/components/button'
+
+import { DataGridCard } from '@/components/data-grid-shell'
+import { QueryState } from '@/components/query-state'
+import { TableSkeleton } from '@/components/skeletons'
+import { ModuleEntriesGrid, type ModuleEntryDeleteTarget } from '@/components/modules/module-entries-grid'
+import { ModuleAsEntryDialog } from '@/components/modules/module-as-entry-dialog'
+import { ModuleCdnSourceDialog } from '@/components/modules/module-cdn-source-dialog'
+import { ModuleDomainEntryDialog } from '@/components/modules/module-domain-entry-dialog'
+import { ModuleIpRangeEntryDialog } from '@/components/modules/module-ip-range-entry-dialog'
+import { ApiError, apiMutate } from '@/lib/api-client'
+import type {
+  AsEntry,
+  BgpCommunity,
+  CdnSource,
+  DomainEntry,
+  IpRangeEntry,
+  ModuleRow,
+} from '@/types/api'
+
+interface ModuleEntriesSectionProps {
+  moduleId: string
+  mod: ModuleRow
+  items: Record<string, unknown>[]
+  communities: BgpCommunity[]
+  isLoading: boolean
+  isError: boolean
+  error: Error | null
+  onRetry: () => void
+  onChanged: () => void | Promise<void>
+}
+
+type DeleteTarget = ModuleEntryDeleteTarget
+
+const CARD_META: Record<
+  ModuleRow['type'],
+  { title: string; description: string; emptyTitle: string; emptyDescription: string }
+> = {
+  DOMAINS: {
+    title: 'Домены',
+    description: 'FQDN для резолвинга через DoH.',
+    emptyTitle: 'Нет доменов',
+    emptyDescription: 'Добавьте FQDN для резолвинга.',
+  },
+  IP_RANGES: {
+    title: 'IP-диапазоны',
+    description: 'Статические CIDR для анонса.',
+    emptyTitle: 'Нет диапазонов',
+    emptyDescription: 'Добавьте CIDR.',
+  },
+  CDN_CIDRS: {
+    title: 'CDN-источники',
+    description: 'URL источников для скачивания списков CIDR.',
+    emptyTitle: 'Нет источников',
+    emptyDescription: 'Добавьте CDN-источник.',
+  },
+  AS_PREFIXES: {
+    title: 'AS-записи',
+    description: 'ASN для получения префиксов через RIPEstat.',
+    emptyTitle: 'Нет записей',
+    emptyDescription: 'Добавьте ASN.',
+  },
+}
+
+export function ModuleEntriesSection({
+  moduleId,
+  mod,
+  items,
+  communities,
+  isLoading,
+  isError,
+  error,
+  onRetry,
+  onChanged,
+}: ModuleEntriesSectionProps) {
+  const meta = CARD_META[mod.type]
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<DeleteTarget | null>(null)
+  const [deleting, setDeleting] = useState(false)
+
+  const [editDomain, setEditDomain] = useState<DomainEntry | null>(null)
+  const [editIpRange, setEditIpRange] = useState<IpRangeEntry | null>(null)
+  const [editCdn, setEditCdn] = useState<CdnSource | null>(null)
+  const [editAs, setEditAs] = useState<AsEntry | null>(null)
+
+  function openCreate() {
+    setEditDomain(null)
+    setEditIpRange(null)
+    setEditCdn(null)
+    setEditAs(null)
+    setDialogOpen(true)
+  }
+
+  function closeDialog() {
+    setDialogOpen(false)
+    setEditDomain(null)
+    setEditIpRange(null)
+    setEditCdn(null)
+    setEditAs(null)
+  }
+
+  async function confirmDelete() {
+    if (!deleteTarget) return
+    setDeleting(true)
+    try {
+      const { kind, entry } = deleteTarget
+      const pathByKind = {
+        domain: `/v1/modules/${moduleId}/domain-entries/${entry.id}`,
+        'ip-range': `/v1/modules/${moduleId}/ip-range-entries/${entry.id}`,
+        cdn: `/v1/modules/${moduleId}/cdn-sources/${entry.id}`,
+        as: `/v1/modules/${moduleId}/as-entries/${entry.id}`,
+      } as const
+      await apiMutate(pathByKind[kind], 'DELETE', undefined, { idempotent: false })
+      toast.success('Удалено')
+      setDeleteTarget(null)
+      await onChanged()
+    } catch (e) {
+      toast.error(e instanceof ApiError ? e.message : String(e))
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  return (
+    <>
+      <DataGridCard
+        title={meta.title}
+        description={meta.description}
+        actions={
+          <Button size="sm" type="button" onClick={openCreate}>
+            <Plus />
+            Добавить
+          </Button>
+        }
+      >
+        <QueryState
+          data={items}
+          isLoading={isLoading}
+          isError={isError}
+          error={error}
+          empty={items.length === 0}
+          emptyTitle={meta.emptyTitle}
+          emptyDescription={meta.emptyDescription}
+          skeleton={<TableSkeleton rows={5} cols={3} />}
+          onRetry={onRetry}
+        >
+          {(rows) => (
+            <ModuleEntriesGrid
+              mod={mod}
+              rows={rows}
+              communities={communities}
+              isLoading={isLoading}
+              onEdit={(target) => {
+                if (target.kind === 'domain') setEditDomain(target.entry)
+                if (target.kind === 'ip-range') setEditIpRange(target.entry)
+                if (target.kind === 'cdn') setEditCdn(target.entry)
+                if (target.kind === 'as') setEditAs(target.entry)
+                setDialogOpen(true)
+              }}
+              onDelete={setDeleteTarget}
+            />
+          )}
+        </QueryState>
+      </DataGridCard>
+
+      {mod.type === 'DOMAINS' ? (
+        <ModuleDomainEntryDialog
+          open={dialogOpen}
+          moduleId={moduleId}
+          edit={editDomain}
+          communities={communities}
+          onOpenChange={(open) => (open ? setDialogOpen(true) : closeDialog())}
+          onSaved={onChanged}
+        />
+      ) : null}
+      {mod.type === 'IP_RANGES' ? (
+        <ModuleIpRangeEntryDialog
+          open={dialogOpen}
+          moduleId={moduleId}
+          edit={editIpRange}
+          communities={communities}
+          onOpenChange={(open) => (open ? setDialogOpen(true) : closeDialog())}
+          onSaved={onChanged}
+        />
+      ) : null}
+      {mod.type === 'CDN_CIDRS' ? (
+        <ModuleCdnSourceDialog
+          open={dialogOpen}
+          moduleId={moduleId}
+          edit={editCdn}
+          communities={communities}
+          onOpenChange={(open) => (open ? setDialogOpen(true) : closeDialog())}
+          onSaved={onChanged}
+        />
+      ) : null}
+      {mod.type === 'AS_PREFIXES' ? (
+        <ModuleAsEntryDialog
+          open={dialogOpen}
+          moduleId={moduleId}
+          edit={editAs}
+          communities={communities}
+          onOpenChange={(open) => (open ? setDialogOpen(true) : closeDialog())}
+          onSaved={onChanged}
+        />
+      ) : null}
+
+      <AlertDialog open={deleteTarget !== null} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Удалить запись?</AlertDialogTitle>
+            <AlertDialogDescription>{deleteDescription(deleteTarget)}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting}>Отмена</AlertDialogCancel>
+            <AlertDialogAction
+              variant="destructive"
+              disabled={deleting}
+              onClick={() => void confirmDelete()}
+            >
+              {deleting ? 'Удаление…' : 'Удалить'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
+
+function deleteDescription(target: DeleteTarget | null): string {
+  if (!target) return ''
+  switch (target.kind) {
+    case 'domain':
+      return target.entry.fqdn
+    case 'ip-range':
+      return target.entry.prefix
+    case 'cdn':
+      return target.entry.url
+    case 'as':
+      return `AS${target.entry.asn}`
+  }
+}

apps/web/src/components/modules/module-ip-range-entry-dialog.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@evobgp/ui/components/dialog'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+
+import { LoadingButton } from '@/components/loading-button'
+import { CommunitySelect } from '@/components/modules/community-select'
+import { ApiError, apiMutate } from '@/lib/api-client'
+import type { BgpCommunity, IpRangeEntry, IpRangeEntryCreate } from '@/types/api'
+
+interface ModuleIpRangeEntryDialogProps {
+  open: boolean
+  moduleId: string
+  edit: IpRangeEntry | null
+  communities: BgpCommunity[]
+  onOpenChange: (open: boolean) => void
+  onSaved: () => void | Promise<void>
+}
+
+export function ModuleIpRangeEntryDialog({
+  open,
+  moduleId,
+  edit,
+  communities,
+  onOpenChange,
+  onSaved,
+}: ModuleIpRangeEntryDialogProps) {
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState<IpRangeEntryCreate>({ prefix: '', community_id: '' })
+
+  useEffect(() => {
+    if (!open) return
+    setForm(
+      edit
+        ? { prefix: edit.prefix, community_id: edit.community_id }
+        : { prefix: '', community_id: '' },
+    )
+  }, [open, edit])
+
+  async function save() {
+    if (!form.prefix.trim() || !form.community_id) {
+      toast.error('Укажите префикс и community')
+      return
+    }
+    setSaving(true)
+    try {
+      const body = { prefix: form.prefix.trim(), community_id: form.community_id }
+      if (edit) {
+        await apiMutate(`/v1/modules/${moduleId}/ip-range-entries/${edit.id}`, 'PATCH', body)
+        toast.success('Диапазон обновлён')
+      } else {
+        await apiMutate(`/v1/modules/${moduleId}/ip-range-entries`, 'POST', body)
+        toast.success('Диапазон добавлен')
+      }
+      onOpenChange(false)
+      await onSaved()
+    } catch (e) {
+      toast.error(e instanceof ApiError ? e.message : String(e))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{edit ? 'Редактировать диапазон' : 'Новый IP-диапазон'}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="ip-prefix">Префикс (CIDR)</Label>
+            <Input
+              id="ip-prefix"
+              placeholder="203.0.113.0/24"
+              value={form.prefix}
+              onChange={(e) => setForm((s) => ({ ...s, prefix: e.target.value }))}
+            />
+          </div>
+          <CommunitySelect
+            id="ip-comm"
+            label="Community (обязательно)"
+            value={form.community_id || null}
+            onValueChange={(v) => setForm((s) => ({ ...s, community_id: v ?? '' }))}
+            communities={communities}
+            placeholder="Выберите community"
+          />
+        </div>
+        <DialogFooter>
+          <LoadingButton variant="outline" onClick={() => onOpenChange(false)}>
+            Отмена
+          </LoadingButton>
+          <LoadingButton loading={saving} onClick={() => void save()}>
+            {edit ? 'Сохранить' : 'Добавить'}
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

apps/web/src/components/modules/module-kpi-cards.tsx

@@ -0,0 +1,84 @@
+import {
+  ArrowDownUp,
+  Network,
+  RefreshCw,
+  ShieldCheck,
+  Timer,
+} from 'lucide-react'
+
+import { SectionCards, type SectionCardItem } from '@/components/section-cards'
+import { SectionCardsSkeleton } from '@/components/skeletons'
+import { formatDateTime, moduleIntervalLabel } from '@/lib/modules/display'
+import {
+  communityLabel,
+  dohProfileLabel,
+  moduleDohProfileIds,
+} from '@/lib/modules/helpers'
+import { dohPolicyRu } from '@/lib/ui-labels'
+import type { AsEntry, BgpCommunity, DohProfile, ModuleRow } from '@/types/api'
+
+interface ModuleKpiCardsProps {
+  mod: ModuleRow | null
+  communities: BgpCommunity[]
+  dohProfiles: DohProfile[]
+  asEntries: AsEntry[]
+  loading?: boolean
+}
+
+export function ModuleKpiCards({
+  mod,
+  communities,
+  dohProfiles,
+  asEntries,
+  loading = false,
+}: ModuleKpiCardsProps) {
+  if (loading || !mod) {
+    return <SectionCardsSkeleton count={5} />
+  }
+
+  const asPrefixTotal = asEntries.reduce((acc, entry) => acc + (entry.prefix_count ?? 0), 0)
+  const dohIds = moduleDohProfileIds(mod)
+
+  const items: SectionCardItem[] = [
+    {
+      label: 'Приоритет',
+      value: String(mod.priority ?? 0),
+      hint: 'порядок в сборке ревизии',
+      icon: <ArrowDownUp className="size-3.5" />,
+    },
+    {
+      label: 'Интервал',
+      value: moduleIntervalLabel(mod),
+      hint: 'refresh_interval_sec / cron',
+      icon: <Timer className="size-3.5" />,
+    },
+    {
+      label: 'DoH',
+      value: mod.type === 'DOMAINS' ? dohPolicyRu(mod.doh_resolver_policy) : '—',
+      hint:
+        mod.type === 'DOMAINS'
+          ? dohIds.length
+            ? dohIds.map((id) => dohProfileLabel(id, dohProfiles)).join('; ')
+            : 'Системный DNS'
+          : 'не применимо',
+      icon: <Network className="size-3.5" />,
+    },
+    {
+      label: 'Community по умолч.',
+      value: communityLabel(mod.default_community_id, communities),
+      hint: 'для записей без своего community',
+      icon: <ShieldCheck className="size-3.5" />,
+    },
+    {
+      label: 'Последнее обновление',
+      value: formatDateTime(mod.last_refreshed_at),
+      hint:
+        mod.type === 'AS_PREFIXES'
+          ? `ASN: ${asEntries.length}, префиксов: ${asPrefixTotal}`
+          : 'время последнего refresh',
+      icon: <RefreshCw className="size-3.5" />,
+    },
+  ]
+
+  return <SectionCards items={items} />
+}

apps/web/src/components/modules/modules-list-grid.tsx

@@ -0,0 +1,99 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useNavigate } from '@tanstack/react-router'
+import { Boxes } from 'lucide-react'
+import { useMemo } from 'react'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { Badge } from '@/components/reui/badge'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { TruncatedText } from '@/components/truncated-text'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { ModuleRow } from '@/types/api'
+
+export function ModulesListGrid({
+  items,
+  isLoading = false,
+}: {
+  items: ModuleRow[]
+  isLoading?: boolean
+}) {
+  const navigate = useNavigate()
+
+  const columns = useMemo<ColumnDef<ModuleRow>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <Boxes className="size-4 text-muted-foreground" />
+            <TruncatedText className="max-w-[280px] font-medium">{row.original.name}</TruncatedText>
+          </div>
+        ),
+        meta: { headerTitle: 'Название' },
+      },
+      {
+        accessorKey: 'type',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Тип" />,
+        cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
+        meta: { headerTitle: 'Тип' },
+      },
+      {
+        accessorKey: 'priority',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Приоритет" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-sm tabular-nums">{row.original.priority}</span>
+        ),
+        meta: { headerTitle: 'Приоритет' },
+      },
+      {
+        id: 'enabled',
+        accessorFn: (row) => (row.enabled ? 'enabled' : 'disabled'),
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Состояние" />,
+        cell: ({ row }) =>
+          row.original.enabled ? (
+            <Badge variant="success">включён</Badge>
+          ) : (
+            <Badge variant="secondary">выключен</Badge>
+          ),
+        meta: { headerTitle: 'Состояние' },
+      },
+      {
+        id: 'last_refreshed_at',
+        accessorFn: (row) => row.last_refreshed_at ?? '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Обновлено" />,
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground">
+            {row.original.last_refreshed_at
+              ? new Date(row.original.last_refreshed_at).toLocaleString('ru-RU')
+              : '—'}
+          </span>
+        ),
+        sortingFn: (a, b) => {
+          const av = a.original.last_refreshed_at ?? ''
+          const bv = b.original.last_refreshed_at ?? ''
+          return av.localeCompare(bv)
+        },
+        meta: { headerTitle: 'Обновлено' },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<ModuleRow>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет модулей"
+      onRowClick={(row) => void navigate({ to: '/modules/$moduleId', params: { moduleId: row.id } })}
+    />
+  )
+}

apps/web/src/components/monitoring/monitoring-ready-grid.tsx

@@ -0,0 +1,123 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { Database, HardDrive, HeartPulse, ListTodo, ShieldCheck } from 'lucide-react'
+import { useMemo } from 'react'
+
+import { Badge } from '@evobgp/ui/components/badge'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { ReadyStatus } from '@/queries/monitoring'
+
+const READY_CHECK_ICONS: Record<string, typeof Database> = {
+  postgres: Database,
+  store: HardDrive,
+  jobs: ListTodo,
+}
+
+interface ReadyCheckRow {
+  id: string
+  label: string
+  subtitle?: string
+  icon: typeof Database
+  ok: boolean
+  statusLabel: string
+  variant: 'default' | 'destructive' | 'secondary'
+}
+
+export function MonitoringReadyGrid({
+  health,
+  ready,
+}: {
+  health?: { ok?: boolean; status?: string; error?: string } | null
+  ready: ReadyStatus
+}) {
+  const data = useMemo<ReadyCheckRow[]>(() => {
+    const checks = ready.checks ?? {}
+    const rows: ReadyCheckRow[] = [
+      {
+        id: 'liveness',
+        label: 'Liveness',
+        subtitle: '/v1/health',
+        icon: HeartPulse,
+        ok: health?.ok === true,
+        statusLabel: health?.ok ? 'OK' : 'Ошибка',
+        variant: health?.ok ? 'default' : 'destructive',
+      },
+      {
+        id: 'readiness',
+        label: 'Readiness',
+        subtitle: '/v1/ready',
+        icon: ShieldCheck,
+        ok: ready.status === 'ok',
+        statusLabel: ready.status ?? '—',
+        variant: ready.status === 'ok' ? 'default' : 'secondary',
+      },
+    ]
+    for (const key of Object.keys(checks)) {
+      const value = checks[key]
+      const ok = typeof value === 'boolean' ? value : value?.ok !== false
+      rows.push({
+        id: key,
+        label: key,
+        icon: READY_CHECK_ICONS[key] ?? ListTodo,
+        ok,
+        statusLabel: ok ? 'OK' : 'Ошибка',
+        variant: ok ? 'default' : 'destructive',
+      })
+    }
+    return rows
+  }, [health?.ok, ready.checks, ready.status])
+
+  const columns = useMemo<ColumnDef<ReadyCheckRow>[]>(
+    () => [
+      {
+        accessorKey: 'label',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Проверка" />,
+        cell: ({ row }) => {
+          const Icon = row.original.icon
+          return (
+            <div className="flex items-center gap-2">
+              <Icon className="size-4 shrink-0 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-medium">{row.original.label}</p>
+                {row.original.subtitle ? (
+                  <p className="text-xs text-muted-foreground">{row.original.subtitle}</p>
+                ) : null}
+              </div>
+            </div>
+          )
+        },
+        meta: { headerTitle: 'Проверка' },
+      },
+      {
+        id: 'status',
+        enableSorting: false,
+        header: 'Статус',
+        cell: ({ row }) => (
+          <Badge variant={row.original.variant}>{row.original.statusLabel}</Badge>
+        ),
+        meta: { headerTitle: 'Статус' },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data,
+    columns,
+    ...createClientDataGridOptions<ReadyCheckRow>({
+      initialState: { pagination: { pageSize: 20 } },
+    }),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={data.length}
+      showPagination={false}
+      emptyMessage="Нет проверок"
+    />
+  )
+}

apps/web/src/components/network/network-peers-grid.tsx

@@ -0,0 +1,77 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { StatusBadge } from '@/components/status-badge'
+import { Badge } from '@/components/reui/badge'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { PeerRow } from '@/types/api'
+
+export function NetworkPeersGrid({
+  items,
+  isLoading = false,
+}: {
+  items: PeerRow[]
+  isLoading?: boolean
+}) {
+  const columns = useMemo<ColumnDef<PeerRow>[]>(
+    () => [
+      {
+        id: 'name',
+        accessorFn: (row) => row.name ?? row.neighbor,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
+        cell: ({ row }) => (
+          <span className="font-medium">{row.original.name ?? row.original.neighbor}</span>
+        ),
+        meta: { headerTitle: 'Имя' },
+      },
+      {
+        accessorKey: 'neighbor',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Neighbor" />,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.neighbor}</span>,
+        meta: { headerTitle: 'Neighbor' },
+      },
+      {
+        accessorKey: 'remote_asn',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="ASN" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs">{row.original.remote_asn ?? '—'}</span>
+        ),
+        meta: { headerTitle: 'ASN' },
+      },
+      {
+        accessorKey: 'session_state',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Состояние" />,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-1">
+            <StatusBadge status={row.original.session_state} />
+            {row.original.session_mismatch ? (
+              <Badge variant="warning" className="ml-1">
+                mismatch
+              </Badge>
+            ) : null}
+          </div>
+        ),
+        meta: { headerTitle: 'Состояние' },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<PeerRow>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет пиров"
+    />
+  )
+}

apps/web/src/components/network/network-speakers-grid.tsx

@@ -0,0 +1,78 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { StatusBadge } from '@/components/status-badge'
+import { Badge } from '@/components/reui/badge'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { SpeakerRow } from '@/types/api'
+
+export function NetworkSpeakersGrid({
+  items,
+  isLoading = false,
+}: {
+  items: SpeakerRow[]
+  isLoading?: boolean
+}) {
+  const columns = useMemo<ColumnDef<SpeakerRow>[]>(
+    () => [
+      {
+        accessorKey: 'endpoint',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Endpoint" />,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.endpoint}</span>,
+        meta: { headerTitle: 'Endpoint' },
+      },
+      {
+        accessorKey: 'role',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Роль" />,
+        cell: ({ row }) => <Badge variant="outline">{row.original.role}</Badge>,
+        meta: { headerTitle: 'Роль' },
+      },
+      {
+        id: 'agent',
+        enableSorting: false,
+        header: 'Agent',
+        cell: ({ row }) => {
+          const live = row.original.live
+          if (live?.agent_ok === true) return <StatusBadge status="ok" label="online" />
+          if (live?.agent_ok === false) return <StatusBadge status="error" label="offline" />
+          return <Badge variant="outline">—</Badge>
+        },
+        meta: { headerTitle: 'Agent' },
+      },
+      {
+        id: 'bgp',
+        enableSorting: false,
+        header: 'BGP',
+        cell: ({ row }) => {
+          const live = row.original.live
+          if (!live) return '—'
+          return (
+            <span className="text-xs">
+              {live.bgp_established ?? 0} / {live.bgp_sessions_total ?? 0}
+            </span>
+          )
+        },
+        meta: { headerTitle: 'BGP' },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<SpeakerRow>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет спикеров"
+    />
+  )
+}

apps/web/src/components/operations/operations-jobs-grid.tsx

@@ -0,0 +1,131 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useMutation } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { toast } from 'sonner'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { apiMutate } from '@/lib/api-client'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { JobRow } from '@/types/api'
+import type { QueryClient } from '@tanstack/react-query'
+
+function StatusBadgeColored({ status }: { status: string }) {
+  const cls =
+    status === 'succeeded'
+      ? 'text-success'
+      : status === 'failed' || status === 'cancelled'
+        ? 'text-destructive'
+        : 'text-info'
+  return <span className={`text-sm font-medium ${cls}`}>{status}</span>
+}
+
+export function OperationsJobsGrid({
+  items,
+  nameById,
+  qc,
+  isLoading = false,
+}: {
+  items: JobRow[]
+  nameById: Map<string, string>
+  qc: QueryClient
+  isLoading?: boolean
+}) {
+  const cancelMutation = useMutation({
+    mutationFn: (jobId: string) => apiMutate(`/v1/jobs/${jobId}/cancel`, 'POST', {}),
+    onSuccess: () => {
+      toast.success('Задача отменена')
+      void qc.invalidateQueries({ queryKey: ['operations'] })
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось отменить'),
+  })
+
+  const columns = useMemo<ColumnDef<JobRow>[]>(
+    () => [
+      {
+        accessorKey: 'kind',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
+        cell: ({ row }) => (
+          <div className="flex flex-col gap-0.5">
+            <span className="font-medium">{row.original.kind}</span>
+            {row.original.meta?.module_id ? (
+              <span className="text-xs text-muted-foreground">
+                {nameById.get(String(row.original.meta.module_id)) ??
+                  String(row.original.meta.module_id)}
+              </span>
+            ) : null}
+          </div>
+        ),
+        meta: { headerTitle: 'Вид' },
+      },
+      {
+        accessorKey: 'status',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
+        cell: ({ row }) => <StatusBadgeColored status={row.original.status} />,
+        meta: { headerTitle: 'Статус' },
+      },
+      {
+        id: 'created_at',
+        accessorFn: (row) => row.created_at ?? '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Создана" />,
+        cell: ({ row }) => (
+          <span className="whitespace-nowrap text-xs text-muted-foreground">
+            {row.original.created_at
+              ? new Date(row.original.created_at).toLocaleString('ru-RU')
+              : '—'}
+          </span>
+        ),
+        meta: { headerTitle: 'Создана' },
+      },
+      {
+        id: 'finished_at',
+        accessorFn: (row) => row.finished_at ?? '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Завершена" />,
+        cell: ({ row }) => (
+          <span className="whitespace-nowrap text-xs text-muted-foreground">
+            {row.original.finished_at
+              ? new Date(row.original.finished_at).toLocaleString('ru-RU')
+              : '—'}
+          </span>
+        ),
+        meta: { headerTitle: 'Завершена' },
+      },
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: () => null,
+        cell: ({ row }) =>
+          row.original.status === 'running' || row.original.status === 'queued' ? (
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              type="button"
+              className="text-destructive"
+              onClick={() => cancelMutation.mutate(row.original.job_id)}
+            >
+              ✕
+            </Button>
+          ) : null,
+      },
+    ],
+    [cancelMutation, nameById],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<JobRow>(),
+    getRowId: (row) => row.job_id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет задач"
+    />
+  )
+}

apps/web/src/components/operations/operations-revisions-grid.tsx

@@ -0,0 +1,105 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useMutation } from '@tanstack/react-query'
+import { RefreshCw } from 'lucide-react'
+import { useMemo } from 'react'
+import { toast } from 'sonner'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { apiMutate } from '@/lib/api-client'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { RevisionRow } from '@/types/api'
+import type { QueryClient } from '@tanstack/react-query'
+
+export function OperationsRevisionsGrid({
+  items,
+  qc,
+  isLoading = false,
+}: {
+  items: RevisionRow[]
+  qc: QueryClient
+  isLoading?: boolean
+}) {
+  const rollbackMutation = useMutation({
+    mutationFn: (id: string) =>
+      apiMutate(`/v1/revisions/${id}/rollback`, 'POST', {}).then(() => id),
+    onSuccess: () => {
+      toast.success('Откат выполнен')
+      void qc.invalidateQueries({ queryKey: ['operations'] })
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось откатить'),
+  })
+
+  const columns = useMemo<ColumnDef<RevisionRow>[]>(
+    () => [
+      {
+        id: 'id',
+        accessorFn: (row) => row.id,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="ID" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs">{row.original.id.slice(0, 12)}…</span>
+        ),
+        meta: { headerTitle: 'ID' },
+      },
+      {
+        accessorKey: 'created_at',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Создана" />,
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground">
+            {new Date(row.original.created_at).toLocaleString('ru-RU')}
+          </span>
+        ),
+        meta: { headerTitle: 'Создана' },
+      },
+      {
+        accessorKey: 'materialized_prefix_count',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Префиксов" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-sm tabular-nums">
+            {row.original.materialized_prefix_count}
+          </span>
+        ),
+        meta: { headerTitle: 'Префиксов' },
+      },
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: () => null,
+        cell: ({ row }) => (
+          <ConfirmDialog
+            trigger={
+              <Button variant="ghost" size="icon-sm" type="button" className="text-destructive">
+                <RefreshCw className="size-3.5" />
+              </Button>
+            }
+            title={`Откатиться к ревизии ${row.original.id.slice(0, 8)}…?`}
+            description="Будет создана новая ревизия на основе выбранной. Требуется роль operator."
+            confirmLabel="Откатить"
+            destructive
+            onConfirm={() => rollbackMutation.mutate(row.original.id)}
+          />
+        ),
+      },
+    ],
+    [rollbackMutation],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<RevisionRow>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет ревизий"
+    />
+  )
+}

apps/web/src/components/page-header.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react'
+
+interface PageHeaderProps {
+  title: string
+  description?: string
+  actions?: ReactNode
+}
+
+export function PageHeader({ title, description, actions }: PageHeaderProps) {
+  return (
+    <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+    </div>
+  )
+}

apps/web/src/components/page-shell.tsx

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react'
+import { cn } from '@evobgp/ui/lib/utils'
+
+export function PageShell({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn('flex flex-col gap-4 md:gap-6', className)}>{children}</div>
+}

apps/web/src/components/query-state.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react'
+import { AlertCircle, RefreshCwIcon } from 'lucide-react'
+import { Button } from '@evobgp/ui/components/button'
+import { Skeleton } from '@evobgp/ui/components/skeleton'
+import { EmptyState } from './empty-state'
+
+interface QueryStateProps<T> {
+  data: T | undefined
+  isLoading: boolean
+  isError: boolean
+  error?: unknown
+  empty?: boolean
+  emptyTitle?: string
+  emptyDescription?: string
+  emptyAction?: ReactNode
+  onRetry?: () => void
+  skeleton?: ReactNode
+  children: (data: T) => ReactNode
+}
+
+export function QueryState<T>({
+  data,
+  isLoading,
+  isError,
+  error,
+  empty,
+  emptyTitle = 'Нет данных',
+  emptyDescription,
+  emptyAction,
+  onRetry,
+  skeleton,
+  children,
+}: QueryStateProps<T>) {
+  if (isLoading) {
+    return <>{skeleton ?? <DefaultSkeleton />}</>
+  }
+  if (isError) {
+    return (
+      <EmptyState
+        icon={<AlertCircle className="size-8" />}
+        title="Ошибка загрузки"
+        description={error instanceof Error ? error.message : 'Не удалось загрузить данные'}
+        action={
+          onRetry ? (
+            <Button variant="outline" size="sm" onClick={onRetry}>
+              <RefreshCwIcon data-icon="inline-start" />
+              Повторить
+            </Button>
+          ) : null
+        }
+      />
+    )
+  }
+  if (empty || data == null) {
+    return <EmptyState title={emptyTitle} description={emptyDescription} action={emptyAction} />
+  }
+  return <>{children(data)}</>
+}
+
+function DefaultSkeleton() {
+  return (
+    <div className="flex flex-col gap-3">
+      <Skeleton className="h-8 w-48" />
+      <Skeleton className="h-32 w-full" />
+    </div>
+  )
+}

apps/web/src/components/reui/autocomplete.tsx

@@ -0,0 +1,343 @@
+"use client"
+
+import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { ScrollArea } from "@evobgp/ui/components/scroll-area"
+import { XIcon, ChevronsUpDownIcon } from "lucide-react"
+
+const inputVariants = cva(
+  "outline-none flex w-full text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [[readonly]]:bg-muted/80 [[readonly]]:cursor-not-allowed border border-input focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg bg-transparent dark:bg-input/30 text-sm transition-colors focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-3",
+  {
+    variants: {
+      size: {
+        sm: "h-7 px-2 [&~[data-slot=autocomplete-clear]]:end-1.5 [&~[data-slot=autocomplete-trigger]]:end-1.5",
+        default:
+          "h-8 px-2.5 [&~[data-slot=autocomplete-clear]]:end-1.75 [&~[data-slot=autocomplete-trigger]]:end-1.75",
+        lg: "h-9 px-2.5 [&~[data-slot=autocomplete-clear]]:end-2 [&~[data-slot=autocomplete-trigger]]:end-2",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+const Autocomplete = AutocompletePrimitive.Root
+
+function AutocompleteValue({ ...props }: AutocompletePrimitive.Value.Props) {
+  return (
+    <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />
+  )
+}
+
+function AutocompleteInput({
+  className,
+  size = "default",
+  showClear = false,
+  showTrigger = false,
+  ...props
+}: Omit<AutocompletePrimitive.Input.Props, "size"> &
+  VariantProps<typeof inputVariants> & {
+    showClear?: boolean
+    showTrigger?: boolean
+  }) {
+  return (
+    <div className="relative w-full">
+      <AutocompletePrimitive.Input
+        data-slot="autocomplete-input"
+        data-size={size}
+        className={cn(inputVariants({ size }), className)}
+        {...props}
+      />
+      {showTrigger && <AutocompleteTrigger />}
+      {showClear && <AutocompleteClear />}
+    </div>
+  )
+}
+
+function AutocompleteStatus({
+  className,
+  ...props
+}: AutocompletePrimitive.Status.Props) {
+  return (
+    <AutocompletePrimitive.Status
+      data-slot="autocomplete-status"
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-sm empty:m-0 empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AutocompletePortal({ ...props }: AutocompletePrimitive.Portal.Props) {
+  return (
+    <AutocompletePrimitive.Portal data-slot="autocomplete-portal" {...props} />
+  )
+}
+
+function AutocompleteBackdrop({
+  ...props
+}: AutocompletePrimitive.Backdrop.Props) {
+  return (
+    <AutocompletePrimitive.Backdrop
+      data-slot="autocomplete-backdrop"
+      {...props}
+    />
+  )
+}
+
+function AutocompletePositioner({
+  className,
+  ...props
+}: AutocompletePrimitive.Positioner.Props) {
+  return (
+    <AutocompletePrimitive.Positioner
+      data-slot="autocomplete-positioner"
+      className={cn("z-50 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function AutocompleteList({
+  className,
+  scrollAreaClassName,
+  ...props
+}: AutocompletePrimitive.List.Props & {
+  scrollAreaClassName?: string
+  scrollFade?: boolean
+  scrollbarGutter?: boolean
+}) {
+  return (
+    <ScrollArea
+      className={cn(
+        "size-full min-h-0 **:data-[slot=scroll-area-viewport]:h-full **:data-[slot=scroll-area-viewport]:overscroll-contain",
+        scrollAreaClassName
+      )}
+    >
+      <AutocompletePrimitive.List
+        data-slot="autocomplete-list"
+        className={cn(
+          "not-empty:px-1 not-empty:py-1 not-empty:scroll-py-1 in-data-has-overflow-y:me-3",
+          className
+        )}
+        {...props}
+      />
+    </ScrollArea>
+  )
+}
+
+function AutocompleteCollection({
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Collection>) {
+  return (
+    <AutocompletePrimitive.Collection
+      data-slot="autocomplete-collection"
+      {...props}
+    />
+  )
+}
+
+function AutocompleteRow({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Row>) {
+  return (
+    <AutocompletePrimitive.Row
+      data-slot="autocomplete-row"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function AutocompleteItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {
+  return (
+    <AutocompletePrimitive.Item
+      data-slot="autocomplete-item"
+      className={cn(
+        "text-foreground data-highlighted:text-foreground data-highlighted:before:bg-accent gap-1.5 rounded-md px-1.5 py-1 text-sm data-highlighted:before:rounded-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([role=img]):not([class*=text-])]:opacity-60",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export interface AutocompleteContentProps extends React.ComponentProps<
+  typeof AutocompletePrimitive.Popup
+> {
+  align?: AutocompletePrimitive.Positioner.Props["align"]
+  sideOffset?: AutocompletePrimitive.Positioner.Props["sideOffset"]
+  alignOffset?: AutocompletePrimitive.Positioner.Props["alignOffset"]
+  side?: AutocompletePrimitive.Positioner.Props["side"]
+  anchor?: AutocompletePrimitive.Positioner.Props["anchor"]
+  showBackdrop?: boolean
+}
+
+function AutocompleteContent({
+  className,
+  children,
+  showBackdrop = false,
+  align = "start",
+  sideOffset = 4,
+  alignOffset = 0,
+  side = "bottom",
+  anchor,
+  ...props
+}: AutocompleteContentProps) {
+  return (
+    <AutocompletePortal>
+      {showBackdrop && <AutocompleteBackdrop />}
+      <AutocompletePositioner
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        side={side}
+        anchor={anchor}
+      >
+        <div className="relative flex max-h-full">
+          <AutocompletePrimitive.Popup
+            data-slot="autocomplete-popup"
+            className={cn(
+              "bg-popover text-popover-foreground rounded-lg shadow-md ring-foreground/10 flex max-h-[min(var(--available-height),24rem)] w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) scroll-pt-2 scroll-pb-2 flex-col overscroll-contain py-0.5 ring-1 transition-[scale,opacity] has-data-starting-style:scale-98 has-data-starting-style:opacity-0 has-data-[side=none]:scale-100 has-data-[side=none]:transition-none",
+              className
+            )}
+            {...props}
+          >
+            {children}
+          </AutocompletePrimitive.Popup>
+        </div>
+      </AutocompletePositioner>
+    </AutocompletePortal>
+  )
+}
+
+function AutocompleteGroup({
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Group>) {
+  return (
+    <AutocompletePrimitive.Group data-slot="autocomplete-group" {...props} />
+  )
+}
+
+function AutocompleteGroupLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>) {
+  return (
+    <AutocompletePrimitive.GroupLabel
+      data-slot="autocomplete-group-label"
+      className={cn(
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AutocompleteEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) {
+  return (
+    <AutocompletePrimitive.Empty
+      data-slot="autocomplete-empty"
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-sm text-center empty:m-0 empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AutocompleteClear({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Clear>) {
+  return (
+    <AutocompletePrimitive.Clear
+      data-slot="autocomplete-clear"
+      className={cn(
+        "ring-offset-background focus:ring-ring absolute top-1/2 -translate-y-1/2 cursor-pointer opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-disabled:pointer-events-none",
+        className
+      )}
+      {...props}
+    >
+      <XIcon className="size-4" />
+    </AutocompletePrimitive.Clear>
+  )
+}
+
+function AutocompleteTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Trigger>) {
+  return (
+    <AutocompletePrimitive.Trigger
+      data-slot="autocomplete-trigger"
+      className={cn(
+        "focus:ring-ring ring-offset-background absolute top-1/2 -translate-y-1/2 cursor-pointer focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none has-[+[data-slot=autocomplete-clear]]:hidden data-disabled:pointer-events-none",
+        className
+      )}
+      {...props}
+    >
+      <ChevronsUpDownIcon className="size-4 opacity-70" />
+    </AutocompletePrimitive.Trigger>
+  )
+}
+
+function AutocompleteArrow({
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Arrow>) {
+  return (
+    <AutocompletePrimitive.Arrow data-slot="autocomplete-arrow" {...props} />
+  )
+}
+
+function AutocompleteSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Separator>) {
+  return (
+    <AutocompletePrimitive.Separator
+      data-slot="autocomplete-separator"
+      className={cn(
+        "bg-border my-1.5 h-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Autocomplete,
+  AutocompleteValue,
+  AutocompleteTrigger,
+  AutocompleteInput,
+  AutocompleteStatus,
+  AutocompletePortal,
+  AutocompleteBackdrop,
+  AutocompletePositioner,
+  AutocompleteContent,
+  AutocompleteList,
+  AutocompleteCollection,
+  AutocompleteRow,
+  AutocompleteItem,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteEmpty,
+  AutocompleteClear,
+  AutocompleteArrow,
+  AutocompleteSeparator,
+}

apps/web/src/components/reui/badge.tsx

@@ -0,0 +1,98 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+const badgeVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center w-fit border border-transparent font-medium whitespace-nowrap outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground",
+        outline: "border-border bg-transparent dark:bg-input/32",
+        secondary: "bg-secondary text-secondary-foreground",
+        info: "bg-info text-white",
+        success: "bg-success text-white",
+        warning: "bg-warning text-white",
+        destructive: "bg-destructive text-white",
+        focus: "bg-focus text-focus-foreground",
+        invert: "bg-invert text-invert-foreground",
+        "primary-light":
+          "bg-primary/10 border-none text-primary dark:bg-primary/20",
+        "warning-light":
+          "bg-warning/10 border-none text-warning-foreground dark:bg-warning/20",
+        "success-light":
+          "bg-success/10 border-none text-success-foreground dark:bg-success/20",
+        "info-light":
+          "bg-info/10 border-none text-info-foreground dark:bg-info/20",
+        "destructive-light":
+          "bg-destructive/10 border-none text-destructive-foreground dark:bg-destructive/20",
+        "invert-light":
+          "bg-invert/10 border-none text-foreground dark:bg-invert/20",
+        "focus-light":
+          "bg-focus/10 border-none text-focus-foreground dark:bg-focus/20",
+        "primary-outline":
+          "bg-background border-border text-primary dark:bg-input/30",
+        "warning-outline":
+          "bg-background border-border text-warning-foreground dark:bg-input/30",
+        "success-outline":
+          "bg-background border-border text-success-foreground dark:bg-input/30",
+        "info-outline":
+          "bg-background border-border text-info-foreground dark:bg-input/30",
+        "destructive-outline":
+          "bg-background border-border text-destructive-foreground dark:bg-input/30",
+        "invert-outline":
+          "bg-background border-border text-invert-foreground dark:bg-input/30",
+        "focus-outline":
+          "bg-background border-border text-focus-foreground dark:bg-input/30",
+      },
+      size: {
+        xs: "px-1 py-0.25 text-[0.6rem] leading-none h-4 min-w-4 gap-1",
+        sm: "px-1 py-0.25 text-[0.625rem] leading-none h-4.5 min-w-4.5 gap-1",
+        default: "px-1.25 py-0.5 text-xs h-5 min-w-5 gap-1",
+        lg: "px-1.5 py-0.5 text-xs h-5.5 min-w-5.5 gap-1",
+        xl: "px-2 py-0.75 text-sm h-6 min-w-6 gap-1.5",
+      },
+      /** `default`: per-theme radius. `full`: max radius per theme (Lyra stays `rounded-none`). */
+      radius: {
+        default:
+          "rounded-sm",
+        full: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+    },
+  }
+)
+
+interface BadgeProps extends useRender.ComponentProps<"span"> {
+  variant?: VariantProps<typeof badgeVariants>["variant"]
+  size?: VariantProps<typeof badgeVariants>["size"]
+  radius?: VariantProps<typeof badgeVariants>["radius"]
+}
+
+function Badge({
+  className,
+  variant,
+  size,
+  radius,
+  render,
+  ...props
+}: BadgeProps) {
+  const defaultProps = {
+    "data-slot": "badge",
+    className: cn(badgeVariants({ variant, size, radius, className })),
+  }
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+  })
+}
+
+export { Badge, badgeVariants, type BadgeProps }

apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { Badge } from "@/components/reui/badge"
+import { Column } from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { Input } from "@evobgp/ui/components/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@evobgp/ui/components/popover"
+import { Separator } from "@evobgp/ui/components/separator"
+import { CirclePlusIcon, CheckIcon } from "lucide-react"
+
+interface DataGridColumnFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>
+  title?: string
+  options: {
+    label: string
+    value: string
+    icon?: React.ComponentType<{ className?: string }>
+  }[]
+}
+
+function DataGridColumnFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataGridColumnFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues()
+  const selectedValues = new Set(column?.getFilterValue() as string[])
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const filteredOptions = useMemo(() => {
+    if (!searchQuery) return options
+    return options.filter((option) =>
+      option.label.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+  }, [options, searchQuery])
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button variant="outline" size="sm">
+            <CirclePlusIcon className="size-4" />
+            {title}
+            {selectedValues?.size > 0 && (
+              <>
+                <Separator orientation="vertical" className="mx-2 h-4" />
+                <Badge
+                  variant="secondary"
+                  className="rounded-sm px-1 font-normal lg:hidden"
+                >
+                  {selectedValues.size}
+                </Badge>
+                <div className="hidden space-x-1 lg:flex">
+                  {selectedValues.size > 2 ? (
+                    <Badge
+                      variant="secondary"
+                      className="rounded-sm px-1 font-normal"
+                    >
+                      {selectedValues.size} selected
+                    </Badge>
+                  ) : (
+                    options
+                      .filter((option) => selectedValues.has(option.value))
+                      .map((option) => (
+                        <Badge
+                          variant="secondary"
+                          key={option.value}
+                          className="rounded-sm px-1 font-normal"
+                        >
+                          {option.label}
+                        </Badge>
+                      ))
+                  )}
+                </div>
+              </>
+            )}
+          </Button>
+        }
+      />
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <div className="p-2">
+          <Input
+            placeholder={title}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="h-8"
+          />
+        </div>
+        <div className="max-h-[300px] overflow-y-auto">
+          {filteredOptions.length === 0 ? (
+            <div className="text-muted-foreground py-6 text-center text-sm">
+              No results found.
+            </div>
+          ) : (
+            <div className="p-1">
+              {filteredOptions.map((option) => {
+                const isSelected = selectedValues.has(option.value)
+                return (
+                  <div
+                    key={option.value}
+                    onClick={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value)
+                      } else {
+                        selectedValues.add(option.value)
+                      }
+                      const filterValues = Array.from(selectedValues)
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      )
+                    }}
+                    className={cn(
+                      "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
+                      "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        "border-primary me-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <CheckIcon className="h-4 w-4" />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="text-muted-foreground mr-2 h-4 w-4" />
+                    )}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ms-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+          {selectedValues.size > 0 && (
+            <>
+              <div className="bg-border -mx-1 my-1 h-px" />
+              <div className="p-1">
+                <div
+                  onClick={() => column?.setFilterValue(undefined)}
+                  className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center justify-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
+                >
+                  Clear filters
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { DataGridColumnFilter, type DataGridColumnFilterProps }

apps/web/src/components/reui/data-grid/data-grid-column-header.tsx

@@ -0,0 +1,343 @@
+import { HTMLAttributes, memo, ReactNode, useMemo } from "react"
+import {
+  getColumnHeaderLabel,
+  useDataGrid,
+} from "@/components/reui/data-grid/data-grid"
+import { Column } from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, CheckIcon, ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowLeftIcon, ArrowRightIcon, Settings2Icon, PinOffIcon } from "lucide-react"
+
+interface DataGridColumnHeaderProps<
+  TData,
+  TValue,
+> extends HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  /** When omitted, uses `column.columnDef.meta.headerTitle`, then a string `columnDef.header`, then `column.id`. */
+  title?: string
+  icon?: ReactNode
+  pinnable?: boolean
+  filter?: ReactNode
+  visibility?: boolean
+}
+
+function DataGridColumnHeaderInner<TData, TValue>({
+  column,
+  title,
+  icon,
+  className,
+  filter,
+  visibility = false,
+}: DataGridColumnHeaderProps<TData, TValue>) {
+  const { isLoading, table, props, recordCount } = useDataGrid()
+  const resolvedTitle = title ?? getColumnHeaderLabel(column)
+
+  const columnOrder = table.getState().columnOrder
+  const columnVisibilityKey = JSON.stringify(table.getState().columnVisibility)
+  const isSorted = column.getIsSorted()
+  const isPinned = column.getIsPinned()
+  const canSort = column.getCanSort()
+  const canPin = column.getCanPin()
+  const canResize = column.getCanResize()
+
+  const columnIndex = columnOrder.indexOf(column.id)
+  const canMoveLeft = columnIndex > 0
+  const canMoveRight = columnIndex < columnOrder.length - 1
+
+  const handleSort = () => {
+    if (isSorted === "asc") {
+      column.toggleSorting(true)
+    } else if (isSorted === "desc") {
+      column.clearSorting()
+    } else {
+      column.toggleSorting(false)
+    }
+  }
+
+  const headerLabelClassName = cn(
+    "text-secondary-foreground/80 inline-flex h-full items-center gap-1.5 font-normal [&_svg]:opacity-60 text-[0.8125rem] leading-[calc(1.125/0.8125)] [&_svg]:size-3.5",
+    className
+  )
+
+  const headerButtonClassName = cn(
+    "text-secondary-foreground/80 hover:bg-secondary data-[state=open]:bg-secondary hover:text-foreground data-[state=open]:text-foreground -ms-2 px-2 font-normal h-6 rounded-lg",
+    className
+  )
+
+  const sortIcon =
+    canSort &&
+    (isSorted === "desc" ? (
+      <ArrowDownIcon className="size-3.25" />
+    ) : isSorted === "asc" ? (
+      <ArrowUpIcon className="size-3.25" />
+    ) : (
+      <ChevronsUpDownIcon className="mt-px size-3.25" />
+    ))
+
+  const hasControls =
+    props.tableLayout?.columnsMovable ||
+    (props.tableLayout?.columnsVisibility && visibility) ||
+    (props.tableLayout?.columnsPinnable && canPin) ||
+    filter
+
+  const menuItems = useMemo(() => {
+    const items: ReactNode[] = []
+    let hasPreviousSection = false
+
+    // Filter section
+    if (filter) {
+      items.push(
+        <DropdownMenuGroup key="group-filter">
+          <DropdownMenuLabel key="filter">{filter}</DropdownMenuLabel>
+        </DropdownMenuGroup>
+      )
+      hasPreviousSection = true
+    }
+
+    // Sort section
+    if (canSort) {
+      if (hasPreviousSection) {
+        items.push(<DropdownMenuSeparator key="sep-sort" />)
+      }
+      items.push(
+        <DropdownMenuItem
+          key="sort-asc"
+          onClick={() => {
+            if (isSorted === "asc") {
+              column.clearSorting()
+            } else {
+              column.toggleSorting(false)
+            }
+          }}
+          disabled={!canSort}
+        >
+          <ArrowUpIcon className="size-3.5!" />
+          <span className="grow">Asc</span>
+          {isSorted === "asc" && (
+            <CheckIcon className="text-primary size-4 opacity-100!" />
+          )}
+        </DropdownMenuItem>,
+        <DropdownMenuItem
+          key="sort-desc"
+          onClick={() => {
+            if (isSorted === "desc") {
+              column.clearSorting()
+            } else {
+              column.toggleSorting(true)
+            }
+          }}
+          disabled={!canSort}
+        >
+          <ArrowDownIcon className="size-3.5!" />
+          <span className="grow">Desc</span>
+          {isSorted === "desc" && (
+            <CheckIcon className="text-primary size-4 opacity-100!" />
+          )}
+        </DropdownMenuItem>
+      )
+      hasPreviousSection = true
+    }
+
+    // Pin section
+    if (props.tableLayout?.columnsPinnable && canPin) {
+      if (hasPreviousSection) {
+        items.push(<DropdownMenuSeparator key="sep-pin" />)
+      }
+      items.push(
+        <DropdownMenuItem
+          key="pin-left"
+          onClick={() => column.pin(isPinned === "left" ? false : "left")}
+        >
+          <ArrowLeftToLineIcon className="size-3.5!" aria-hidden="true" />
+          <span className="grow">Pin to left</span>
+          {isPinned === "left" && (
+            <CheckIcon className="text-primary size-4 opacity-100!" />
+          )}
+        </DropdownMenuItem>,
+        <DropdownMenuItem
+          key="pin-right"
+          onClick={() => column.pin(isPinned === "right" ? false : "right")}
+        >
+          <ArrowRightToLineIcon className="size-3.5!" aria-hidden="true" />
+          <span className="grow">Pin to right</span>
+          {isPinned === "right" && (
+            <CheckIcon className="text-primary size-4 opacity-100!" />
+          )}
+        </DropdownMenuItem>
+      )
+      hasPreviousSection = true
+    }
+
+    // Move section
+    if (props.tableLayout?.columnsMovable) {
+      if (hasPreviousSection) {
+        items.push(<DropdownMenuSeparator key="sep-move" />)
+      }
+      items.push(
+        <DropdownMenuItem
+          key="move-left"
+          onClick={() => {
+            if (columnIndex > 0) {
+              const newOrder = [...columnOrder]
+              const [movedColumn] = newOrder.splice(columnIndex, 1)
+              newOrder.splice(columnIndex - 1, 0, movedColumn)
+              table.setColumnOrder(newOrder)
+            }
+          }}
+          disabled={!canMoveLeft || isPinned !== false}
+        >
+          <ArrowLeftIcon className="size-3.5!" aria-hidden="true" />
+          <span>Move to Left</span>
+        </DropdownMenuItem>,
+        <DropdownMenuItem
+          key="move-right"
+          onClick={() => {
+            if (columnIndex < columnOrder.length - 1) {
+              const newOrder = [...columnOrder]
+              const [movedColumn] = newOrder.splice(columnIndex, 1)
+              newOrder.splice(columnIndex + 1, 0, movedColumn)
+              table.setColumnOrder(newOrder)
+            }
+          }}
+          disabled={!canMoveRight || isPinned !== false}
+        >
+          <ArrowRightIcon className="size-3.5!" aria-hidden="true" />
+          <span>Move to Right</span>
+        </DropdownMenuItem>
+      )
+      hasPreviousSection = true
+    }
+
+    // Visibility section
+    if (props.tableLayout?.columnsVisibility && visibility) {
+      if (hasPreviousSection) {
+        items.push(<DropdownMenuSeparator key="sep-visibility" />)
+      }
+      items.push(
+        <DropdownMenuSub key="visibility">
+          <DropdownMenuSubTrigger>
+            <Settings2Icon className="size-3.5!" />
+            <span>Columns</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent side="right">
+            {table
+              .getAllColumns()
+              .filter((col) => col.getCanHide())
+              .map((col) => (
+                <DropdownMenuCheckboxItem
+                  key={col.id}
+                  checked={col.getIsVisible()}
+                  onSelect={(event) => event.preventDefault()}
+                  onCheckedChange={(value) => col.toggleVisibility(!!value)}
+                  className="capitalize"
+                >
+                  {getColumnHeaderLabel(col)}
+                </DropdownMenuCheckboxItem>
+              ))}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      )
+    }
+
+    return items
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    filter,
+    canSort,
+    isSorted,
+    column,
+    props.tableLayout?.columnsPinnable,
+    props.tableLayout?.columnsMovable,
+    props.tableLayout?.columnsVisibility,
+    canPin,
+    isPinned,
+    canMoveLeft,
+    canMoveRight,
+    visibility,
+    table,
+    columnIndex,
+    columnOrder,
+    columnVisibilityKey, // Needed to update checkbox states when visibility changes
+  ])
+
+  if (hasControls) {
+    return (
+      <div className="flex h-full items-center justify-between gap-1.5">
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button
+                variant="ghost"
+                className={headerButtonClassName}
+                disabled={isLoading || recordCount === 0}
+              >
+                {icon && icon}
+                {resolvedTitle}
+                {sortIcon}
+              </Button>
+            }
+          />
+          <DropdownMenuContent className="w-40" align="start">
+            {menuItems}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        {props.tableLayout?.columnsPinnable && canPin && isPinned && (
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            className="-me-1 size-7 rounded-md"
+            onClick={() => column.pin(false)}
+            aria-label={`Unpin ${resolvedTitle} column`}
+            title={`Unpin ${resolvedTitle} column`}
+          >
+            <PinOffIcon className="size-3.5! opacity-50!" aria-hidden="true" />
+          </Button>
+        )}
+      </div>
+    )
+  }
+
+  if (canSort || (props.tableLayout?.columnsResizable && canResize)) {
+    return (
+      <div className="flex h-full items-center">
+        <Button
+          variant="ghost"
+          className={headerButtonClassName}
+          disabled={isLoading || recordCount === 0}
+          onClick={handleSort}
+        >
+          {icon && icon}
+          {resolvedTitle}
+          {sortIcon}
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className={headerLabelClassName}>
+      {icon && icon}
+      {resolvedTitle}
+    </div>
+  )
+}
+
+const DataGridColumnHeader = memo(
+  DataGridColumnHeaderInner
+) as typeof DataGridColumnHeaderInner
+
+export { DataGridColumnHeader, type DataGridColumnHeaderProps }

apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { ReactElement } from "react"
+import { getColumnHeaderLabel } from "@/components/reui/data-grid/data-grid"
+import { Table } from "@tanstack/react-table"
+
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+
+function DataGridColumnVisibility<TData>({
+  table,
+  trigger,
+}: {
+  table: Table<TData>
+  trigger: ReactElement<Record<string, unknown>>
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={trigger} />
+      <DropdownMenuContent align="end" className="min-w-[150px]">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel className="font-medium">
+            Toggle Columns
+          </DropdownMenuLabel>
+          {table
+            .getAllColumns()
+            .filter((column) => column.getCanHide())
+            .map((column) => {
+              return (
+                <DropdownMenuCheckboxItem
+                  key={column.id}
+                  className="capitalize"
+                  checked={column.getIsVisible()}
+                  onSelect={(event) => event.preventDefault()}
+                  onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                >
+                  {getColumnHeaderLabel(column)}
+                </DropdownMenuCheckboxItem>
+              )
+            })}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export { DataGridColumnVisibility }

apps/web/src/components/reui/data-grid/data-grid-pagination.tsx

@@ -0,0 +1,228 @@
+import React, { ReactNode } from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import { Skeleton } from "@evobgp/ui/components/skeleton"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+interface DataGridPaginationProps {
+  sizes?: number[]
+  sizesInfo?: string
+  sizesLabel?: string
+  sizesDescription?: string
+  sizesSkeleton?: ReactNode
+  more?: boolean
+  moreLimit?: number
+  info?: string
+  infoSkeleton?: ReactNode
+  className?: string
+  rowsPerPageLabel?: string
+  previousPageLabel?: string
+  nextPageLabel?: string
+  ellipsisText?: string
+}
+
+function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element {
+  const { table, recordCount, isLoading } = useDataGrid()
+
+  const defaultProps: Partial<DataGridPaginationProps> = {
+    sizes: [5, 10, 25, 50, 100],
+    sizesLabel: "Show",
+    sizesDescription: "per page",
+    sizesSkeleton: <Skeleton className="h-8 w-44" />,
+    moreLimit: 5,
+    more: false,
+    info: "{from} - {to} of {count}",
+    infoSkeleton: <Skeleton className="h-8 w-60" />,
+    rowsPerPageLabel: "Rows per page",
+    previousPageLabel: "Go to previous page",
+    nextPageLabel: "Go to next page",
+    ellipsisText: "...",
+  }
+
+  const mergedProps: DataGridPaginationProps = { ...defaultProps, ...props }
+
+  const btnBaseClasses = "size-7 p-0 text-sm"
+  const btnArrowClasses = btnBaseClasses + " rtl:transform rtl:rotate-180"
+  const pageIndex = table.getState().pagination.pageIndex
+  const pageSize = table.getState().pagination.pageSize
+  const from = pageIndex * pageSize + 1
+  const to = Math.min((pageIndex + 1) * pageSize, recordCount)
+  const pageCount = table.getPageCount()
+
+  // Replace placeholders in paginationInfo
+  const paginationInfo = mergedProps?.info
+    ? mergedProps.info
+        .replace("{from}", from.toString())
+        .replace("{to}", to.toString())
+        .replace("{count}", recordCount.toString())
+    : `${from} - ${to} of ${recordCount}`
+
+  // Pagination limit logic
+  const paginationMoreLimit = mergedProps?.moreLimit || 5
+
+  // Determine the start and end of the pagination group
+  const currentGroupStart =
+    Math.floor(pageIndex / paginationMoreLimit) * paginationMoreLimit
+  const currentGroupEnd = Math.min(
+    currentGroupStart + paginationMoreLimit,
+    pageCount
+  )
+
+  // Render page buttons based on the current group
+  const renderPageButtons = () => {
+    const buttons = []
+    for (let i = currentGroupStart; i < currentGroupEnd; i++) {
+      buttons.push(
+        <Button
+          key={i}
+          size="icon-sm"
+          variant="ghost"
+          className={cn(btnBaseClasses, "text-muted-foreground", {
+            "bg-accent text-accent-foreground": pageIndex === i,
+          })}
+          onClick={() => {
+            if (pageIndex !== i) {
+              table.setPageIndex(i)
+            }
+          }}
+        >
+          {i + 1}
+        </Button>
+      )
+    }
+    return buttons
+  }
+
+  // Render a "previous" ellipsis button if there are previous pages to show
+  const renderEllipsisPrevButton = () => {
+    if (currentGroupStart > 0) {
+      return (
+        <Button
+          size="icon-sm"
+          className={btnBaseClasses}
+          variant="ghost"
+          onClick={() => table.setPageIndex(currentGroupStart - 1)}
+        >
+          {mergedProps.ellipsisText}
+        </Button>
+      )
+    }
+    return null
+  }
+
+  // Render a "next" ellipsis button if there are more pages to show after the current group
+  const renderEllipsisNextButton = () => {
+    if (currentGroupEnd < pageCount) {
+      return (
+        <Button
+          className={btnBaseClasses}
+          variant="ghost"
+          size="icon-sm"
+          onClick={() => table.setPageIndex(currentGroupEnd)}
+        >
+          {mergedProps.ellipsisText}
+        </Button>
+      )
+    }
+    return null
+  }
+
+  return (
+    <div
+      data-slot="data-grid-pagination"
+      className={cn(
+        "flex grow flex-col flex-wrap items-center justify-between gap-2.5 py-2.5 sm:flex-row sm:py-0",
+        mergedProps?.className
+      )}
+    >
+      <div className="order-2 flex flex-wrap items-center space-x-2.5 pb-2.5 sm:order-1 sm:pb-0">
+        {isLoading ? (
+          mergedProps?.sizesSkeleton
+        ) : (
+          <>
+            <div className="text-muted-foreground text-sm">
+              {mergedProps.rowsPerPageLabel}
+            </div>
+            <Select
+              items={mergedProps?.sizes?.map((size: number) => ({
+                value: `${size}`,
+                label: `${size}`,
+              }))}
+              value={`${pageSize}`}
+              onValueChange={(value) => {
+                const newPageSize = Number(value)
+                table.setPageSize(newPageSize)
+              }}
+            >
+              <SelectTrigger className="w-14" size="sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent side="top" className="min-w-18">
+                {mergedProps?.sizes?.map((size: number) => (
+                  <SelectItem key={size} value={`${size}`}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </>
+        )}
+      </div>
+      <div className="order-1 flex flex-col items-center justify-center gap-2.5 pt-2.5 sm:order-2 sm:flex-row sm:justify-end sm:pt-0">
+        {isLoading ? (
+          mergedProps?.infoSkeleton
+        ) : (
+          <>
+            <div className="text-muted-foreground text-sm order-2 text-nowrap sm:order-1">
+              {paginationInfo}
+            </div>
+            {pageCount > 1 && (
+              <div className="order-1 flex items-center space-x-1 sm:order-2">
+                <Button
+                  size="icon-sm"
+                  variant="ghost"
+                  className={btnArrowClasses}
+                  onClick={() => table.previousPage()}
+                  disabled={!table.getCanPreviousPage()}
+                >
+                  <span className="sr-only">
+                    {mergedProps.previousPageLabel}
+                  </span>
+                  <ChevronLeftIcon className="size-4" />
+                </Button>
+
+                {renderEllipsisPrevButton()}
+
+                {renderPageButtons()}
+
+                {renderEllipsisNextButton()}
+
+                <Button
+                  size="icon-sm"
+                  variant="ghost"
+                  className={btnArrowClasses}
+                  onClick={() => table.nextPage()}
+                  disabled={!table.getCanNextPage()}
+                >
+                  <span className="sr-only">{mergedProps.nextPageLabel}</span>
+                  <ChevronRightIcon className="size-4" />
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export { DataGridPagination, type DataGridPaginationProps }

apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx

@@ -0,0 +1,421 @@
+"use client"
+
+import {
+  PointerEvent,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+const MIN_THUMB_SIZE = 24
+const FALLBACK_SCROLLBAR_SIZE = 12
+
+const INITIAL_METRICS = {
+  hasVerticalOverflow: false,
+  headerHeight: 0,
+  horizontalScrollbarSize: 0,
+  thumbHeight: 0,
+  thumbTop: 0,
+  trackHeight: 0,
+} as const
+
+type DataGridScrollAreaOrientation = "horizontal" | "vertical" | "both"
+
+type ScrollbarMetrics = {
+  hasVerticalOverflow: boolean
+  headerHeight: number
+  horizontalScrollbarSize: number
+  thumbHeight: number
+  thumbTop: number
+  trackHeight: number
+}
+
+type ObservedElements = {
+  header: HTMLElement | null
+  horizontalScrollbar: HTMLElement | null
+  table: HTMLElement | null
+  tableViewport: HTMLElement | null
+}
+
+type DataGridScrollAreaProps = Omit<
+  ScrollAreaPrimitive.Root.Props,
+  "children"
+> & {
+  children: ReactNode
+  orientation?: DataGridScrollAreaOrientation
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function areMetricsEqual(next: ScrollbarMetrics, prev: ScrollbarMetrics) {
+  return (
+    next.hasVerticalOverflow === prev.hasVerticalOverflow &&
+    next.headerHeight === prev.headerHeight &&
+    next.horizontalScrollbarSize === prev.horizontalScrollbarSize &&
+    next.thumbHeight === prev.thumbHeight &&
+    next.thumbTop === prev.thumbTop &&
+    next.trackHeight === prev.trackHeight
+  )
+}
+
+function applyMetrics(element: HTMLElement, metrics: ScrollbarMetrics) {
+  element.style.setProperty(
+    "--data-grid-scrollbar-header-height",
+    `${metrics.headerHeight}px`
+  )
+  element.style.setProperty(
+    "--data-grid-scrollbar-thumb-height",
+    `${metrics.thumbHeight}px`
+  )
+  element.style.setProperty(
+    "--data-grid-scrollbar-thumb-top",
+    `${metrics.thumbTop}px`
+  )
+  element.style.setProperty(
+    "--data-grid-scrollbar-track-height",
+    `${metrics.trackHeight}px`
+  )
+}
+
+function DataGridScrollArea({
+  children,
+  className,
+  orientation = "both",
+  ...props
+}: DataGridScrollAreaProps) {
+  const { props: dataGridProps } = useDataGrid()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const viewportRef = useRef<HTMLDivElement | null>(null)
+  const dragRef = useRef<{
+    pointerId: number
+    startScrollTop: number
+    startY: number
+  } | null>(null)
+  const metricsRef = useRef<ScrollbarMetrics>(INITIAL_METRICS)
+  const observedElementsRef = useRef<ObservedElements>({
+    header: null,
+    horizontalScrollbar: null,
+    table: null,
+    tableViewport: null,
+  })
+
+  const showHorizontal = orientation !== "vertical"
+  const showVertical = orientation !== "horizontal"
+  const usesCustomVerticalScrollbar =
+    showVertical && !!dataGridProps.tableLayout?.headerSticky
+  const [hasCustomVerticalOverflow, setHasCustomVerticalOverflow] =
+    useState(false)
+
+  const clearDragState = useCallback(() => {
+    dragRef.current = null
+    document.body.style.userSelect = ""
+    document.body.style.webkitUserSelect = ""
+  }, [])
+
+  const resetMetrics = useCallback(() => {
+    const container = containerRef.current
+
+    if (container && !areMetricsEqual(INITIAL_METRICS, metricsRef.current)) {
+      applyMetrics(container, INITIAL_METRICS)
+      metricsRef.current = INITIAL_METRICS
+    }
+
+    setHasCustomVerticalOverflow((prev) => (prev ? false : prev))
+  }, [])
+
+  const syncCustomVerticalScrollbar = useCallback(() => {
+    const container = containerRef.current
+    const viewport = viewportRef.current
+
+    if (!container || !viewport || !usesCustomVerticalScrollbar) {
+      resetMetrics()
+      return
+    }
+
+    const { header, horizontalScrollbar } = observedElementsRef.current
+    const headerHeight = header?.getBoundingClientRect().height ?? 0
+    const viewportHeight = viewport.clientHeight
+    const viewportWidth = viewport.clientWidth
+    const scrollHeight = viewport.scrollHeight
+    const scrollWidth = viewport.scrollWidth
+    const hasHorizontalOverflow =
+      showHorizontal && scrollWidth > viewportWidth + 0.5
+    const horizontalScrollbarSize = hasHorizontalOverflow
+      ? horizontalScrollbar?.offsetHeight || FALLBACK_SCROLLBAR_SIZE
+      : 0
+    const trackHeight = Math.max(
+      0,
+      viewportHeight - headerHeight - horizontalScrollbarSize
+    )
+    const maxScroll = Math.max(0, scrollHeight - viewportHeight)
+
+    let nextMetrics: ScrollbarMetrics
+
+    if (trackHeight === 0 || maxScroll === 0) {
+      nextMetrics = {
+        hasVerticalOverflow: false,
+        headerHeight,
+        horizontalScrollbarSize,
+        thumbHeight: trackHeight,
+        thumbTop: 0,
+        trackHeight,
+      }
+    } else {
+      const bodyContentHeight = Math.max(
+        trackHeight,
+        scrollHeight - headerHeight
+      )
+      const thumbHeight = clamp(
+        trackHeight * (trackHeight / bodyContentHeight),
+        MIN_THUMB_SIZE,
+        trackHeight
+      )
+      const maxThumbTop = Math.max(0, trackHeight - thumbHeight)
+      const thumbTop =
+        maxThumbTop > 0 ? (viewport.scrollTop / maxScroll) * maxThumbTop : 0
+
+      nextMetrics = {
+        hasVerticalOverflow: true,
+        headerHeight,
+        horizontalScrollbarSize,
+        thumbHeight,
+        thumbTop,
+        trackHeight,
+      }
+    }
+
+    if (!areMetricsEqual(nextMetrics, metricsRef.current)) {
+      applyMetrics(container, nextMetrics)
+      metricsRef.current = nextMetrics
+    }
+
+    setHasCustomVerticalOverflow((prev) =>
+      prev === nextMetrics.hasVerticalOverflow
+        ? prev
+        : nextMetrics.hasVerticalOverflow
+    )
+  }, [resetMetrics, showHorizontal, usesCustomVerticalScrollbar])
+
+  useEffect(() => {
+    const container = containerRef.current
+    const viewport = viewportRef.current
+
+    if (!container || !viewport) return
+
+    if (!usesCustomVerticalScrollbar) {
+      resetMetrics()
+      return
+    }
+
+    observedElementsRef.current = {
+      header: container.querySelector(
+        '[data-slot="data-grid-table"] thead'
+      ) as HTMLElement | null,
+      horizontalScrollbar: container.querySelector(
+        '[data-slot="data-grid-scrollbar"][data-orientation="horizontal"]'
+      ) as HTMLElement | null,
+      table: container.querySelector(
+        '[data-slot="data-grid-table"]'
+      ) as HTMLElement | null,
+      tableViewport: container.querySelector(
+        '[data-slot="data-grid-table-viewport"]'
+      ) as HTMLElement | null,
+    }
+
+    let frame = 0
+
+    const scheduleSync = () => {
+      cancelAnimationFrame(frame)
+      frame = window.requestAnimationFrame(syncCustomVerticalScrollbar)
+    }
+
+    scheduleSync()
+    viewport.addEventListener("scroll", scheduleSync, { passive: true })
+
+    const observer =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(scheduleSync)
+
+    observer?.observe(viewport)
+    observedElementsRef.current.header &&
+      observer?.observe(observedElementsRef.current.header)
+    observedElementsRef.current.table &&
+      observer?.observe(observedElementsRef.current.table)
+    observedElementsRef.current.tableViewport &&
+      observer?.observe(observedElementsRef.current.tableViewport)
+
+    return () => {
+      cancelAnimationFrame(frame)
+      observer?.disconnect()
+      viewport.removeEventListener("scroll", scheduleSync)
+      clearDragState()
+    }
+  }, [
+    clearDragState,
+    resetMetrics,
+    syncCustomVerticalScrollbar,
+    usesCustomVerticalScrollbar,
+  ])
+
+  const scrollToThumbOffset = (nextThumbTop: number) => {
+    const viewport = viewportRef.current
+    const { thumbHeight, trackHeight } = metricsRef.current
+
+    if (!viewport) return
+
+    const maxScroll = Math.max(0, viewport.scrollHeight - viewport.clientHeight)
+    const maxThumbTop = Math.max(0, trackHeight - thumbHeight)
+
+    if (maxScroll === 0 || maxThumbTop === 0) {
+      viewport.scrollTop = 0
+      return
+    }
+
+    const ratio = clamp(nextThumbTop, 0, maxThumbTop) / maxThumbTop
+    viewport.scrollTop = ratio * maxScroll
+  }
+
+  const handleThumbPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    const viewport = viewportRef.current
+
+    if (!viewport) return
+
+    event.preventDefault()
+    event.stopPropagation()
+    event.currentTarget.setPointerCapture(event.pointerId)
+
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startScrollTop: viewport.scrollTop,
+      startY: event.clientY,
+    }
+
+    document.body.style.userSelect = "none"
+    document.body.style.webkitUserSelect = "none"
+  }
+
+  const handleThumbPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    const viewport = viewportRef.current
+    const dragState = dragRef.current
+    const { thumbHeight, trackHeight } = metricsRef.current
+
+    if (!viewport || !dragState || dragState.pointerId !== event.pointerId) {
+      return
+    }
+
+    const maxThumbTop = Math.max(0, trackHeight - thumbHeight)
+    const maxScroll = Math.max(0, viewport.scrollHeight - viewport.clientHeight)
+
+    if (maxThumbTop === 0 || maxScroll === 0) return
+
+    const deltaY = event.clientY - dragState.startY
+    const nextScrollTop =
+      dragState.startScrollTop + (deltaY / maxThumbTop) * maxScroll
+
+    viewport.scrollTop = clamp(nextScrollTop, 0, maxScroll)
+  }
+
+  const handleThumbPointerUp = (event: PointerEvent<HTMLDivElement>) => {
+    if (dragRef.current?.pointerId !== event.pointerId) return
+    clearDragState()
+  }
+
+  const handleTrackPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    const { thumbHeight } = metricsRef.current
+
+    if (event.target !== event.currentTarget) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const rect = event.currentTarget.getBoundingClientRect()
+    const offsetY = event.clientY - rect.top - thumbHeight / 2
+
+    scrollToThumbOffset(offsetY)
+  }
+
+  return (
+    <div ref={containerRef} className="relative">
+      <ScrollAreaPrimitive.Root
+        data-slot="data-grid-scroll-area"
+        className={cn("relative", className)}
+        {...props}
+      >
+        <ScrollAreaPrimitive.Viewport
+          ref={viewportRef}
+          data-slot="scroll-area-viewport"
+          className="size-full"
+        >
+          <ScrollAreaPrimitive.Content data-slot="scroll-area-content">
+            {children}
+          </ScrollAreaPrimitive.Content>
+        </ScrollAreaPrimitive.Viewport>
+
+        {showHorizontal && (
+          <ScrollAreaPrimitive.Scrollbar
+            data-slot="data-grid-scrollbar"
+            data-orientation="horizontal"
+            orientation="horizontal"
+            className="flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent"
+          >
+            <ScrollAreaPrimitive.Thumb
+              data-slot="data-grid-thumb"
+              className="bg-border rounded-full relative flex-1"
+            />
+          </ScrollAreaPrimitive.Scrollbar>
+        )}
+
+        {showVertical && !usesCustomVerticalScrollbar && (
+          <ScrollAreaPrimitive.Scrollbar
+            data-slot="data-grid-scrollbar"
+            data-orientation="vertical"
+            orientation="vertical"
+            className="flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent"
+          >
+            <ScrollAreaPrimitive.Thumb
+              data-slot="data-grid-thumb"
+              className="bg-border rounded-full relative flex-1"
+            />
+          </ScrollAreaPrimitive.Scrollbar>
+        )}
+      </ScrollAreaPrimitive.Root>
+
+      {usesCustomVerticalScrollbar && hasCustomVerticalOverflow && (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-e-0 top-(--data-grid-scrollbar-header-height) z-20 h-(--data-grid-scrollbar-track-height)"
+        >
+          <div
+            className="pointer-events-auto relative h-full w-2 touch-none p-px"
+            onPointerDown={handleTrackPointerDown}
+          >
+            <div
+              className={cn(
+                "bg-border absolute end-px w-2",
+                "top-(--data-grid-scrollbar-thumb-top) h-(--data-grid-scrollbar-thumb-height)",
+                "rounded-full"
+              )}
+              onLostPointerCapture={clearDragState}
+              onPointerCancel={handleThumbPointerUp}
+              onPointerDown={handleThumbPointerDown}
+              onPointerMove={handleThumbPointerMove}
+              onPointerUp={handleThumbPointerUp}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { DataGridScrollArea }
+export type { DataGridScrollAreaOrientation, DataGridScrollAreaProps }

apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx

@@ -0,0 +1,307 @@
+import {
+  createContext,
+  CSSProperties,
+  ReactNode,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import {
+  DataGridTableBase,
+  DataGridTableBody,
+  DataGridTableBodyRow,
+  DataGridTableBodyRowCell,
+  DataGridTableBodyRowSkeleton,
+  DataGridTableBodyRowSkeletonCell,
+  DataGridTableEmpty,
+  DataGridTableFoot,
+  DataGridTableHead,
+  DataGridTableHeadRow,
+  DataGridTableHeadRowCell,
+  DataGridTableHeadRowCellResize,
+  DataGridTableRowSpacer,
+  DataGridTableViewport,
+} from "@/components/reui/data-grid/data-grid-table"
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  UniqueIdentifier,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type Modifier,
+} from "@dnd-kit/core"
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { Cell, flexRender, HeaderGroup, Row } from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { GripHorizontalIcon } from "lucide-react"
+
+// Context to share sortable listeners from row to handle
+type SortableContextValue = ReturnType<typeof useSortable>
+const SortableRowContext = createContext<Pick<
+  SortableContextValue,
+  "attributes" | "listeners"
+> | null>(null)
+
+function DataGridTableDndRowHandle({ className }: { className?: string }) {
+  const context = useContext(SortableRowContext)
+
+  if (!context) {
+    // Fallback if context is not available (shouldn't happen in normal usage)
+    return (
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        className={cn(
+          "size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing",
+          className
+        )}
+        disabled
+      >
+        <GripHorizontalIcon
+        />
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      className={cn(
+        "size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing",
+        className
+      )}
+      {...context.attributes}
+      {...context.listeners}
+    >
+      <GripHorizontalIcon
+      />
+    </Button>
+  )
+}
+
+function DataGridTableDndRow<TData>({ row }: { row: Row<TData> }) {
+  const {
+    transform,
+    transition,
+    setNodeRef,
+    isDragging,
+    attributes,
+    listeners,
+  } = useSortable({
+    id: row.id,
+  })
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition,
+    opacity: isDragging ? 0.8 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: "relative",
+    cursor: isDragging ? "grabbing" : undefined,
+  }
+
+  return (
+    <SortableRowContext.Provider value={{ attributes, listeners }}>
+      <DataGridTableBodyRow
+        row={row}
+        dndRef={setNodeRef}
+        dndStyle={style}
+        key={row.id}
+      >
+        {row.getVisibleCells().map((cell: Cell<TData, unknown>, colIndex) => {
+          return (
+            <DataGridTableBodyRowCell cell={cell} key={colIndex}>
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </DataGridTableBodyRowCell>
+          )
+        })}
+      </DataGridTableBodyRow>
+    </SortableRowContext.Provider>
+  )
+}
+
+function DataGridTableDndRows<TData>({
+  handleDragEnd,
+  dataIds,
+  footerContent,
+}: {
+  handleDragEnd: (event: DragEndEvent) => void
+  dataIds: UniqueIdentifier[]
+  footerContent?: ReactNode
+}) {
+  const { table, isLoading, props } = useDataGrid()
+  const pagination = table.getState().pagination
+  const tableContainerRef = useRef<HTMLDivElement>(null)
+  const [isDraggingRow, setIsDraggingRow] = useState(false)
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  )
+
+  useEffect(() => {
+    if (!isDraggingRow) return
+
+    const { body, documentElement } = document
+    const previousBodyCursor = body.style.cursor
+    const previousDocumentCursor = documentElement.style.cursor
+
+    body.style.cursor = "grabbing"
+    documentElement.style.cursor = "grabbing"
+
+    return () => {
+      body.style.cursor = previousBodyCursor
+      documentElement.style.cursor = previousDocumentCursor
+    }
+  }, [isDraggingRow])
+
+  const modifiers = useMemo(() => {
+    const restrictToTableContainer: Modifier = ({
+      transform,
+      draggingNodeRect,
+    }) => {
+      if (!tableContainerRef.current || !draggingNodeRect) {
+        return transform
+      }
+
+      const containerRect = tableContainerRef.current.getBoundingClientRect()
+      const { x, y } = transform
+
+      const minX = containerRect.left - draggingNodeRect.left
+      const maxX = containerRect.right - draggingNodeRect.right
+      const minY = containerRect.top - draggingNodeRect.top
+      const maxY = containerRect.bottom - draggingNodeRect.bottom
+
+      return {
+        ...transform,
+        x: Math.max(minX, Math.min(maxX, x)),
+        y: Math.max(minY, Math.min(maxY, y)),
+      }
+    }
+
+    return [restrictToVerticalAxis, restrictToTableContainer]
+  }, [])
+
+  return (
+    <DndContext
+      id={useId()}
+      collisionDetection={closestCenter}
+      modifiers={modifiers}
+      onDragCancel={() => setIsDraggingRow(false)}
+      onDragEnd={(event) => {
+        setIsDraggingRow(false)
+        handleDragEnd(event)
+      }}
+      onDragStart={() => setIsDraggingRow(true)}
+      sensors={sensors}
+    >
+      <DataGridTableViewport
+        viewportRef={tableContainerRef}
+        className={
+          isDraggingRow
+            ? "relative cursor-grabbing [&_*]:cursor-grabbing!"
+            : "relative"
+        }
+      >
+        <DataGridTableBase>
+          <DataGridTableHead>
+            {table
+              .getHeaderGroups()
+              .map((headerGroup: HeaderGroup<TData>, index) => {
+                return (
+                  <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
+                    {headerGroup.headers.map((header, index) => {
+                      const { column } = header
+
+                      return (
+                        <DataGridTableHeadRowCell header={header} key={index}>
+                          {header.isPlaceholder ? null : props.tableLayout
+                              ?.columnsResizable && column.getCanResize() ? (
+                            <div className="truncate">
+                              {flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                            </div>
+                          ) : (
+                            flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )
+                          )}
+                          {props.tableLayout?.columnsResizable &&
+                            column.getCanResize() && (
+                              <DataGridTableHeadRowCellResize header={header} />
+                            )}
+                        </DataGridTableHeadRowCell>
+                      )
+                    })}
+                  </DataGridTableHeadRow>
+                )
+              })}
+          </DataGridTableHead>
+
+          {(props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
+            <DataGridTableRowSpacer />
+          )}
+
+          <DataGridTableBody>
+            {props.loadingMode === "skeleton" &&
+            isLoading &&
+            pagination?.pageSize ? (
+              Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
+                <DataGridTableBodyRowSkeleton key={rowIndex}>
+                  {table.getVisibleFlatColumns().map((column, colIndex) => {
+                    return (
+                      <DataGridTableBodyRowSkeletonCell
+                        column={column}
+                        key={colIndex}
+                      >
+                        {column.columnDef.meta?.skeleton}
+                      </DataGridTableBodyRowSkeletonCell>
+                    )
+                  })}
+                </DataGridTableBodyRowSkeleton>
+              ))
+            ) : table.getRowModel().rows.length ? (
+              <SortableContext
+                items={dataIds}
+                strategy={verticalListSortingStrategy}
+              >
+                {table.getRowModel().rows.map((row: Row<TData>) => {
+                  return <DataGridTableDndRow row={row} key={row.id} />
+                })}
+              </SortableContext>
+            ) : (
+              <DataGridTableEmpty />
+            )}
+          </DataGridTableBody>
+
+          {footerContent && (
+            <DataGridTableFoot>{footerContent}</DataGridTableFoot>
+          )}
+        </DataGridTableBase>
+      </DataGridTableViewport>
+    </DndContext>
+  )
+}
+
+export { DataGridTableDndRowHandle, DataGridTableDndRows }

apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx

@@ -0,0 +1,314 @@
+"use client"
+
+import {
+  CSSProperties,
+  Fragment,
+  ReactNode,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import {
+  DataGridTableBase,
+  DataGridTableBody,
+  DataGridTableBodyRow,
+  DataGridTableBodyRowCell,
+  DataGridTableBodyRowExpandded,
+  DataGridTableBodyRowSkeleton,
+  DataGridTableBodyRowSkeletonCell,
+  DataGridTableEmpty,
+  DataGridTableFoot,
+  DataGridTableHead,
+  DataGridTableHeadRow,
+  DataGridTableHeadRowCell,
+  DataGridTableHeadRowCellResize,
+  DataGridTableRowSpacer,
+  DataGridTableViewport,
+} from "@/components/reui/data-grid/data-grid-table"
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  Modifier,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core"
+import {
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import {
+  Cell,
+  flexRender,
+  Header,
+  HeaderGroup,
+  Row,
+} from "@tanstack/react-table"
+
+import { Button } from "@evobgp/ui/components/button"
+import { GripVerticalIcon } from "lucide-react"
+
+function DataGridTableDndHeader<TData>({
+  header,
+}: {
+  header: Header<TData, unknown>
+}) {
+  const { props } = useDataGrid()
+  const { column } = header
+
+  // Check if column ordering is enabled for this column
+  const canOrder =
+    (column.columnDef as { enableColumnOrdering?: boolean })
+      .enableColumnOrdering !== false
+
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id: header.column.id,
+  })
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition,
+    cursor: isDragging ? "grabbing" : undefined,
+    whiteSpace: "nowrap",
+    width: props.tableLayout?.columnsResizable
+      ? `calc(var(--header-${header.id}-size) * 1px)`
+      : header.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  }
+
+  return (
+    <DataGridTableHeadRowCell
+      header={header}
+      dndStyle={style}
+      dndRef={setNodeRef}
+    >
+      <div className="flex items-center justify-start gap-0.5">
+        {canOrder && (
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            className={`-ms-2 size-6 ${isDragging ? "cursor-grabbing" : "cursor-grab active:cursor-grabbing"}`}
+            {...attributes}
+            {...listeners}
+            aria-label="Drag to reorder"
+          >
+            <GripVerticalIcon className="opacity-60 hover:opacity-100" aria-hidden="true" />
+          </Button>
+        )}
+        <span className="grow truncate">
+          {header.isPlaceholder
+            ? null
+            : flexRender(header.column.columnDef.header, header.getContext())}
+        </span>
+        {props.tableLayout?.columnsResizable && column.getCanResize() && (
+          <DataGridTableHeadRowCellResize header={header} />
+        )}
+      </div>
+    </DataGridTableHeadRowCell>
+  )
+}
+
+function DataGridTableDndCell<TData>({ cell }: { cell: Cell<TData, unknown> }) {
+  const { props } = useDataGrid()
+  const { isDragging, setNodeRef, transform, transition } = useSortable({
+    id: cell.column.id,
+  })
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition,
+    cursor: isDragging ? "grabbing" : undefined,
+    width: props.tableLayout?.columnsResizable
+      ? `calc(var(--col-${cell.column.id}-size) * 1px)`
+      : cell.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  }
+
+  return (
+    <DataGridTableBodyRowCell cell={cell} dndStyle={style} dndRef={setNodeRef}>
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </DataGridTableBodyRowCell>
+  )
+}
+
+function DataGridTableDnd<TData>({
+  handleDragEnd,
+  footerContent,
+}: {
+  handleDragEnd: (event: DragEndEvent) => void
+  footerContent?: ReactNode
+}) {
+  const { table, isLoading, props } = useDataGrid()
+  const pagination = table.getState().pagination
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isDraggingColumn, setIsDraggingColumn] = useState(false)
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  )
+
+  useEffect(() => {
+    if (!isDraggingColumn) return
+
+    const { body, documentElement } = document
+    const previousBodyCursor = body.style.cursor
+    const previousDocumentCursor = documentElement.style.cursor
+
+    body.style.cursor = "grabbing"
+    documentElement.style.cursor = "grabbing"
+
+    return () => {
+      body.style.cursor = previousBodyCursor
+      documentElement.style.cursor = previousDocumentCursor
+    }
+  }, [isDraggingColumn])
+
+  // Custom modifier to restrict dragging within table bounds with edge offset
+  const restrictToTableBounds: Modifier = ({ draggingNodeRect, transform }) => {
+    if (!draggingNodeRect || !containerRef.current) {
+      return { ...transform, y: 0 }
+    }
+
+    const containerRect = containerRef.current.getBoundingClientRect()
+    const edgeOffset = 0
+
+    const minX = containerRect.left - draggingNodeRect.left - edgeOffset
+    const maxX =
+      containerRect.right -
+      draggingNodeRect.left -
+      draggingNodeRect.width +
+      edgeOffset
+
+    return {
+      ...transform,
+      x: Math.min(Math.max(transform.x, minX), maxX),
+      y: 0, // Lock vertical movement
+    }
+  }
+
+  return (
+    <DndContext
+      collisionDetection={closestCenter}
+      id={useId()}
+      modifiers={[restrictToTableBounds]}
+      onDragCancel={() => setIsDraggingColumn(false)}
+      onDragEnd={(event) => {
+        setIsDraggingColumn(false)
+        handleDragEnd(event)
+      }}
+      onDragStart={() => setIsDraggingColumn(true)}
+      sensors={sensors}
+    >
+      <DataGridTableViewport
+        viewportRef={containerRef}
+        className={
+          isDraggingColumn
+            ? "relative cursor-grabbing [&_*]:cursor-grabbing!"
+            : "relative"
+        }
+      >
+        <DataGridTableBase>
+          <DataGridTableHead>
+            {table
+              .getHeaderGroups()
+              .map((headerGroup: HeaderGroup<TData>, index) => {
+                return (
+                  <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
+                    <SortableContext
+                      items={table.getState().columnOrder}
+                      strategy={horizontalListSortingStrategy}
+                    >
+                      {headerGroup.headers.map((header) => (
+                        <DataGridTableDndHeader
+                          header={header}
+                          key={header.id}
+                        />
+                      ))}
+                    </SortableContext>
+                  </DataGridTableHeadRow>
+                )
+              })}
+          </DataGridTableHead>
+
+          {(props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
+            <DataGridTableRowSpacer />
+          )}
+
+          <DataGridTableBody>
+            {props.loadingMode === "skeleton" &&
+            isLoading &&
+            pagination?.pageSize ? (
+              Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
+                <DataGridTableBodyRowSkeleton key={rowIndex}>
+                  {table.getVisibleFlatColumns().map((column, colIndex) => {
+                    return (
+                      <DataGridTableBodyRowSkeletonCell
+                        column={column}
+                        key={colIndex}
+                      >
+                        {column.columnDef.meta?.skeleton}
+                      </DataGridTableBodyRowSkeletonCell>
+                    )
+                  })}
+                </DataGridTableBodyRowSkeleton>
+              ))
+            ) : table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row: Row<TData>) => {
+                return (
+                  <Fragment key={row.id}>
+                    <DataGridTableBodyRow row={row}>
+                      {row
+                        .getVisibleCells()
+                        .map((cell: Cell<TData, unknown>) => {
+                          return (
+                            <SortableContext
+                              key={cell.id}
+                              items={table.getState().columnOrder}
+                              strategy={horizontalListSortingStrategy}
+                            >
+                              <DataGridTableDndCell cell={cell} />
+                            </SortableContext>
+                          )
+                        })}
+                    </DataGridTableBodyRow>
+                    {row.getIsExpanded() && (
+                      <DataGridTableBodyRowExpandded row={row} />
+                    )}
+                  </Fragment>
+                )
+              })
+            ) : (
+              <DataGridTableEmpty />
+            )}
+          </DataGridTableBody>
+
+          {footerContent && (
+            <DataGridTableFoot>{footerContent}</DataGridTableFoot>
+          )}
+        </DataGridTableBase>
+      </DataGridTableViewport>
+    </DndContext>
+  )
+}
+
+export { DataGridTableDnd }

apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx

@@ -0,0 +1,490 @@
+import {
+  memo,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import {
+  DataGridTableBase,
+  DataGridTableBody,
+  DataGridTableEmpty,
+  DataGridTableFoot,
+  DataGridTableHead,
+  DataGridTableHeadRow,
+  DataGridTableHeadRowCell,
+  DataGridTableHeadRowCellResize,
+  DataGridTableRenderedRow,
+  DataGridTableRowSpacer,
+  DataGridTableViewport,
+  getDataGridTableRowSections,
+} from "@/components/reui/data-grid/data-grid-table"
+import { flexRender, HeaderGroup, Row, Table } from "@tanstack/react-table"
+import {
+  useVirtualizer,
+  VirtualItem,
+  Virtualizer,
+  VirtualizerOptions,
+} from "@tanstack/react-virtual"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Spinner } from "@evobgp/ui/components/spinner"
+
+type DataGridTableVirtualScrollElements = {
+  containerElement: HTMLDivElement | null
+  scrollElement: HTMLElement | null
+}
+
+type DataGridTableVirtualizerInstance = Virtualizer<
+  HTMLElement,
+  HTMLTableRowElement
+>
+
+type DataGridTableVirtualizerOptions<TData> = Omit<
+  VirtualizerOptions<HTMLElement, HTMLTableRowElement>,
+  "count" | "estimateSize" | "getItemKey" | "getScrollElement"
+> & {
+  estimateSize?: (index: number, row: Row<TData>) => number
+  getItemKey?: (index: number, row: Row<TData>) => string | number
+  getScrollElement?: (
+    elements: DataGridTableVirtualScrollElements
+  ) => HTMLElement | null
+}
+
+interface DataGridTableVirtualProps<TData> {
+  height?: number | string
+  estimateSize?: number
+  overscan?: number
+  footerContent?: ReactNode
+  renderHeader?: boolean
+  onFetchMore?: () => void
+  isFetchingMore?: boolean
+  hasMore?: boolean
+  fetchMoreOffset?: number
+  virtualizerOptions?: DataGridTableVirtualizerOptions<TData>
+}
+
+interface VirtualBodyProps<TData> {
+  table: Table<TData>
+  columnCount: number
+  topRows: Row<TData>[]
+  centerRows: Row<TData>[]
+  bottomRows: Row<TData>[]
+  virtualItems: VirtualItem[]
+  totalSize: number
+  isVirtualizationEnabled: boolean
+  isInfiniteMode: boolean
+  isFetchingMore: boolean
+  hasMore?: boolean
+  loadingMoreMessage: ReactNode
+  allRowsLoadedMessage: ReactNode
+  measureRowRef?: (element: HTMLTableRowElement | null) => void
+}
+
+function DataGridTableVirtualSpacer({
+  columnCount,
+  height,
+}: {
+  columnCount: number
+  height: number
+}) {
+  if (height <= 0) return null
+
+  return (
+    <tr aria-hidden="true">
+      <td colSpan={columnCount} style={{ height, padding: 0 }} />
+    </tr>
+  )
+}
+
+function DataGridTableVirtualStatusRow({
+  children,
+  className,
+  columnCount,
+}: {
+  children: ReactNode
+  className?: string
+  columnCount: number
+}) {
+  return (
+    <tr>
+      <td
+        colSpan={columnCount}
+        className={cn(
+          "text-muted-foreground py-4 text-center text-sm",
+          className
+        )}
+      >
+        {children}
+      </td>
+    </tr>
+  )
+}
+
+function DataGridTableVirtualBody<TData>({
+  table,
+  columnCount,
+  topRows,
+  centerRows,
+  bottomRows,
+  virtualItems,
+  totalSize,
+  isVirtualizationEnabled,
+  isInfiniteMode,
+  isFetchingMore,
+  hasMore,
+  loadingMoreMessage,
+  allRowsLoadedMessage,
+  measureRowRef,
+}: VirtualBodyProps<TData>) {
+  const totalRows = topRows.length + centerRows.length + bottomRows.length
+
+  if (!totalRows) return <DataGridTableEmpty />
+
+  const hasCenterRows = centerRows.length > 0
+  const showFetchingRow = isInfiniteMode && isFetchingMore
+  const showCompleteRow = isInfiniteMode && hasMore === false && totalRows > 0
+  const hasMiddleSection = hasCenterRows || showFetchingRow || showCompleteRow
+  const leadingSpacerHeight =
+    isVirtualizationEnabled && hasCenterRows && virtualItems.length > 0
+      ? (virtualItems[0]?.start ?? 0)
+      : 0
+  const trailingSpacerHeight =
+    isVirtualizationEnabled && hasCenterRows && virtualItems.length > 0
+      ? Math.max(
+          0,
+          totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)
+        )
+      : 0
+
+  const renderedRows: ReactNode[] = []
+
+  topRows.forEach((row, index) => {
+    renderedRows.push(
+      <DataGridTableRenderedRow
+        key={row.id}
+        row={row}
+        pinnedBoundary={
+          index === topRows.length - 1 && hasMiddleSection ? "top" : undefined
+        }
+      />
+    )
+  })
+
+  if (isVirtualizationEnabled) {
+    if (leadingSpacerHeight > 0) {
+      renderedRows.push(
+        <DataGridTableVirtualSpacer
+          key="virtual-spacer-start"
+          columnCount={columnCount}
+          height={leadingSpacerHeight}
+        />
+      )
+    }
+
+    virtualItems.forEach((virtualRow) => {
+      const row = centerRows[virtualRow.index]
+
+      if (!row) return
+
+      renderedRows.push(
+        <DataGridTableRenderedRow
+          key={row.id}
+          row={row}
+          rowRef={measureRowRef}
+        />
+      )
+    })
+
+    if (trailingSpacerHeight > 0) {
+      renderedRows.push(
+        <DataGridTableVirtualSpacer
+          key="virtual-spacer-end"
+          columnCount={columnCount}
+          height={trailingSpacerHeight}
+        />
+      )
+    }
+  } else {
+    centerRows.forEach((row) => {
+      renderedRows.push(<DataGridTableRenderedRow key={row.id} row={row} />)
+    })
+  }
+
+  if (showFetchingRow) {
+    renderedRows.push(
+      <DataGridTableVirtualStatusRow
+        key="virtual-status-loading"
+        columnCount={columnCount}
+      >
+        <div className="flex items-center justify-center gap-2">
+          <Spinner className="size-4 opacity-60" />
+          {loadingMoreMessage}
+        </div>
+      </DataGridTableVirtualStatusRow>
+    )
+  }
+
+  if (showCompleteRow) {
+    renderedRows.push(
+      <DataGridTableVirtualStatusRow
+        key="virtual-status-complete"
+        columnCount={columnCount}
+        className="py-3 text-xs"
+      >
+        {allRowsLoadedMessage}
+      </DataGridTableVirtualStatusRow>
+    )
+  }
+
+  bottomRows.forEach((row, index) => {
+    renderedRows.push(
+      <DataGridTableRenderedRow
+        key={row.id}
+        row={row}
+        pinnedBoundary={
+          index === 0 && (topRows.length > 0 || hasMiddleSection)
+            ? "bottom"
+            : undefined
+        }
+      />
+    )
+  })
+
+  return <>{renderedRows}</>
+}
+
+/**
+ * Memoized virtual body: skip re-renders during active column resize.
+ * Column widths update via CSS variables on the <table> element,
+ * so the browser handles width changes without React re-renders.
+ */
+const MemoizedVirtualBody = memo(
+  DataGridTableVirtualBody,
+  (_prev, next) => !!next.table.getState().columnSizingInfo.isResizingColumn
+) as typeof DataGridTableVirtualBody
+
+function DataGridTableVirtual<TData>({
+  height,
+  estimateSize = 48,
+  overscan = 10,
+  footerContent,
+  renderHeader = true,
+  onFetchMore,
+  isFetchingMore = false,
+  hasMore,
+  fetchMoreOffset = 0,
+  virtualizerOptions,
+}: DataGridTableVirtualProps<TData>) {
+  const { table, props } = useDataGrid()
+  const { topRows, centerRows, bottomRows } = getDataGridTableRowSections(
+    table,
+    props.tableLayout?.rowsPinnable
+  )
+  const columnCount =
+    table.getVisibleFlatColumns().length +
+    (props.tableLayout?.columnsResizable ? 1 : 0)
+  const isInfiniteMode = typeof onFetchMore === "function"
+  const [viewportElements, setViewportElements] =
+    useState<DataGridTableVirtualScrollElements>({
+      containerElement: null,
+      scrollElement: null,
+    })
+
+  const {
+    estimateSize: customEstimateSize,
+    getItemKey: customGetItemKey,
+    getScrollElement: customGetScrollElement,
+    measureElement: customMeasureElement,
+    overscan: customOverscan,
+    ...virtualizerOptionsRest
+  } = virtualizerOptions ?? {}
+
+  const isVirtualizationEnabled = virtualizerOptions?.enabled !== false
+  const loadingMoreMessage =
+    props.fetchingMoreMessage || props.loadingMessage || "Loading..."
+  const allRowsLoadedMessage =
+    props.allRowsLoadedMessage || "All records loaded"
+
+  const handleViewportRef = useCallback((node: HTMLDivElement | null) => {
+    setViewportElements({
+      containerElement: node,
+      scrollElement:
+        (node?.closest(
+          '[data-slot="scroll-area-viewport"]'
+        ) as HTMLElement | null) ?? node,
+    })
+  }, [])
+
+  const usesExternalScrollArea =
+    viewportElements.scrollElement !== null &&
+    viewportElements.scrollElement !== viewportElements.containerElement
+
+  const resolveScrollElement = useCallback(() => {
+    if (customGetScrollElement) {
+      return customGetScrollElement(viewportElements)
+    }
+
+    return viewportElements.scrollElement
+  }, [customGetScrollElement, viewportElements])
+
+  const resolveItemKey = useCallback(
+    (index: number) => {
+      const row = centerRows[index]
+
+      if (!row) return index
+
+      return customGetItemKey?.(index, row) ?? row.id ?? index
+    },
+    [centerRows, customGetItemKey]
+  )
+
+  const resolveEstimateSize = useCallback(
+    (index: number) => {
+      const row = centerRows[index]
+
+      return row
+        ? (customEstimateSize?.(index, row) ?? estimateSize)
+        : estimateSize
+    },
+    [centerRows, customEstimateSize, estimateSize]
+  )
+
+  const virtualizer = useVirtualizer({
+    count: centerRows.length,
+    getScrollElement: resolveScrollElement,
+    getItemKey: resolveItemKey,
+    estimateSize: resolveEstimateSize,
+    overscan: customOverscan ?? overscan,
+    measureElement: customMeasureElement,
+    ...virtualizerOptionsRest,
+  }) as DataGridTableVirtualizerInstance
+
+  const virtualItems = isVirtualizationEnabled
+    ? virtualizer.getVirtualItems()
+    : []
+  const totalSize = isVirtualizationEnabled ? virtualizer.getTotalSize() : 0
+  const measureRowRef =
+    isVirtualizationEnabled && customMeasureElement
+      ? virtualizer.measureElement
+      : undefined
+  const resolvedFetchMoreOffset = useMemo(
+    () => Math.max(0, fetchMoreOffset),
+    [fetchMoreOffset]
+  )
+
+  useEffect(() => {
+    if (
+      !isVirtualizationEnabled ||
+      !isInfiniteMode ||
+      hasMore === false ||
+      isFetchingMore
+    ) {
+      return
+    }
+
+    const lastItem = virtualItems[virtualItems.length - 1]
+    if (!lastItem) return
+
+    if (lastItem.index >= centerRows.length - 1 - resolvedFetchMoreOffset) {
+      onFetchMore?.()
+    }
+  }, [
+    centerRows.length,
+    hasMore,
+    isFetchingMore,
+    isInfiniteMode,
+    isVirtualizationEnabled,
+    onFetchMore,
+    resolvedFetchMoreOffset,
+    virtualItems,
+  ])
+
+  return (
+    <DataGridTableViewport
+      viewportRef={handleViewportRef}
+      className={!usesExternalScrollArea ? "block" : undefined}
+      style={
+        usesExternalScrollArea
+          ? undefined
+          : { height, overflow: "auto", position: "relative" }
+      }
+    >
+      <DataGridTableBase>
+        {renderHeader && (
+          <DataGridTableHead>
+            {table
+              .getHeaderGroups()
+              .map((headerGroup: HeaderGroup<TData>, index) => (
+                <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
+                  {headerGroup.headers.map((header, hIndex) => {
+                    const { column } = header
+
+                    return (
+                      <DataGridTableHeadRowCell header={header} key={hIndex}>
+                        {header.isPlaceholder ? null : props.tableLayout
+                            ?.columnsResizable && column.getCanResize() ? (
+                          <div className="truncate">
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                          </div>
+                        ) : (
+                          flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )
+                        )}
+                        {props.tableLayout?.columnsResizable &&
+                          column.getCanResize() && (
+                            <DataGridTableHeadRowCellResize header={header} />
+                          )}
+                      </DataGridTableHeadRowCell>
+                    )
+                  })}
+                </DataGridTableHeadRow>
+              ))}
+          </DataGridTableHead>
+        )}
+
+        {renderHeader &&
+          (props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
+            <DataGridTableRowSpacer />
+          )}
+
+        <DataGridTableBody>
+          <MemoizedVirtualBody
+            table={table}
+            columnCount={columnCount}
+            topRows={topRows}
+            centerRows={centerRows}
+            bottomRows={bottomRows}
+            virtualItems={virtualItems}
+            totalSize={totalSize}
+            isVirtualizationEnabled={isVirtualizationEnabled}
+            isInfiniteMode={isInfiniteMode}
+            isFetchingMore={isFetchingMore}
+            hasMore={hasMore}
+            loadingMoreMessage={loadingMoreMessage}
+            allRowsLoadedMessage={allRowsLoadedMessage}
+            measureRowRef={measureRowRef}
+          />
+        </DataGridTableBody>
+
+        {footerContent && (
+          <DataGridTableFoot>{footerContent}</DataGridTableFoot>
+        )}
+      </DataGridTableBase>
+    </DataGridTableViewport>
+  )
+}
+
+export { DataGridTableVirtual }
+export type {
+  DataGridTableVirtualProps,
+  DataGridTableVirtualScrollElements,
+  DataGridTableVirtualizerOptions,
+}

apps/web/src/components/reui/data-grid/data-grid.tsx

@@ -0,0 +1,268 @@
+import { createContext, ReactNode, useContext, useMemo } from "react"
+import {
+  Column,
+  ColumnFiltersState,
+  RowData,
+  SortingState,
+  Table,
+} from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    headerTitle?: string
+    headerClassName?: string
+    cellClassName?: string
+    skeleton?: ReactNode
+    expandedContent?: (row: TData) => ReactNode
+  }
+}
+
+/** Label for headers / column visibility: `meta.headerTitle`, string `columnDef.header`, or `column.id`. */
+export function getColumnHeaderLabel<TData, TValue>(
+  column: Column<TData, TValue>
+): string {
+  const meta = column.columnDef.meta as { headerTitle?: string } | undefined
+  if (typeof meta?.headerTitle === "string") return meta.headerTitle
+  const defHeader = column.columnDef.header
+  if (typeof defHeader === "string") return defHeader
+  return String(column.id)
+}
+
+export type DataGridApiFetchParams = {
+  pageIndex: number
+  pageSize: number
+  sorting?: SortingState
+  filters?: ColumnFiltersState
+  searchQuery?: string
+}
+
+export type DataGridApiResponse<T> = {
+  data: T[]
+  empty: boolean
+  pagination: {
+    total: number
+    page: number
+  }
+}
+
+export interface DataGridContextProps<TData extends object> {
+  props: DataGridProps<TData>
+  table: Table<TData>
+  recordCount: number
+  isLoading: boolean
+}
+
+export type DataGridRequestParams = {
+  pageIndex: number
+  pageSize: number
+  sorting?: SortingState
+  columnFilters?: ColumnFiltersState
+}
+
+export interface DataGridProps<TData extends object> {
+  className?: string
+  table?: Table<TData>
+  recordCount: number
+  children?: ReactNode
+  onRowClick?: (row: TData) => void
+  isLoading?: boolean
+  loadingMode?: "skeleton" | "spinner"
+  loadingMessage?: ReactNode | string
+  fetchingMoreMessage?: ReactNode | string
+  allRowsLoadedMessage?: ReactNode | string
+  emptyMessage?: ReactNode | string
+  tableLayout?: {
+    dense?: boolean
+    cellBorder?: boolean
+    rowBorder?: boolean
+    rowRounded?: boolean
+    stripped?: boolean
+    headerBackground?: boolean
+    headerBorder?: boolean
+    headerSticky?: boolean
+    width?: "auto" | "fixed"
+    columnsVisibility?: boolean
+    columnsResizable?: boolean
+    columnsResizeMode?: "onChange" | "onEnd"
+    columnsPinnable?: boolean
+    columnsMovable?: boolean
+    columnsDraggable?: boolean
+    rowsDraggable?: boolean
+    rowsPinnable?: boolean
+  }
+  tableClassNames?: {
+    base?: string
+    header?: string
+    headerRow?: string
+    headerSticky?: string
+    body?: string
+    bodyRow?: string
+    footer?: string
+    edgeCell?: string
+  }
+}
+
+const DataGridContext = createContext<
+   
+  DataGridContextProps<any> | undefined
+>(undefined)
+
+function useDataGrid() {
+  const context = useContext(DataGridContext)
+  if (!context) {
+    throw new Error("useDataGrid must be used within a DataGridProvider")
+  }
+  return context
+}
+
+function DataGridProvider<TData extends object>({
+  children,
+  table,
+  ...props
+}: DataGridProps<TData> & { table: Table<TData> }) {
+  const tableState = table.getState()
+  const resolvedColumnsResizeMode =
+    props.tableLayout?.columnsResizeMode ?? "onEnd"
+
+  // Keep resize mode aligned with the DataGrid contract every render so
+  // consumer-level useReactTable options cannot flip it back between drags.
+  if (props.tableLayout?.columnsResizable) {
+    table.options.columnResizeMode = resolvedColumnsResizeMode
+  }
+
+  // Memoize context value so consumers don't re-render during column resize.
+  // Column sizing state is intentionally excluded from deps -- CSS variables
+  // on the <table> element handle width updates without React re-renders.
+  const value = useMemo(
+    () => ({
+      props,
+      table,
+      recordCount: props.recordCount,
+      isLoading: props.isLoading || false,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      table,
+      props.recordCount,
+      props.isLoading,
+      props.loadingMode,
+      props.loadingMessage,
+      props.fetchingMoreMessage,
+      props.allRowsLoadedMessage,
+      props.emptyMessage,
+      props.onRowClick,
+      props.className,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify(props.tableLayout),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify(props.tableClassNames),
+      tableState.sorting,
+      tableState.pagination,
+      tableState.columnFilters,
+      tableState.rowSelection,
+      tableState.expanded,
+      tableState.columnVisibility,
+      tableState.columnOrder,
+      tableState.columnPinning,
+      tableState.globalFilter,
+    ]
+  )
+
+  return (
+    <DataGridContext.Provider value={value}>
+      {children}
+    </DataGridContext.Provider>
+  )
+}
+
+function DataGrid<TData extends object>({
+  children,
+  table,
+  ...props
+}: DataGridProps<TData>) {
+  const defaultProps: Partial<DataGridProps<TData>> = {
+    loadingMode: "skeleton",
+    tableLayout: {
+      dense: false,
+      cellBorder: false,
+      rowBorder: true,
+      rowRounded: false,
+      stripped: false,
+      headerSticky: false,
+      headerBackground: true,
+      headerBorder: true,
+      width: "fixed",
+      columnsVisibility: false,
+      columnsResizable: false,
+      columnsResizeMode: "onEnd",
+      columnsPinnable: false,
+      columnsMovable: false,
+      columnsDraggable: false,
+      rowsDraggable: false,
+      rowsPinnable: false,
+    },
+    tableClassNames: {
+      base: "",
+      header: "",
+      headerRow: "",
+      headerSticky: "sticky top-0 z-15 bg-background/90 backdrop-blur-xs",
+      body: "",
+      bodyRow: "",
+      footer: "",
+      edgeCell: "",
+    },
+  }
+
+  const mergedProps: DataGridProps<TData> = {
+    ...defaultProps,
+    ...props,
+    tableLayout: {
+      ...defaultProps.tableLayout,
+      ...(props.tableLayout || {}),
+    },
+    tableClassNames: {
+      ...defaultProps.tableClassNames,
+      ...(props.tableClassNames || {}),
+    },
+  }
+
+  // Ensure table is provided
+  if (!table) {
+    throw new Error('DataGrid requires a "table" prop')
+  }
+
+  return (
+    <DataGridProvider table={table} {...mergedProps}>
+      {children}
+    </DataGridProvider>
+  )
+}
+
+function DataGridContainer({
+  children,
+  className,
+  border = true,
+}: {
+  children: ReactNode
+  className?: string
+  border?: boolean
+}) {
+  return (
+    <div
+      data-slot="data-grid"
+      className={cn(
+        "w-full overflow-hidden",
+        border &&
+          "border-border rounded-lg border",
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export { useDataGrid, DataGridProvider, DataGrid, DataGridContainer }

apps/web/src/components/reui/frame.tsx

@@ -0,0 +1,175 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+/**
+ * CSS variable architecture for FramePanel theming:
+ *
+ * The Frame parent sets --frame-panel-bg and --frame-panel-border-color.
+ * FramePanel consumes them directly via bg-(--frame-panel-bg) and
+ * border-(--frame-panel-border-color). This means:
+ *
+ *   - variant="inverse" overrides those vars on Frame → all panels pick it up
+ *   - <FramePanel className="bg-blue-50"> adds a direct utility on the element
+ *     which wins over bg-(--frame-panel-bg) by Tailwind source order — no
+ *     :not() or !important needed
+ */
+const frameVariants = cva(
+  [
+    "relative flex flex-col bg-muted/50 gap-(--frame-gap) px-(--frame-px) py-(--frame-py) rounded-(--frame-radius)",
+    "(--radius-xl)] [--frame-radius:var(--radius-xl)]",
+    "(--radius-none)] (--radius-2xl)] (--radius-lg)] (--radius-none)]",
+    "[--frame-gap:--spacing(0.75)] [--frame-px:--spacing(0.75)] [--frame-py:--spacing(0.75)] [--frame-panel-header-gap:0rem] [--frame-panel-footer-gap:--spacing(1)]",
+    "[--frame-panel-px-adjust:0px] [--frame-panel-py-adjust:0px] [--frame-panel-header-px-adjust:0px] [--frame-panel-header-py-adjust:0px] [--frame-panel-footer-px-adjust:0px] [--frame-panel-footer-py-adjust:0px]",
+    "[--frame-panel-px:calc(var(--frame-panel-px-base)_+_var(--frame-panel-px-adjust))] [--frame-panel-py:calc(var(--frame-panel-py-base)_+_var(--frame-panel-py-adjust))] [--frame-panel-header-px:calc(var(--frame-panel-header-px-base)_+_var(--frame-panel-header-px-adjust))] [--frame-panel-header-py:calc(var(--frame-panel-header-py-base)_+_var(--frame-panel-header-py-adjust))] [--frame-panel-footer-px:calc(var(--frame-panel-footer-px-base)_+_var(--frame-panel-footer-px-adjust))] [--frame-panel-footer-py:calc(var(--frame-panel-footer-py-base)_+_var(--frame-panel-footer-py-adjust))]",
+    "(1)] (1)] (1.25)] (1.5)] (1.5)] (0.5)] (1)] (1)]",
+    // Default panel token values — overridden per-variant below
+    "[--frame-panel-bg:var(--color-card)] [--frame-panel-border-color:var(--color-border)] [--frame-border-color:var(--color-border)]",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border border-[var(--frame-border-color)] bg-clip-padding",
+        inverse:
+          "[--frame-panel-bg:color-mix(in_oklch,var(--color-muted)_40%,transparent)] border border-[var(--frame-border-color)] bg-background bg-clip-padding",
+        ghost: "",
+      },
+      spacing: {
+        xs: "[--frame-panel-px-base:--spacing(2)] [--frame-panel-py-base:--spacing(2)] [--frame-panel-header-px-base:--spacing(2)] [--frame-panel-header-py-base:--spacing(1)] [--frame-panel-footer-px-base:--spacing(2)] [--frame-panel-footer-py-base:--spacing(1)] (3)] (1)] (3)] (3)]",
+        sm: "[--frame-panel-px-base:--spacing(3)] [--frame-panel-py-base:--spacing(3.5)] [--frame-panel-header-px-base:--spacing(3)] [--frame-panel-header-py-base:--spacing(2.5)] [--frame-panel-footer-px-base:--spacing(3)] [--frame-panel-footer-py-base:--spacing(2.5)] (2)] (2)] (2)]",
+        default:
+          "[--frame-panel-px-base:--spacing(4)] [--frame-panel-py-base:--spacing(4)] [--frame-panel-header-px-base:--spacing(4)] [--frame-panel-header-py-base:--spacing(3)] [--frame-panel-footer-px-base:--spacing(4)] [--frame-panel-footer-py-base:--spacing(3)] (2)] (2)] (2)]",
+        lg: "[--frame-panel-px-base:--spacing(5)] [--frame-panel-py-base:--spacing(5)] [--frame-panel-header-px-base:--spacing(5)] [--frame-panel-header-py-base:--spacing(4)] [--frame-panel-footer-px-base:--spacing(5)] [--frame-panel-footer-py-base:--spacing(4)] (2)] (2)] (2)]",
+      },
+      stacked: {
+        true: [
+          "gap-0 *:has-[+[data-slot=frame-panel]]:rounded-b-none",
+          "*:has-[+[data-slot=frame-panel]]:before:hidden",
+          "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:rounded-t-none",
+          "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:border-t-0",
+        ],
+        false: [
+          "data-[spacing=sm]:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-0.5",
+          "data-[spacing=default]:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1",
+          "data-[spacing=lg]:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-2",
+        ],
+      },
+      dense: {
+        // Positional rules must stay as parent selectors — cannot be expressed via CSS vars
+        true: "p-0 gap-0 border-[var(--frame-border-color)] [&_[data-slot=frame-panel]]:-mx-px [&_[data-slot=frame-panel]]:before:hidden [&_[data-slot=frame-panel]:last-child]:-mb-px [&:not(:has([data-slot=frame-panel-header]))_[data-slot=frame-panel]:is(:first-child)]:-mt-px",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      spacing: "default",
+      stacked: false,
+      dense: false,
+    },
+  }
+)
+
+function Frame({
+  className,
+  variant,
+  spacing,
+  stacked,
+  dense,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof frameVariants>) {
+  return (
+    <div
+      className={cn(
+        frameVariants({ variant, spacing, stacked, dense }),
+        className
+      )}
+      data-slot="frame"
+      data-spacing={spacing}
+      {...props}
+    />
+  )
+}
+
+function FramePanel({
+  className,
+  fit,
+  ...props
+}: React.ComponentProps<"div"> & { fit?: boolean }) {
+  return (
+    <div
+      className={cn(
+        // bg-(--frame-panel-bg) and border-(--frame-panel-border-color) consume the
+        // CSS vars set by the Frame parent. Any explicit bg-* or border-* class passed
+        // via className overrides these by Tailwind source order - no ! needed.
+        "relative overflow-hidden rounded-(--frame-radius) border border-(--frame-panel-border-color) bg-(--frame-panel-bg) bg-clip-padding shadow-xs",
+        // `fit` sizes the panel to its content; otherwise it grows to fill the frame.
+        !fit && "grow",
+        "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--frame-radius)-1px)] before:shadow-black/5",
+        "dark:bg-clip-border dark:before:shadow-white/5",
+        "px-(--frame-panel-px) py-(--frame-panel-py)",
+        className
+      )}
+      data-slot="frame-panel"
+      {...props}
+    />
+  )
+}
+
+function FrameHeader({ className, ...props }: React.ComponentProps<"header">) {
+  return (
+    <header
+      className={cn(
+        "flex flex-col gap-(--frame-panel-header-gap) px-(--frame-panel-header-px) py-(--frame-panel-header-py)",
+        className
+      )}
+      data-slot="frame-panel-header"
+      {...props}
+    />
+  )
+}
+
+function FrameTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-sm font-semibold", className)}
+      data-slot="frame-panel-title"
+      {...props}
+    />
+  )
+}
+
+function FrameDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="frame-panel-description"
+      {...props}
+    />
+  )
+}
+
+function FrameFooter({ className, ...props }: React.ComponentProps<"footer">) {
+  return (
+    <footer
+      className={cn(
+        "flex flex-col gap-(--frame-panel-footer-gap) px-(--frame-panel-footer-px) py-(--frame-panel-footer-py)",
+        className
+      )}
+      data-slot="frame-panel-footer"
+      {...props}
+    />
+  )
+}
+
+export {
+  Frame,
+  FramePanel,
+  FrameHeader,
+  FrameTitle,
+  FrameDescription,
+  FrameFooter,
+  frameVariants,
+}

apps/web/src/components/reui/number-field.tsx

@@ -0,0 +1,258 @@
+import { createContext, ReactNode, useContext, useId } from "react"
+import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"
+import { cva, VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Label } from "@evobgp/ui/components/label"
+import { MinusIcon, PlusIcon } from "lucide-react"
+
+const NumberFieldContext = createContext<{
+  fieldId: string
+  size: "sm" | "default" | "lg"
+} | null>(null)
+
+const numberFieldGroupVariants = cva(
+  "relative flex w-full justify-between border border-input data-disabled:pointer-events-none data-disabled:opacity-50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-within:has-aria-invalid:border-destructive focus-within:has-aria-invalid:ring-destructive/20 dark:focus-within:has-aria-invalid:ring-destructive/40 rounded-lg bg-transparent dark:bg-input/30 transition-colors focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-3",
+  {
+    variants: {
+      size: {
+        sm: "h-7 text-sm",
+        default:
+          "h-8 text-sm",
+        lg: "h-9 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+const numberFieldButtonVariants = cva(
+  "relative flex shrink-0 cursor-pointer items-center justify-center transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent",
+  {
+    variants: {
+      size: {
+        sm: "px-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        default:
+          "px-2 [&_svg:not([class*='size-'])]:size-4",
+        lg: "px-2.5 [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+const numberFieldInputVariants = cva(
+  "w-full min-w-0 flex-1 bg-transparent text-center tabular-nums outline-none",
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-0.5",
+        default:
+          "px-2.5 py-1",
+        lg: "px-2.5 py-1.5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+function NumberField({
+  id,
+  className,
+  size = "default",
+  ...props
+}: NumberFieldPrimitive.Root.Props &
+  VariantProps<typeof numberFieldGroupVariants>) {
+  const generatedId = useId()
+  const fieldId = id ?? generatedId
+  const sizeValue = size ?? "default"
+
+  return (
+    <NumberFieldContext.Provider value={{ fieldId, size: sizeValue }}>
+      <NumberFieldPrimitive.Root
+        className={cn("flex w-full flex-col items-start gap-2", className)}
+        data-size={sizeValue}
+        data-slot="number-field"
+        id={fieldId}
+        {...props}
+      />
+    </NumberFieldContext.Provider>
+  )
+}
+
+function NumberFieldGroup({
+  className,
+  size: sizeProp,
+  ...props
+}: NumberFieldPrimitive.Group.Props &
+  Partial<VariantProps<typeof numberFieldGroupVariants>>) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldGroup must be used within a NumberField component."
+    )
+  }
+  const size = sizeProp ?? context.size
+
+  return (
+    <NumberFieldPrimitive.Group
+      className={cn(numberFieldGroupVariants({ size }), className)}
+      data-slot="number-field-group"
+      {...props}
+    />
+  )
+}
+
+function NumberFieldDecrement({
+  className,
+  size: sizeProp,
+  children,
+  ...props
+}: NumberFieldPrimitive.Decrement.Props &
+  Partial<VariantProps<typeof numberFieldButtonVariants>> & {
+    children?: React.ReactNode
+  }) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldDecrement must be used within a NumberField component."
+    )
+  }
+  const size = sizeProp ?? context.size
+
+  return (
+    <NumberFieldPrimitive.Decrement
+      className={cn(
+        numberFieldButtonVariants({ size }),
+        "rounded-s-lg border-e-0",
+        className
+      )}
+      data-slot="number-field-decrement"
+      {...props}
+    >
+      {children ?? (
+        <MinusIcon
+        />
+      )}
+    </NumberFieldPrimitive.Decrement>
+  )
+}
+
+function NumberFieldIncrement({
+  className,
+  size: sizeProp,
+  children,
+  ...props
+}: NumberFieldPrimitive.Increment.Props &
+  Partial<VariantProps<typeof numberFieldButtonVariants>> & {
+    children?: ReactNode
+  }) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldIncrement must be used within a NumberField component."
+    )
+  }
+  const size = sizeProp ?? context.size
+
+  return (
+    <NumberFieldPrimitive.Increment
+      className={cn(
+        numberFieldButtonVariants({ size }),
+        "rounded-e-lg border-s-0",
+        className
+      )}
+      data-slot="number-field-increment"
+      {...props}
+    >
+      {children ?? (
+        <PlusIcon
+        />
+      )}
+    </NumberFieldPrimitive.Increment>
+  )
+}
+
+function NumberFieldInput({
+  className,
+  size: sizeProp,
+  ...props
+}: NumberFieldPrimitive.Input.Props &
+  Partial<VariantProps<typeof numberFieldInputVariants>>) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldInput must be used within a NumberField component."
+    )
+  }
+  const size = sizeProp ?? context.size
+
+  return (
+    <NumberFieldPrimitive.Input
+      className={cn(numberFieldInputVariants({ size }), className)}
+      data-slot="number-field-input"
+      {...props}
+    />
+  )
+}
+
+function NumberFieldScrubArea({
+  className,
+  label,
+  ...props
+}: NumberFieldPrimitive.ScrubArea.Props & {
+  label: string
+}) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldScrubArea must be used within a NumberField component for accessibility."
+    )
+  }
+
+  return (
+    <NumberFieldPrimitive.ScrubArea
+      className={cn("flex cursor-ew-resize", className)}
+      data-slot="number-field-scrub-area"
+      {...props}
+    >
+      <Label className="cursor-ew-resize" htmlFor={context.fieldId}>
+        {label}
+      </Label>
+      <NumberFieldPrimitive.ScrubAreaCursor className="drop-shadow-[0_1px_1px_#0008] filter">
+        <CursorGrowIcon />
+      </NumberFieldPrimitive.ScrubAreaCursor>
+    </NumberFieldPrimitive.ScrubArea>
+  )
+}
+
+function CursorGrowIcon(props: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      fill="black"
+      height="14"
+      stroke="white"
+      viewBox="0 0 24 14"
+      width="26"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
+    </svg>
+  )
+}
+
+export {
+  NumberField,
+  NumberFieldScrubArea,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldGroup,
+  NumberFieldInput,
+}

apps/web/src/components/schedule/schedule-jobs-grid.tsx

@@ -0,0 +1,100 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import { Badge } from '@evobgp/ui/components/badge'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { JobRow } from '@/types/api'
+
+export function ScheduleJobsGrid({
+  items,
+  isLoading = false,
+}: {
+  items: JobRow[]
+  isLoading?: boolean
+}) {
+  const columns = useMemo<ColumnDef<JobRow>[]>(
+    () => [
+      {
+        accessorKey: 'kind',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
+        cell: ({ row }) => <span className="font-medium">{row.original.kind}</span>,
+        meta: { headerTitle: 'Вид' },
+      },
+      {
+        accessorKey: 'status',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
+        cell: ({ row }) => (
+          <Badge
+            variant={
+              row.original.status === 'succeeded'
+                ? 'default'
+                : row.original.status === 'failed'
+                  ? 'destructive'
+                  : 'secondary'
+            }
+          >
+            {row.original.status}
+          </Badge>
+        ),
+        meta: { headerTitle: 'Статус' },
+      },
+      {
+        id: 'created_at',
+        accessorFn: (row) => row.created_at ?? '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Создана" />,
+        cell: ({ row }) => (
+          <span className="whitespace-nowrap text-xs text-muted-foreground">
+            {row.original.created_at
+              ? new Date(row.original.created_at).toLocaleString('ru-RU')
+              : '—'}
+          </span>
+        ),
+        meta: { headerTitle: 'Создана' },
+      },
+      {
+        id: 'finished_at',
+        accessorFn: (row) => row.finished_at ?? '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Завершена" />,
+        cell: ({ row }) => (
+          <span className="whitespace-nowrap text-xs text-muted-foreground">
+            {row.original.finished_at
+              ? new Date(row.original.finished_at).toLocaleString('ru-RU')
+              : '—'}
+          </span>
+        ),
+        meta: { headerTitle: 'Завершена' },
+      },
+      {
+        accessorKey: 'error',
+        enableSorting: false,
+        header: 'Ошибка',
+        cell: ({ row }) => (
+          <span className="max-w-xs truncate text-xs text-destructive">
+            {row.original.error ?? ''}
+          </span>
+        ),
+        meta: { headerTitle: 'Ошибка' },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<JobRow>(),
+    getRowId: (row) => row.job_id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет задач"
+    />
+  )
+}

apps/web/src/components/schedule/schedule-modules-grid.tsx

@@ -0,0 +1,113 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { RefreshCw } from 'lucide-react'
+import { useMemo } from 'react'
+
+import { Badge } from '@evobgp/ui/components/badge'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { LoadingButton } from '@/components/loading-button'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { ModuleRow } from '@/types/api'
+
+export function ScheduleModulesGrid({
+  items,
+  refreshing,
+  onRefresh,
+  isLoading = false,
+}: {
+  items: ModuleRow[]
+  refreshing: Record<string, boolean>
+  onRefresh: (id: string) => void
+  isLoading?: boolean
+}) {
+  const columns = useMemo<ColumnDef<ModuleRow>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Модуль" />,
+        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
+        meta: { headerTitle: 'Модуль' },
+      },
+      {
+        accessorKey: 'type',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Тип" />,
+        cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
+        meta: { headerTitle: 'Тип' },
+      },
+      {
+        id: 'schedule',
+        accessorFn: (row) => row.cron_expr ?? String(row.refresh_interval_sec ?? ''),
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Расписание" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">
+            {row.original.cron_expr ??
+              (row.original.refresh_interval_sec ? `${row.original.refresh_interval_sec}s` : '—')}
+          </span>
+        ),
+        meta: { headerTitle: 'Расписание' },
+      },
+      {
+        id: 'last_refreshed_at',
+        accessorFn: (row) => row.last_refreshed_at ?? '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Обновлено" />,
+        cell: ({ row }) => (
+          <span className="whitespace-nowrap text-xs text-muted-foreground">
+            {row.original.last_refreshed_at
+              ? new Date(row.original.last_refreshed_at).toLocaleString('ru-RU')
+              : '—'}
+          </span>
+        ),
+        meta: { headerTitle: 'Обновлено' },
+      },
+      {
+        id: 'enabled',
+        accessorFn: (row) => (row.enabled ? 'on' : 'off'),
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
+        cell: ({ row }) =>
+          row.original.enabled ? (
+            <Badge variant="default">Вкл</Badge>
+          ) : (
+            <Badge variant="secondary">Выкл</Badge>
+          ),
+        meta: { headerTitle: 'Статус' },
+      },
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: () => null,
+        cell: ({ row }) => (
+          <div className="text-right">
+            <LoadingButton
+              size="sm"
+              variant="secondary"
+              type="button"
+              loading={!!refreshing[row.original.id]}
+              onClick={() => onRefresh(row.original.id)}
+            >
+              <RefreshCw />
+              Обновить
+            </LoadingButton>
+          </div>
+        ),
+      },
+    ],
+    [onRefresh, refreshing],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<ModuleRow>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет модулей"
+    />
+  )
+}

apps/web/src/components/section-cards.tsx

@@ -0,0 +1,109 @@
+import type { ReactElement, ReactNode } from 'react'
+import { Card, CardContent } from '@evobgp/ui/components/card'
+import { cn } from '@evobgp/ui/lib/utils'
+import { TruncatedText } from '@/components/truncated-text'
+
+export interface SectionCardItem {
+  label: ReactNode
+  value: string | number | ReactElement
+  hint?: ReactNode
+  icon?: ReactNode
+  badge?: ReactNode
+  variant?: 'default' | 'warning' | 'destructive'
+  active?: boolean
+  onClick?: () => void
+}
+
+const VARIANT_CLASS: Record<NonNullable<SectionCardItem['variant']>, string> = {
+  default: '',
+  warning: 'border-warning/50',
+  destructive: 'border-destructive/50',
+}
+
+function sectionGridClass(count: number): string {
+  if (count <= 1) return 'grid-cols-1'
+  if (count === 2) return 'sm:grid-cols-2'
+  if (count === 3) return 'sm:grid-cols-2 lg:grid-cols-3'
+  if (count === 4) return 'sm:grid-cols-2 lg:grid-cols-4'
+  if (count === 5) return 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5'
+  if (count === 6) return 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6'
+  return 'sm:grid-cols-2 lg:grid-cols-3'
+}
+
+const VALUE_VARIANT_CLASS: Record<NonNullable<SectionCardItem['variant']>, string> = {
+  default: '',
+  warning: 'text-warning-foreground',
+  destructive: 'text-destructive',
+}
+
+export function SectionCards({ items, className }: { items: SectionCardItem[]; className?: string }) {
+  return (
+    <div className={cn('grid gap-3', sectionGridClass(items.length), className)}>
+      {items.map((item, idx) => {
+        const clickable = Boolean(item.onClick)
+        const content = (
+          <CardContent className="flex items-start gap-2.5 px-3 py-2.5">
+            {item.icon ? (
+              <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground">
+                {item.icon}
+              </span>
+            ) : null}
+            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <div className="flex items-center justify-between gap-2">
+                {typeof item.label === 'string' ? (
+                  <TruncatedText className="text-xs text-muted-foreground">{item.label}</TruncatedText>
+                ) : (
+                  <span className="truncate text-xs text-muted-foreground">{item.label}</span>
+                )}
+                {item.badge ? <span className="shrink-0">{item.badge}</span> : null}
+              </div>
+              <div className="flex min-w-0 items-baseline gap-1.5">
+                <span
+                  className={cn(
+                    'flex items-center gap-1 text-lg font-semibold tabular-nums',
+                    VALUE_VARIANT_CLASS[item.variant ?? 'default'],
+                  )}
+                >
+                  {item.value}
+                </span>
+                {item.hint ? (
+                  typeof item.hint === 'string' ? (
+                    <TruncatedText className="text-xs text-muted-foreground">· {item.hint}</TruncatedText>
+                  ) : (
+                    <span className="truncate text-xs text-muted-foreground">· {item.hint}</span>
+                  )
+                ) : null}
+              </div>
+            </div>
+          </CardContent>
+        )
+        return (
+          <Card
+            key={typeof item.label === 'string' ? item.label : idx}
+            className={cn(
+              'gap-0',
+              VARIANT_CLASS[item.variant ?? 'default'],
+              item.active && 'border-primary ring-1 ring-primary/30',
+              clickable && 'cursor-pointer transition-colors hover:bg-muted/40',
+            )}
+            onClick={item.onClick}
+            role={clickable ? 'button' : undefined}
+            tabIndex={clickable ? 0 : undefined}
+            onKeyDown={
+              clickable
+                ? (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault()
+                      item.onClick?.()
+                    }
+                  }
+                : undefined
+            }
+          >
+            {content}
+          </Card>
+        )
+      })}
+    </div>
+  )
+}

apps/web/src/components/settings/settings-kv-grid.tsx

@@ -0,0 +1,57 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+
+export interface SettingsKvRow {
+  id: string | number
+  key: string
+  value: string
+}
+
+export function SettingsKvGrid({
+  items,
+  isLoading = false,
+}: {
+  items: SettingsKvRow[]
+  isLoading?: boolean
+}) {
+  const columns = useMemo<ColumnDef<SettingsKvRow>[]>(
+    () => [
+      {
+        accessorKey: 'key',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Ключ" />,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.key}</span>,
+        meta: { headerTitle: 'Ключ' },
+      },
+      {
+        accessorKey: 'value',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Значение" />,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.value}</span>,
+        meta: { headerTitle: 'Значение' },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<SettingsKvRow>({
+      initialState: { pagination: { pageSize: 25 } },
+    }),
+    getRowId: (row) => String(row.id),
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет дополнительных настроек"
+      showPagination={items.length > 10}
+    />
+  )
+}

apps/web/src/components/skeletons.tsx

@@ -0,0 +1,38 @@
+import { SectionCards } from './section-cards'
+import { Skeleton } from '@evobgp/ui/components/skeleton'
+import { Card, CardContent } from '@evobgp/ui/components/card'
+
+export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
+  return (
+    <SectionCards
+      items={Array.from({ length: count }, (_, i) => ({
+        icon: <Skeleton className="size-4 rounded-sm" key={`icon-${i}`} />,
+        label: <Skeleton className="h-3 w-20" key={`label-${i}`} />,
+        value: <Skeleton className="h-5 w-16" key={`value-${i}`} />,
+      }))}
+    />
+  )
+}
+
+export function TableSkeleton({ rows = 6, cols = 4 }: { rows?: number; cols?: number }) {
+  return (
+    <Card className="gap-0">
+      <CardContent className="p-0">
+        <div className="flex flex-col">
+          <div className="flex gap-2 border-b p-3">
+            {Array.from({ length: cols }).map((_, i) => (
+              <Skeleton className="h-4 flex-1" key={`h-${i}`} />
+            ))}
+          </div>
+          {Array.from({ length: rows }).map((_, r) => (
+            <div className="flex gap-2 border-b p-3" key={`r-${r}`}>
+              {Array.from({ length: cols }).map((_, c) => (
+                <Skeleton className="h-4 flex-1" key={`c-${r}-${c}`} />
+              ))}
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

apps/web/src/components/status-badge.tsx

@@ -0,0 +1,35 @@
+import type { ComponentProps } from 'react'
+
+import { Badge } from '@/components/reui/badge'
+
+type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>
+
+const STATUS_VARIANT: Record<string, BadgeVariant> = {
+  active: 'success',
+  ok: 'success',
+  paid: 'success',
+  established: 'success',
+  succeeded: 'success',
+  healthy: 'success',
+  paused: 'secondary',
+  disabled: 'secondary',
+  archived: 'outline',
+  error: 'destructive',
+  failed: 'destructive',
+  running: 'info',
+  queued: 'info',
+  overdue: 'warning',
+  stale: 'warning',
+  warning: 'warning',
+  mismatch: 'warning',
+  pending: 'warning',
+  approved: 'success',
+  revoked: 'destructive',
+  block: 'destructive',
+  accept: 'success',
+}
+
+export function StatusBadge({ status, label }: { status: string; label?: string }) {
+  const variant = STATUS_VARIANT[status.toLowerCase()] ?? 'outline'
+  return <Badge variant={variant}>{label ?? status}</Badge>
+}

apps/web/src/components/theme-provider.tsx

@@ -0,0 +1,16 @@
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import type { ReactNode } from 'react'
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      storageKey="evobgp-theme"
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}

apps/web/src/components/truncated-text.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@evobgp/ui/components/tooltip'
+import { cn } from '@evobgp/ui/lib/utils'
+
+interface TruncatedTextProps {
+  children: ReactNode
+  className?: string
+  as?: 'span' | 'p' | 'div'
+  /** Явный текст подсказки, если children — не строка. */
+  tooltip?: string
+}
+
+export function TruncatedText({ children, className, as: Tag = 'span', tooltip }: TruncatedTextProps) {
+  const tip =
+    tooltip ??
+    (typeof children === 'string' || typeof children === 'number' ? String(children) : null)
+
+  if (!tip) {
+    return <Tag className={cn('truncate', className)}>{children}</Tag>
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger render={<Tag className={cn('truncate', className)} />}>{children}</TooltipTrigger>
+        <TooltipContent>{tip}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

apps/web/src/lib/access/api-key-labels.ts

@@ -0,0 +1,19 @@
+import type { ApiKeyRole } from '@/types/api'
+
+export const API_KEY_ROLE_ITEMS: ReadonlyArray<{ value: ApiKeyRole; label: string }> = [
+  { value: 'viewer', label: 'viewer — только чтение' },
+  { value: 'editor', label: 'editor — CRUD без apply' },
+  { value: 'operator', label: 'operator — полный доступ' },
+  { value: 'node', label: 'node — только API ноды' },
+]
+
+export function apiKeyRoleLabel(role: ApiKeyRole): string {
+  return API_KEY_ROLE_ITEMS.find((o) => o.value === role)?.label ?? role
+}
+
+export function formatApiKeyDate(iso: string | null | undefined): string {
+  if (!iso) return '—'
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return '—'
+  return d.toLocaleString('ru-RU')
+}

apps/web/src/lib/api-client.ts

@@ -0,0 +1,220 @@
+import type {
+  AsEntriesResponse,
+  CdnSourcesResponse,
+  DomainEntriesResponse,
+  IpRangeEntriesResponse,
+  JobRow,
+  ModuleType,
+  RevisionPrefix,
+  RevisionPrefixesResponse,
+} from '@/types/api'
+
+export const TOKEN_STORAGE_KEY = 'evobgp_api_token'
+
+/** Локальный demo-токен (operator) при включённом demo-seed — см. docs/access.md */
+export const DEV_API_TOKEN = 'dev'
+
+export type Problem = {
+  type?: string
+  title?: string
+  status?: number
+  detail?: string
+}
+
+/** Убирает пробелы и опциональный префикс Bearer (UI часто вставляет «Bearer dev»). */
+export function normalizeApiToken(raw: string): string {
+  let t = raw.trim()
+  if (/^bearer\s+/i.test(t)) {
+    t = t.replace(/^bearer\s+/i, '').trim()
+  }
+  return t
+}
+
+function getToken(): string | null {
+  if (typeof window === 'undefined') return null
+  const raw = window.localStorage.getItem(TOKEN_STORAGE_KEY)
+  if (!raw) return null
+  const normalized = normalizeApiToken(raw)
+  return normalized || null
+}
+
+export function setToken(token: string | null): void {
+  if (typeof window === 'undefined') return
+  if (!token) {
+    window.localStorage.removeItem(TOKEN_STORAGE_KEY)
+    return
+  }
+  const normalized = normalizeApiToken(token)
+  if (normalized) window.localStorage.setItem(TOKEN_STORAGE_KEY, normalized)
+  else window.localStorage.removeItem(TOKEN_STORAGE_KEY)
+}
+
+function mergeHeaders(init?: RequestInit, extraHeaders?: Record<string, string>): Headers {
+  const h = new Headers(init?.headers)
+  if (!h.has('Accept')) h.set('Accept', 'application/json')
+  const t = getToken()
+  if (t && !h.has('Authorization')) h.set('Authorization', `Bearer ${t}`)
+  if (extraHeaders) {
+    for (const [k, v] of Object.entries(extraHeaders)) {
+      if (!h.has(k)) h.set(k, v)
+    }
+  }
+  return h
+}
+
+/**
+ * Idempotency keys: `crypto.randomUUID()` exists only in secure contexts (HTTPS / localhost).
+ * Over plain HTTP to a LAN IP it is often undefined — use getRandomValues or a fallback.
+ */
+function newIdempotencyKey(): string {
+  const c = typeof globalThis !== 'undefined' ? globalThis.crypto : undefined
+  if (c?.randomUUID) return c.randomUUID()
+  if (c?.getRandomValues) {
+    const buf = new Uint8Array(16)
+    c.getRandomValues(buf)
+    buf[6] = (buf[6]! & 0x0f) | 0x40
+    buf[8] = (buf[8]! & 0x3f) | 0x80
+    const hex = [...buf].map((b) => b.toString(16).padStart(2, '0')).join('')
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`
+  }
+  return `idem-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 14)}`
+}
+
+export class ApiError extends Error {
+  constructor(
+    public readonly status: number,
+    message: string,
+    public readonly problem?: Problem,
+  ) {
+    super(message)
+  }
+}
+
+export async function apiFetch(path: string, init?: RequestInit): Promise<Response> {
+  if (typeof window === 'undefined') throw new Error('API is only available in the browser')
+  return fetch(path, { ...init, headers: mergeHeaders(init) })
+}
+
+/** GET / DELETE без тела */
+export async function apiJSON<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await apiFetch(path, init)
+  return parseResponse<T>(res)
+}
+
+/** POST / PATCH / PUT с JSON-телом и автоматическим Idempotency-Key */
+export async function apiMutate<T = void>(
+  path: string,
+  method: 'POST' | 'PATCH' | 'PUT' | 'DELETE',
+  body?: unknown,
+  opts?: { idempotent?: boolean },
+): Promise<T> {
+  const headers: Record<string, string> = {}
+  if (body !== undefined) headers['Content-Type'] = 'application/json'
+  if (opts?.idempotent !== false) {
+    headers['Idempotency-Key'] = newIdempotencyKey()
+  }
+  const res = await fetch(path, {
+    method,
+    headers: mergeHeaders({ headers }, headers),
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  })
+  return parseResponse<T>(res)
+}
+
+async function parseResponse<T>(res: Response): Promise<T> {
+  if (res.status === 204 || res.status === 205) return undefined as T
+  const text = await res.text()
+  if (!res.ok) {
+    let problem: Problem | undefined
+    let detail = `HTTP ${res.status}`
+    try {
+      problem = JSON.parse(text) as Problem
+      detail = problem.detail ?? problem.title ?? detail
+    } catch {
+      if (text) detail = text
+    }
+    throw new ApiError(res.status, detail, problem)
+  }
+  if (!text) return undefined as T
+  return JSON.parse(text) as T
+}
+
+const terminalJobStatuses = new Set(['succeeded', 'failed', 'cancelled'])
+
+/** Ожидает завершения фоновой задачи (poll GET /v1/jobs/{id}). */
+export async function waitForJob(
+  jobId: string,
+  opts?: { pollMs?: number; timeoutMs?: number },
+): Promise<JobRow> {
+  const pollMs = opts?.pollMs ?? 400
+  const timeoutMs = opts?.timeoutMs ?? 120000
+  const deadline = Date.now() + timeoutMs
+  while (Date.now() < deadline) {
+    const j = await apiJSON<JobRow>(`/v1/jobs/${jobId}`)
+    if (terminalJobStatuses.has(j.status)) return j
+    await new Promise((r) => setTimeout(r, pollMs))
+  }
+  throw new Error(`Таймаут ожидания задачи ${jobId}`)
+}
+
+export async function apiPageAll<T>(path: string, limit = 500): Promise<T[]> {
+  const items: T[] = []
+  let cursor: string | null = null
+  while (true) {
+    const [basePath, rawQuery = ''] = path.split('?')
+    const query = new URLSearchParams(rawQuery)
+    if (!query.has('limit')) query.set('limit', String(limit))
+    if (cursor) query.set('cursor', cursor)
+    else query.delete('cursor')
+    const page = await apiJSON<{ items?: T[]; next_cursor?: string | null; has_more?: boolean }>(
+      `${basePath}?${query.toString()}`,
+    )
+    items.push(...(page.items ?? []))
+    if (!page.has_more || !page.next_cursor) break
+    cursor = page.next_cursor
+  }
+  return items
+}
+
+export async function fetchRevisionPrefixesAll(revisionId: string): Promise<RevisionPrefix[]> {
+  const items = await apiPageAll<RevisionPrefix>(`/v1/revisions/${revisionId}/prefixes`)
+  return items
+}
+
+export async function fetchRevisionPrefixesResponse(
+  revisionId: string,
+  cursor?: string | null,
+  limit = 500,
+): Promise<RevisionPrefixesResponse> {
+  const query = new URLSearchParams({ limit: String(limit) })
+  if (cursor) query.set('cursor', cursor)
+  return apiJSON<RevisionPrefixesResponse>(`/v1/revisions/${revisionId}/prefixes?${query.toString()}`)
+}
+
+export async function fetchModuleSourceCatalog(moduleId: string, moduleType: ModuleType) {
+  if (moduleType === 'DOMAINS') {
+    const entries = await apiPageAll<DomainEntriesResponse['items'][number]>(
+      `/v1/modules/${moduleId}/domain-entries`,
+    )
+    return { domains: entries }
+  }
+  if (moduleType === 'AS_PREFIXES') {
+    const entries = await apiPageAll<AsEntriesResponse['items'][number]>(
+      `/v1/modules/${moduleId}/as-entries`,
+    )
+    return { asns: entries }
+  }
+  if (moduleType === 'CDN_CIDRS') {
+    const entries = await apiPageAll<CdnSourcesResponse['items'][number]>(
+      `/v1/modules/${moduleId}/cdn-sources`,
+    )
+    return { cdnSources: entries }
+  }
+  if (moduleType === 'IP_RANGES') {
+    const entries = await apiPageAll<IpRangeEntriesResponse['items'][number]>(
+      `/v1/modules/${moduleId}/ip-range-entries`,
+    )
+    return { ipRanges: entries }
+  }
+  return {}
+}

apps/web/src/lib/data-grid-defaults.ts

@@ -0,0 +1,44 @@
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type TableOptions,
+} from '@tanstack/react-table'
+
+import type { DataGridProps } from '@/components/reui/data-grid/data-grid'
+
+export const DATA_GRID_TABLE_LAYOUT: NonNullable<DataGridProps<object>['tableLayout']> = {
+  dense: true,
+  headerSticky: true,
+  rowBorder: true,
+}
+
+export const DATA_GRID_PAGINATION_RU = {
+  sizes: [10, 25, 50] as number[],
+  sizesLabel: 'Показать',
+  sizesDescription: 'на странице',
+  info: '{from}–{to} из {count}',
+  rowsPerPageLabel: 'Строк на странице',
+  previousPageLabel: 'Предыдущая страница',
+  nextPageLabel: 'Следующая страница',
+}
+
+export const DATA_GRID_DENSE_LAYOUT: NonNullable<DataGridProps<object>['tableLayout']> = {
+  ...DATA_GRID_TABLE_LAYOUT,
+  dense: true,
+}
+
+export function createClientDataGridOptions<TData extends object>(
+  overrides?: Partial<TableOptions<TData>>,
+): Pick<
+  TableOptions<TData>,
+  'getCoreRowModel' | 'getSortedRowModel' | 'getPaginationRowModel' | 'initialState'
+> {
+  return {
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: { pagination: { pageSize: 10 } },
+    ...overrides,
+  }
+}

apps/web/src/lib/modules/display.ts

@@ -0,0 +1,24 @@
+import type { ModuleRow } from '@/types/api'
+
+export function formatDateTime(value: string | null | undefined): string {
+  if (typeof value !== 'string' || value.trim().length === 0) return '—'
+  const parsed = new Date(value)
+  if (Number.isNaN(parsed.getTime())) return '—'
+  return parsed.toLocaleString('ru-RU')
+}
+
+export function moduleIntervalLabel(moduleRow: ModuleRow): string {
+  const cron = typeof moduleRow.cron_expr === 'string' ? moduleRow.cron_expr.trim() : ''
+  const raw = moduleRow.refresh_interval_sec as unknown
+  const interval =
+    typeof raw === 'number'
+      ? raw
+      : typeof raw === 'string' && raw.trim().length > 0
+        ? Number(raw)
+        : null
+  const intervalLabel = interval !== null && Number.isFinite(interval) ? `${interval}с` : ''
+  if (cron && intervalLabel) return `${intervalLabel} (${cron})`
+  if (cron) return cron
+  if (intervalLabel) return intervalLabel
+  return '—'
+}

apps/web/src/lib/modules/helpers.ts

@@ -0,0 +1,41 @@
+import type { BgpCommunity, DohProfile, ModuleRow } from '@/types/api'
+
+export const NONE_OPTION = '__none__'
+
+export function communityLabel(id: string | null | undefined, communities: BgpCommunity[]): string {
+  if (!id) return '—'
+  const c = communities.find((x) => x.id === id)
+  if (!c) return `${id.slice(0, 8)}…`
+  const t = c.title?.trim()
+  return t || c.community
+}
+
+export function communityOptionLabel(c: BgpCommunity): string {
+  const t = c.title?.trim()
+  return t || c.community
+}
+
+export function nullableSelectValue(value: string | null | undefined): string {
+  if (value === null || value === undefined || value === '') return NONE_OPTION
+  return value
+}
+
+export function fromNullableSelect(value: string): string | null {
+  if (value === NONE_OPTION || value === '') return null
+  return value
+}
+
+export function moduleDohProfileIds(modRow: ModuleRow | null): string[] {
+  if (!modRow) return []
+  if (modRow.doh_profile_ids?.length) return modRow.doh_profile_ids
+  return modRow.doh_profile_id ? [modRow.doh_profile_id] : []
+}
+
+export function dohProfileLabel(id: string, dohProfiles: DohProfile[]): string {
+  const p = dohProfiles.find((d) => d.id === id)
+  return p ? (p.name?.trim() ? `${p.name} (${p.url})` : p.url) : `${id.slice(0, 8)}…`
+}
+
+export function normalizeCdnSourceKind(k: string): 'plaintext' | 'json' {
+  return k.trim().toLowerCase() === 'json' ? 'json' : 'plaintext'
+}

apps/web/src/lib/queryClient.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60_000,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+})

apps/web/src/lib/router.ts

@@ -0,0 +1,25 @@
+import { QueryClient } from '@tanstack/react-query'
+import {
+  createRouter as tanstackCreateRouter,
+  rootRouteId,
+} from '@tanstack/react-router'
+
+import { routeTree } from '../routeTree.gen'
+import { queryClient } from './queryClient'
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}
+
+export function createRouter(opts?: { context?: { queryClient: QueryClient } }) {
+  return tanstackCreateRouter({
+    routeTree,
+    context: opts?.context ?? { queryClient },
+    defaultPreload: 'intent',
+    scrollRestoration: true,
+  })
+}
+
+export { rootRouteId }

apps/web/src/lib/ui-labels.ts

@@ -0,0 +1,29 @@
+import type { DohResolverPolicy } from '@/types/api'
+
+export function dohPolicyRu(policy: DohResolverPolicy | string | null | undefined): string {
+  switch (policy) {
+    case 'primary_only':
+      return 'Только первый'
+    case 'failover':
+      return 'Резервирование'
+    case 'union':
+      return 'Объединение'
+    default:
+      return 'Только первый'
+  }
+}
+
+export function moduleTypeRu(type: string): string {
+  switch (type) {
+    case 'AS_PREFIXES':
+      return 'AS (номера)'
+    case 'CDN_CIDRS':
+      return 'CDN CIDR'
+    case 'DOMAINS':
+      return 'Домены'
+    case 'IP_RANGES':
+      return 'IP-диапазоны'
+    default:
+      return type
+  }
+}

apps/web/src/main.tsx

@@ -0,0 +1,27 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { RouterProvider } from '@tanstack/react-router'
+import { Toaster } from '@evobgp/ui/components/sonner'
+
+import '@evobgp/ui/globals.css'
+
+import { queryClient } from '@/lib/queryClient'
+import { createRouter } from '@/lib/router'
+import { ThemeProvider } from '@/components/theme-provider'
+
+const router = createRouter({ context: { queryClient } })
+
+const rootEl = document.getElementById('root')
+if (!rootEl) throw new Error('Root element #root not found')
+
+createRoot(rootEl).render(
+  <StrictMode>
+    <ThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+        <Toaster richColors position="top-right" />
+      </QueryClientProvider>
+    </ThemeProvider>
+  </StrictMode>,
+)

apps/web/src/queries/api-keys.ts

@@ -0,0 +1,66 @@
+import { queryOptions, useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+import { apiJSON, apiMutate } from '@/lib/api-client'
+import type { ApiKey, ApiKeyCreate, ApiKeyCreated, ApiKeysResponse } from '@/types/api'
+
+export const apiKeysKeys = {
+  all: ['api-keys'] as const,
+  list: () => [...apiKeysKeys.all, 'list'] as const,
+}
+
+export function apiKeysQueryOptions() {
+  return queryOptions<ApiKey[]>({
+    queryKey: apiKeysKeys.list(),
+    queryFn: async () => {
+      const page = await apiJSON<ApiKeysResponse>('/v1/api-keys?limit=500')
+      return page.items ?? []
+    },
+    staleTime: 60_000,
+  })
+}
+
+function invalidateApiKeysList(qc: ReturnType<typeof useQueryClient>) {
+  void qc.invalidateQueries({ queryKey: apiKeysKeys.list() })
+}
+
+export function useCreateApiKeyMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (body: ApiKeyCreate) =>
+      apiMutate<ApiKeyCreated>('/v1/api-keys', 'POST', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('Ключ создан')
+      invalidateApiKeysList(qc)
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось создать ключ'),
+  })
+}
+
+export function useRevokeApiKeyMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) =>
+      apiMutate(`/v1/api-keys/${id}`, 'DELETE', undefined, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('Ключ отозван')
+      invalidateApiKeysList(qc)
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось отозвать'),
+  })
+}
+
+export function useRotateApiKeyMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) =>
+      apiMutate<ApiKeyCreated>(`/v1/api-keys/${id}/rotate`, 'POST', undefined, {
+        idempotent: false,
+      }),
+    onSuccess: () => {
+      toast.success('Ключ ротирован')
+      invalidateApiKeysList(qc)
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось ротировать'),
+  })
+}

apps/web/src/queries/auth.ts

@@ -0,0 +1,17 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type { AuthSession } from '@/types/api'
+
+export const authKeys = {
+  all: ['auth'] as const,
+  session: () => [...authKeys.all, 'session'] as const,
+}
+
+export function authSessionQueryOptions() {
+  return queryOptions<AuthSession>({
+    queryKey: authKeys.session(),
+    queryFn: () => apiJSON<AuthSession>('/v1/auth/session'),
+    retry: false,
+    staleTime: 30_000,
+  })
+}

apps/web/src/queries/directories.ts

@@ -0,0 +1,25 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type { CommunitiesResponse, DohProfilesResponse } from '@/types/api'
+
+export const directoriesKeys = {
+  all: ['directories'] as const,
+  communities: () => [...directoriesKeys.all, 'communities'] as const,
+  doh: () => [...directoriesKeys.all, 'doh'] as const,
+}
+
+export function directoriesCommunitiesQueryOptions() {
+  return queryOptions<CommunitiesResponse>({
+    queryKey: directoriesKeys.communities(),
+    queryFn: () => apiJSON<CommunitiesResponse>('/v1/communities?limit=200'),
+    staleTime: 30_000,
+  })
+}
+
+export function directoriesDohQueryOptions() {
+  return queryOptions<DohProfilesResponse>({
+    queryKey: directoriesKeys.doh(),
+    queryFn: () => apiJSON<DohProfilesResponse>('/v1/doh-profiles?limit=200'),
+    staleTime: 30_000,
+  })
+}

apps/web/src/queries/firewall.ts

@@ -0,0 +1,100 @@
+import { queryOptions, useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+import { apiJSON } from '@/lib/api-client'
+import type {
+  FirewallClient,
+  FirewallClientsResponse,
+  FirewallInstallContext,
+  FirewallRule,
+  FirewallRulesResponse,
+} from '@/types/api'
+
+export const firewallKeys = {
+  all: ['firewall'] as const,
+  clients: () => [...firewallKeys.all, 'clients'] as const,
+  installContext: () => [...firewallKeys.all, 'install-context'] as const,
+  rules: (scope: string, clientId?: string) =>
+    [...firewallKeys.all, 'rules', scope, clientId ?? ''] as const,
+}
+
+export function firewallInstallContextQueryOptions() {
+  return queryOptions<FirewallInstallContext>({
+    queryKey: firewallKeys.installContext(),
+    queryFn: () => apiJSON<FirewallInstallContext>('/v1/firewall/install-context'),
+    staleTime: 60_000,
+    retry: false,
+  })
+}
+
+export function firewallClientsQueryOptions() {
+  return queryOptions<FirewallClientsResponse>({
+    queryKey: firewallKeys.clients(),
+    queryFn: () => apiJSON<FirewallClientsResponse>('/v1/firewall/clients'),
+    staleTime: 15_000,
+  })
+}
+
+export function firewallRulesQueryOptions(scope: 'tenant' | 'client', clientId?: string) {
+  const qs =
+    scope === 'client' && clientId
+      ? `?scope=client&client_id=${encodeURIComponent(clientId)}`
+      : '?scope=tenant'
+  return queryOptions<FirewallRulesResponse>({
+    queryKey: firewallKeys.rules(scope, clientId),
+    queryFn: () => apiJSON<FirewallRulesResponse>(`/v1/firewall/rules${qs}`),
+    staleTime: 15_000,
+  })
+}
+
+export function useApproveFirewallClient() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) =>
+      apiJSON<FirewallClient>(`/v1/firewall/clients/${id}/approve`, { method: 'POST' }),
+    onSuccess: () => {
+      toast.success('Клиент одобрен')
+      void qc.invalidateQueries({ queryKey: firewallKeys.clients() })
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось одобрить'),
+  })
+}
+
+export function useDeleteFirewallClient() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) =>
+      apiJSON<void>(`/v1/firewall/clients/${id}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      toast.success('Клиент удалён')
+      void qc.invalidateQueries({ queryKey: firewallKeys.clients() })
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось удалить'),
+  })
+}
+
+export function useCreateFirewallRule() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (body: Record<string, unknown>) =>
+      apiJSON<FirewallRule>('/v1/firewall/rules', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      }),
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: firewallKeys.all })
+    },
+  })
+}
+
+export function useDeleteFirewallRule() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) =>
+      apiJSON<void>(`/v1/firewall/rules/${id}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: firewallKeys.all })
+    },
+  })
+}

apps/web/src/queries/modules.ts

@@ -0,0 +1,53 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type {
+  ModuleRow,
+  ModulesResponse,
+  Page,
+} from '@/types/api'
+
+export const modulesKeys = {
+  all: ['modules'] as const,
+  list: () => [...modulesKeys.all, 'list'] as const,
+  detail: (id: string) => [...modulesKeys.all, 'detail', id] as const,
+  domainEntries: (id: string) => [...modulesKeys.all, 'domain-entries', id] as const,
+  asEntries: (id: string) => [...modulesKeys.all, 'as-entries', id] as const,
+  cdnSources: (id: string) => [...modulesKeys.all, 'cdn-sources', id] as const,
+  ipRangeEntries: (id: string) => [...modulesKeys.all, 'ip-range-entries', id] as const,
+}
+
+export function modulesListQueryOptions() {
+  return queryOptions<ModulesResponse>({
+    queryKey: modulesKeys.list(),
+    queryFn: () => apiJSON<ModulesResponse>('/v1/modules?limit=200'),
+  })
+}
+
+export function moduleDetailQueryOptions(id: string) {
+  return queryOptions<ModuleRow>({
+    queryKey: modulesKeys.detail(id),
+    queryFn: () => apiJSON<ModuleRow>(`/v1/modules/${id}`),
+  })
+}
+
+export type ModuleEntriesPage = Page<Record<string, unknown>>
+
+export function moduleEntriesQueryOptions(id: string, type: ModuleRow['type']) {
+  const pathByType: Record<ModuleRow['type'], string> = {
+    DOMAINS: `/v1/modules/${id}/domain-entries?limit=500`,
+    AS_PREFIXES: `/v1/modules/${id}/as-entries?limit=500`,
+    CDN_CIDRS: `/v1/modules/${id}/cdn-sources?limit=500`,
+    IP_RANGES: `/v1/modules/${id}/ip-range-entries?limit=500`,
+  }
+  const path = pathByType[type]
+  const keyByType: Record<ModuleRow['type'], readonly string[]> = {
+    DOMAINS: modulesKeys.domainEntries(id),
+    AS_PREFIXES: modulesKeys.asEntries(id),
+    CDN_CIDRS: modulesKeys.cdnSources(id),
+    IP_RANGES: modulesKeys.ipRangeEntries(id),
+  }
+  return queryOptions<ModuleEntriesPage>({
+    queryKey: keyByType[type],
+    queryFn: () => apiJSON<ModuleEntriesPage>(path),
+  })
+}

apps/web/src/queries/monitoring.ts

@@ -0,0 +1,71 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiFetch, apiJSON, apiMutate } from '@/lib/api-client'
+
+export interface HealthStatus {
+  ok: boolean
+  status?: string
+  error?: string
+}
+
+export interface ReadyStatus {
+  status?: string
+  checks?: Record<string, boolean | { ok?: boolean; error?: string }>
+}
+
+export interface VersionInfo {
+  version?: string
+  app?: string
+  git_sha?: string
+  build_time?: string
+}
+
+export const monitoringKeys = {
+  all: ['monitoring'] as const,
+  health: () => [...monitoringKeys.all, 'health'] as const,
+  ready: () => [...monitoringKeys.all, 'ready'] as const,
+  version: () => [...monitoringKeys.all, 'version'] as const,
+}
+
+async function fetchHealth(): Promise<HealthStatus> {
+  const res = await apiFetch('/v1/health', { method: 'GET' })
+  let body: { status?: string } = {}
+  try {
+    body = (await res.json()) as { status?: string }
+  } catch {
+    /* ignore */
+  }
+  return { ok: res.ok, status: body.status, error: res.ok ? undefined : `HTTP ${res.status}` }
+}
+
+export function monitoringHealthQueryOptions() {
+  return queryOptions<HealthStatus>({
+    queryKey: monitoringKeys.health(),
+    queryFn: fetchHealth,
+    staleTime: 15_000,
+  })
+}
+
+export function monitoringReadyQueryOptions() {
+  return queryOptions<ReadyStatus>({
+    queryKey: monitoringKeys.ready(),
+    queryFn: () => apiJSON<ReadyStatus>('/v1/ready'),
+    staleTime: 15_000,
+  })
+}
+
+export function monitoringVersionQueryOptions() {
+  return queryOptions<VersionInfo>({
+    queryKey: monitoringKeys.version(),
+    queryFn: () => apiJSON<VersionInfo>('/v1/version'),
+    staleTime: 60_000,
+  })
+}
+
+export async function fetchLog(endpoint: string): Promise<string> {
+  const res = await apiFetch(endpoint, { method: 'GET' })
+  return await res.text()
+}
+
+export async function clearLog(endpoint: string): Promise<void> {
+  await apiMutate(endpoint, 'DELETE', {})
+}

apps/web/src/queries/network.ts

@@ -0,0 +1,36 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type { BirdStatus, PeersResponse, SpeakersResponse } from '@/types/api'
+
+export const NETWORK_AUTO_REFRESH_MS = 30_000
+
+export const networkKeys = {
+  all: ['network'] as const,
+  peers: () => [...networkKeys.all, 'peers'] as const,
+  speakers: () => [...networkKeys.all, 'speakers'] as const,
+  bird: () => [...networkKeys.all, 'bird'] as const,
+}
+
+export function networkPeersQueryOptions() {
+  return queryOptions<PeersResponse>({
+    queryKey: networkKeys.peers(),
+    queryFn: () => apiJSON<PeersResponse>('/v1/peers?limit=200&live=1'),
+    staleTime: 15_000,
+  })
+}
+
+export function networkSpeakersQueryOptions() {
+  return queryOptions<SpeakersResponse>({
+    queryKey: networkKeys.speakers(),
+    queryFn: () => apiJSON<SpeakersResponse>('/v1/speakers?limit=200&live=1'),
+    staleTime: 15_000,
+  })
+}
+
+export function networkBirdQueryOptions() {
+  return queryOptions<BirdStatus>({
+    queryKey: networkKeys.bird(),
+    queryFn: () => apiJSON<BirdStatus>('/v1/bird/status'),
+    staleTime: 15_000,
+  })
+}

apps/web/src/queries/operations.ts

@@ -0,0 +1,40 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type { JobsResponse, RevisionsResponse, RevisionDiff } from '@/types/api'
+
+export const operationsKeys = {
+  all: ['operations'] as const,
+  revisions: () => [...operationsKeys.all, 'revisions'] as const,
+  jobs: (params?: { status?: string; kind?: string }) =>
+    [...operationsKeys.all, 'jobs', params ?? {}] as const,
+  diff: (a: string, b: string) => [...operationsKeys.all, 'diff', a, b] as const,
+}
+
+export function operationsRevisionsQueryOptions() {
+  return queryOptions<RevisionsResponse>({
+    queryKey: operationsKeys.revisions(),
+    queryFn: () => apiJSON<RevisionsResponse>('/v1/revisions?limit=100'),
+    staleTime: 30_000,
+  })
+}
+
+export function operationsJobsQueryOptions(params?: { status?: string; kind?: string }) {
+  return queryOptions<JobsResponse>({
+    queryKey: operationsKeys.jobs(params),
+    queryFn: () => {
+      const sp = new URLSearchParams({ limit: '200' })
+      if (params?.status) sp.set('status', params.status)
+      if (params?.kind) sp.set('kind', params.kind)
+      return apiJSON<JobsResponse>(`/v1/jobs?${sp.toString()}`)
+    },
+    staleTime: 10_000,
+  })
+}
+
+export function operationsDiffQueryOptions(a: string, b: string) {
+  return queryOptions<RevisionDiff>({
+    queryKey: operationsKeys.diff(a, b),
+    queryFn: () => apiJSON<RevisionDiff>(`/v1/revisions/${a}/diff/${b}`),
+    enabled: Boolean(a) && Boolean(b),
+  })
+}

apps/web/src/queries/overview.ts

@@ -0,0 +1,115 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type {
+  JobRow,
+  JobsResponse,
+  ModuleRow,
+  ModulesResponse,
+  PeerRow,
+  PeersResponse,
+  RevisionRow,
+  RevisionsResponse,
+  SpeakerRow,
+  SpeakersResponse,
+} from '@/types/api'
+
+export const overviewKeys = {
+  all: ['overview'] as const,
+  modules: () => [...overviewKeys.all, 'modules'] as const,
+  peers: () => [...overviewKeys.all, 'peers'] as const,
+  speakers: () => [...overviewKeys.all, 'speakers'] as const,
+  revisions: () => [...overviewKeys.all, 'revisions'] as const,
+  jobs: () => [...overviewKeys.all, 'jobs'] as const,
+  health: () => [...overviewKeys.all, 'health'] as const,
+}
+
+export function overviewModulesQueryOptions() {
+  return queryOptions<ModulesResponse>({
+    queryKey: overviewKeys.modules(),
+    queryFn: () => apiJSON<ModulesResponse>('/v1/modules?limit=200'),
+    staleTime: 60_000,
+  })
+}
+
+export function overviewPeersQueryOptions() {
+  return queryOptions<PeersResponse>({
+    queryKey: overviewKeys.peers(),
+    queryFn: () => apiJSON<PeersResponse>('/v1/peers?limit=200&live=1'),
+    staleTime: 30_000,
+  })
+}
+
+export function overviewSpeakersQueryOptions() {
+  return queryOptions<SpeakersResponse>({
+    queryKey: overviewKeys.speakers(),
+    queryFn: () => apiJSON<SpeakersResponse>('/v1/speakers?limit=200&live=1'),
+    staleTime: 30_000,
+  })
+}
+
+export function overviewRevisionsQueryOptions() {
+  return queryOptions<RevisionsResponse>({
+    queryKey: overviewKeys.revisions(),
+    queryFn: () => apiJSON<RevisionsResponse>('/v1/revisions?limit=10'),
+    staleTime: 60_000,
+  })
+}
+
+export function overviewJobsQueryOptions() {
+  return queryOptions<JobsResponse>({
+    queryKey: overviewKeys.jobs(),
+    queryFn: () => apiJSON<JobsResponse>('/v1/jobs?limit=10'),
+    staleTime: 15_000,
+  })
+}
+
+export function overviewHealthQueryOptions() {
+  return queryOptions<boolean>({
+    queryKey: overviewKeys.health(),
+    queryFn: async () => {
+      const res = await fetch('/v1/health')
+      return res.ok
+    },
+    staleTime: 30_000,
+  })
+}
+
+// Selectors / helpers
+export type NetworkMetrics = {
+  peersTotal: number
+  peersEnabled: number
+  peersEstablished: number
+  peersMismatch: number
+  speakersTotal: number
+  speakersOnline: number
+}
+
+export function aggregateNetworkMetrics(
+  peers: PeerRow[],
+  speakers: SpeakerRow[],
+): NetworkMetrics {
+  const peersEnabled = peers.filter((p) => p.enabled !== false).length
+  const peersEstablished = peers.filter((p) => p.session_state === 'Established').length
+  const peersMismatch = peers.filter((p) => p.session_mismatch).length
+  const speakersOnline = speakers.filter((s) => s.live?.agent_ok).length
+  return {
+    peersTotal: peers.length,
+    peersEnabled,
+    peersEstablished,
+    peersMismatch,
+    speakersTotal: speakers.length,
+    speakersOnline,
+  }
+}
+
+export function runningJobCount(jobs: JobRow[]): number {
+  return jobs.filter((j) => j.status === 'running' || j.status === 'queued').length
+}
+
+export function moduleNameById(modules: ModuleRow[]): Map<string, string> {
+  return new Map(modules.map((m) => [m.id, m.name]))
+}
+
+export function recentRevisions(revisions: RevisionRow[], n = 10): RevisionRow[] {
+  return revisions.slice(0, n)
+}

apps/web/src/queries/settings.ts

@@ -0,0 +1,128 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+
+export type AppSettings = Record<string, unknown>
+
+export const BIRD_SETTING_KEYS = [
+  'bird_router_id',
+  'bird_local_ipv4',
+  'bird_local_ipv6',
+  'bird_local_asn',
+  'bird_bgp_source_ipv4',
+  'bird_bgp_source_ipv6',
+] as const
+
+export const REVISION_SETTING_KEYS = ['revision_retention_minutes'] as const
+
+export const RUNTIME_LOGS_SETTING_KEYS = [
+  'runtime_logs_auto_enabled',
+  'runtime_logs_max_file_mb',
+  'runtime_logs_auto_schedule',
+  'runtime_logs_auto_mode',
+] as const
+
+export const KNOWN_SETTING_KEYS = [
+  ...BIRD_SETTING_KEYS,
+  ...REVISION_SETTING_KEYS,
+  ...RUNTIME_LOGS_SETTING_KEYS,
+] as const
+
+export type KnownSettingKey = (typeof KNOWN_SETTING_KEYS)[number]
+export type BirdSettingKey = (typeof BIRD_SETTING_KEYS)[number]
+export type RevisionSettingKey = (typeof REVISION_SETTING_KEYS)[number]
+export type RuntimeLogsSettingKey = (typeof RUNTIME_LOGS_SETTING_KEYS)[number]
+
+export const NUMERIC_SETTING_KEYS = new Set<KnownSettingKey>([
+  'bird_local_asn',
+  'revision_retention_minutes',
+  'runtime_logs_max_file_mb',
+])
+
+export const BOOLEAN_SETTING_KEYS = new Set<KnownSettingKey>(['runtime_logs_auto_enabled'])
+
+export const settingsKeys = {
+  all: ['settings'] as const,
+}
+
+export function settingsQueryOptions() {
+  return queryOptions<AppSettings>({
+    queryKey: settingsKeys.all,
+    queryFn: () => apiJSON<AppSettings>('/v1/settings'),
+    staleTime: 30_000,
+  })
+}
+
+export function parseKnownValue(key: KnownSettingKey, value: unknown): string {
+  if (NUMERIC_SETTING_KEYS.has(key)) {
+    if (typeof value === 'number' && Number.isFinite(value)) return String(value)
+    if (typeof value === 'string') return value
+    return ''
+  }
+  if (typeof value === 'string') return value
+  return ''
+}
+
+export interface PartitionedSettings {
+  bird: Partial<Record<BirdSettingKey, string>>
+  revision: Partial<Record<RevisionSettingKey, string>>
+  runtimeLogs: Partial<Record<RuntimeLogsSettingKey, string>>
+  additional: { id: number; key: string; value: string }[]
+}
+
+export function partitionSettings(settings: AppSettings): PartitionedSettings {
+  const bird: Partial<Record<BirdSettingKey, string>> = {}
+  const revision: Partial<Record<RevisionSettingKey, string>> = {}
+  const runtimeLogs: Partial<Record<RuntimeLogsSettingKey, string>> = {}
+  const additional: { id: number; key: string; value: string }[] = []
+  let id = 1
+
+  for (const [key, value] of Object.entries(settings)) {
+    if ((BIRD_SETTING_KEYS as readonly string[]).includes(key)) {
+      bird[key as BirdSettingKey] = parseKnownValue(key as KnownSettingKey, value)
+    } else if (key === 'revision_retention_minutes') {
+      revision.revision_retention_minutes = parseKnownValue(
+        key as RevisionSettingKey,
+        value,
+      )
+    } else if ((RUNTIME_LOGS_SETTING_KEYS as readonly string[]).includes(key)) {
+      const rk = key as RuntimeLogsSettingKey
+      if (rk === 'runtime_logs_auto_enabled') {
+        runtimeLogs.runtime_logs_auto_enabled =
+          value === true || value === 1 || value === 'true' || value === '1'
+            ? 'true'
+            : 'false'
+      } else if (rk === 'runtime_logs_auto_mode') {
+        const m = String(value ?? '').trim()
+        runtimeLogs.runtime_logs_auto_mode = m === 'delete' ? 'delete' : m === 'truncate' ? 'truncate' : ''
+      } else {
+        runtimeLogs[rk] = parseKnownValue(rk, value)
+      }
+    } else {
+      additional.push({
+        id: id++,
+        key,
+        value: typeof value === 'string' ? value : String(value),
+      })
+    }
+  }
+
+  return { bird, revision, runtimeLogs, additional }
+}
+
+export function buildPayload(
+  keys: readonly KnownSettingKey[],
+  form: Record<string, string>,
+): Record<string, string | number | boolean> {
+  const payload: Record<string, string | number | boolean> = {}
+  for (const key of keys) {
+    const value = String(form[key] ?? '').trim()
+    if (BOOLEAN_SETTING_KEYS.has(key)) {
+      payload[key] = value === 'true'
+      continue
+    }
+    if (!value) continue
+    if (NUMERIC_SETTING_KEYS.has(key)) payload[key] = Number(value)
+    else payload[key] = value
+  }
+  return payload
+}

apps/web/src/routes/__root.tsx

@@ -0,0 +1,18 @@
+import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
+import { AppShell } from '@/components/layout/app-shell'
+
+interface RouterContext {
+  queryClient: import('@tanstack/react-query').QueryClient
+}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <AppShell>
+      <Outlet />
+    </AppShell>
+  )
+}