ЭКРАНЫ СТРОИТЕЛЬСТВА

• показывает ход времени
• позволяет “прокрутить стройку”

Пример:

2025 ───────── 2026 ───────── 2027

        ▲ (текущий момент)

Поведение интерфейса

Клик по объекту

Показывает:

• паспорт
• участников
• статус
• риски

Это делает интерфейс “умным” без текста:

• 🟢 всё нормально
• 🟡 риск
• 🔴 проблема
• 🔵 данные / нейтраль
• 🟣 финансы

Минимальный сценарий пользователя. Представьте чиновника или инвестора:

• Открывает систему
• Видит объект
• Видит:
• подрядчика
• банк
• риски
• Замечает 🔴
• Кликает
• Видит проблему
• Принимает решение

👉 Всё за 10–20 секунд

MVP-версия экрана (реально достижимая)

Должно быть:

✔ граф (узлы + связи)

✔ карточка объекта

✔ список участников

✔ базовый статус

✔ 1–2 риска

Не нужно сразу:

❌ BIM

❌ сложная аналитика

❌ сложные фильтры

❌ перегруженные панели

Как это реализовать (прямо по стеку)

Frontend:

• React + Next.js
• Cytoscape.js (граф)
• React Query
• Tailwind

Компоненты:

GraphCanvas

• отрисовка узлов
• зум
• drag

NodeCard

• всплывающая карточка

SidePanel

• данные объекта

Timeline

• временная шкала

JSON для графа (под UI)

Вот формат, который должен приходить с backend:

