Генератор акта выполненных работ: бланк больше не ищем в интернете

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

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

Потом сам спроектируй сущности: шаблон (название, состав полей, подписи), реквизиты (мои данные, банк, ИНН/ОГРН, подписант), контрагент (название, реквизиты, контакт, история), документ (тип, номер, дата, период, контрагент, строки работ, итог, статус), поле (название, тип, обязательность, значение по умолчанию). Связи — по стабильным ID. Контрагента и его реквизиты можно создать прямо из формы акта, не уходя в другой раздел.

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

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

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

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

Перед выдачей сам пройди сценарии: создание акта из шаблона, редактирование строк, смену статуса, нумерацию, предпросмотр, печать, сохранение PDF, перезагрузку страницы, работу с телефона. Исправь найденное сам. Ответ — полный готовый HTML-файл, без фрагментов «вставьте сюда».