6.1 KiB
Журнал выдачи пропусков
Тип решения
Статический веб-сайт (index.html + style.css + script.js) с хранением состояния в браузере.
Задача
Создать инструмент для ведения журнала выдачи и возврата пропусков сотрудниками.
Кто пользуется
Сотрудники, ответственные за учет пропусков (вахта, АХО, отдел кадров).
Что делает прототип
- Главный экран: Отображает таблицу всех записей (Сотрудник, Номер пропуска, Дата выдачи, Дата возврата, Статус). Сверху — счетчики (Всего, На руках, Возвращено) и строка поиска по ФИО или номеру.
- Фильтрация: Кнопки-чипсы для быстрой фильтрации таблицы по статусам («На руках», «Возвращен», «Просрочен»).
- Добавление/Редактирование: Модальное окно с формой. Поля: ФИО сотрудника, Номер пропуска, Дата выдачи (календарь), Дата возврата (календарь, опционально), Выпадающий список статусов. Кнопки «Сохранить» и «Отмена».
- Управление записью: В таблице для каждой строки кнопки «Редактировать» и «Удалить».
- Удаление: При нажатии «Удалить» появляется системное подтверждение. После подтверждения запись удаляется, а факт удаления фиксируется в журнале изменений (внутри приложения).
- Экспорт: Кнопка «Выгрузить в Excel» скачивает текущий вид таблицы в формате CSV.
- Сохранение данных: Все изменения сохраняются в LocalStorage браузера, данные не пропадают после обновления страницы.
- Журнал изменений: Отдельная вкладка или блок, отображающий историю действий (кто, когда и какую запись изменил/удалил).
Демо-данные
5 записей с реалистичными казахстанскими именами (например, Асетов А., Иванова М.) и номерами пропусков (формат КТ-XXXXX). Статусы распределены: 3 «На руках», 1 «Возвращен», 1 «Просрочен». Даты в формате ДД.ММ.ГГГГ за текущий месяц.
Допущения
- Доступ к журналу имеет любой, у кого есть ссылка (нет авторизации).
- Дата возврата может быть пустой, если пропуск еще не возвращен.
- Статус «Просрочен» выставляется вручную владельцем процесса или автоматически, если дата возврата прошла (реализуется как допущение логики).
Чего пока нет
- Интеграции с 1С или кадровой системой (ввод ФИО вручную).
- Общего сервера для одновременной работы нескольких людей с разных компьютеров.
- Отправки уведомлений в Telegram.
Дизайн — дизайн-система 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/ закоммить вместе с проектом — иначе опубликованная страница останется без стилей.