Course Path Navigator

Карта курса: модули, блокировки, прогресс и навыки, список на узком экране. Pro · Работа и команды › Продажи и процессы

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add course-path-navigator

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { CoursePathNavigator } from 'valyro-ui-pro';

Prop	Type	Default
`modules` *	`CourseModule[]`		Modules with their requirements and progress.
`selected`	`string \| null`		Module shown in the details.
`defaultSelected`	`string \| null`		Initial module when uncontrolled. Default: the one to continue.
`onSelectedChange`	`(id: string \| null) => void`		Called when the learner picks a module.
`onStart`	`(module: CourseModule) => void`		Called by Start / Continue / Review.
`loading`	`boolean`	`false`	Data is loading: skeleton.
`error`	`ReactNode`		Loading failed: shown instead of the path.
`title`	`ReactNode`		Heading. Default: `labels.title`.
`headingLevel`	`2 \| 3 \| 4 \| 5`	`3`	Level of the heading (default 3).
`locale`	`string`		BCP 47 locale for numbers.
`labels`	`Partial<Omit<CoursePathNavigatorLabels, 'statuses'>> & { statuses?: Partial<Record<ModuleStatus, string>> }`		Overrides for the built-in English text; keys left out keep their defaults.

CRM Pipeline — Воронка сделок: этапы, суммы и вероятности, перетаскивание между этапами
Approval Flow — Многоэтапное согласование: последовательные и параллельные этапы, решения с причиной, история
Goal Tracker — OKR: цели и ключевые результаты, статусы, уверенность, чек-ины с историей
Onboarding Checklist — Чек-лист онбординга: прогресс, подсказки с CTA, скрытие и празднование
Calendar View — Календарь событий
Scheduler — Планировщик: день, неделя, месяц и таймлайн ресурсов, drag & drop, повторы
Kanban Board — Доска задач
Gantt Chart — Диаграммы Ганта с зависимостями и перетаскиванием
Booking Slots — Запись на встречу: календарь, слоты в часовом поясе гостя, форма и подтверждение
Team Members — Участники команды: роли, приглашения по email, ожидающие инвайты, счётчик мест
Org Chart — Оргструктура: дерево с зумом и панорамой, поиск, сворачивание веток
Activity Feed — Лента активности