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