5.6 KiB
Справочник тарифов КТ
Тип решения
Статический сайт (index.html + style.css + script.js на ванильном JS, Tailwind CDN).
Задача
Создать интерактивный справочник тарифов для сотрудников с возможностью поиска и фильтрации по регионам.
Кто пользуется
Сотрудники Департамента, менеджеры по продажам, консультанты контакт-центра.
Что делает прототип
- Главный экран: Отображает таблицу со всеми тарифами (Название, Скорость, Цена, Регион). Сверху выведены карточки-счётчики: «Всего тарифов» и количество тарифов по каждому региону.
- Поиск и фильтр: Поле ввода для поиска по названию тарифа. Набор кнопок-чипсов (Region Filter) для фильтрации списка по регионам (Алматы, Астана, Шымкент, Регионы).
- Управление данными: Кнопка «Добавить тариф» открывает модальное окно формы (поля: название, скорость, цена, регион). Эта же форма используется для редактирования при клике на строку таблицы.
- Действия в строке: Кнопка «Удалить» в каждой строке вызывает подтверждение («Вы уверены?»), после чего удаляет запись и пишет событие в журнал изменений (внизу страницы: дата, действие, кто удалил).
- Экспорт: Кнопка «Выгрузить в Excel» генерирует и скачивает CSV-файл с текущим отфильтрованным списком.
- Сохранение: Все добавленные/измененные данные сохраняются в LocalStorage браузера и не пропадают после обновления страницы.
- Формат: Даты в журнале и интерфейсе в формате ДД.ММ.ГГГГ.
Демо-данные
15 записей. Реалистичные названия (Tariff Home, Fiber Optic, Mobile Pro), скорости (100 Мбит/с, 1 Гбит/с), цены в тенге (от 3000 до 15000), регионы (Алматы, Астана, Караганда, Актобе).
Допущения
- Владелец не указал конкретные поля для редактирования, добавлены стандартные поля из заявки.
- Владелец не указал роли, функционал доступен всем без разграничения прав.
Чего пока нет
- Авторизации и личного кабинета.
- Интеграции с 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/ закоммить вместе с проектом — иначе опубликованная страница останется без стилей.