Corp/docs/guides/MODERN_DOCUMENT_UI.md

Современный UI для системы документооборота

Анализ рынка

Проанализированы лучшие практики UI/UX из ведущих систем документооборота и управления проектами:

1. Google Drive

• ✅ Превью документа в центре экрана
• ✅ Боковая панель с метаданными
• ✅ Вкладка "Активность" с временной шкалой
• ✅ Быстрые действия в header
• ✅ Breadcrumbs навигация

2. Notion

• ✅ Чистый минималистичный дизайн
• ✅ Встроенный превью документов
• ✅ Комментарии и обсуждения
• ✅ Связанные документы
• ✅ История версий

3. Confluence

• ✅ Табы для организации контента
• ✅ Timeline активности
• ✅ Версионирование с diff
• ✅ Метаданные в sidebar
• ✅ Workflow статусы

4. SharePoint

• ✅ Расширенные метаданные
• ✅ Типы документов
• ✅ Workflow с согласованиями
• ✅ История изменений
• ✅ Права доступа

5. ClickUp / Monday.com

• ✅ Статусы и workflow
• ✅ Назначение и получатели
• ✅ Комментарии и обсуждения
• ✅ Timeline с прогрессом
• ✅ Связи между документами

Новая архитектура UI

Компонент: DocumentDetailModal

Структура

┌─────────────────────────────────────────────────────────────┐
│ Header (фиксированный)                                       │
│  - Заголовок документа + метаинфо (тип, размер, дата)       │
│  - Быстрые действия (Открыть, Скачать, Поделиться)          │
│  - Status badge                                              │
├─────────────────────────────────────────────────────────────┤
│ Tabs Navigation (фиксированный)                              │
│  [Обзор] [Активность] [Ознакомления] [Версии]               │
├─────────────────────────────────────────────────────────────┤
│ Tab Content (прокручиваемый)                                 │
│                                                              │
│  Вкладка "Обзор": 2-колоночный layout                        │
│  ┌──────────────────────┬─────────────────────┐             │
│  │ Main Content (66%)   │ Sidebar (33%)       │             │
│  │ • Превью документа   │ • Информация        │             │
│  │ • Описание           │   - Автор           │             │
│  │ • Действия workflow  │   - Даты            │             │
│  │                      │ • Расположение      │             │
│  │                      │ • Теги              │             │
│  │                      │ • Получатели        │             │
│  └──────────────────────┴─────────────────────┘             │
└─────────────────────────────────────────────────────────────┘

Вкладки

1. Обзор (overview)

