5.8 KiB
Журнал учёта заявок сотрудников
Тип решения
Статический веб-сайт (index.html + style.css + script.js на ванильном JS, Tailwind через CDN).
Задача
Создать прототип журнала учёта заявок для фиксации того, кто подал заявку, что требуется, в какой срок и какой текущий статус. Решение должно работать в браузере без серверной базы данных, сохраняя состояние локально.
Кто пользуется
Сотрудники департамента, подающие заявки, и администраторы, отслеживающие их исполнение.
Что делает прототип
- Отображает единую таблицу со списком всех заявок.
- Показывает сверху строку поиска по тексту заявки и фильтры-чипсы по статусам (например: «Новая», «В работе», «Готово», «Отклонено»).
- Выводит счётчики: общее количество заявок и количество заявок в каждом статусе.
- Предоставляет форму добавления новой заявки (поля: ФИО, Суть заявки, Срок, Статус), которая также используется для редактирования существующей записи.
- Реализует удаление записи с всплывающим окном подтверждения.
- Ведёт журнал изменений (лог): фиксирует время, действие и пользователя при каждом изменении.
- Обеспечивает выгрузку текущего списка заявок в файл Excel (CSV).
- Сохраняет все данные в LocalStorage браузера, чтобы они не пропадали после обновления страницы.
- Отображает даты в формате ДД.ММ.ГГГГ.
Демо-данные
5 записей с реалистичными казахстанскими именами (например, Асет К., Айгуль М.) и типичными запросами («Настройка ПО», «Выдача СИЗ», «Ремонт принтера»). Статусы распределены равномерно. Даты — текущий месяц.
Допущения
- Так как владелец не указал конкретные статусы, используются стандартные для документооборота: «Новая», «В работе», «Выполнено», «Отменено».
- Идентификация пользователя в журнале изменений осуществляется по имени, введённому в форму (или «Администратор» по умолчанию).
- Поскольку интеграции с 1С и почтой пока нет, данные вводятся вручную.
Чего пока нет
- Авторизации и личных кабинетов.
- Общего серверного хранилища (данные видны только в текущем браузере).
- Интеграции с корпоративными системами.
Дизайн — дизайн-система KT AI
Весь интерфейс собирай на дизайн-системе KT AI, которая уже лежит в папке проекта design-system/.
Перед первой строкой вёрстки прочитай design.md и design-system/AGENTS.md и следуй им.
Подключай файлы ДС относительными путями и в этом порядке: ./design-system/kt-ai-fonts.css,
./design-system/kt-ai-tokens.css, ./design-system/kt-ai-components.css, ./design-system/kt-ai-page.css.
Тема по умолчанию — светлая: <html lang="ru" data-theme="light">; не ставь dark и не ставь auto
(auto уходит в тёмную по системной теме). Переключатель темы можно оставить, но открываться страница должна светлой.
Цвета, отступы и размеры — только токенами var(--kt-ai-…), иконки — из design-system/icons/kt-ai-lucide-sprite.svg.
Таблицы, списки, журналы, дашборды и формы собирай из готовых классов ДС (design-system/COMPONENTS.md),
архетип экрана выбирай по design-system/docs/ARCHETYPES.md. Каркас страницы — из design.md, с обычными <link>.
Шаблон design-system/templates/kt-ai-app-shell.html целиком не копируй: его скрипты-загрузчики (data-kt-ai-base-resolver,
data-kt-ai-boot) тянут CSS с корня сайта по абсолютному пути /design-system/…, а сайт публикуется в подпапке — стили не загрузятся.
Подключай только файлы, которые реально лежат в design-system/ (проверь ls design-system): файла kt-ai-components.js там нет.
Свой стиль не выдумывай, Bootstrap/Tailwind/Material/Google Fonts не подключай, сырые hex-цвета не пиши.
Папку design-system/ закоммить вместе с проектом — иначе опубликованная страница останется без стилей.