🎯 Изменения:
- Документы загружаются по очереди (один за другим)
- После загрузки каждого документа открывается модалка с крутилкой
- SSE слушает конкретный event_type: {file_type}_processed
- Модалка показывает результат распознавания с извлечёнными данными
- Кнопка 'Продолжить' → переход к следующему документу
- Опциональные документы можно пропустить
- После обработки всех обязательных → 'Далее на Step 3'
📊 UX флоу:
1. Выбор типа события → показываются нужные документы
2. Документ 1: Выбрать файл → Загрузить → Модалка → Результат → Продолжить
3. Документ 2: Выбрать файл → Загрузить → Модалка → Результат → Продолжить
4. Документ 3 (опц): Загрузить ИЛИ Пропустить
5. Все обязательные обработаны → Далее на Step 3
🔑 Каждый документ получает свой уникальный event_type:
- frontend отправляет file_type
- n8n возвращает event_type = {file_type}_processed
- frontend слушает этот конкретный event_type через SSE
Проблема: На Step3 кнопка Назад была только ПОСЛЕ верификации телефона
Решение: Вынес кнопку Назад в начало формы (до блока телефона)
Теперь:
✅ Кнопка '← Назад' видна ВСЕГДА на Step3
✅ Можно вернуться на Step2 в любой момент
✅ Не нужно ждать верификацию телефона
UX улучшение: пользователь не застревает на Step3
Новый UI:
✅ Split-screen layout:
- Слева (60%): форма заявки
- Справа (40%): Debug Console в реальном времени
Компонент DebugPanel.tsx:
✅ Темная тема (VS Code style)
✅ Timeline с событиями
✅ Real-time обновления
✅ Показывает:
- Form Data (JSON в реальном времени)
- Events Log с иконками и цветами
- Детали каждого события
События которые отображаются:
1. policy_check:
- ✅ Полис найден в MySQL БД
- ⚠️ Полис не найден
- Показывает: voucher, found status
2. upload:
- 📤 Загружаю X файлов в S3
- ✅ Загружено в S3: X/Y
- Показывает: file_id, size, S3 URL
3. ocr:
- 🔍 Запущен OCR
- 📄 OCR завершен: XXX символов
- Показывает: текст preview
4. ai_analysis:
- 🤖 AI: policy/garbage, confidence: 95%
- 🗑️ ШЛЯПА DETECTED! (пользователю не говорим)
- Показывает: document_type, is_valid, confidence, extracted_data
5. sms:
- 📱 Отправляю SMS
- ✅ SMS отправлен (DEBUG mode)
- 🔐 Проверяю код
- ✅ Телефон подтвержден
- Показывает: phone, debug_code
UX:
- Sticky panel (прилипает при скролле)
- Monospace шрифт для данных
- Цветовая кодировка статусов
- JSON форматирование
Layout:
- Row + Col от Ant Design
- Responsive: mobile = 1 column, desktop = split
Теперь видно ВСЁ что происходит в реальном времени! 🔍
1. ✅ Placeholder с тире E1000-302538524
- Теперь в placeholder тоже тире
2. ✅ Email перенесен на Step3
- Убран с Step1 (проверка полиса)
- Добавлен на Step3 (вместе с телефоном)
- Теперь телефон + email + выплата на одном шаге
3. ✅ HEIC формат + мультилоад
- Добавлена поддержка .heic, .heif (iPhone формат)
- Убран maxCount - неограниченная загрузка
- Параметр multiple для множественной загрузки
4. ✅ S3 Upload
- Создан s3_service.py для работы с Timeweb S3
- Новый endpoint: POST /api/v1/upload/files
- Поддержка мультизагрузки файлов
- Автоматическая генерация уникальных имен
- Файлы грузятся в S3, не локально
5. ✅ Draft автосохранение
- Создана таблица claims_draft в PostgreSQL
- Новый API: POST /api/v1/draft/save
- GET /api/v1/draft/stats - статистика по шагам
- GET /api/v1/draft/list - список последних драфтов
- Для аналитики: где люди бросают заполнение
6. ✅ Миграция БД
- 002_create_claims_draft.sql применена
- Индексы для быстрого поиска
- JSONB поле для гибкости данных
Backend:
- s3_service.py - сервис для S3
- draft.py - API автосохранения
- upload.py - обновлен endpoint для S3
- main.py - добавлены роуты и подключения
Frontend:
- Step1Policy: убран email, добавлен HEIC
- Step3Payment: добавлен email после телефона
Статус: ✅ Backend подключен к S3, таблица создана, всё работает
Изменения в UX:
- Шаг 1: Проверка полиса (было: телефон + SMS)
- Шаг 2: Детали происшествия (без изменений)
- Шаг 3: Телефон + SMS + Выплата (было: только выплата)
Обновленные компоненты:
- Удален: Step1Phone.tsx
- Создан: Step1Policy.tsx - проверка полиса через API
- Обновлен: Step3Payment.tsx - добавлена SMS верификация
- Обновлен: ClaimForm.tsx - новая структура шагов
Логика: сначала проверяем полис, потом детали, в конце верификация телефона и выплата
- Исправлены TypeScript ошибки в Step3Payment.tsx (типизация, неиспользуемые импорты)
- Добавлены недостающие зависимости: aiomysql, pymysql, python-multipart
- Обновлен requirements.txt с актуальными версиями
- Добавлены новые API endpoints: policy check, file upload
- Добавлен policy_service для работы с MySQL
- Все сервисы успешно запущены и работают
- Обновлен SESSION_LOG с документацией процесса
