CRM для грузоперевозок: заявки, водители и оплата рейсов в одной таблице

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

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

Сам спроектируй сущности: заказчик, заявка на перевозку, рейс, водитель, машина, оплата, задача, заметка. Продумай поля: контакт и телефон, маршрут откуда и куда, дата погрузки, вес и объём груза, тип кузова, ставка, предоплата, остаток, оплата водителю, номер машины, статус, дата следующего шага. Свяжи всё по стабильным ID, чтобы заявка, водитель и оплаты были видны в одной карточке.

Статусы рейса: новая заявка → обсуждение → оплата → в работе → закрыто. Сделай понятные переходы, покажи долг по заказчику и по рейсу, не давай потерять оплату при смене статуса.

Экраны: список клиентов с поиском и фильтрами, карточка клиента с историей рейсов и оплат, доска заявок по статусам, календарь задач, простые отчёты. Из карточки клиента можно создать заявку, оплату, задачу и заметку, не уходя в другой раздел. Предусмотри пустые состояния, подтверждения удаления и понятное поведение после каждого действия.

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

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

Добавь реалистичные демо-данные: 8–10 заказчиков, 6–8 рейсов в разных статусах, несколько машин и водителей, оплаты и задачи. Сделай кнопку «Удалить тестовые данные» с подтверждением, одноразово. Учти пустые поля, битые данные в localStorage, удаление связанных записей, закрытие модальных окон по Escape и по клику на фон.

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

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

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