Fairflow — Функциональные требования к экранам¶
Описание каждого экрана: компоновка, элементы, действия, состояния, доступ. Всего: ~81 экран в 16 файлах.
Статус реализации (фронтенд-прототип)¶
Ключевые архитектурные решения в прототипе¶
| Решение | Статус | Описание |
|---|---|---|
| Ролевая модель ФЛ/ЮЛ | ✅ Реализовано | 4 демо-аккаунта: PO, PA, Employee, ФЛ |
| Пространства (workspaces) | ✅ Реализовано | Личное + N организаций, группировка в селекторе |
| Мульти-организация | ✅ Реализовано | Переключатель организаций, адаптивный UI по роли |
| Биллинг workspace-aware | ✅ Реализовано | Разные тарифы для ФЛ (Free/Pro/Business) и орг. (Starter/Pro/Enterprise) |
| Deal-centric продажи | ✅ Реализовано | Лиды = сделки на ранних стадиях воронки. Фильтр «дней на стадии» |
| Селектор проекта | ✅ Реализовано | Группировка по пространствам, ⚙ настройки проекта, [+] создание |
| Уведомления | ✅ Реализовано | ECME-паттерн: ScrollBar, Avatar-иконки, Badge read/unread |
| Mock API | ✅ Реализовано | Все запросы мокированы через axios-mock-adapter |
Демо-аккаунты (пароль: 123Qwe)¶
| Роль | Пространства | |
|---|---|---|
anna@fairflow.ru |
PO «Альфа Групп» + Employee «Бета ООО» | 5 проектов |
dmitry@fairflow.ru |
ФЛ без организации | 1 проект |
sergey@fairflow.ru |
PA «Альфа Групп» | 2 проекта |
maria@fairflow.ru |
Employee «Альфа Групп» | 2 проекта (viewer/member) |
Навигация¶
Авторизация и аккаунт¶
| Файл | Экраны | Кол-во |
|---|---|---|
| 01-auth-onboarding | Landing, Sign In/Up, 2FA, Invite, Onboarding | 12 |
| 02-global | Home, Projects List, Create Project | 3 |
| 03-account-profile | My Profile, Security, Sessions | 5 |
| 04-account-organization | Org Profile, Departments, Employees, Invitations, Audit | 10 |
| 05-account-billing | Billing, Plans, Payments, Invoices, Payment Methods | 5 |
Проект¶
| Файл | Экраны | Кол-во |
|---|---|---|
| 06-project-settings | Settings, Modules, Policies, Members, Roles, Audit | 7 |
| 07-dashboard-statistics | Dashboard, Statistics | 2 |
Портфель (CRM-модули)¶
| Файл | Экраны | Кол-во |
|---|---|---|
| 08-contacts | Contacts List, Details, Edit | 3 |
| 09-companies | Companies List, Details, Edit | 3 |
| 10-deals | Deals List, Kanban, Details, Pipelines | 6 |
| 11-orders | Продажи: список, канбан, карточка, типы продаж | 7 |
| 12-activities | Activities List, Calendar, Details, Edit | 4 |
| 13-products | Catalog, Details, Edit, Pricing | 4 |
| 14-reports | Reports Summary, Report Builder | 2 |
| 15-documents | Documents List, Details, Templates | 5 |
| 16-automation | Rules List, Create Rule, Edit Rule | 3 |
Общие паттерны¶
Шапка (Header): Логотип | Селектор проекта (с группировкой по пространствам) | Уведомления 🔔 | Аватар (меню с организациями)
Sidebar: Только модули Портфеля. Управление проектом — через ⚙ в селекторе проекта. Динамические пути по :pid.
Drawer: Боковая панель справа для быстрого создания. Один экземпляр, без вложенности. 6-8 полей. Progressive Disclosure для новых связанных сущностей.
Списки: Панель фильтров сверху. Сортировка по клику на заголовок. Пагинация (25/50/100). Чекбоксы для массовых операций (Manager+).
Биллинг: Переключатель контекста (Личная подписка / Организация). Разные тарифные сетки. Employee не видит орг. биллинг.
Сделки (Deal-centric): Лиды, заявки, продажи = сделка на разных стадиях воронки. Фильтр «на стадии более N дней». Колонка «Дней на стадии». Цветовая индикация (зелёный < 3 дн., жёлтый 3-7, красный > 7).
Empty State: Каждый список имеет пустое состояние с описанием и CTA-кнопкой.