vigdorov/team-planner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
684e4165882eb440a13eb2e806d529eee3bddd2c
team-planner/ROADMAP.md
vigdorov 684e416588
All checks were successful
continuous-integration/drone/push Build is passing
Details
add view any columns and view mode for ideas
2026-01-15 11:41:01 +03:00

23 KiB
Raw Blame History

План разработки Team Planner

Это основной источник истины для всех планов по проекту. Обновляй этот файл при изменении планов или завершении задач.

Обзор фаз

Фаза Название Статус Описание
0 Инициализация ✅ Завершена Настройка проектов, инфраструктура
1 Базовый функционал ✅ Завершена CRUD идей, таблица, редактирование
1.5 Авторизация ✅ Завершена Keycloak, JWT, защита API
2 Расширенный функционал ✅ Завершена Drag&Drop, цвета, комментарии, команда
3 AI-интеграция ✅ Завершена Оценка времени, рекомендации
3.1 Генерация мини-ТЗ ✅ Завершена Генерация, редактирование, история ТЗ
3.2 Полный просмотр идеи 📋 Планируется Просмотр и редактирование всех полей
4 Права доступа 📋 Планируется Гранулярные права, панель админа
5 Аудит и история 📋 Планируется Логирование действий, восстановление
6 Real-time и WebSocket 📋 Планируется Многопользовательская работа
7 Темная тема 📋 Планируется Переключение светлая/тёмная
8 Экспорт 📋 Планируется Экспорт идеи в DOCX

Фаза 0: Инициализация ✅

Backend

  • Создать NestJS проект (nest new backend)
  • Настроить TypeORM + PostgreSQL
  • Создать docker-compose для PostgreSQL
  • Настроить базовую структуру модулей
  • Добавить глобальную валидацию (class-validator)
  • Настроить CORS

Frontend

  • Создать React проект (Vite + TypeScript)
  • Установить и настроить MUI
  • Установить Zustand
  • Установить TanStack Table
  • Установить dnd-kit
  • Настроить Axios + React Query
  • Создать базовую структуру папок

Инфраструктура

  • Создать общий docker-compose
  • Настроить ESLint + Prettier для обоих проектов

Фаза 1: Базовый функционал ✅

Backend — Модуль Ideas

  • Создать сущность Idea (entity)
  • Создать DTO (CreateIdeaDto, UpdateIdeaDto, QueryIdeasDto)
  • Реализовать IdeasService
  • Реализовать IdeasController
    • GET /api/ideas (с пагинацией, фильтрами, сортировкой)
    • POST /api/ideas
    • PATCH /api/ideas/:id
    • DELETE /api/ideas/:id
  • Добавить валидацию
  • E2E тесты (Playwright)

Frontend — Таблица идей

  • Создать типы (types/idea.ts)
  • Создать API-сервис (services/ideas.ts)
  • Создать Zustand store (store/ideas.ts)
  • Создать компонент IdeasTable
    • Отображение колонок
    • Пагинация
    • Сортировка (клик по заголовку)
  • Создать компоненты фильтров
    • Фильтр по статусу
    • Фильтр по приоритету
    • Фильтр по модулю
    • Текстовый поиск
  • Inline-редактирование ячеек
    • Double-click для редактирования
    • Автосохранение при blur/Enter
    • Оптимистичные обновления
  • Создать модалку создания идеи
  • Добавить skeleton loader
  • Добавить empty state
  • Удаление идей
  • Локализация интерфейса на русский язык

Фаза 1.5: Авторизация ✅

Keycloak интеграция для защиты приложения

Настройка Keycloak (auth.vigdorov.ru)

  • Создать realm team-planner
  • Создать client team-planner-frontend (public, PKCE)
  • Настроить Valid Redirect URIs
  • Создать тестового пользователя

Backend — Auth модуль

  • Установить passport, passport-jwt, jwks-rsa
  • Создать JwtStrategy (валидация через JWKS)
  • Создать JwtAuthGuard (глобальный guard)
  • Создать @Public() декоратор
  • Добавить env переменные (KEYCLOAK_REALM_URL)
  • Защитить все endpoints (кроме /health)

Frontend — AuthProvider

  • Установить keycloak-js
  • Создать keycloak.ts сервис
  • Создать AuthProvider компонент
    • onLoad: 'login-required'
    • PKCE (S256)
    • Автообновление токена
  • Добавить interceptors в api.ts
    • Authorization header
    • Обработка 401
  • Обернуть App в AuthProvider

