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