CRM для школы танцев: журнал, абонементы и оплаты в одном файле

Ты — senior product designer, UX-архитектор и frontend-разработчик. Помоги человеку без технических знаний собрать CRM для школы танцев: ученики, заявки, абонементы, оплаты, задачи и заметки. Он не должен проектировать базу данных — это твоя работа.

Сначала короткий опрос на понятном языке (8–15 вопросов, с вариантами ответов): какие направления и группы есть в школе (детские, взрослые, начинающие, продвинутые); сколько учеников и тренеров; как приходят новые люди (Instagram, рекомендации, прогулка мимо зала); какие этапы проходит заявка; как продаются абонементы — на 4, 8 или 12 занятий, с заморозкой или без; как ведётся учёт посещений; какие напоминания нужны администратору; нужны ли отчёты по выручке, долгам и загрузке групп. Не спрашивай про фреймворки, БД и архитектуру. После ответов коротко перескажи, что понял, и приступай.

Сам спроектируй сущности и связи по стабильным ID:
— клиент: имя ученика, родитель и контакт, телефон, возраст, направление, уровень, группа, кто привёл, статус, заметки;
— сделка (заявка на обучение): клиент, интересующее направление, источник, статус «новая заявка → обсуждение → оплата → в работе → закрыто», дата пробного занятия, ответственный;
— оплата: клиент, абонемент (число занятий и срок действия), сумма, дата, способ, остаток занятий, долг;
— задача: заголовок, клиент, срок, приоритет, выполнено;
— заметка: текст, клиент, дата.

Экраны: список клиентов с поиском и фильтрами по группам и статусам; карточка клиента с историей посещений, оплат и заметок; доска сделок по статусам; календарь задач на неделю; отчёты (заявки и конверсия в оплату, выручка по направлениям, должники, загрузка групп). Оплату, задачу и заметку можно создать прямо из карточки клиента, не уходя в другой раздел.

Продумай пустые состояния, подтверждение удаления, поведение при удалении связанных записей, закрытие модальных окон по Escape и по клику на фон, понятные ошибки при пустых обязательных полях.

Дизайн выбери сам, но собери цельную систему: аккуратная типографика, спокойные нейтральные цвета, один акцент для главных кнопок, единые бейджи статусов, тонкие линии в таблицах, hover и focus, адаптив от 360 px. Никакого визуального шума и декоративных цифр.

Технически: один HTML-файл, CSS и vanilla JS внутри, localStorage как хранилище, без backend, сборщиков и npm. Раздели слои: storage → сущности → фичи → компоненты → экраны → навигация. После любого изменения данные сохраняются, интерфейс перерисовывается сразу, без перезагрузки.

Добавь реалистичные демо-данные школы танцев (несколько групп, ученики, оплаты, пара долгов) и кнопку «Удалить тестовые данные» с подтверждением и одноразовым действием. Предусмотри битые данные в localStorage, пустые поля и удаление связанных записей.

Перед выдачей сам пройди сценарии: создание клиента, запись на пробное, продажа абонемента, отметка посещения, смена статуса сделки, удаление, перезагрузка страницы, работа с телефона. Найденное исправь сам.

Ответ — полный готовый HTML-файл, без «вставьте этот фрагмент». Все дальнейшие правки — тоже полным файлом.

Моя задача: школа танцев, где администратор ведёт учеников, группы и абонементы в блокноте и переписках.