Фаза 2: Расширенный функционал ✅

Backend — Дополнения

  • PATCH /api/ideas/reorder (изменение порядка)
  • Модуль Comments
    • Сущность Comment
    • GET /api/ideas/:id/comments
    • POST /api/ideas/:id/comments
    • DELETE /api/comments/:id
  • Модуль Team
    • Сущность TeamMember
    • CRUD endpoints
    • GET /api/team/summary

Frontend — Drag & Drop ✅

  • Интегрировать dnd-kit в таблицу
  • Drag handle в первой колонке
  • Визуальная индикация при перетаскивании (DragOverlay)
  • Сохранение порядка на сервер (оптимистичные обновления)
  • Сортировка по order по умолчанию

Frontend — Цветовая маркировка ✅

  • Добавить поле color в таблицу
  • Цветовой фон строки
  • Picker для выбора цвета
  • Фильтр по цвету

Frontend — Комментарии ✅

  • Раскрывающаяся панель под строкой
  • Список комментариев
  • Форма добавления комментария
  • Удаление комментариев

Frontend — Управление командой ✅

  • Страница /team (табы навигации)
  • Сводка по ролям
  • Таблица участников
  • Модалка добавления/редактирования
  • Матрица производительности (время на задачи по сложности)

E2E тестирование ✅

  • Playwright тесты для Фазы 1 (17 тестов)
  • Playwright тесты для Фазы 2 (37 тестов)
  • data-testid во всех компонентах
  • Гайд E2E_TESTING.md

Фаза 3: AI-интеграция ✅

Backend — Модуль AI

  • Интегрировать ai-proxy service
  • POST /api/ai/estimate
    • Получить идею и состав команды
    • Сформировать промпт
    • Отправить запрос в AI
    • Распарсить ответ
    • Сохранить оценку
  • Rate limiting для AI-запросов (опционально)

Frontend — AI-оценка

  • Кнопка "Оценить AI" в строке/детали идеи
  • Модалка с результатом оценки
    • Общее время
    • Сложность
    • Разбивка по ролям
    • Рекомендации
  • Отображение оценки в таблице
  • Loading state для AI-запросов

Фаза 3.1: Генерация мини-ТЗ ✅

Генерация технического задания с помощью AI + история версий

Backend — Расширение модуля AI

  • Добавить поля в Idea entity (specification, specificationGeneratedAt)
  • Миграция для новых полей
  • POST /api/ai/generate-specification
    • Получить идею
    • Сформировать промпт для генерации ТЗ
    • Отправить запрос в AI
    • Сохранить результат
  • Обновить POST /api/ai/estimate — учитывать ТЗ в промпте
  • Добавить specification в UpdateIdeaDto

Backend — История ТЗ

  • SpecificationHistory entity
  • Миграция для specification_history таблицы
  • GET /api/ai/specification-history/:ideaId
  • DELETE /api/ai/specification-history/:historyId
  • POST /api/ai/specification-history/:historyId/restore
  • Автосохранение старого ТЗ в историю при перегенерации

Backend — Комментарии в AI-промптах

  • Включить комментарии к идее в промпт генерации ТЗ
  • Включить комментарии к идее в промпт оценки трудозатрат

Frontend — Модалка ТЗ

  • Новый компонент SpecificationModal
    • Режим генерации (loading → результат)
    • Режим просмотра
    • Режим редактирования
    • Markdown-рендеринг (react-markdown)
  • Кнопка ТЗ в колонке actions
    • Серая — ТЗ нет
    • Синяя — ТЗ есть
    • Spinner — генерация
  • Хук useGenerateSpecification
  • API метод generateSpecification

Frontend — История ТЗ

  • Табы "Текущее ТЗ" / "История" (при наличии истории)
  • Список исторических версий с датами
  • Просмотр исторической версии
  • Восстановление версии из истории
  • Удаление версии из истории
  • Хуки useSpecificationHistory, useDeleteSpecificationHistoryItem, useRestoreSpecificationFromHistory

E2E тестирование

  • Генерация ТЗ для идеи
  • Просмотр существующего ТЗ
  • Редактирование и сохранение ТЗ
  • data-testid для новых компонентов

Фаза 3.2: Полный просмотр идеи 📋