• Превью документа - центральное место, крупный размер
• Описание - полное текстовое описание
• Workflow Actions - кнопки для изменения статуса
• Sidebar с метаданными:
  • 📊 Информация (автор, даты создания/изменения)
  • 📁 Расположение (breadcrumbs по папкам)
  • 🏷 Теги (цветные badge'ы)
  • 👥 Получатели (отделы и конкретные люди)

2. Активность (activity)

• Timeline с историей изменений
• События workflow (создан → на рассмотрении → одобрен → опубликован)
• Изменения метаданных
• Интеграция с django-reversion (требует API endpoint)

3. Ознакомления (acknowledgements)

• Прогресс: X/Y пользователей (Z%)
• Список кто прочитал с датой/временем
• Список кто ещё не прочитал
• Группировка по отделам
• Использует существующий DocumentAcknowledgement компонент

4. Версии (versions)

• История версий документа
• Diff между версиями
• Возможность восстановления предыдущей версии
• Интеграция с django-reversion (требует API endpoint)

Ключевые улучшения UX

1. Прогрессивное раскрытие (Progressive Disclosure)

• Основная информация на вкладке "Обзор"
• Дополнительная информация на отдельных вкладках
• Не перегружаем пользователя сразу

2. Визуальная иерархия

• Превью документа - самый заметный элемент
• Статус и действия - в header, всегда видны
• Метаданные в компактном sidebar

3. Быстрые действия

• Header с кнопками: Открыть, Скачать, Поделиться
• Workflow actions в основной области
• Все важное доступно в 1 клик

4. Информативность

• Больше контекста (тип документа, размер, даты)
• Breadcrumbs для понимания местоположения
• Теги для классификации
• Видимость получателей и прогресса ознакомления

5. Масштабируемость

• Модальное окно на весь экран (size="full")
• Табы позволяют добавлять новые секции
• Структура готова к расширению (комментарии, связанные документы)

Интеграция с бэкендом

Уже реализовано ✅

• DocumentReadSerializer с полными метаданными
• FSM workflow transitions (draft → review → approved → published → archived)
• DocumentAcknowledgement для отслеживания ознакомлений
• django-filer для управления файлами
• Типы документов и теги

Требует реализации ⚠️

1. API для истории версий (django-reversion)

# backend/api/v1/documents/views.py
@action(detail=True, methods=['get'])
def versions(self, request, pk=None):
    """Получить историю версий документа"""
    document = self.get_object()
    versions = Version.objects.get_for_object(document)
    # Сериализация versions
    return Response(...)

2. API для timeline активности

@action(detail=True, methods=['get'])
def activity(self, request, pk=None):
    """Получить временную шкалу активности"""
    document = self.get_object()
    # Собрать события:
    # - Изменения workflow status
    # - Изменения metadata
    # - Ознакомления пользователей
    # - История версий
    return Response(...)

3. API для комментариев (будущая фича)

# Модель DocumentComment
class DocumentComment(models.Model):
    document = ForeignKey(Document)
    author = ForeignKey(User)
    text = TextField()
    created_at = DateTimeField(auto_now_add=True)
    parent = ForeignKey('self', null=True)  # для replies

Использование компонента

import { DocumentDetailModal } from "@/components/documents";

function DocumentsPage() {
  const [selectedDoc, setSelectedDoc] = useState<Document | null>(null);

  return (
    <>
      {/* ... карточки документов ... */}
      
      <DocumentDetailModal
        document={selectedDoc}
        isOpen={!!selectedDoc}
        onClose={() => setSelectedDoc(null)}
        onUpdate={() => {
          // Обновить список документов
          loadDocuments();
        }}
        onPreview={(url, name) => {
          // Открыть превью в полном размере
          setPreviewFile({ url, name });
        }}
      />
    </>
  );
}

Преимущества нового решения

Для пользователей

1. Быстрый доступ к документу - превью сразу в модалке
2. Понятный workflow - видно текущий статус и доступные действия
3. Контроль ознакомлений - прогресс и детали
4. История изменений - прозрачность процессов (после реализации API)
5. Компактность - вся информация организована в табы

Для разработки

1. Модульность - легко добавить новые вкладки
2. Переиспользуемость - один компонент вместо нескольких
3. Масштабируемость - готово к будущим фичам
4. Типобезопасность - TypeScript интерфейсы
5. Согласованность - единый стиль с Modal компонентом

Для бизнеса

1. Профессиональный вид - соответствует рыночным стандартам
2. Производительность - быстрый доступ к информации
3. Прозрачность - видна вся история и прогресс
4. Гибкость - легко кастомизировать под нужды
5. Конкурентоспособность - на уровне Confluence/SharePoint

Дорожная карта

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

• Создан компонент DocumentDetailModal
• Вкладка "Обзор" с превью и метаданными
• Вкладка "Ознакомления" с прогрессом
• Интеграция с существующими компонентами

Фаза 2: История и версии ⏳

• API endpoint для получения версий (django-reversion)
• Вкладка "Версии" с diff
• API endpoint для timeline активности
• Вкладка "Активность" с реальными данными

Фаза 3: Комментарии и обсуждения 📋

• Модель DocumentComment
• API для комментариев (CRUD)
• Вкладка "Комментарии"
• Real-time уведомления о новых комментариях

Фаза 4: Расширенные возможности 🚀

• Связанные документы
• @mentions в комментариях
• Прикрепление файлов к комментариям
• Экспорт истории и отчетов
• Поиск по комментариям

Заключение

Новое модальное окно DocumentDetailModal приближает систему EUSRR к уровню профессиональных решений класса enterprise (SharePoint, Confluence). Структура с табами обеспечивает прогрессивное раскрытие информации, а интеграция с django-reversion и FSM workflow создает полноценную систему управления документами с прозрачностью всех процессов.