{

  "nodes": [

    { "id": "p1", "type": "project", "label": "ЖК Север", "status": "risk" },

    { "id": "c1", "type": "company", "label": "Заказчик", "status": "active" },

    { "id": "c2", "type": "company", "label": "Генподрядчик", "status": "active" },

    { "id": "r1", "type": "risk", "label": "Срыв сроков", "status": "high" }

  ],

  "edges": [

    { "source": "c1", "target": "p1", "type": "customer" },

    { "source": "c2", "target": "p1", "type": "contractor" },

    { "source": "p1", "target": "r1", "type": "risk" }

  ]

Главный смысл экрана. Если сформулировать жёстко:

👉 Это не интерфейс

👉 Это визуализация строительной реальности

Что ты получаешь. С этим экраном ты можешь:

• показать инвестору продукт
• показать государству систему
• дать разработчикам задачу
• запустить MVP

Общая структура layout

📐 Сетка экрана

┌───────────────────────────────────────────────┐

│ TOP BAR                                      │

├──────────────┬───────────────────────┬────────┤

│ LEFT MENU    │   GRAPH CANVAS        │ RIGHT  │

│              │                       │ PANEL  │

│              │                       │        │

├──────────────┴───────────────────────┴────────┤

│ TIMELINE                                      │

└───────────────────────────────────────────────┘

TOP BAR (верхняя панель)

Состав:

🔍 Поиск

• placeholder: “Поиск объектов, компаний…”
• debounce: 300ms
• результаты:
• проекты
• компании

🎛 Фильтры

• регион (dropdown)
• статус (multi-select)
• стадия (multi-select)

🔄 Режимы

• toggle:
• Объект
• Регион
• Отрасль

👤 Пользователь

• аватар
• меню:
  
• профиль
• выход

LEFT MENU (навигация)

Ширина:

• 72px (collapsed)
• 240px (expanded)

Пункты:

Поведение:

• hover → tooltip
• active → подсветка
• click → смена контекста

GRAPH CANVAS (центр)

Основной компонент: GraphCanvas

Функции: Отрисовка графа

• библиотека: Cytoscape.js
• layout: force-directed

Узлы

Типы узлов:

• название
• статус (цвет)
• стадия
• бюджет
• сроки

👥 Участники

• список компаний
• роль
• статус

⚠️ Риски

• список рисков
• severity
• статус

📄 Контракты

• номер
• сумма
• статус

🎯 Действия

• “назначить задачу”
• “обновить статус”
• “добавить риск”

Компания выбрана

• название
• тип
• рейтинг
• проекты
• загрузка

Риск выбран

• описание
• уровень
• дата
• ответственный
• кнопка “закрыть”

TIMELINE (нижняя панель)

Компонент: Timeline

Визуал:

• drag → перемещение по времени
• click → переход к дате
• режим:
• фактическое состояние
• прогноз

СОСТОЯНИЯ СИСТЕМЫ

Loading

• skeleton UI
• spinner в центре

Empty

• “Нет данных”
• кнопка “создать объект”

Error

• сообщение
• retry

Partial Data

• часть узлов
• предупреждение

UX-ПРАВИЛА (очень важно)

Никаких перегруженных форм

→ только действия через контекст

Всё через клик

→ нет сложной навигации

Цвет = смысл

→ пользователь читает экран без текста

80% — визуально

→ 20% — текст

DESIGN TOKENS

Цвета:

• Primary: #2563EB
• Success: #16A34A
• Warning: #F59E0B
• Danger: #DC2626
• Neutral: #64748B

Фон:

• Dark mode:
• bg: #0F172A
• panel: #1E293B

Типографика:

• заголовок: 16–20px
• текст: 14px
• подписи: 12px

COMPONENT TREE

App

 ├── TopBar

 ├── Sidebar

 ├── GraphCanvas

 │    ├── Node

 │    ├── Edge

 │    └── Tooltip

 ├── EntityPanel

 └── Timeline

КРИТИЧЕСКИЕ КОМПОНЕНТЫ

Если делать MVP — сосредоточься на:

• GraphCanvas
• EntityPanel
• API graph

Следующий шаг. Теперь есть два мощных направления:

Делаем Figma-структуру уровня продукта, а не просто “красивые экраны”. Это будет система файлов, страниц, компонентов и состояний, которую можно сразу отдавать дизайнеру и начинать работу.

🎯 FIGMA STRUCTURE

Кристалл Строительства (MVP)

📁 Структура файла Figma

Название файла: Crystal Construction — MVP UI Kit & App

📂 Страницы (Pages)

1. Cover

2. Design System

3. Components

4. Layouts

5. Screens (Core)

6. Screens (States)

7. Flows

8. Dev Handoff

Page 1: Cover

Содержимое:

• название продукта
• логотип (если есть)
• версия (v0.1 MVP)
• дата

👉 Это важно для презентаций

🎨 Page 2: Design System. Основа всего. Без неё дальше будет хаос.

Цвет

🎯 Основные

• Primary — #2563EB
• Success — #16A34A
• Warning — #F59E0B
• Danger — #DC2626

🌑 Фон (Dark UI)

• Background — #0F172A
• Panel — #1E293B
• Border — #334155

Нейтральные

• Text Primary — #E2E8F0
• Text Secondary — #94A3B8

Типографика

Сетка

• 12-column grid
• Margin: 24px
• Gutter: 16px

Spacing

• 4 / 8 / 12 / 16 / 24 / 32

Page 3: Components. Это самое важное. Делай как библиотеку.

Buttons

Варианты:

• Primary
• Secondary
• Danger

Состояния:

• Default
• Hover
• Active
• Disabled

Input

• Default
• Focus
• Error
• Filled

Status Badge

Node (узел графа). Это ключевой компонент.

Варианты:

Project Node

• большой
• синий

Company Node

• средний
• серый

Risk Node

• маленький
• красный

Edge (связь)

• solid
• dashed
• red (risk)
• double (finance)

Panel Card

Используется в правой панели:

• title
• content
• actions

Page 4: Layouts. Собираем скелет экрана.

Layout 1: Main App

TopBar

Sidebar | Graph | RightPanel

Timeline

Layout 2: Full Graph

Без правой панели

Layout 3: List View

Для проектов / компаний

Содержимое:

• Graph
• Right Panel (object)
• Top Bar
• Timeline

👉 Это главный экран продукта

Screen 2: Project Lis

• таблица
• фильтры
• статус

Screen 3: Company List

• список компаний
• рейтинг
• роли

Screen 4: Analytics

• KPI
• графики
• карта рисков

🔄 Page 6: Screens (States). Очень важно. Тут 80% UX.

Для Graph:

State 1 — Default

• выбран объект

State 2 — Node Hover

• подсветка связей

State 3 — Node Selected

• активная панель

Для системы:

Loading

• skeleton
• spinner

Empty

• “Нет данных”
• CTA кнопка

Error

• сообщение
• retry

Для Right Panel:

Object selected

Company selected

Risk selected

🔁 Page 7: Flows. Показываем сценарии.

Flow 1: Просмотр объекта

• Открытие
• Выбор объекта
• Анализ связей
• Просмотр риска

Flow 2: Работа с риском

• Клик на риск
• Открытие панели
• Закрытие риска

Flow 3: Добавление участника

👉 Это нужно разработчикам

🛠 Page 8: Dev Handoff. Для передачи в разработку.

Содержимое:

• размеры компонентов
• spacing
• цвета
• состояния

Обязательно:

• Auto Layout
• Variants
• Naming system

Naming Convention

Очень важно.

Компоненты:

Button/Primary

Button/Secondary

Node/Project

Node/Company

Node/Risk

Panel/Object

Panel/Company

Panel/Risk

Состояния:

Button/Primary/Hover

Node/Project/Active

Panel/Object/Expanded

Что должно быть сделано в первую очередь

День 1–2:

• Design System
• Colors
• Typography

День 3–4:

• Components
• Node
• Panel

День 5–6:

• Main Screen

👉 Через неделю у тебя уже есть продукт

Честный вывод. Это уже не “дизайн”.

👉 Это операционная модель интерфейса отрасли

Следующий шаг 

1. 👉 Начать разработку UI (React)

2. 👉 Собрать презентацию продукта (на основе Figma)