Просмотр и редактирование ВСЕХ полей идеи

Проблема

Сейчас в таблице отображаются не все поля идеи. Поля pain, aiRole, verificationMethod невозможно ни посмотреть, ни отредактировать.

Frontend — Дополнительные колонки в таблице

  • Добавить колонку "Боль" (pain) с inline-редактированием
  • Добавить колонку "Роль AI" (aiRole) с inline-редактированием
  • Добавить колонку "Способ проверки" (verificationMethod) с inline-редактированием
  • Column visibility — возможность скрыть/показать колонки
    • Кнопка настройки колонок (⚙️) в header таблицы
    • Dropdown с чекбоксами для каждой колонки
    • Сохранение настроек в localStorage
  • data-testid для новых колонок

Frontend — Модалка детального просмотра

  • IdeaDetailModal компонент
    • Открытие по кнопке "Подробнее" (👁️ Visibility icon)
    • Режим просмотра (по умолчанию):
      • Все поля отображаются как readonly текст
      • Кнопка "Редактировать" для перехода в режим редактирования
    • Режим редактирования:
      • Все редактируемые поля становятся input/textarea/select
      • Кнопка "Сохранить" — сохраняет изменения и возвращает в режим просмотра
      • Кнопка "Отмена" — отменяет изменения и возвращает в режим просмотра
    • Поля для редактирования: title, description, status, priority, module, targetAudience, pain, aiRole, verificationMethod
    • Readonly поля (только просмотр): estimatedHours, complexity, createdAt, updatedAt
    • Быстрый доступ: кнопки "Открыть ТЗ" и "AI-оценка"
  • Кнопка "Подробнее" в колонке actions
  • data-testid для всех элементов модалки

E2E тестирование

  • Column visibility — скрытие/показ колонок
  • Открытие модалки детального просмотра
  • Просмотр всех полей в режиме readonly
  • Переход в режим редактирования
  • Редактирование полей pain, aiRole, verificationMethod
  • Сохранение изменений
  • Отмена редактирования

Фаза 4: Права доступа 📋

Гранулярная система прав доступа и панель администратора

Backend — Модуль Permissions

  • User entity (userId, email, name, lastLogin)
  • UserPermissions entity (связь с User, все права как boolean поля)
  • Миграции для users и user_permissions
  • PermissionsService (getMyPermissions, getUsersWithPermissions, updateUserPermissions)
  • PermissionsController
    • GET /api/permissions/me
    • GET /api/permissions/users (admin only)
    • PATCH /api/permissions/:userId (admin only)
  • PermissionsGuard (проверка прав на endpoints)
  • @RequirePermission() декоратор
  • Env: ADMIN_EMAIL из K8s Secret
  • Middleware: создание User при первом входе (только view_ideas)

Backend — Защита существующих endpoints

  • IdeasController — проверка create_ideas, edit_own/any_ideas, delete_own/any_ideas
  • CommentsController — проверка add_comments, delete_own/any_comments
  • AiController — проверка request_ai_estimate, request_ai_specification
  • TeamController — проверка manage_team, manage_roles

Frontend — Панель администратора

  • AdminPage компонент
  • PermissionsTable — таблица пользователей с чекбоксами прав
  • usePermissions хуки (useMyPermissions, useUsersPermissions, useUpdatePermissions)
  • Скрытие/отключение кнопок на основе прав
  • Роутинг: /admin (только для админа)

Backend — Автор идеи

  • Добавить поле authorId, authorName в Idea entity
  • Миграция для новых полей
  • Автозаполнение при создании идеи
  • Запрет изменения автора в UpdateIdeaDto

Frontend — Отображение автора

  • Колонка "Автор" в таблице идей
  • Отображение автора в деталях идеи

E2E тестирование

  • Тесты прав доступа
  • Тесты панели администратора
  • Тесты автора идеи

Фаза 5: Аудит и история 📋

Логирование всех действий с возможностью восстановления

Backend — Модуль Audit

  • AuditLog entity (userId, userName, action, entityType, entityId, oldValue, newValue, timestamp)
  • Миграция для audit_log таблицы
  • AuditService
    • log(action, entityType, entityId, oldValue, newValue)
    • getAuditLog(filters, pagination)
    • restore(auditId)
    • cleanup(olderThanDays)
  • AuditController
    • GET /api/audit
    • POST /api/audit/:id/restore
    • GET /api/audit/settings
    • PATCH /api/audit/settings
  • Интеграция AuditService во все сервисы (Ideas, Comments, Team, AI)
  • Cron job для очистки старых записей (@nestjs/schedule)
  • Env: AUDIT_RETENTION_DAYS

Frontend — Страница истории

  • AuditPage компонент
  • AuditLogTable с фильтрами
  • AuditDetailModal (просмотр diff)
  • Кнопка "Восстановить" для удалённых сущностей
  • useAudit хуки

Frontend — Настройки аудита (в админ-панели)

  • Поле "Срок хранения истории" в AdminPage
  • useAuditSettings хук

E2E тестирование

  • Тесты просмотра истории
  • Тесты восстановления
  • Тесты настроек аудита

Фаза 6: Real-time и WebSocket 📋

Многопользовательская работа с real-time обновлениями

Backend — WebSocket Gateway

  • Установить @nestjs/websockets, socket.io
  • EventsGateway (handleConnection, handleDisconnect)
  • JWT валидация в WebSocket handshake
  • События: idea:created, idea:updated, idea:deleted, ideas:reordered
  • События: comment:created, comment:deleted
  • События: specification:generated, estimate:generated
  • События присутствия: users:online, user:joined, user:left
  • События редактирования: idea:editing, idea:stopEditing
  • Интеграция emit во все сервисы

Frontend — WebSocket Provider

  • WebSocketProvider компонент (socket.io-client)
  • useWebSocket хук
  • Автоматическая синхронизация React Query при получении событий
  • Reconnect логика

Frontend — Индикаторы

  • OnlineUsers компонент (список онлайн пользователей)
  • EditingIndicator (кто редактирует идею)
  • Визуальная подсветка изменённых строк

Frontend — Конкурентное редактирование

  • Предупреждение при попытке редактировать занятую идею
  • Optimistic locking (проверка version/updatedAt)
  • Разрешение конфликтов

E2E тестирование

  • Тесты real-time обновлений (2 браузера)
  • Тесты присутствия
  • Тесты конкурентного редактирования

Фаза 7: Темная тема 📋

Поддержка светлой и тёмной темы интерфейса

Frontend — Theme Provider

  • ThemeStore (Zustand) — текущая тема, автоопределение
  • ThemeProvider (MUI createTheme с dark/light mode)
  • Сохранение выбора в localStorage
  • Автоопределение системной темы (prefers-color-scheme)

Frontend — Цветовые схемы

  • Палитра для тёмной темы (см. ARCHITECTURE.md 5.1)
  • Адаптация цветов статусов и приоритетов
  • Адаптация цветов маркировки строк
  • Адаптация всех компонентов

Frontend — UI

  • ThemeToggle компонент в header
  • Иконки ☀️/🌙 для переключения

E2E тестирование

  • Тест переключения темы
  • Визуальный тест тёмной темы

Фаза 8: Экспорт 📋

Экспорт идеи в документ DOCX

Backend — Модуль Export

  • Установить docx библиотеку
  • ExportService
    • generateIdeaDocx(ideaId) — генерация DOCX
    • Включение: название, описание, статус, приоритет, модуль
    • Включение: целевая аудитория, боль, роль AI, способ проверки
    • Включение: AI-оценка (если есть)
    • Включение: ТЗ в markdown → форматированный текст (если есть)
    • Включение: комментарии (автор, дата, текст)
  • ExportController
    • GET /api/export/idea/:id

Frontend — Кнопка экспорта

  • Кнопка экспорта в строке таблицы (⬇️ иконка)
  • useExportIdea хук
  • Скачивание файла через blob

E2E тестирование

  • Тест экспорта идеи
  • Проверка содержимого DOCX

Backlog (после фаз 4-8)

  • Виртуализация списка (1000+ идей)
  • Keyboard shortcuts
  • Сохранение пресетов фильтров
  • Уведомления (email/push при упоминании)
  • Интеграция с Jira/Trello (опционально)

Принципы разработки

  1. Вертикальная разработка — делаем полный flow (BE → FE) для каждой фичи
  2. Инкрементальность — сначала базовое, потом улучшаем
  3. Тестирование — покрываем критичный функционал E2E тестами (см. E2E_TESTING.md)
  4. Документирование — обновляем CONTEXT.md после значимых изменений
  5. data-testid — все новые компоненты сразу получают data-testid для тестов